当前位置:主页 > 游戏服务器 > 国际 >

域名注册_仪征网站建设_是什么

  • 国际
  • 2021-09-08 18:18
  • 动埠云

这篇博文的目的是展示如何使用SAPUI5路由API实现基于Fiori设计准则的分屏布局。源代码的完整工作示例在这里可用

分屏布局是一种主/细节模式,具有以下特点:

用户可以快速扫描左侧的项目,并在右侧看到所选项目的细节。详细信息区域还可能有一个列表,用户可以在其中向下钻取其他详细信息。用户可以导航回上一页。

例如,左侧的订单列表和右侧的订单详细信息。"订单详细信息"区域包含该特定订单的产品列表。用户可以深入了解每个产品的详细信息。在产品详细信息页面,用户可以导航回订单详细信息页面。

在本文中,我们将按照下面的屏幕截图实现此场景。

有关拆分屏幕布局的更多信息,大数据视频,请单击此处

结构:

如您所见,我们有3个视图:

此外,我们将有一个组件控制器(组件.js)包含路由元数据和配置。

有关组件控制器的更多信息,请单击此处

中的路由器配置组件.js:

在组件.js, 我们将定义3条路径:

完整的配置如下:

从主目录向下钻取到详细目录1:

现在我们要从主目录(订单列表)向下钻取到详细目录。在主控视图中,我们必须在主控的控制器中的ListItem

上附加"press"事件,我们将使用路由器的navTo方法。navTo方法需要以下参数:

route name(必选):这是我们要使用的路由的名称。在本例中,大数据 学习,我们希望导航到order details视图(Detail1),因此我们将使用"orderDetails"。参数(可选):这里我们可以将参数传递给下一个视图。在我们的例子中,orderdetails视图需要知道我们按下的项目的orderid。替换(可选):在这里我们可以控制浏览器历史行为。如果为true,则不会将路由添加到浏览器历史记录中,如果为false,则路由将添加到浏览器历史记录中,以便"后退"按钮记住路由。

从Detail1向下钻取到Detail2:

同样,我们将使用"按"事件和navTo方法从订单详细信息视图(Detail1)导航到产品详细信息(Detail2)。然而,这次我们将使用"productDetails"路由,淘客是啥,我们将传递两个参数:orderId和productId:

从Detail1(order detail)导航回Master:

根据Fiori设计指南中的分屏布局,政务大数据,Master list和details在手机的窄屏上被分为两个独立的页面。因此,我们的目标是只在手机上显示后退按钮。要实现这一点,首先我们需要一种方法来识别用户的设备。我们可以使用设备API检查用户的设备,其中sap.ui.Device设备类提供所需的信息。

页面组件具有showNavButton属性,该属性需要布尔值。因此,这里我们将它绑定到/system/phone

在事件处理程序方法中,我们将使用History API使用浏览器历史并导航回

从Detail2(产品细节)导航回Detail1(订单细节):

这应该是直接的。我们将使用与上一步相同的技术。但是这次showNavButton总是正确的,因为设备并不重要。

另外,我们将使用History API来处理onNavBack press事件:

处理浏览器窗口的标题:

到目前为止,我们实现了向下钻取和向后导航场景,因此用户可以在应用程序中导航到不同的视图。但是当您查看浏览器历史记录时,窗口标题保持不变,这让用户感到困惑。这里的目标是根据我们访问的视图更改浏览器标题。

从版本1.42开始,电商平台数据分析,路由API提供了在其配置中声明定义标题的可能性。为了实现这一点,我们需要定义title并将其绑定到orderName属性,如下所示:

为了在title更改后得到通知,您可以注册到路由器实例上的"titleChanged"事件。一旦显示设置了标题选项的目标或更改了显示目标的标题,就会触发"titleChanged"事件。

猜你喜欢

微信公众号