This Guide explains how to build a simple SAPUI5 application, as it was shown in the CodeJam at Antwerp on Feb 20th 2014.
Creating the SAPUI5 Application
- Create a new SAPUI5 project by right clicking in the "Project Explorer" and selecting "New" --> "Project..."
- In the New Project Dialog select "Application Project" in the "SAPUI5 Application Development" folder.
- Name the project, select "Mobile" as "Target Device" and check "Create an Initial View". Then click on "Next >"
- Create the initial view. In our example we name it "App". We choose "XML" as "Development Paradigm". Then click on "Finish"
- Let's have a short look at our applications file structure. There are three important files. The "index.html" which is the HTML page which displays the application. An "App.view.xml" which is an XML file which describes the view and the "App.controller.js" which implements the views logic.
- To test your application you can always right click on the project and select: "Run As" --> "Web App Preview"
App View
The App view should contain a split app, which contains a list on the left hand side (to display the products) and a navigation container on the right hand sind (to display details). Therefore we edit the index.html and App.view.xml as shown below.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
//Define subfolder which includes the applications files
sap.ui.localResources("codejamapplication");
//Instantiate the view
var app = sap.ui.view({id:"productsApp", viewName:"codejamapplication.App", type:sap.ui.core.mvc.ViewType.XML});
// to avoid scrollbars on desktop the root view must be set to block display
app.setDisplayBlock(true);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
App.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="codejamapplication.App" xmlns:html="http://www.w3.org/1999/xhtml">
<Shell title="Product Explorer">
<SplitApp>
<masterPages>
<Page title="Products">
<List></List>
</Page>
</masterPages>
<detailPages>
<NavContainer id="navContainer"></NavContainer>
</detailPages>
</SplitApp>
</Shell>
</core:View>
Routing
To enable routing within the application you need to create an application router. We place this in the javascript section of the index.html file (the same <script> section, in which the view is initialized. In this router we define two routes for the product details and the supplier details. Additionally we define a configuration object which sets default values for all routes. To automate the navigation in the nav container we use the RouteMatchedHandler.
jQuery.sap.require("sap.ui.core.routing.Router");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");
var oRouter = new sap.ui.core.routing.Router({
product: {
pattern: "product/{id}",
view: "Product",
},
supplier: {
pattern: "supplier/{id}",
view: "Supplier"
}
}, {
targetControl: "navContainer",
targetAggregation: "pages",
targetParent: "productsApp",
viewType: "XML",
viewPath: "codejamapplication",
clearTarget: false
});
var oRouteHandler = new sap.m.routing.RouteMatchedHandler(oRouter);
oRouter.register("router");
oRouter.initialize();
The oRouter.initialize() should be done after the application view has been placed on the screen (app.placeAt("content")) All the other code needs to be executed before the app view is initialized.
Model
To connect your application to the backend, you have to define a Model. We do this in the index.html file:
var oModel = new sap.ui.model.odata.ODataModel("http://54.224.71.58:50000/sap/opu/odata/sap/ZGWSAMPLE_SRV");
sap.ui.getCore().setModel(oModel);
This definition should be placed before the lines where the application view is instantiated.
Service URLs need to have the same host as the application. Else the requests are blocked by the browser for security reasons. To overcome this you can use the SAPUI5 proxy servlet, which is enabled by default for all SAPUI5 Application projects. You can write the url like
new sap.ui.model.odata.ODataModel("proxy/http/54.224.71.58:50000/sap/opu/odata/sap/ZGWSAMPLE_SRV");
Products and Supplier View
To display the details we defined two routes for which we need to define the views.
To use all the bindings which are define din this view, you have to enable the extended binding syntax. This can be done by adding "data-sap-ui-xx-bindingSyntax="complex" " to the bootstrap script tag.
Supplier.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="codejamapplication.Supplier" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="{CompanyName}" showNavButton="true" navButtonPress="handleNavBack">
<content>
<ObjectHeader title="{CompanyName}" number="Phone: {PhoneNumber}"
numberUnit="{EmailAddress}">
<attributes>
<ObjectAttribute text="{Description}" />
<ObjectAttribute text="{Category}" />
</attributes>
</ObjectHeader>
</content>
</Page>
</core:View>
Product.view.xml
<core:View xmlns:core="sap.ui.core" xmlns:form="sap.ui.layout.Form"
xmlns="sap.m" controllerName="codejamapplication.Product" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="{Name}">
<content>
<ObjectHeader title="{ProductId}" number="{Price}"
numberUnit="{CurrencyCode}">
<attributes>
<ObjectAttribute text="{Description}" />
<ObjectAttribute text="Category: {Category}" />
<ObjectAttribute text="Supplier: {SupplierName}" press="showSupplier" active="true"></ObjectAttribute>
</attributes>
</ObjectHeader>
</content>
</Page>
</core:View>
In this coding you also see the data binding syntax. You can write the entities properties in curly braces. You can also define complex binding structures like mixing strings and bindings. To enable this, you have to add an additional attribute to the bootstrap in the index.html file.
We also still miss the databinding in the App.view.xml which is shown below.
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="codejamapplication.App" xmlns:html="http://www.w3.org/1999/xhtml">
<Shell title="Product Explorer">
<SplitApp>
<masterPages>
<Page title="Products">
<List items="{/ProductCollection}">
<items>
<StandardListItem title="{Name}" description="{Description}" type="Active" press="selectProduct"></StandardListItem>
</items>
</List>
</Page>
</masterPages>
<detailPages>
<NavContainer id="navContainer"></NavContainer>
</detailPages>
</SplitApp>
</Shell>
</core:View>
We have now created all the views, that we need for our application. We still miss the logic.
Controllers
To logic of the application in imiplemented in the controllers. Here we handle the navigation and data binding.
App.controller.js
sap.ui.controller("codejamapplication.App", {
onInit: function() {
this.oRouter = sap.ui.core.routing.Router.getRouter("router");
},
selectProduct: function(oEvent) {
var oBindingContext = oEvent.getSource().getBindingContext();
this.oRouter.navTo("product", { id: oBindingContext.getProperty("ProductId") });
}
});
Product.controller.js
sap.ui.controller("codejamapplication.Product", {
onInit: function() {
this.oRouter = sap.ui.core.routing.Router.getRouter("router");
this.oRouter.attachRouteMatched(function(oEvent) {
var sRoute = oEvent.getParameter("name"),
oView = oEvent.getParameter("view");
if (sRoute === "product") {
oView.setBusyIndicatorDelay(0);
oView.setBusy(true);
sap.ui.getCore().getModel().createBindingContext("/ProductCollection('" + oEvent.getParameter('arguments').id + "')", function(oContext) {
oView.setBindingContext(oContext);
oView.setBusy(false);
});
}
});
},
showSupplier: function(oEvent) {
var oBindingContext = oEvent.getSource().getBindingContext();
this.oRouter.navTo("supplier", { id: oBindingContext.getProperty("SupplierId") });
}
});
Supplier.controller.js
sap.ui.controller("codejamapplication.Supplier", {
onInit: function() {
this.oRouter = sap.ui.core.routing.Router.getRouter("router");
this.oRouter.attachRouteMatched(function(oEvent) {
var sRoute = oEvent.getParameter("name"),
oView = oEvent.getParameter("view");
if (sRoute === "supplier") {
oView.setBusyIndicatorDelay(0);
oView.setBusy(true);
sap.ui.getCore().getModel().createBindingContext("/BusinessPartnerCollection('" + oEvent.getParameter('arguments').id + "')", function(oContext) {
oView.setBindingContext(oContext);
oView.setBusy(false);
});
}
});
},
handleNavBack: function() {
var oHistory = sap.ui.core.routing.History.getInstance();
if (oHistory.getPreviousHash()) {
window.history.go(-1);
}
}
});
- SAP Managed Tags:
8 Comments
