How To Build A SAP HTML5 Application Using MVC in 22 Seconds

How to Build a SAP HTML5 Application using MVC in 22 Seconds
Applies to:
SAP UI Development Toolkit for HTML5 Evaluation version
Summary
This document explains how to define a View and a Controller and use them together with a Model in a simple UI5 application - from scratch within 22 seconds (with some practice). Author: Tim Back Company: SAP AG Created on: 6 February 2012
Author Bio
Tim Back joined SAP in 1997 and works as a product owner for the SAP UI Development Toolkit for HTML5 and an architect in the UI area..
SAP COMMUNITY NETWORK 2012 SAP AG
scn.sap.com 1
Table of Contents
How to build a SAP HTML5 application using MVC in 22 seconds.................................................................... 3 Explanation ..................................................................................................................................................... 3
Defining a Controller .................................................................................................................................................. 3 A Controller is a JavaScript component with a namespaced name that implements a couple of methods: ................. 3 Defining a View ............................................................................................................................................................ 3 Using View and Controller in an Application ................................................................................................................ 4 Using a Model - Adding the "M" to "MVC" .................................................................................................................. 5
And how to do it in 22 seconds? ................................................................................................................... 5 Result ............................................................................................................................................................ 7 Next Steps ..................................................................................................................................................... 7 Copyright............................................................................................................................................................. 8
scn.sap.com 2
How to build a SAP HTML5 application using MVC in 22 seconds

This page explains how to define a View and a Controller and use them together with a Model in a simple UI5 application - from scratch within 22 seconds (with some practice). If you are interested in exactly doing this without reading too much, you can jump right down to the respective section on this page. For the sake of simplicity we use the term SAPUI5 or UI5 instead of the long Product Name SAP UI Development Toolkit for HTML5
Explanation This page assumes you have seen and understood the SAPUI5 in 20 seconds example, so you are familiar with how UI5 is loaded, how controls are created and how they are added to the HTML page. Thus section therefore only explains the MVC-specific parts. It is also assumed that you have to either have unpacked the sapui5_static.zip of the download to your webserver's documents folder or copied sapui5.war to your web servers Java Web Container as a prerequisite to running an SAPUI5 application. Views can be defined as XML, but as this requires separate files and we want to keep the example simple, this page uses a "JsView", which goes the "old-fashioned" way of creating a UI programmatically. Defining a Controller
A Controller is a JavaScript component with a namespaced name that implements a couple of methods: // define a new (simple) Controller type sap.ui.controller("my.own.controller", {
// implement an event handler in the Controller doSomething: function() { alert("Hello World!"); } }); The method implemented here will be attached to an event in the View. There are also pre-defined lifecycle methods that are called when the controller is instantciated, destruction and View rendering. Defining a View A View can be defined in XML, but let's use JavaScript in our example to be able to do it right inside the HTML page: // define a new (simple) View type sap.ui.jsview("my.own.view", {
scn.sap.com 3
// define the (default) controller type for this View getControllerName: function() { return "my.own.controller"; },
// defines the UI of this View createContent: function(oController) { // button text is bound to Model, "press" action is bound to Controller's event handler return new sap.ui.commons.Button({text:'{actionName}',press:oController.doSomething}); } });
When defining a View, the sap.ui.jsview call can have two parameters: the namespaced View name and the View implementation. The View implementation has two special methods: getControllerName: returns the namespaced name of the Controller that belongs to this View
(good to keep them equal) createContent: returns the View UI as a tree of UI5 controls (could also be an array of such trees)
In this case the View is very simple, just consisting of one Button. Note how the Button's "press" event and the Controller's event handler method "doSomething" are connected! Also note how the Button text is bound to a Model (which we will add later). Both, View and Controller are normally created within separate files. They can be reused by any application. Using View and Controller in an Application An application may want to instantiate a certain View. To do so, it also uses sap.ui.jsview, but with just the View name (without implementation): // instantiate the View var myView = sap.ui.jsview("my.own.view"); The View "myView" is a technically a regular UI5 Control and you can do with it whatever you usually do with controls. Like putting it into a layout, putting it into a page, etc. The latter is actually done at the end of the script block: // put the View onto the screen myView.placeAt('content'); You may be missing the Controller, but it's there: Loaded, initialized and bound to the View automatically when it was instantiated. In case the application needs access to the Controller instance, it can just say myView.getController().
scn.sap.com 4
Using a Model - Adding the "M" to "MVC" The "M" is still missing, so let's create a simple JSON model. // create some dummy JSON data var data = { actionName: "Say Hello" };
// create a Model and assign it to the View var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(data); myView.setModel(oModel); This is standard data binding - the only new thing is how the Model is set on the View. Well, actually this is not new: Models in UI5 can be set on any control, to be valid within this control and all its children. As the View is a regular control, it is just standard functionality to set the Model on the View. Equally, the Model could be set on the Core and still be available in the View. That's it. And how to do it in 22 seconds? Assumption for these instructions to work exactly as described: you have a Windows Computer, Internet Explorer 8 (or newer), FireFox 3.6 (or newer) or Safari 5.1. 1. 2. 3. 4. 5. 6. 7. Right-click your desktop, select "New" "Text Document" Name the new file "phoenix.html" and accept the extension change warning Right-click the new file and select "Edit". Copy&Paste the below HTML code and save the file (e.g. press Ctrl-S) Correct the URL to the SAPUI5 library Drag the file to this browser window End. Nothing else. That was it.
<!DOCTYPE html> <html><head> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript' src='/sapui5/resources/sap-ui-core.js' data-sap-ui-theme='sap_goldreflection' data-sap-ui-libs='sap.ui.commons'></script>
<script>
scn.sap.com 5
/*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/
// define a new (simple) Controller type sap.ui.controller("my.own.controller", {
// implement an event handler in the Controller doSomething: function() { alert("Hello World!"); } });
// define a new (simple) View type // ...alternatively this can be done in an XML file without !JavaScript! sap.ui.jsview("my.own.view", {
// define the (default) controller type for this View getControllerName: function() { return "my.own.controller"; },
// defines the UI of this View createContent: function(oController) { // button text is bound to Model, "press" action is bound to Controller's event handler return new sap.ui.commons.Button({text:'{actionName}',press:oController.doSomething}); } });
/*** THIS IS THE "APPLICATION" CODE ***/
// instantiate the View
scn.sap.com 6
var myView = sap.ui.jsview("my.own.view");
// create some dummy JSON data var data = { actionName: "Say Hello" };
// create a Model and assign it to the View var oModel = new sap.ui.model.json.JSONModel(); oModel.setData(data); myView.setModel(oModel);
// put the View onto the screen myView.placeAt('content');
</script>
</head> <body class='sapUiBody'> <div id='content'></div> </body> </html>
Result If you followed the steps above you should now see a button that pops up an alert box when clicked. While this is no big deal and could also be achieved in a one-liner, the above steps outline how you can structure big applications and create re-use components, in order to do development in distributed teams.
Next Steps You could now make the View UI more complex add more event handlers to the Controller use an OData model to access real backend data
scn.sap.com 7
Copyright
Copyright 2012 SAP AG. All rights reserved. No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. Oracle is a registered trademark of Oracle Corporation. UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Oracle Corporation. JavaScript is a registered trademark of Oracle Corporation, used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.
scn.sap.com 8

How To Build A SAP HTML5 Application Using MVC in 22 Seconds

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Build A SAP HTML5 Application Using MVC in 22 Seconds

Uploaded by

Copyright:

Available Formats

How to Build a SAP HTML5 Application using MVC in 22 Seconds

SAP COMMUNITY NETWORK 2012 SAP AG