Sinopsis crítica de debates e investigaciones útiles para el aula

by Thilo Seidel

Learning your way around UI5 can be hard sometimes. With the new tutorials and improved structure in the developer guide, help on the journey to UI5 mastery has got better over the last few months.

But if you really want understand the UI5 magic in all its depth you might want to dig a little deeper. For my part I can truly recommend going back to the roots to have a look into the UI5 base classes. They are properly lined up like a string of pearls building upon each other and forming the high level architectural blueprint of the toolkit as a whole.

All UI5 base classes come with a set of metadata, basically simple json that may hold additional information describing the instance. In addition this metadata has an underlying metadata implementation that provides helper functions, validation logic and some more convenience.

30 Days of UI5 Page 31 of 88

sap.ui.base.Object

This “instance plus metadata” concept is introduced already with sap.ui.base.Object, the first in line and mostly everything you want to instantiate in UI5 will be inheriting from it. Its children are mostly workers like classes taking care of parsing, or basic data carrying objects like the event implementation.

sap.ui.base.EventProvider

While Object is only setting the stage, sap.ui.base.EventProvider is the first to actually have capabilities to share. And you might have guessed it from the name already: the Event Provider introduces eventing in UI5. With functions to attach, detach and fire events, its toolkit is only small compared to what is still to come. Nevertheless, it is the starting point for most of the key features in UI5. Model, Binding, Router, at the heart they are all “just” Event Providers.

sap.ui.base.ManagedObject

Next in line is a heavyweight champion when you compare it with its predecessor: the sap.ui.base.ManagedObject. It is the herald for all instances that later will be rendered as it introduces properties, aggregations and associations in the metadata. It will never be rendered, but it sets the stage and extends the metadata implementation adding getters and setters for the fields that are introduced. Moreover it allows for data binding and might even have its own model.

The most prominent example is the Component.

sap.ui.core.Element

The first base class that might have a place in the DOM is the sap.ui.core.Element. It has to be said that the Element itself has normally no renderer on its own and therefore is not to be placed standalone into the DOM. But it is the class you want to use in aggregations of your own controls with the list item as one of its best known subclasses. It is the one that completes the metadata implementation for base classes.

sap.ui.core.Control

Last up for this journey through UI5 architecture is the sap.ui.core.Control with children that are full blown UI elements. The last few thing that are still missing are introduced now. Besides direct DOM placement and the renderer it is basically picking up the last pieces with the busy-state and ability to handle browser events. And of course, every real UI-control has learned from Control.

sap.ui.core.Core

This post gives just the briefest of UI5 architecture overviews, covering only the bare essentials.

There is much more to discover in that respect and I highly recommend you check out the entire package from GitHub and go exploring. There are definitely some gems hidden deep in the UI5

30 Days of UI5 Page 32 of 88

repository. Just one more for now, the sap.ui.core.Core, her majesty itself. And you might have guessed it, humble as she is, she downgraded herself recently and finally is nothing more than a (Base) Object.

30 Days of UI5 Page 33 of 88

Day 13 - Multi language support out of the box – UI5’s pedigree

by DJ Adams

I was browsing through the controls that were new with 1.28, using the OpenUI5 SDK’s Explored app’s filter-by-release feature, and came across the ​Message Page​ control.

What caught my eye was the text on the control.

When you think about it, there aren’t that many controls that have default text on them.

Looking into how this would work in other locales (this control as you see it would only make

immediate sense in English-speaking countries), and how the text was specified, led me down a path that ended up at a place that reminded me of OpenUI5’s pedigree. Born inside of SAP, the enterprise scale thinking permeates throughout the toolkit, and is very visible in this context.

In ​the init function of MessagePage.js​ you can see that the control’s text property is being set to the value of the MESSAGE_PAGE_TEXT property in the message resource bundle:

This ​MESSAGE_PAGE_TEXT property in the base resource file messagebundle.properties​ has the value “No matching items found.”:

Even if you know only a little about how resource models work, you may realise that there’s more to it than this. There are actually 39 different translated versions of this base resource

30 Days of UI5 Page 34 of 88

representing many languages (more specifically locales) into which this control (and other controls) have been translated:

Let’s have a look at a few (with the second grep I’m omitting those that have Unicode encodings, because they’re hard to read):

And of course, not only does UI5’s pedigree extend to just translations, right-to-left (RTL) is also supported, out of the box.

Let’s bring this post to a close with a couple of examples. Don’t forget you can explicitly specify the language or locale with a special query parameter “sap-language” in the URL.

Here’s ​Hebrew​ (“iw”), with RTL kicking in automatically:

30 Days of UI5 Page 35 of 88

And to finish, how about ​another language​:

(See what I did there? :-)

30 Days of UI5 Page 36 of 88

Day 14 - Speeding up your UI5 app with a Component