80fdadd3-9937-2f10-83b4-adefeaded53b

8/12/2019 80fdadd3-9937-2f10-83b4-adefeaded53b

1/8

SAP COMMUNITY NETWORK scn.sap.com 2012 SAP AG 1

How to Build a SAP HTML5Application using MVC in 22Seconds

Applies to:SAP UI Development Toolkit for HTML5 Evaluation version

SummaryThis document explains how to define a View and a Controller and use them together with a Model in asimple UI5 application - from scratch within 22 seconds (with some practice).

Author: Tim Back

Company: SAP AGCreated on: 6 February 2012

Author BioTim Back joined SAP in 1997 and works as a product owner for the SAP UI DevelopmentToolkit for HTML5 and an architect in the UI area..


2/8

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


Table of ContentsHow 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


3/8



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 simpleUI5 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 therespective section on this page.

For the sake of simplicity we use the term SAPUI5 or UI5 instead of the long Product Name SAP UIDevelopment Toolkit for HTML5

Explanation

This page assumes you have seen and understood the SAPUI5 in 20 seconds example, so you are familiarwith 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 yourwebserver'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 Controlle r

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 lifecyclemethods 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 theHTML page:

// define a new (simple) View type

sap. ui . jsview ( "my.own.view" , {
http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/HelloWorldhttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#DefiningaControllerhttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#DefiningaControllerhttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/HelloWorldhttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22seconds


4/8



// 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 toController'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 andthe 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 suchtrees)

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 boundto 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 justthe 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 automaticallywhen it was instantiated. In case the application needs access to the Controller instance, it can just say myView.getController() .


5/8



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 isnot new: Models in UI5 can be set on any control, to be valid within this control and all its children. As theView is a regular control, it is just standard functionality to set the Model on the View. Equally, the Modelcould 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, InternetExplorer 8 (or newer), FireFox 3.6 (or newer) or Safari 5.1.

1. Right-click your desktop, select "New" "Text Document"2. Name the new file "phoenix.html" and accept the extension change warning3. Right-click the new file and select "Edit".4. Copy&Paste the below HTML code and save the file (e.g. press Ctrl-S)5. Correct the URL to the SAPUI5 library6. Drag the file to this browser window7. End. Nothing else. That was it.

test
http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#UsingaModel-AddingtheMtoMVChttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Andhowtodoitin22secondshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#UsingaModel-AddingtheMtoMVC


6/8



/*** 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 ControllerdoSomething : 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 toController's event handler

return new sap.ui.commons.Button({text : '{actionName}' ,press : oController.doSomething});

}

});

/*** THIS IS THE "APPLICATION" CODE ***/

// instantiate the View


7/8



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' );

Resul t

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 canstructure 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 O Data model to access real backend data
http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Resulthttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#NextStepshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#NextStepshttp://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/MVCIn22Seconds#Result


8/8



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 SystemsIncorporated 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 ofCitrix 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 mentionedherein 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, andother Business Objects products and services mentioned herein as well as their respective logos are trademarks or registeredtrademarks 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 documentserves 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 ("SAPGroup") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors oromissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in theexpress warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting anadditional warranty.

80fdadd3-9937-2f10-83b4-adefeaded53b

Documents

Transcript of 80fdadd3-9937-2f10-83b4-adefeaded53b