Thanks

Inspired by You Don’t Know JS (book series)

What are we doing here today?

We want to know how to develop an openui5 application using sap.ui.core.mvc.JSView, sap.ui.core.mvc.JSONView, sap.ui.core.mvc.HTMLView and sap.ui.core.mvc.XMLView. Also we want to know how to connect sap.ui.core.mvc.Controller with sap.ui.core.mvc.View, base class for all types of views. As core source code for the project and quick start you may use project from my third article.

Introduction

A goal of my blog is do not teach you how to use openui5 library from SAP in right way. The openui5 was designed to solve one issue with several possible ways. So you are able to choose.

The goal is sharing my personal experience of using the library and some other web development stuff, which helps you to speed up your development using openui5.

All code samples are developed on MacOS environment. On other environments (Linux or Windows) process should be nearly the same.

Pre-requirements

Minimal:

  • MacOS, Linux or Windows operating system prepared
  • Chromium browser installed
  • Node.js javascript runtime installed
  • Yarn dependency manager installed
  • Gulp4 javascript task runner installed globally

Additional:

  • Git client (command-line or GUI) installed
  • Preferred IDE installed (for ex. Visual Studio Code or WebStorm)

Let’s go

First of all I recommend you to create project as described in my third article (preferable). Or just clone project from repository (for lazy developers)

git clone https://github.com/sergiykh/you-do-not-know-openui5.git cd you-do-not-know-openui5 git checkout tags/app-as-component

First of all, project structure will be changed a little bit

├── .babelrc ├── .eslintrc (new) ├── .editorconfig ├── .gitignore ├── LICENSE.md ├── README.md ├── gulpfile.js ├── package.json ├── proxies.js ├── src ├── app ├── controllers | ├── CreateCustomer.controller.js => (New) | ├── CustomerDetail.controller.js => (New) | ├── Customer.controller.js => (New) | ├── Login.controller.js => (New) ├── views | ├── CreateCustomer.view.html => (New) | ├── CustomerDetail.view.xml => (New) | ├── Customer.view.json => (New) | ├── Login.view.js => (New) ├── pages | ├── CreateCustomer.page.js => (New) | ├── CustomerDetail.page.js => (Changed) | ├── Customer.page.js => (Changed) | ├── Login.page.js => (Changed) ├── Component.js => (Chaged) ├── manifest.json ├── app.config.js ├── app.startup.js └── index.html

In src/controllers/Login.controller.js

export default sap.ui.controller("app.controllers.Login", { navToCustomers() { app.to("customers"); } })

In src/controllers/Customers.controller.js

export default sap.ui.controller("app.controllers.Customers", { navToCustomerDetail() { app.to("customerDetail"); } })

In src/controllers/CustomerDetail.controller.js

import MessageToast from "sap/m/MessageToast"; export default sap.ui.controller("app.controllers.CustomerDetail", { printDetails() { MessageToast.show("Customer's Detail Printed"); } })

In src/controllers/CreateCustomer.controller.js

export default sap.ui.controller("app.controllers.CreateCustomer", { navToCustomerDetail() { app.to("customerDetail"); } })

In src/views/Login.view.js

import Input from "sap/m/Input"; import Label from "sap/m/Label"; import Button from "sap/m/Button"; export default sap.ui.jsview("app.views.Login", { getControllerName: function() { return "app.controllers.Login"; }, createContent: function(oController) { return [ new Label({ text: "Username" }), new Input({ placeholder: "type here" }), new Label({ text: "Password" }), new Input({ placeholder: "type here" }), new Button({ text : "Login", press : [oController.navToCustomers, oController] }) ] } })

In src/views/Customers.view.json

{ "Type":"sap.ui.core.mvc.JSONView", "controllerName":"app.controllers.Customers", "content": { "Type": "sap.m.ScrollContainer", "content": [ { "Type": "sap.m.StandardTile", "icon": "sap-icon://customer", "title": "Customer 1", "info": "Active", "press": "navToCustomerDetail" }, { "Type": "sap.m.StandardTile", "icon": "sap-icon://customer", "title": "Customer 2", "info": "Not Active", "press": "navToCustomerDetail" } ] } }

We are using sap.m.ScrollContainer here instead of sap.m.TileContainer, which is deprecated.

