Building the UI

To instantiate views, SAPUI5 provides the factory method sap.ui.view.

In JSON views, event handlers are bound as attributes with the attribute name as event name like "press" for a button and the attribute value as event handler name.

More complex use cases may require a more formal way to define views and controllers. For this, typed views and controllers are used.

In SAPUI5, controllers and views are defined and instantiated via a name that equals a SAPUI5 module name within the require/declare concept.

For normal controls, view cloning bases on control settings that are described by SAPUI5 metadata, such as properties, aggregations, associations, and event handlers. The clone operation collects these settings and creates a new instance.

Static IDs are used to identify and modify the controls within the controller during runtime. However, if you reuse or nest these views, these static IDs are no longer unique. To avoid ambiguity, each view adds its own ID as prefix to all its child controls.

Fragments are light-weight UI parts (UI subtrees) which can be reused, defined similar to views, but do not have any controller or other behavior code involved

To build semantic HTML templates, SAPUI5 uses handlebars. You can either use standard expressions and helpers together for the context of a template instance, or you can use the custom helpers for handlebars provided by SAPUI5, which you can use together with the SAPUI5 models.

XML templating lets you use an XML view as a template.

SAPUI5 offers a hash-based navigation, which allows you to build one-page apps where the navigation is done by changing the hash, so the browser does not have to reload the page. Instead there is a callback to which the app and especially the affected view can react. A string, that is, the hash is used, parsed and matched against patterns which will then inform the handlers.

Declarative programming allows you to define the UI within the HTML document as elements.

SAPUI5 is an HTML UI library, therefore styling is done using Cascading StyleSheets (CSS). This allows creating an impressive visual experience using a widely known standard technology which is well-accepted on the market.