UI5 Boilerplate explained (Part 1)
In this blog I will describe the structure and concepts behind the UI5 SplitApp Boilerplate. It is a template/skeleton for Mobile UI5 Apps and follows the “Mobile First” approach, but also works on desktop (Thanks to the great sap.m controls).
The UI5 Boilerplate can be understood as starting point for your own UI5 Development, both for OpenUI5 and SAPUI5 Apps.
The Boilerplate provides a basic application and file structure, implements some core features (navigation, i18n) and contains example views/controllers for different purposes. The UI5 SplitApp Boilerplate code is hosted on Github: 6of5/UI5SplitApp-Boilerplate · GitHub
The UI5 Boilerplate also supports SAP and also Non-SAP Development approach, this is reflected in two different git branches:
|non-SAP centric Development Scenario||SAP-centric Development Scenario|
|Development Tool||Any IDE with Git Support (Sublime Text, Eclipse, IntelliJ,…)||Eclipse 4.3 with SAP UI Development Toolkit for HTML5 (SAP UI5 Toolkit)|
|Git Clone Command||
|More Information||http://scn.sap.com/community/developer-center/front-end/blog/2014/01/13/ui5-mobile-splitapp-boilerplate/||UI5 Boilerplate with Eclipse + SAPUI5 Toolkit|
|local Dev Runtime Options||node.js, Apache HTTP, Apache Tomcat||Web App Preview, Apache Tomcat, HANA Cloud Local Runtime|
Application Structure and File Structure
UI5 Boilerplate is structured via the following folders:
|app||UI5 Application Component, which is responsible for general tasks, like initialize core models like i18n|
|css||CSS files go here|
|i18n||resource bundles for internationalization (i18n) are stored in this folder|
|img||assets like images, logos,….|
|model||UI5 model information (like json, xml files)|
|view||UI5 view files (XMLViews, JSViews) and the corresponding controllers|
Let’s have a look at the index.html file first:
app.js (declare UI5 resources / ‘start’ Application Component)
in the app.js we define where UI5 resources are located. These are in the folders app, model and view. So UI5 will be able to use resources within these folders. And we specify that we require app.Component. This Component represents our Application. We create an ComponentContainer with name “app” and attach it to the DOM element with the id “root”, which in our case is the body tag <body class=”sapUiBody” id=”root”>. This will create and run our Component (Application):
Component.js (Application Component)
In the Component (Application) we create the App.view (which represents the UI of our Application) and create the i18n model and attach this to the App.View. Within the component further general tasks could be executed, like loading master data, which can then be used throughout the application. Now lets have a look at the App View:
App.view.js (Application UI)
In the App View we create a SplitApp which will enable the “iPad” like UI Style. We can then define the Master Page(s) which will be on the smaller left side of the screen (here the Menu View) and also the Detail Pages (CoffeeList View and Info View). Both JSViews or XMLViews are possible as you can see. And of course you could also use the other view types here. The App View is now returning the SplitApp as member of the mobile Shell. The result can be seen in the browser (with UI5 Boilerplate Version 0.6.0):
In the next blog article I want to explain, how you can easily extend the UI5 Boilerplate with further Pages.
You can find an article which describes How to easily add further pages in this external blog post.
Updates/Changes in version 0.7.0
With the updated version of the UI5 boilerplate there are some fundamental changes which I shortly will describe.
Shell and Component were removed
As the Shell and also the Component are not really necessary for a ‘normal’ App (here in the sense of a single, independent App), they have been removed.
This makes the DOM more lean and removes unnecessary complexity.
The homeIcon definition is done by the SpliApp itself now. Initialisation of the global models (i18n and the new device model) is taken over form the Component by the App View (RootView). This makes also the ComponentContainer obsolete. Therefore simply the App View is placed in the DOM in the app.’s file:
Device Model introduced
To implement different behaviour on different devices (smartphone, tablet, desktop) the device model was added. More Infos in dedicated post:
Fiori Edition of UI5 Boilerplate
There is now a Fiori Edition of the UI5 Boilerplate available, which can be integrated into the SAP Fiori Launchpad. More information under the following links:
- The Fiori Edition was introduced on the SAP Inside Track Frankfurt 2015. Motivation and some fundamental concepts can be found in this blog post sitFRA 2015 – Birthday of UI5BP Fiori Edition
- Step-by-step instructions how to use SAP Web IDE to deploy UI5BP Fiori Edition on SAP HANA Cloud Platform (HCP) and register in SAP Fiori Launchpad on HCP: Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform
- Source of UI5 Boilerplate Fiori Edition on GitHub