UI5 User Guide

How to develop responsive data-centric client web applications

Carsten Heinrigs, John T. H. Dobson, John T. H. Dobson

• Publisher: cahein - Software Consulting and Development
• Year: 2018
• ISBN:
  9783981959116
• Edition: 1
• Topic: Informatique
• Subtopic: Programmation en JavaScript

The UI5 User Guide gets the reader started quickly with OpenUI5/SAPUI5 development. Step by step, it shows how to develop a basic client web application, introducing concepts and flow of developing with UI5 along the way. You can reuse the resulting code as a template for any serious UI5 application.
After getting started, the main content of the book is divided into three parts:

• The first part of the book explains the basics of UI5 development. It is written to allow the reader to easily find practical solutions for common development tasks.
• The second part of the book goes into depth showing how to separate critical issues, like request handling and business logic from UI5. You will learn how to significantly speed up form generation and how to consistently implement data validation.
• The third part of the book integrates the previously covered aspects into an example application.

If you are interested in finding out how UI5 works, or if you have to work with UI5 in your projects, this book is for you.

For more information, visit the book's website.

Part I. Basics of UI5 development

In this part of the book, step by step, we will go through the basics of developing with UI5. We will begin with the various page implementations to help the reader to select the most fitting layout for a task or project (Chapter 3, Views and Pages). Next, we will cover the issues of navigation in general and routing in particular (Chapter 4, Navigation and Routing). This is being followed by a chapter exploring a client-side implementation of user access permissions (Chapter 5, User Permissions).

Having covered how to construct pages, how to navigate and limit access, we will move on to events and messages which are the core of user interaction (Chapter 6, Events and Messages). The following three chapters are concerned with page content. Beginning with models, which bind the data to the user interface controls (Chapter 7, Models), we will finally get to the main purpose of the whole effort, namely, the presentation and modification of the domain data as lists, tables (Chapter 8, Lists and Tables) and forms (Chapter 9, Forms and Input Validation).

Chapter 3. Views and Pages

We have already seen some views and a controller in Chapter 2, Building a basic responsive Web Application. Without content, the view has nothing to show. The first level of content is a basic layout of visible areas and their relative positions. In this chapter, we will look at various page layouts offered by UI5.

A view instance of type JavaScript is defined using the function sap.ui.jsview. The function takes two parameters, a view name and a view object of type sap.ui.core.mvc.JSView. The only required function to be implemented is the createContent function, which must return an object extending sap.ui.core.Control, mostly some kind of page layout control.

Additionally, the view can be connected with a controller using the getControllerName function. The view will try to load and instantiate the controller by the returned name.

Listing 3.1. JSView example with controller

sap.ui.jsview("oum.view.mPageExample", { createContent: function(oController) { const page = new sap.m.Page(); return page; }, getControllerName: function() { return "oum.controller.pageExamples"; } });

The sap.ui.core.mvc.JSView extends sap.ui.core.mvc.View, which provides functions to access and change the content aggregation returned by the createContent. We can getContent, addContent, insertContent, indexOfContent, removeContent, removeAllContent or destroyContent. These functions allow us to programatically modify any view content.

To limit the visible space occupied by the View, the width and height properties of the View object can be set using the related setWidth and setHeight functions. Any valid sap.ui.core.CSSSize value is allowed. It appears as CSS style attributes of the generated HTML container.

A view is initialized, rendered and re-rendered, exited, and finally destroyed. In practice, the related events of the View are rarely used, because the corresponding functions for the controller are generally preferable.

Page layouts

UI5 has several implementations of layout controls representing a web page. A page layout provides areas for content. The layouts generally have a header and footer, which may or may not be shown. All have a main content area. The adaptability to different devices depends on the controls being used in the content aggregations.

Here, we just want to give an overview of available page implementations without diving too deeply into the details.

Basic responsive Page

The sap.m.Page is the most commonly used responsive layout control. It has a header with an optional sub-header, a content and a footer area.

Screenshot of example sap.m.Page

Figure 3.1. Sketch of sap.m.Page

The customHeader, subHeader and footer aggregations require a control implementing sap.m.IBar (Bar, OverflowToolbar, Toolbar). All generate a horizontal container, but within the container the content is positioned differently.

The sap.m.Bar control has three content areas: left, middle and right. If the available visible space is not sufficient for all content, the middle content will adjust. The sap.m.Toolbar will distribute content evenly among all shrinkable controls. This default behavior can be overwritten by specifying sap.m.ToolbarLayoutData for the layoutData property of Toolbar elements. The sap.m.OverflowToolbar extends the Toolbar with an overflow area into which controls are moved in case the visible space is insufficient. We can control the overflow behavior by specifying sap.m.OverflowToolbarLayoutData.

The sap.m.Page has a landmarkInfo aggregation, which is important, as it allows screen readers to provide an overview of the page structure and to quickly navigate to the relevant content areas. The available roles are defined as part of the WAI-ARIA specifications under Landmark roles. The corresponding UI5 enumeration is the sap.ui.core.AccessibleLandmarkRole with the following values: Banner, Complementary, Main, Navigation, None, Region, Search.

Defining landmark roles and labels can help all participants in the development process to communicate the structure of a page and clarify the functionality of page areas. Finding a short descriptive text for each page area gives the team a chance to find problems of confusing uses mixing different concerns. Here, we will use english text because they are more instructive than i18n properties we would normally use.

Listing 3.2. Define landmark roles and labels

const landmarkInfo = new sap.m.PageAccessibleLandmarkInfo({ rootLabel: "example page constructed with sap.m.Page", headerRole: "Navigation", headerLabel: "back and home buttons besides main page title", subHeaderRole: "Complementary", subHeaderLabel: "save and cancel buttons", contentRole: "Main", contentLabel: "this is only an example without meaningful content", footerRole: "None" });

The following listing constructs the related page with a header (lines 5 to 15), subHeader (lines 16 to 34), content (lines 35 to 41) and footer area (lines 42 to 44).

We will use the default header properties instead of the customHeader aggregation, which we only use in cases where the default header properties are insufficient. We already used the customHeader aggregation for Listing 2.15, “Add LanguageSwitcher fragment to Page”.

The default header consists of a title text placed in the middle, a navigation back button on the left side, and some additional headerContent on the right side of the header container. The title properties are title and titleLevel (Enumeration sap.ui.core.TitleLevel). The relevant button properties are showNavButton and navButtonTooltip, and the related event navButtonPress.

Listing 3.3. Construct a sap.m.Page

 1 sap.ui.jsview("oum.view.mPage", { 2 createContent: function(oController) { 3 const pageControl = new sap.m.Page({ 4 landmarkInfo: landmarkInfo, 5 showHe...