This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <mvc:View | |
| xmlns:mvc="sap.ui.core.mvc" | |
| displayBlock="true" | |
| xmlns="sap.m"> | |
| <SplitApp id="idAppControl" /> | |
| </mvc:View> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery.sap.declare("ksl.md1.Component"); | |
| jQuery.sap.require("ksl.md1.MyRouter"); | |
| sap.ui.core.UIComponent.extend("ksl.md1.Component", { | |
| metadata : { | |
| name : "TDG Demo App", | |
| version : "1.0", | |
| includes : [], | |
| dependencies : { | |
| libs : ["sap.m", "sap.ui.layout"], | |
| components : [] | |
| }, | |
| rootView : "ksl.md1.view.App", | |
| config : { | |
| resourceBundle : "i18n/messageBundle.properties", | |
| serviceConfig : { | |
| name : "Northwind", | |
| serviceUrl : "http://services.odata.org/V2/(S(sapuidemotdg))/OData/OData.svc/" | |
| } | |
| }, | |
| routing : { | |
| config : { | |
| routerClass : ksl.md1.MyRouter, | |
| viewType : "XML", | |
| viewPath : "ksl.md1.view", | |
| targetAggregation : "detailPages", | |
| clearTarget : false | |
| }, | |
| routes : [ | |
| { | |
| pattern : "", | |
| name : "main", | |
| view : "Master", | |
| targetAggregation : "masterPages", | |
| targetControl : "idAppControll", | |
| subroutes : [ | |
| { | |
| pattern : "{product}/:tab:", | |
| name : "product", | |
| view : "Detail" | |
| } | |
| ] | |
| }, | |
| { | |
| name : "catchallMaster", | |
| view : "Master", | |
| targetAggregation : "masterPages", | |
| targetControl : "idAppControl", | |
| subroutes : [ | |
| { | |
| pattern : ":all*:", | |
| name : "catchallDetail", | |
| view : "NotFound" | |
| } | |
| ] | |
| } | |
| ] | |
| } | |
| }, | |
| init : function() { | |
| sap.ui.core.UIComponent.prototype.init.apply(this, arguments); | |
| var mConfig = this.getMetadata().getConfig(); | |
| // always use absolute paths relative to our own component | |
| // (relative paths will fail if running in the Fiori Launchpad) | |
| var rootPath = jQuery.sap.getModulePath("ksl.md1"); | |
| // set i18n model | |
| var i18nModel = new sap.ui.model.resource.ResourceModel({ | |
| bundleUrl : [rootPath, mConfig.resourceBundle].join("/") | |
| }); | |
| this.setModel(i18nModel, "i18n"); | |
| // Create and set domain model to the component | |
| var sServiceUrl = mConfig.serviceConfig.serviceUrl; | |
| var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true); | |
| this.setModel(oModel); | |
| // set device model | |
| var deviceModel = new sap.ui.model.json.JSONModel({ | |
| isTouch : sap.ui.Device.support.touch, | |
| isNoTouch : !sap.ui.Device.support.touch, | |
| isPhone : sap.ui.Device.system.phone, | |
| isNoPhone : !sap.ui.Device.system.phone, | |
| listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster", | |
| listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive" | |
| }); | |
| deviceModel.setDefaultBindingMode("OneWay"); | |
| this.setModel(deviceModel, "device"); | |
| this.getRouter().initialize(); | |
| }, | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta charset="UTF-8"> | |
| <script id="sap-ui-bootstrap" | |
| src="resources/sap-ui-core.js" | |
| data-sap-ui-libs="sap.m" | |
| data-sap-ui-theme="sap_bluecrystal" | |
| data-sap-ui-xx-bindingSyntax="complex" | |
| data-sap-ui-resourceroots='{ | |
| "ksl.md1": "./" | |
| }'> | |
| </script> | |
| <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme --> | |
| <script> | |
| sap.ui.getCore().attachInit(function() { | |
| new sap.m.Shell({ | |
| app: new sap.ui.core.ComponentContainer({ | |
| height : "100%", | |
| name : "ksl.md1" | |
| }) | |
| }).placeAt("content"); | |
| }); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" id="content"> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery.sap.require("ksl.md1.util.Formatter"); | |
| sap.ui.core.mvc.Controller.extend("ksl.md1.view.Master", { | |
| onInit : function() { | |
| this.oUpdateFinishedDeferred = jQuery.Deferred(); | |
| this.getView().byId("list").attachEventOnce("updateFinished", function() { | |
| this.oUpdateFinishedDeferred.resolve(); | |
| }, this); | |
| sap.ui.core.UIComponent.getRouterFor(this).attachRouteMatched(this.onRouteMatched, this); | |
| }, | |
| onRouteMatched : function(oEvent) { | |
| var oList = this.getView().byId("list"); | |
| var sName = oEvent.getParameter("name"); | |
| var oArguments = oEvent.getParameter("arguments"); | |
| // Wait for the list to be loaded once | |
| jQuery.when(this.oUpdateFinishedDeferred).then(jQuery.proxy(function() { | |
| var aItems; | |
| // On the empty hash select the first item | |
| if (sName === "main") { | |
| this.selectDetail(); | |
| } | |
| // Try to select the item in the list | |
| if (sName === "product") { | |
| aItems = oList.getItems(); | |
| for (var i = 0; i < aItems.length; i++) { | |
| if (aItems[i].getBindingContext().getPath() === "/" + oArguments.product) { | |
| oList.setSelectedItem(aItems[i], true); | |
| break; | |
| } | |
| } | |
| } | |
| }, this)); | |
| }, | |
| selectDetail : function() { | |
| if (!sap.ui.Device.system.phone) { | |
| var oList = this.getView().byId("list"); | |
| var aItems = oList.getItems(); | |
| if (aItems.length && !oList.getSelectedItem()) { | |
| oList.setSelectedItem(aItems[0], true); | |
| this.showDetail(aItems[0]); | |
| } | |
| } | |
| }, | |
| onSearch : function() { | |
| // add filter for search | |
| var filters = []; | |
| var searchString = this.getView().byId("searchField").getValue(); | |
| if (searchString && searchString.length > 0) { | |
| filters = [ new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, searchString) ]; | |
| } | |
| // update list binding | |
| this.getView().byId("list").getBinding("items").filter(filters); | |
| }, | |
| onSelect : function(oEvent) { | |
| // Get the list item, either from the listItem parameter or from the event's | |
| // source itself (will depend on the device-dependent mode). | |
| this.showDetail(oEvent.getParameter("listItem") || oEvent.getSource()); | |
| }, | |
| showDetail : function(oItem) { | |
| // If we're on a phone, include nav in history; if not, don't. | |
| var bReplace = jQuery.device.is.phone ? false : true; | |
| sap.ui.core.UIComponent.getRouterFor(this).navTo("product", { | |
| from: "master", | |
| product: oItem.getBindingContext().getPath().substr(1), | |
| tab: "supplier" | |
| }, bReplace); | |
| }, | |
| onAddProduct : function() { | |
| sap.ui.core.UIComponent.getRouterFor(this).myNavToWithoutHash({ | |
| currentView : this.getView(), | |
| targetViewName : "ksl.md1.view.AddProduct", | |
| targetViewType : "XML", | |
| transition : "slide" | |
| }); | |
| } | |
| }); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE xml> | |
| <mvc:View | |
| controllerName="ksl.md1.view.Master" | |
| displayBlock="true" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"> | |
| <Page | |
| id="page" | |
| title="{i18n>masterTitle}"> | |
| <subHeader> | |
| <Bar id="searchBar"> | |
| <contentMiddle> | |
| <SearchField | |
| id="searchField" | |
| showRefreshButton="{device>/isNoTouch}" | |
| search="onSearch" | |
| tooltip="{i18n>masterSearchTooltip}" | |
| width="100%"> | |
| </SearchField> | |
| </contentMiddle> | |
| </Bar> | |
| </subHeader> | |
| <content> | |
| <List | |
| id="list" | |
| items="{/AbsenceForms}" | |
| mode="{device>/listMode}" | |
| noDataText="{i18n>masterListNoDataText}" | |
| select="onSelect" | |
| growing="true" | |
| growingScrollToLoad="true"> | |
| <items> | |
| <ObjectListItem | |
| type="{device>/listItemType}" | |
| press="onSelect" | |
| title="{Name}" | |
| number="{ | |
| path: 'Abshours1', | |
| formatter: 'ksl.md1.util.Formatter.currencyValue' | |
| }" | |
| numberUnit="Hours"> | |
| </ObjectListItem> | |
| </items> | |
| </List> | |
| </content> | |
| <footer> | |
| <Bar> | |
| <contentRight> | |
| <Button | |
| icon="sap-icon://add" | |
| tooltip="{i18n>masterFooterAddButtonTooltip}" | |
| press="onAddProduct" /> | |
| </contentRight> | |
| </Bar> | |
| </footer> | |
| </Page> | |
| </mvc:View> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| jQuery.sap.require("sap.m.routing.RouteMatchedHandler"); | |
| jQuery.sap.require("sap.ui.core.routing.Router"); | |
| jQuery.sap.declare("ksl.md1.MyRouter"); | |
| sap.ui.core.routing.Router.extend("ksl.md1.MyRouter", { | |
| constructor : function() { | |
| sap.ui.core.routing.Router.apply(this, arguments); | |
| this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this); | |
| }, | |
| myNavBack : function(sRoute, mData) { | |
| var oHistory = sap.ui.core.routing.History.getInstance(); | |
| var sPreviousHash = oHistory.getPreviousHash(); | |
| // The history contains a previous entry | |
| if (sPreviousHash !== undefined) { | |
| window.history.go(-1); | |
| } else { | |
| var bReplace = true; // otherwise we go backwards with a forward history | |
| this.navTo(sRoute, mData, bReplace); | |
| } | |
| }, | |
| /** | |
| * @public Changes the view without changing the hash | |
| * | |
| * @param oOptions {object} must have the following properties | |
| * <ul> | |
| * <li> currentView : the view you start the navigation from.</li> | |
| * <li> targetViewName : the fully qualified name of the view you want to navigate to.</li> | |
| * <li> targetViewType : the viewtype eg: XML</li> | |
| * <li> isMaster : default is false, true if the view should be put in the master</li> | |
| * <li> transition : default is "show", the navigation transition</li> | |
| * <li> data : the data passed to the navContainers livecycle events</li> | |
| * </ul> | |
| */ | |
| myNavToWithoutHash : function (oOptions) { | |
| var oSplitApp = this._findSplitApp(oOptions.currentView); | |
| // Load view, add it to the page aggregation, and navigate to it | |
| var oView = this.getView(oOptions.targetViewName, oOptions.targetViewType); | |
| oSplitApp.addPage(oView, oOptions.isMaster); | |
| oSplitApp.to(oView.getId(), oOptions.transition || "show", oOptions.data); | |
| }, | |
| backWithoutHash : function (oCurrentView, bIsMaster) { | |
| var sBackMethod = bIsMaster ? "backMaster" : "backDetail"; | |
| this._findSplitApp(oCurrentView)[sBackMethod](); | |
| }, | |
| destroy : function() { | |
| sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments); | |
| this._oRouteMatchedHandler.destroy(); | |
| }, | |
| _findSplitApp : function(oControl) { | |
| sAncestorControlName = "idAppControl"; | |
| if (oControl instanceof sap.ui.core.mvc.View && oControl.byId(sAncestorControlName)) { | |
| return oControl.byId(sAncestorControlName); | |
| } | |
| return oControl.getParent() ? this._findSplitApp(oControl.getParent(), sAncestorControlName) : null; | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment