eBook - ePub
UI5 User Guide
How to develop responsive data-centric client web applications
Carsten Heinrigs, John T. H. Dobson, John T. H. Dobson
This is a test
Share book
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
UI5 User Guide
How to develop responsive data-centric client web applications
Carsten Heinrigs, John T. H. Dobson, John T. H. Dobson
Book details
Book preview
Table of contents
Citations
About This Book
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.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlegoâs features. The only differences are the price and subscription period: With the annual plan youâll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, weâve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is UI5 User Guide an online PDF/ePUB?
Yes, you can access UI5 User Guide by Carsten Heinrigs, John T. H. Dobson, John T. H. Dobson in PDF and/or ePUB format, as well as other popular books in Informatik & Programmierung in JavaScript. We have over one million books available in our catalogue for you to explore.
Information
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.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...