How To Build A SAP HTML5 Application Using MVC With The SAPUI5 Application Development Tool

How to build a SAP HTML5 application using MVC with the SAPUI5 Application Development Tool
Applies to:
UI development toolkit for HTML5 Evaluation version
Summary
This document explains how to create and run a simple SAP HTML5 application from scratch by using the SAPUI5 Application Development Tool. The Eclipse-based tool provides wizards to create application projects and views according to the SAPUI5 Model-View-Controller concept, supports the developer with JavaScript code completion for the SAPUI5 controls and offers an in-place preview. For the sake of simplicity we use the term SAPUI5 instead of the long Product Name UI development toolkit for HTML5. Author: Dr. Silke Arians
Company: SAP AG Created on: 12 November 2012
Author Bio
Silke Arians joined SAP in 1997 and works as an architect for the UI Development Toolkit for HTML5 (SAPUI5).
SAP COMMUNITY NETWORK 2012 SAP AG
scn.sap.com 1
Table of Contents
Prerequisite ......................................................................................................................................................... 3 Create an Application Project for SAPUI5 with a JavaScript View ..................................................................... 3 Result .............................................................................................................................................................. 5 Implement the View and the Controller .............................................................................................................. 6 Testing the SAPUI5 Application ......................................................................................................................... 7 Prerequisite ..................................................................................................................................................... 7 Testing Using Application Preview .................................................................................................................. 7
Refresh ........................................................................................................................................................................ 7 Open in External Browser ............................................................................................................................................ 7
Optional: Testing Using a Java Webcontainer (e.g. Tomcat) ......................................................................... 7 Optional: Create a View ...................................................................................................................................... 8 Prerequisites ................................................................................................................................................... 8 Result .............................................................................................................................................................. 9 Integrate new View.......................................................................................................................................... 9 Behavior .......................................................................................................................................................... 9 Optional: Example Coding .................................................................................................................................. 9 JavaScript view file .......................................................................................................................................... 9 XML view file ................................................................................................................................................... 9 JSON view file ............................................................................................................................................... 10 controller file .................................................................................................................................................. 10 index file for JavaScript example .................................................................................................................. 10 index file for XML example ............................................................................................................................ 10 index file for JSON example ......................................................................................................................... 10 Further Reading ................................................................................................................................................ 10 Copyright........................................................................................................................................................... 11
scn.sap.com 2
Prerequisite
You have installed the SAPUI5 Application Development Tool into your Eclipse, see also chapter SAPUI5 Application Development Tool: tools-updatesite in the file Readme_and_InstallationInformation.html.
Create an Application Project for SAPUI5 with a JavaScript View

1. To start the "New SAPUI5 Application Project" wizard in the Eclipse IDE choose New Other SAPUI5 Application Development Application Project:
2. To specify the project related data: Enter a project name, e.g. MyApplication Optionally choose a location (prefilled from current workspace) To create an initial view, keep the Create an initial view checkbox selected. You can also create the view later on with the "SAPUI5 Application View" wizard see Optional: Create a View. Decide whether target device is Desktop or Mobile, in our case keep the Desktop radio button checked
scn.sap.com 3
3. To specify the view related data: Choose the folder in which the view should be created, in our case keep the default WebContent/myapplication Enter a view name, e.g. myview Choose JavaScript as development paradigm (other options are XML view or JSON view)
scn.sap.com 4
4. Choose Next to see the Confirmation page Before finishing the wizard the summary information about selected data in previous pages is displayed if initial view should be created. With Back-Navigation the entered date could be corrected and displayed/controlled again before application project is created.
Result After finishing the wizard a new dynamic web project is created web.xml and a prefilled index.html is created. web.xml contains settings for ResourceServlet and SimpleProxyServlet (usage of SimpleProxyServlet is restricted to localhost and only intended for testing purposes and not for productive use) installed SAPUI5 UI lib plugins are automatically added to the Java Build Path and added to the deployment assembly to enable local testing SAPUI5 Class Path Container is automatically added to the JavaScript Include Path to enable the JavaScript code completion for SAPUI5 controls page index.html is opened in standard editor inside the JavaScript block of the index.html there is JavaScript code completion for SAPUI5 controls an automatic switch to the J2EE perspective is performed if "Create an initial view" was flagged on the first page of the "SAPUI5 Application Project" wizard, also a view and view controller are created, and the coding to call the view is added to the index.html o inside the chosen SAPUI5 Application and the chosen folder a view is created in the specified folder: <viewname>.view.js in case of JavaScript view <viewname>.view.xml in case of XML view <viewname>.view.json in case of JSON view o also a controller file <viewname>.controller.js is created containing some draft coding o for a JavaScript view there is JavaScript code completion for SAPUI5 controls
scn.sap.com 5
If you rename the view or controller file or move them to a different folder, the coding in the view and controller and in the places where the view is used need to be adapted manually!
Implement the View and the Controller

According to the Model-View-Controller paradigm you distinguish between coding relevant for the user interface and controller coding, in this case to handle an event. 1. To add a button to your view, implement the createContent function in the myview.view.js file as follows:
createContent : function(oController) { var aControls = []; var oButton = new sap.ui.commons.Button({ id : this.createId("MyButton"), text : "Hello JS View" }); aControls.push(oButton.attachPress(oController.doIt)); return aControls; }
2.
To handle the event, implement a function in the controller file Add the following coding to the myview.controller.js file:
doIt : function(oEvent) { alert(oEvent.getSource().getId() + " does it!"); }
After that you can test the SAPUI5 application.
scn.sap.com 6
Testing the SAPUI5 Application

Prerequisite Application Project for SAPUI5 has been created with the SAPUI5 Application Tool, see Create an Application Project for SAPUI5 with a JavaScript View. There are two possibilities for testing the application locally in Eclipse: Testing Using Application Preview To test the new application with the Application Preview on an embedded Jetty server, right-click the HTML file or the project node and choose Run As Web App Preview. Everything is configured automatically. Refresh After changing a file of your SAPUI5 application project, you can refresh the SAPUI5 preview by choosing the Refresh button on the left in the preview editor. Open in External Browser To check the files of your SAPUI5 application project in an external browser (IE/FF), choose Open in external browser on the right in the preview editor. This opens the external browser marked as the default browser on your PC. You can also copy the URL from the text field of the editor to an external browser (this is useful for external browsers other than the default browser).
Optional: Testing Using a Java Webcontainer (e.g. Tomcat) Ensure that the corresponding Server Adapter Eclipse Plugin is installed. To test the new application, right-click the new project, choose Run as > Run on Server, select a server (for example, Tomcat or Jetty), and choose Finish.
scn.sap.com 7
Optional: Create a View

You can add another view to the SAPUI5 Application using the View Wizard. Prerequisites You have created an Application Project for SAPUI5 using the SAPUI5 Application Tool, see Create an Application Project for SAPUI5 with a JavaScript View. 1. To start the "New SAPUI5 Application View" wizard choose New Other SAPUI5 Application Development View:
2.
To specify view related data Choose the SAPUI5 Application Project in which the view should be created Select a folder in which the view should be created (default is WebContent/<application name>) Enter a view name Choose the development paradigm (either JavaScript or XML view or JSON view)
scn.sap.com 8
Result After finishing the wizard a view is created in the specified folder nside the chosen SAPUI5 Application and the chosen folder: o <viewname>.view.js in case of JavaScript view o <viewname>.view.xml in case of XML view o <viewname>.view.json in case of JSON view also a controller file <viewname>.controller.js is created containing some draft coding JavaScript code completion for SAPUI5 controls is available in case of a JavaScript view If you rename the view or controller file or move them to a different folder, the coding in the view and controller and in the places where the view is used need to be adapted manually!
Integrate new View If a new view has been created for an existing SAPUI5 application project the view needs to be manually called either e.g. from index.html page or from another view via view nesting (see Demo Kit under SAPUI5 Runtime -> Programming & API -> Application Development Topics -> Model View Controller Concept). Behavior A view can only be created for a SAPUI5 Application Project (which has been created with the SAPUI5 Application Wizard) and not for other kinds of projects The view name needs to be unique inside the project folder If positioned on a project, the project is defaulted as project for the view if it is a SAPUI5 Application Project, if positioned on a folder, the folder's project is defaulted as project for the view if it is a SAPUI5 Application Project and the folder is defaulted (in other cases the folder is defaulted with WebContent/<application name>) Folder needs to be WebContent/<application name> or sub folder
Optional: Example Coding

