ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

SAP UI5 应用的主-从-从(Master-Detail-Detail)布局模式的实现步骤

2022-05-24 09:00:10  阅读:176  来源: 互联网

标签:控件 Detail 标题 区域 UI5 Master sap 详细信息 页面


所谓 SAP UI5 应用的主-从-从布局模式,意思是屏幕水平方向分为左,中,右三部分。

每个部分分别显示 Master,Detail 第一层和 Detail 第二层数据。

下面这个 gif 是具备这种布局方式的一个具体例子:

该应用程序提供以下功能:

  • 基于 sap.f.FlexibleColumnLayout 控件的最多三列布局。此布局具有预定义的布局类型和它们之间的定义路由,可以在应用程序的主从模式之间平滑导航。

  • 基于 sap.f.DynamicPage 控件的 Master 页面,其中列出了可用产品并具有过滤和排序选项。

  • 基于 sap.uxap.ObjectPageLayout 控件的详细信息页面,其中包含有关母版页中所选对象的详细信息,它实现了 ObjectPageLayout 控件的动态标题。

  • sap.f.Avatar 控件用于标题区域以显示所选产品的图像。

  • 通过向下滚动页面内容或单击/点击标题区域,可以折叠标题标题区域(捕捉到标题)。标题区域也可以固定,以便在用户向下滚动页面内容时保持可见。

  • 标题区域右侧有一组动作。标题区域可以在标题被捕捉时显示特定内容。

  • 浮动页脚位于页面底部,位于页面内容的顶部。它在右侧保存最终操作。

  • 基于 sap.f.DynamicPage 的详细信息页面,用于显示详细信息页面中所选对象的更多详细信息。

  • 一个基于 sap.f.DynamicPage 的简单关于页面,用于从详细信息页面显示所选对象的更多详细信息,即 Detail 第二层数据。

所谓 Dynamic Page,就是一种布局控件(Layout control),可以用来实现一个最终用户看到的网页,由标题、具有动态行为的抬头区域、内容区域和可选的浮动页脚区域组成。

  • DynamicPageTitle - 由左侧的标题、中间的内容和右侧的操作组成。 显示的内容会根据 DynamicPageHeader 的当前模式而变化。

  • DynamicPageHeader - 一个通用容器,可以包含单个布局控件并且不关心内容对齐和响应性。 抬头区域在展开(expanded)和收起两种模式下工作,并且可以借助不同的属性调整其行为。

  • 内容区域 - 一个通用容器,可以有单个 UI5 布局控件,不关心内容对齐和响应性。

  • 页脚 - 位于底部,有一个小的偏移量,用于附加操作,页脚浮动在内容上方。 它可以是任何 sap.m.IBar 控件。

具体实现步骤如下

标签:控件,Detail,标题,区域,UI5,Master,sap,详细信息,页面
来源: https://www.cnblogs.com/sap-jerry/p/16304215.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有