sap.f.routing.Router
.You can view and download all files at Flexible Column Layout App - Step 7.
<mvc:View controllerName="sap.ui.demo.fcl.controller.App" displayBlock="true" height="100%" xmlns="sap.f" xmlns:mvc="sap.ui.core.mvc"> <FlexibleColumnLayout id="flexibleColumnLayout" stateChange=".onStateChanged" backgroundDesign="Solid" layout="{/layout}"/> </mvc:View>
We remove the hard-coded beginColumnPages
and endColumnPages
aggregations (since the router will add
them automatically from now on), and we bind the layout
property so that it can be changed easily from the
controller.
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("sap.ui.demo.fcl.controller.App", {
onInit: function () {
this.oOwnerComponent = this.getOwnerComponent();
this.oRouter = this.oOwnerComponent.getRouter();
this.oRouter.attachRouteMatched(this.onRouteMatched, this);
},
onRouteMatched: function (oEvent) {
var sRouteName = oEvent.getParameter("name"),
oArguments = oEvent.getParameter("arguments");
// Save the current route name
this.currentRouteName = sRouteName;
this.currentProduct = oArguments.product;
},
onStateChanged: function (oEvent) {
var bIsNavigationArrow = oEvent.getParameter("isNavigationArrow"),
sLayout = oEvent.getParameter("layout");
// Replace the URL with the new layout if a navigation arrow was used
if (bIsNavigationArrow) {
this.oRouter.navTo(this.currentRouteName, {layout: sLayout, product: this.currentProduct}, true);
}
},
onExit: function () {
this.oRouter.detachRouteMatched(this.onRouteMatched, this);
}
});
});
We access the router and bind to its routeMatched
event. For more information, see Router.
sap.ui.define([ "sap/ui/core/mvc/Controller", "sap/ui/model/Filter", "sap/ui/model/FilterOperator", "sap/ui/model/Sorter", "sap/m/MessageBox", "sap/f/library" ], function (Controller, Filter, FilterOperator, Sorter, MessageBox, fioriLibrary) { "use strict"; return Controller.extend("sap.ui.demo.fcl.controller.List", { onInit: function () { this.oView = this.getView(); this._bDescendingSort = false; this.oProductsTable = this.oView.byId("productsTable"); this.oRouter = this.getOwnerComponent().getRouter(); }, onSearch: function (oEvent) { var oTableSearchState = [], sQuery = oEvent.getParameter("query"); if (sQuery && sQuery.length > 0) { oTableSearchState = [new Filter("Name", FilterOperator.Contains, sQuery)]; } this.oProductsTable.getBinding("items").filter(oTableSearchState, "Application"); }, onAdd: function () { MessageBox.information("This functionality is not ready yet.", {title: "Aw, Snap!"}); }, onSort: function () { this._bDescendingSort = !this._bDescendingSort; var oBinding = this.oProductsTable.getBinding("items"), oSorter = new Sorter("Name", this._bDescendingSort); oBinding.sort(oSorter); }, onListItemPress: function (oEvent) { var productPath = oEvent.getSource().getBindingContext("products").getPath(), product = productPath.split("/").slice(-1).pop(); this.oRouter.navTo("detail", {layout: fioriLibrary.LayoutType.TwoColumnsMidExpanded, product: product}); } }); });
We change the event handler for pressing an item from the list view to use the router instead of manually manipulating the
FlexibleColumnLayout
instance. When we call the router's navTo
method, the router itself will
change the layout
property of the FlexibleColumnLayout
.
sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("sap.ui.demo.fcl.controller.Detail", { onInit: function () { var oOwnerComponent = this.getOwnerComponent(); this.oRouter = oOwnerComponent.getRouter(); this.oModel = oOwnerComponent.getModel(); this.oRouter.getRoute("list").attachPatternMatched(this._onProductMatched, this); this.oRouter.getRoute("detail").attachPatternMatched(this._onProductMatched, this); }, _onProductMatched: function (oEvent) { this._product = oEvent.getParameter("arguments").product || this._product || "0"; this.getView().bindElement({ path: "/ProductCollection/" + this._product, model: "products" }); }, onEditToggleButtonPress: function() { var oObjectPage = this.getView().byId("ObjectPageLayout"), bCurrentShowFooterState = oObjectPage.getShowFooter(); oObjectPage.setShowFooter(!bCurrentShowFooterState); }, onExit: function () { this.oRouter.getRoute("list").detachPatternMatched(this._onProductMatched, this); this.oRouter.getRoute("detail").detachPatternMatched(this._onProductMatched, this); } }); });
We bind the table in the detail view to reflect the currently selected product from the list view.
sap.ui.define([ 'sap/ui/core/UIComponent', 'sap/ui/model/json/JSONModel', 'sap/f/library' ], function(UIComponent, JSONModel, fioriLibrary) { 'use strict'; return UIComponent.extend('sap.ui.demo.fcl.Component', { metadata: { manifest: 'json' }, init: function () { var oModel, oProductsModel, oRouter; UIComponent.prototype.init.apply(this, arguments); oModel = new JSONModel(); this.setModel(oModel); // set products demo model on this sample oProductsModel = new JSONModel(sap.ui.require.toUrl('sap/ui/demo/mock/products.json')); oProductsModel.setSizeLimit(1000); this.setModel(oProductsModel, 'products'); oRouter = this.getRouter(); oRouter.attachBeforeRouteMatched(this._onBeforeRouteMatched, this); oRouter.initialize(); }, _onBeforeRouteMatched: function(oEvent) { var oModel = this.getModel(), sLayout = oEvent.getParameters().arguments.layout; // If there is no layout parameter, set a default layout (normally OneColumn) if (!sLayout) { sLayout = fioriLibrary.LayoutType.OneColumn; } oModel.setProperty("/layout", sLayout); } }); });
We initialize the router and bind to its onBeforeRouteMatched
event, and we introduce a model, which will be used for
the layout.
{
"_version": "1.38.0",
"sap.app": {
"id": "sap.ui.demo.fcl",
"type": "application",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.fcl.view.App",
"type": "XML",
"async": true,
"id": "fcl"
},
"dependencies": {
"minUI5Version": "1.98.0",
"libs": {
"sap.f": {},
"sap.m": {},
"sap.ui.core": {},
"sap.uxap": {}
}
},
"config": {
"fullWidth": true
},
"routing": {
"config": {
"routerClass": "sap.f.routing.Router",
"type": "View",
"viewType": "XML",
"path": "sap.ui.demo.fcl.view",
"controlId": "flexibleColumnLayout",
"transition": "slide",
"bypassed": {
},
"async": true
},
"routes": [
{
"pattern": ":layout:",
"name": "list",
"target": [
"list",
"detail"
]
},
{
"pattern": "detail/{product}/{layout}",
"name": "detail",
"target": [
"list",
"detail"
]
}
],
"targets": {
"list": {
"name": "List",
"controlAggregation": "beginColumnPages"
},
"detail": {
"name": "Detail",
"controlAggregation": "midColumnPages"
}
}
}
}
}
Finally, we add the routing configuration in the manifest.json
.