OPEN (SAP) UI5 One of the introductory series of Learning: Literacy and warming up (bottom)

1 UI5 code structure

Last time we spent 20 seconds together to complete a UI5 version of Hello World. After the app is opened there is a button, the text of the button is Hello World, after clicking this button, the button will slowly disappear (Fade out).

Well, let's take a look at this one. In order to achieve such a simple function, what the OPENUI5 framework needs to provide at least, or we can look at the structure of one of the simplest UI5 applications with such a simple application.

The HTML section should not say much, we only look at and UI5 related code, the first part we call Bootstrap, contains the following code snippet:

<!--1.) Load SAPUI5 (from a remote server), select Theme and Control Library--><script id= "Sap-ui-bootstrap"    src= "http: Localhost:8080/openui5/resources/sap-ui-core.js "    data-sap-ui-theme=" Sap_bluecrystal    " data-sap-ui-libs= "Sap.ui.commons" ></script>

This is an embedded JavaScript code that first introduces UI5 's core runtime library Sap-ui-core.js, followed by a tag that sets two properties, the theme: and the data-sap-ui-theme UI library that will be referenced in the app: data-sap-ui-lib .

The next section we call application, the subject of our application is here, including the following code snippet:

  <!--2.) Create a UI5 button and place it onto the page--><script>    //Create the button instance    Var MyButton = n EW Sap.ui.commons.Button ("btn");    Set properties, e.g. the text (there is also a shorter-in-the-setting-several properties)    Mybutton.settext ("Hello W Orld! ");    Attach an action to the button's "Press" event (use of jQuery to fade out the button)    mybutton.attachpress (function () { $ ("#btn"). FadeOut ()});    Place the button into the HTML element defined below    mybutton.placeat ("Uiarea");    An alternative, more jquery-like notation for the same is:/      *    $ (function () {        $ ("#uiArea"). Sapui (" Button "," Btn ", {            text:" Hello world! ",            press:function () {$ (" #btn "). FadeOut ();}        );     });     */</script>

This code is also easy to understand, first create a button object, and then set the button object to display the text is "Hello world!", and then register a click event for this button-click on the button itself will disappear, Finally, put this button in a place called Uiarea. Where is Uiarea? Next look at the third piece of code.

The third piece of code is called Ui-area:

<div id= "Uiarea" ></div>

A DIV and set its ID to the Uiarea we used earlier.

Is it simple? Very simple, the first part bootstrap introduces the runtime environment and some common configuration files, the second part application the HTML control and the corresponding background data and business logic, and puts it into the third part of the Ui-area.

Finally still look, some wordy, familiar with the development of UI5 can be directly ignored, but for UI5 open novice, mastered the basic structure, it is clear the UI5 process of the most basic context.

Figure 1:UI5 Structure of the application

2 UI5 Mobile

The most important library in UI5 is SAP.M, and most SAP Fiori applications are now based on this library, which allows applications to seamlessly switch between different terminals and platforms, and the responsive design allows the application's UI to present the most appropriate interface on devices of different resolutions.

2.1 A simple example

Below we use the SAP.M library to develop a typical mobile Web application, the application consists of two pages, two pages can be freely toggled, the second page has a button, click to display the current client's device information.

The direct code is as follows:

<! DOCTYPE html>
　　
Under Tomcat under Webapps/ex1 a new file is called index2.html, put the above code in, save and then open the browser directly to run:
Http://localhost:8080/ex1/index2.html
To open the browser's developer tool, in Chrome as an example, press F12, select Device for Apple IPhone 6, and press F5 to refresh, you should see the following screen: Click Go to Page2, switch to the second page, and then click the click to get Device Information, you can get information about the current device.
Figure 2:ui5 Mobile First example
2.2 Controls to use
The above is a very simple example from which we have used several controls:
2.2.1 Sap.m.app
Generally speaking, Sap.m.app (the "app") is the root element of the UI5 mobile app, so at the very beginning of a UI5 mobile app, we created an App object and placed the app in the UI area.
We can make some customizations to this control, see the API Reference for this control, and see how many properties it has:

 
 

  
  
 
   
Homeicon
 
   
BackgroundColor
 
   
BackgroundImage
 
   
Backgroundrepeat
 
   
Backgroundopacity
 
  
 
 
Let's pick a property to see how to use it, set the background color, usebackgroundColor
Find the following code:
var app = new Sap.m.app ("MyApp", {initialpage: "Page1"});
Switch
var app = new Sap.m.app ("MyApp", {  backgroundcolor: "Blue",  initialpage: "Page1"});
Reopen the URL for the app, showing the following:
Figure 3:ui5 Mobile First example-Modify the app background color
Well, it's hard to see, so try not to modify the background, the foreground, and so on, because we have the specified theme, so if you need to customize the different interface styles, try to customize the theme to achieve, this we will discuss together later.
2.2.2 Sap.m.page
The app is the main container for your app, but one app will have multiple pages, each of which is a page. For one mobile, an app can only display one page to the current screen at a time. If you are a tablet or desktop, you can display a page that is a navigation page and a detailed message, such as a typical master detail app.
In the example above, we created two pages and added two page to the app using the AddPage method of the app and specified Page1 as the initial page.
How does the navigation or routing of the page be implemented? You can see that the UI5 has largely encapsulated and simplified navigation, and it is easy to switch between the page by using the to method and the back method of the app's instance object, if you have already added the page to the app. If you want to add a page dynamically at run time, you cannot navigate to the method before adding the page. Of course, because this example has only two pages, so relative to the page navigation is relatively simple, if it is a complex application, the page depth of more than two layers, simple through the app's to and back can not meet the demand, which need to use the component and route to achieve, Here is a simple mention, the future should have a topic to introduce.
In general, page is the most basic (fundamental) container for a mobile app display screen, and other controls on the screen need to be placed under the page's content, or by using the page's Addcontent method.
2.2.3 Sap.m.textarea
This does not introduce more, multi-line text box, can display multiple lines of text, examples show a most basic usage.
2.2.4 Sap.m.button
Buttons, there is no need to introduce, buttons as the most common in the Web page control in UI5 there are many styles and usages, we use a most basic button control. This adds a method to the button that allows the Sap.ui.Device class to display the type of the current device.
3 Summary
The first article in the UI5 Learning Series: Literacy and warm-up is over, and we learned about the origins of UI5, the relationship with SAP Fiori, and did two little exercises, one with the UI5 Universal Control Library, the other with the UI5 mobile Library, the function of the code itself is not important, The main thing is the application of UI5 have an intuitive feeling, generally know the structure of the application of UI5, in the following article I will introduce a few important controls and their usage, and finally through a comprehensive exercise to end the entry series, this is my current idea.
To illustrate, we will basically use the mobile library for development in future series posts sap.m , which is also best practice for SAP.
OPEN (SAP) UI5 One of the introductory series of Learning: Literacy and warming up (bottom)