OpenUI5 One Pager

ui5_144
There was a interesting post „MVC – Model View Controller, Minimum Viable Code“ from master DJ Adams, which did the groundwork for this article. I will call it UI5 One Pager instead of minimum viable code technique.

So the idea behind is to have a UI5 MVC template with which you can quickly try or test something with UI5 MVC concept. Everything (Bootstrap, View, Model and Controller) in one single page/file, but still a full-grown ui5 mvc app.

To add something useful to the existing code, let’s provide the UI5 One Pager as File Template for JetBrains WebStorm (my favorite Web IDE) and also use the new UI5 module concept (AMD – Asyncronous Module Definition), which is propagated since v1.28/v1.30 of OpenUI5/SAPUI5.

So here is the template for WebStorm:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">

    <title>UI5 One Pager</title>

    <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/1.28.15/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-preload="async"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-frameOptions='allow'>    // NON-SECURE setting for test environment
    </script>

    <script id="${NAME}" type="ui5/xmlview">
        <mvc:View
            controllerName="${UI5_Namespace}.controller.${NAME}"
            displayBlock="true"
            xmlns="sap.m"
            xmlns:l="sap.ui.layout"
            xmlns:core="sap.ui.core"
            xmlns:mvc="sap.ui.core.mvc">
            <Page title="${NAME}">
                <content>
                    <Button press="pressBtn" text="Press me"/>
                </content>
            </Page>
        </mvc:View>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            "use strict";

            sap.ui.define([
                "sap/ui/core/mvc/Controller"
            ], function (Controller) {
                return Controller.extend("${UI5_Namespace}.controller.${NAME}", {
                    pressBtn: function (oEvent) {
                        sap.m.MessageToast.show("Hello UI5 DevLife!");
                    }
                });
            });

            sap.ui.require([
                "jquery.sap.global"
            ], function (jQuery) {
                sap.ui.xmlview({
                    viewContent: jQuery("#${NAME}").html()
                }).placeAt('root');
            });

        });
    </script>
</head>
<body class="sapUiBody" id="root"/>
</html>

Using this template with WebStorm (NAME is „Test1“) and running the UI5 One Pager in Chrome should result in something like this:

UI5OnePager

For more details on how to use File Templates in WebStorm have a look at the previous post UI5 File Templates for WebStorm.