关于Fiori的基础知识（三）

最新推荐文章于 2025-06-24 18:36:05 发布

Joseph.F

最新推荐文章于 2025-06-24 18:36:05 发布

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_41092285/article/details/84874961

本文介绍如何使用sap.tnt库的ToolHeader创建网页顶部菜单栏，讲解了ToolHeader的特性，包括OverflowToolbar的行为和优先级设置。通过在view.xml中布局并引入所需库，展示了创建透明Button和使用ToolbarSpacer的方法。此外，还详细说明了如何通过Popover和Button实现帮助按钮的弹出窗口，并调整了弹出窗口的显示设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这一章我们继续学习Fiori的基础知识，根据官网给定的API，我们来实现一个网页常用的顶部菜单栏。我们需要使用sap.tnt库下的ToolHeader这一API。先来了解下ToolHeader，ToolHeader控件是一个水平容器，最常用来显示按钮、标签和其他各种输入控件。工具头控件基于sap.m.OverflowToolbar。它包含结构清晰的命令菜单，这些命令在同一工具布局中的不同应用程序中都可以使用。我们可以为OverflowToolbar内的每个控件设置不同的行为和优先级，当容器的可见区域中可用空间不足时，OverflowToolbar的内容从右向左移动到溢出区域。用户可以通过在弹出窗口中打开它的overflow按钮访问它。OverflowToolbarLayoutData中的priority属性定义OverflowToolbar项的优先级，可用的优先级NeverOverflow, High, Low, Disappear 和 AlwaysOverflow。

下面新建项目ToolHeader，在view.xml中做页面的布局。在mvc中引入需要的全部库，这里面我们只手动引入了sap.tnt。

<mvc:View controllerName="Fzx.ToolHeader.controller.App" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:tnt="sap.tnt" height="100%">

接下来借助sap.tnt库中的ToolHeader建立水平容器，放置Button按钮，使用<layoutData>对齐每个Button按钮的UI元素。这里给Button设置属性type="Transparet"使按钮样式为透明。