In src/views/CustomerDetail.view.xml

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="app.controllers.CustomerDetail"> <Label text="Username"/> <Input value="Awesome Username"/> <Label text="Email"/> <Input value="[email protected]"/> <Button text="Print Details" press="printDetails"/> </mvc:View>

In src/views/CreateCustomer.view.html

<template data-controller-name="app.controllers.CreateCustomer"> <div data-sap-ui-type="sap.m.Label" data-text="Name"></div> <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div> <div data-sap-ui-type="sap.m.Label" data-text="Surname"></div> <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div> <div data-sap-ui-type="sap.m.Label" data-text="Password"></div> <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div> <div data-sap-ui-type="sap.m.Label" data-text="Repeat Password"></div> <div data-sap-ui-type="sap.m.Input" data-placeholder="type here"></div> <div data-sap-ui-type="sap.m.Button" data-text="Save and Go" data-press="navToCustomerDetail"></div> </template>

Update src/pages/Login.page.js

// Now we can use import/export modules (feature of ES6) // Import openui5 modules import Page from "sap/m/Page"; // Create object and export as module to use in future export default new Page("login", { title: "Login", showNavButton: false, // Now content of Page is JSView // We also can use other factory function instead of sap.ui.view() // content: sap.ui.jsview("login-view", "app.views.Login") content: sap.ui.view({ id:"login-view", type:sap.ui.core.mvc.ViewType.JS, viewName:"app.views.Login" }) })

Update src/pages/Customers.page.js

// Now we can use import/export modules (feature of ES6) // Import openui5 modules import Page from "sap/m/Page"; // Create object and export as module to use in future export default new Page("customers", { title: "Customers", showNavButton: true, navButtonPress : function () { app.back(); }, // Now content of Page is JSONView // We also can use other factory function instead of sap.ui.view() // content: sap.ui.jsonview("customers-view", "app.views.Customers") content: sap.ui.view({ id:"customers-view", type:sap.ui.core.mvc.ViewType.JSON, viewName:"app.views.Customers" }) })

Update src/pages/CustomerDetail.page.js

// Now we can use import/export modules (feature of ES6) // Import openui5 modules import Page from "sap/m/Page"; // Create object and export as module to use in future export default new Page("customerDetail", { title: "Customer Detail", showNavButton: true, navButtonPress : function () { app.back(); }, // Now content of Page is XMLView // We also can use other factory function instead of sap.ui.view() // content: sap.ui.xmlview("customer-detail-view", "app.views.CustomerDetail") content: sap.ui.view({ id:"customer-detail-view", type:sap.ui.core.mvc.ViewType.XML, viewName:"app.views.CustomerDetail" }) })

In src/pages/CreateCustomer.page.js

// Now we can use import/export modules (feature of ES6) // Import openui5 modules import Page from "sap/m/Page"; // Create object and export as module to use in future export default new Page("create-customer", { title: "Create Customer", showNavButton: true, navButtonPress : function () { app.back(); }, // Now content of Page is HTMLView // We also can use other factory function instead of sap.ui.view() // content: sap.ui.htmlview("create-customer-view", "app.views.CreateCustomer") content: sap.ui.view({ id:"create-customer-view", type:sap.ui.core.mvc.ViewType.HTML, viewName:"app.views.CreateCustomer" }) })

Looks like everything is ready! Now we can issue gulp default task in command line.

gulp

Content of src folder will be validated via Eslint (.js), compiled (.js) via Babel, copied to root path in-memory, watchers will be started, browser-sync server will be started and our app will be opened in Chromium browser.

In command line we see the following

Jan 06 2018 11 36 59 1 2390426

In browser we see the following

So, it is the end for today. Source code for our project can be found here. Feel free to experiment with source code, because it is only one way to become a developer. And Happy Coding!

Next topic of “You Don’t Know Openui5” series will be soon.

Summary

So, we enhance our simple openui5 application:

  • Inside every pages we use view now: JS, JSON, HTML, XML. Openui5 recommends to use XML views. I like this approach but for some case better to use other types also. So, do not be limited.

Something to read

  • Walkthrough: Step 4: XML Views
  • Walkthrough: Step 5: Controllers
  • Essentials: XML View
  • Essentials: JSON View
  • Essentials: JS View
  • Essentials: HTML View

Previous articles

  1. You Don’t Know Openui5: bootstrapping
  2. You Don’t Know Openui5: app and pages
  3. You Don’t Know Openui5: app as component