Please also refer to Demo Kit under SAPUI5 Runtime -> Programming & API -> Application Development Topics -> Model View Controller Concept for more details and examples on the MVC concept. JavaScript view file
createContent : function(oController) { var aControls = []; var oButton = new sap.ui.commons.Button({ id : this.createId("MyButton"), text : "Hello JS View" }); aControls.push(oButton.attachPress(oController.doIt)); return aControls; }
XML view file

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="myapplication.myview" xmlns:html="http://www.w3.org/1999/xhtml"> <Button id="MyButton" text="Hello XML View" press="doIt"/> </core:View>
scn.sap.com 9
JSON view file

{ "Type":"sap.ui.core.mvc.JSONView", "controllerName":"myapplication.myview", "content": [{ "Type":"sap.ui.commons.Button", "id":"MyButton", "text":"Hello JSON View", "press":"doIt" }] }
controller file
doIt : function(oEvent) { alert(oEvent.getSource().getId() + " does it!"); }
index file for JavaScript example

<script> sap.ui.localResources("myapplication"); var view = sap.ui.view({id: "myview1", viewName:"myapplication.myview", type:sap.ui.core.mvc.ViewType.JS}); view.placeAt("content"); </script> ... <div id="content"></div>
index file for XML example

<script> sap.ui.localResources("myapplication"); var view = sap.ui.view({id: "myview2", viewName:"myapplication.myview", type:sap.ui.core.mvc.ViewType.XML}); view.placeAt("content"); </script> ... <div id="content"></div>
index file for JSON example

<script> sap.ui.localResources("myapplication"); var view = sap.ui.view({id: "myview3", viewName:"myapplication.myview", type:sap.ui.core.mvc.ViewType.JSON}); view.placeAt("content"); </script> ... <div id="content"></div>
Further Reading
More details can be found in Demo Kit under SAPUI5 Development Tools -> Application Development Tools -> Creating an Application Project and -> Creating a View and Testing a SAPUI5 Application.
scn.sap.com 10
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 11

How To Build A SAP HTML5 Application Using MVC With The SAPUI5 Application Development Tool

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 With The SAPUI5 Application Development Tool

Uploaded by

Copyright:

Available Formats

How to build a SAP HTML5 application using MVC with the SAPUI5 Application Development Tool

Company: SAP AG Created on: 12 November 2012

SAP COMMUNITY NETWORK 2012 SAP AG

SAP COMMUNITY NETWORK 2012 SAP AG

Create an Application Project for SAPUI5 with a JavaScript View

SAP COMMUNITY NETWORK 2012 SAP AG

SAP COMMUNITY NETWORK 2012 SAP AG

SAP COMMUNITY NETWORK 2012 SAP AG

Implement the View and the Controller

After that you can test the SAPUI5 application.

SAP COMMUNITY NETWORK 2012 SAP AG

Testing the SAPUI5 Application

SAP COMMUNITY NETWORK 2012 SAP AG

Optional: Create a View

SAP COMMUNITY NETWORK 2012 SAP AG

Optional: Example Coding

XML view file

SAP COMMUNITY NETWORK 2012 SAP AG

JSON view file

index file for JavaScript example

index file for XML example

index file for JSON example

SAP COMMUNITY NETWORK 2012 SAP AG

SAP COMMUNITY NETWORK 2012 SAP AG

You might also like