从SAPèU UI 7.54(1909)开始,WDA支持触摸。
您现在可以优化旧的应用程序,或构建新的应用程序,在触摸设备上提供更好的用户体验。
在本博客中,好淘客,大数据收集,我将分享一些关于如何改进现有应用程序的想法。作为一个例子,我将使用一个webdynpro应用程序,这个应用程序最初是用SAP\u BASIS 7.02交付的,现在已经有10年的历史了!
触摸支持仅适用于主题SAP Belize(技术名称SAP\伯利兹)和SAP Quartz(技术名称SAP\ FIORI\ 3)。
两个主题在触摸设备和桌面上使用相同的控制大小–唯一的区别是表格中的行高更大。
没有其他前提条件。应用程序将在支持的触摸设备上以触摸模式自动显示,与嵌入环境无关(SAP Fiori Launchpad、direct call等)。
在触摸模式下,为用户提供触摸手势,并以触摸友好的设计呈现控件;例如,调整大小手柄更大,更容易抓取。
您可以在SAP Note 2700517中找到更多详细信息。
要使屏幕设备依赖于您的代码,您需要首先找出应用程序运行的位置。
为此,我们添加了一些实用方法。我们扩展了客户机信息以显示应用程序正在哪个设备上运行。接口如果客户端信息现在提供以下方法:
方法获取设备类型返回桌面/平板电脑/手机/组合方法GET\u INTERACTION\u TYPE返回TOUCH/KEYBOARD
通过CL\u WD\u CLIENT\u INFORMATION=>GET\u CLIENT\u INFORMATION()提供界面
INTERACTION TYPE TOUCH为用户提供可触摸的UR控件,如特殊上下文菜单或更大的拆分器句柄,等
调用组件(或其他任何地方)的WDDOINIT中的方法:
我们的示例是演示应用程序的\u epm \u wd \u po \u list,它使用了采购订单的演示数据模型。
我们将集中在三个屏幕上:
因为它看起来非常老式,字体大小很小,对比度很强,让我们首先切换到我们的菲奥里主题萨普伯利兹。现在看看桌面上的三个屏幕是什么样子:
优化宽表
如果我们在平板电脑上调用应用程序,初始屏幕是这样的:
会显示一个水平滚动条(表不会根据浏览器大小调整大小),这意味着你必须滚动才能看到消息区域。这是你一定要避免的。
使用桌面,用户可以增加浏览器的大小,但在移动设备上没有这样的选择。
你可以做两件事来克服这个问题:
1。
自定义表格和激活水平滚动。但此设置也在桌面浏览器上选择。
2.
更改组件中的表格设置,使其取决于设备类型或交互类型。
在表格视图的WDDOMODIFYVIEW中,添加:
这将导致平板电脑上出现以下屏幕。请注意,信息区域可以立即看到,右边的按钮可以直接使用。
在手机上,它看起来像这样:
优化组布局
我们在平板电脑上的第二个屏幕看起来像这样:
视图使用两列布局和矩阵布局。由于标签包装已打开,所有文本都完全可见。关于几个集装箱的整体对齐,云免服务器购买,只有一个小缺点。"常规数据"和"业务伙伴"组的值不再对齐。
手机上的同一屏幕显示水平滚动条,因为组容器没有包装:
为了克服这一点,我们有两个选项:
现在我们看到手机上有一列,平板电脑上有两列:
优化表布局
第三个屏幕在表格中显示一个大图像。在平板电脑上看起来是这样的:
在这种情况下,图像放大了行高,其他列变得非常窄。
我们可以更改表格设置以查看水平滚动条(如第一个屏幕)。
为了避免巨大的行高,我们可以将图像的大小调整为8em。这在桌面上也会更好看。您可以使用以下代码来实现这一点:
可用空间仍然没有以最佳方式使用–表行中有大量未使用的空间。
我们可以通过使用增加行高的cTable和允许您在一列中显示多个UI元素的多单元格编辑器来进一步改进这一点。
使用多单元格编辑器编辑器在cTable中您需要插入cTableMultiCellEditor类型的单元格变体,并添加不同的单元格编辑器和分隔符来换行。
这看起来更好,我们甚至去掉了表中的水平滚动条;用户可以立即看到整行。
对于手机,美国高防云服务器,我们可以通过减少列并将信息添加到多编辑器列中来进一步改进这一点:
使用此代码,手机上的表格看起来是这样的:
使用新的触控主题,Web Dynpro应用程序将在触控设备上自动运行,而无需进一步更改编码;每个控件都针对触摸手势进行了优化。
但是,企业管理平台软件,对于专为大屏幕设计的应用程序,您可以提供更好的用户体验,只需稍作编码更改。
在改进触摸设备的Web Dynpro应用程序时,记住三件事:
根据设备类型使用响应式布局,如平铺布局或重新排列容器
在表格中使用标签包装和水平滚动条
使用多单元格编辑器查看整行,而无需滑动。尽可能调整大控件的大小,如图片。
只需一点点努力,不仅可以提高触摸设备的可用性,甚至可以使应用程序在桌面上看起来更好!