大家早上好，在上一篇博文中，我向大家介绍了灵活列布局和动态页面布局的基本知识，怎么成为淘客，这是一种UI/UX模式，它将取代自SAPUI5 1.48版以来一直被弃用的旧SlitApp布局。
在这篇博文中，我将解释如何轻松地从SplitApp应用程序迁移一个灵活的列布局应用程序在几分钟内。
开始的代码库是从我们以前的SAPUI5积垢项目应用程序。在这里，我们将遵循一步一步的迁移过程，解释一些基本概念。
让我们看看当前应用程序的UI/UX，以便在转换结束时进行比较
这里没有什么新东西，这是一个带有CRUD操作的基本拆分应用程序布局，所以让我们继续。
所以第一步是从GitHub上的最新标签版本克隆应用程序。您可以自由克隆并导入到您的WebIDE工作区App.view.xml文件
我们要做的第一件事是在我们的系统中用新的FlexibleColumnLayout替换旧的SplitAppApp.xml.view文件（加载应用程序时加载的主视图）。
这是我们的新代码App.view.xml文件
你必须注意一些重要的事情：
我添加了一个新的XML名称空间sap.f，因为我们的FlexibleColumnLayout包含在SAPUI5的sapfiori库中我们删除了SplitApp，并在应用程序中添加了FCLOut FLC将layout属性绑定到app>/layout。我们稍后将在代码中使用此绑定来处理第二列和第三列的全屏可视化
索引.html
正如您在下面的代码中看到的，我们从Shell移动到了ComponentContainer。这是从我们的布局中删除字母框的第一步。
字母框
在我们的情况下，我们需要删除字母框，因为我们将需要最大可能的可用屏幕区域，轻云，以便一次正确显示三列！
清单.json
在我们的清单中，我们需要做四个重要的修改
添加配置以使应用程序能够使用全屏宽度（这是删除字母框的第二部分）将sap.f添加到应用程序加载的依赖项列表中替换sap.m中的router类。路由.路由器至sap.f。路由.路由器为了使用新的路由功能更新路由和目标以利用新路由器类添加的新属性和灵活列布局使用的新属性
请注意，多多淘客，这只是清单.json内容，我只添加了我们将为路由更改的块
如您所见，在每个路由元素中，我们有一个名为"layout"的新属性。
目前有九种不同的布局可用，每种布局都将更改灵活列布局的默认可视化效果。在我们的例子中，我们将使用：
一列，当我们在主页上，我们只需要显示业务伙伴的列表TwoColumnsMidExpanded，将显示两列，中间一列（右侧）展开。当用户单击列表上的业务伙伴时，我们使用此布局来显示典型的主详细视图类型。ThreeColumnsEndExpanded，将显示三列，其中最新一列已展开。我们使用此布局还显示有关业务伙伴订单列表的信息。
每个路由的目标都有一个名为"controlAggregation"的不同属性，该属性将指定在哪个FlexibleColumnLayout的聚合中添加该目标。
在我们的场景中：
BusinessPartnerList视图将添加到beginColumnPages聚合（第一列）BusinessPartnerDetail视图将添加到midColumnPages聚合（第二列）BusinessPartnerSalesOrderDetail视图将添加到endColumnPages聚合（第三列也是最后一列）
为什么正确配置manifest.json？通过几行代码，我们已经自动配置了应用程序的整个UI/UX行为。不是很好吗？
在最后一部分，精准大数据，我们将解释如何允许用户将FlexibleColumnLayout的一页扩展到全屏。这项功能非常重要，因为它允许用户利用全屏幕宽度，当你必须处理一个有许多列的表中的大量信息时，这一点是至关重要的usinessPartnerDetail.view.xml文件以及BusinessPartnerList.view.xml文件添加三个按钮来处理这些功能：
扩展到全屏当前页面退出全屏关闭当前页面（如导航返回单击）
这些按钮仅在应用程序未在移动设备上运行时才会显示（在智能手机上，页面布局已完全展开）。
在控制器侧，如果您还记得我们已经将FlexibleColumnLayout的属性绑定到App.view.xml文件对于app>/layout的值
要展开全屏页面，数据无价，我们要将该值更改为MidColumnFullScreen（此代码来自middle page Controller）并返回TwoColumnsMidExpanded或当用户退出全屏时，ThreeColumnsEndExpanded（这取决于我们是否也在显示第三列）。
关闭按钮由onCloseDetailPress按钮处理，它将简单地将我们的应用程序转换到主页。
如果需要，你可以克隆这个项目并自己尝试。在我的GitHub帐户上查看它。
完成所有这些步骤后，这将是最终结果。你看到这段视频和博客开头第一段视频的区别了吗？
