各位同事好，

在本博客中，我将按照Fiori 2.0的指导方针解释SAP Fiori 2.0应用程序，以及灵活的列布局。

在介绍编码之前，让我带您了解Fiori 2.0的最新指导方针。

我们知道，Fiori的指导方针是：基于角色、自适应、连贯，简单且令人愉快。

但当谈到SAP Fiori 2.0时，它是SAP S/4HANA用户体验的最新发展。

该设计允许用户专注于核心任务，同时仍然跟踪其他领域的活动。SAP fiori elements（以前称为智能模板）和SAP fiori launchpad具有全新的视觉设计。

有许多不同类别的fiori设计指南，如：UI元素、布局、楼层平面和框架。

在类别layouts和楼层平面和框架下，我们将深入探讨灵活列布局和动态页面的概念。

对于我们的Fiori 2.0应用程序，在继续之前，我们需要了解这两个指导原则。

灵活列布局

灵活列布局是一个在单个页面上显示多个视图的布局控件。如下图1所示

这些列被称为beginColumnPages midColumnPages和endColumnPages。

这是一个非常有创意的方法，允许在多个楼层平面之间进行比通常逐页更快更流畅的导航导航灵活的列布局提供了最多三列的不同布局。用户可以扩展他们想要关注的栏目，在不同的版面之间切换，并以全屏模式查看所需的列。

三列的相对大小和可见性是根据sap.f.LayoutType属性的值确定的

考虑一个场景，其中用户希望查看销售订单列表和相应的销售订单项。

此场景以前的常用方法是使用父节点包含"销售订单"，子节点包含"销售订单项目"的树表。但是如果我们需要使用一个树表，我们需要保持数据模型非常特定于这个树表，即在odata中创建一个视图，并添加诸如HierarchyLevel、Drill State等字段，而且对于一个简单的场景来说，这可能更为复杂。即使使用工作列表视图和对象页面，也可以处理此场景，但是销售订单和销售订单项目的页面/视图不能在一个框架中显示，而是将导航到不同的框架。

借助灵活的列布局，这类场景可以很容易地处理，而且灵活的列布局表现出响应性，这使得它既适用于桌面设备，也适用于移动设备。根据可用的屏幕宽度，将加载优化的布局，以确保在每个设备上获得最佳的用户体验。使用此布局，我们可以创建一个主细节和细节场景（主细节中的SalesOrder和细节中的SalesorderItem），在该场景中，用户可以向下钻取或导航。

注意：如果您计划创建一个工作台或仪表板或打开同一对象类型的多个实例，则不建议遵循Flexible列布局

因此我们只需使用这些布局箭头即可展开或折叠楼层平面或视图。根据不同的屏幕分辨率，如平板电脑、台式机和移动设备，淘客推广渠道，导航窗格将响应。

动态页面

动态页面是一种设计用于支持列表报告、概览页面、向导、，工作列表等

简单来说：动态页面是sap.m.page的高级版本，带有页眉标题和页眉内容、可选页脚工具栏以及具有内置响应行为的页面内容。

动态页面还将具有全屏导航操作按钮，退出全屏并关闭页面。

动态页面的框架如下：

注意：按照指南，动态标题中不包含后退导航按钮，比购返利，用户必须使用动态页面将应用程序注册到启动板，以便shell容器在默认情况下具有后退按钮。

因此，现在结合这两种布局，并遵循新的指导原则，我们可以制作一个Master Detail-DetailDetailDetail应用程序，并使用它看起来是这样的：

上面的屏幕将母版页中的产品显示为一个列表（响应表），然后单击该列表，它将打开包含标题和供应商列表的动态页面的详细信息，并且可以在详细信息页面中查看供应商信息。

这种设计的最大优点是，可以复制URL，直到供应商详细信息，然后运行另一个会话。通过路线导航不会丢失任何细节或细节的绑定。

这个概念对许多用例都非常有用。最吸引人的部分是页面导航，它在许多设备和景观上都非常平滑。

现在我假设你已经知道了什么是灵活的列布局和布局动态页面

好吧，创建这个应用程序非常简单。我们可以直接下载demokit链接中提供的示例应用程序，并将其导入到您最新的webide

导入选择文件–>导入->文件或项目->从下载文件夹中选择文件，并在导入此示例应用程序后按OK。

一次。我们需要了解这个应用程序中处理的逻辑，这是非常重要的。我将详细解释这些。在我解释逻辑之前，必须了解其他UI5概念，如数据绑定和路由。