Auf der Suche nach Codebeispielen für SAPUI5 Anwendungen wird man schnell fündig. Oft sind Beispiele allerdings in JavaScript geschrieben und daher nicht so leicht zu übernehmen, wenn man sich dazu entschieden hat XML Views zu verwenden.
Das SAPUI5 Diagnostics, ein Support Tool welches aus jeder SAPUI5 Anwendung heraus aufgerufen werden kann, stellt einen generischen Konverter zur Verfügung. Wie das funktioniert möchte ich anhand einer einfachen Hello World-Anwendung aus der Testsuite demonstrieren.
Folgendes Code Sample zeigt die JavaScript Implementierung.
<!DOCTYPE html><html><head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title>Hello World App</title> id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m"> </script> <script type="text/javascript"> sap.ui.getCore().attachInit(function () { // create a mobile app and display page1 initially var app = new sap.m.App("myApp", { initialPage: "page1" }); // create the first page var page1 = new sap.m.Page("page1", { title : "Hello World", showNavButton : false, content : new sap.m.Button({ text : "Go to Page 2", press : function () { // navigate to page2 app.to("page2"); } }) }); // create the second page with a back button var page2 = new sap.m.Page("page2", { title : "Hello Page 2", showNavButton : true, navButtonPress : function () { // go back to the previous page app.back(); } }); // add both pages to the app app.addPage(page1).addPage(page2); // place the app into the HTML document app.placeAt("content"); }); </script></head>
Um SAPUI5 Diagnostics zu starten genügt es die Tastenkombination STRG+SHIFT+ALT+S einzugeben und es öffnet sich ein neues Browserfenster.
Nun navigiert man zum Tab „Control Tree“ und wählt den Knoten“UIArea“ aus. Über die Exportfunktion stehen nun die Option „Export To XML“ zur Verfügung. Durch einen Klick wird die Konvertierung durchgeführt und in Form einer ZIP Datei heruntergeladen. Wenn die Anwendung keine View enthält wird der gesamte Inhalt der Anwendung in einen XML View gepackt. Wenn die Anwendung Views enthält wird für jede View eine separate Datei angelegt. Nun kann man den Beispielcode auch in der eigenen Anwendung verwenden die auf XML Views basiert.
<sap.ui.core.mvc:View controllerName="XMLViewController" xmlns="sap.m" xmlns:sap.ui.core.mvc="sap.ui.core.mvc" > <App id="myApp" initialPage="page1"> <pages> <Page id="page1" title="Hello World"> <content> <Button text="Go to Page 2"></Button> </content> </Page> <Page id="page2" title="Hello Page 2" showNavButton="true"> </Page> </pages> </App></sap.ui.core.mvc:View>
