SAPUI5 Grundlagen

Views per XML

Der elegante Weg zu Views

(C) Brandeis Consulting.

XML Views

Es gibt unterschiedliche View-Typen (XML, HTML, JavaScript). Die XML-Views sind am besten geeignet.

Die Steuerelemente werden als XML-Tags definiert. Alle Eigenschaften werden als Attribute übergeben. Sie können auch an Datenmodelle gebunden werden.

Konventionen

  • Viewnamen werden großgeschrieben
  • Alle Views werden im Ordner "view" gespeichert.
  • Namen von XML-Views enden immer mit *.view.xml
(C) Brandeis Consulting.

XML View - Dateiaufbau

  • Der Default-Namensraum ist sap.m
  • Der Namensraum sap.ui.core.mvc bekommt den Aliasnamen mvc
  • Das Oberflächenelement Text wird mit dem Tag instantiiert und mit dem Attribut Text versorgt.
<mvc:View
   xmlns="sap.m"
   xmlns:mvc="sap.ui.core.mvc">
   <Text text="Hello World"/>
</mvc:View>
view/App.view.xml
(C) Brandeis Consulting.

XML View - Erzeugung und Einbettung

Der XML-View muss auf unserer HTML-Seite eingebunden werden. Das macht unser index.js Skript.

1. Wir machen den body im HTML leer

Im HTML ist der Body leer, es werden aber die Attribute

  • id="content" und
  • class="sapUIBody"

gesetzt. Darauf beziehen wir uns später.

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function (XMLView) {
	"use strict";

	XMLView.create({
		viewName: "ui5.walkthrough.view.App"
	}).then(function (oView) {
		oView.placeAt("content");
	});

});
index.js
(C) Brandeis Consulting.