HTML5

SAP COMMUNITY NETWORK scn.sap.com

© 2012 SAP AG 1

How to Create and Run a Simple

SAP HTML5 Application from

Scratch within 20 Seconds

Applies to:

SAP UI Development Toolkit for HTML5 – Evaluation version

Summary

This Document explains how to create and run a simple SAP HTML5 application from scratch within twenty seconds (with some practice… the current record is 16 seconds). If you are interested in exactly doing this without reading too much, you can jump right down to the next chapter 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”

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..

http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/HelloWorld#Andhowtodoitin20seconds

http://vesapui5.dhcp.wdf.sap.corp:1080/trac/sapui5/wiki/HelloWorld#Andhowtodoitin20seconds

How to Create and Run a Simple SAP HTML5 Application from Scratch within 20 Seconds


© 2012 SAP AG 2

Table of Contents

Explanation ......................................................................................................................................................... 3

And how to do it in 20 seconds?..................................................................................................................... 4

Result ............................................................................................................................................................... 6

Next Steps .......................................................................................................................................................... 6

Copyright............................................................................................................................................................. 7



© 2012 SAP AG 3

Explanation

As SAP offers a client-side UI library (i.e.: runs in the browser), a SAP HTML5 application is typically an HTML page.

To run this example 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 server’s Java Web Container.

UI5 is implemented in JavaScript, so for loading UI5, its bootstrap just needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be "sap_platinum" or "sap_hcb") and the UI control library/libraries to use ("sap.ui.ux3" would be another one):

<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>

SAPUI5 UI elements are created and modified programmatically, just like in Java/Swing, in Microsoft .NET or in other JavaScript UI libraries like Dojo or YahooUI:

// create the button instance

var myButton = new sap.ui.commons.Button("btn");

// set properties, e.g. the text (there is also a shorter way of setting several

properties)

myButton.setText("Hello World!");

// attach an action to the button's "press" event (use jQuery to fade out the

button)

myButton.attachPress(function(){$("#btn").fadeOut()});

There is also a shorthand notation based on JSON for setting multiple properties; you could also write:

var myButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello

Tooltip!"});

Finally you need to tell UI5 where the UI control should be placed. You can just give the ID of an element in the page to do so:

// place the button into the HTML element defined below

myButton.placeAt("uiArea");

This element must exist somewhere in the HTML page, so you need to put the following code to the desired place within the <body>:

<div id="uiArea"></div>

An alternative way to create and initialize the control in a more jQuery-style manner is also available:

$(function(){

$("#uiArea").sapui("Button", "btn", {

text:"Hello World!",

http://de.wikipedia.org/wiki/JavaScript_Object_Notation

© 2012 SAP AG 4

press:function(){$("#btn").fadeOut();}

});

});

As a minor detail, the <body> should have a certain CSS class, so the page background and some other styles are properly set:

<body class="sapUiBody">

And a certain meta-Tag at the beginning of the <head> ensures that Internet Explorer 8+ uses its most-standards-compliant rendering mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

And how to do it in 20 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. Right-click your desktop, select "New" → "Text Document"

2. Name the new file e.g. "ui5.html" and accept the extension change warning

3. 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. Drag the file to this browser window

6. End. Nothing else. That was it.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>SAPUI5 in 20 Seconds</title>



<script id="sap-ui-bootstrap"

type="text/javascript"

src="http://veui5infra.dhcp.wdf.sap.corp:8080/sapui5/resources/sap-ui-

core.js"

data-sap-ui-theme="sap_goldreflection"

data-sap-ui-libs="sap.ui.commons"></script



<script>

// create the button instance

var myButton = new sap.ui.commons.Button("btn");

© 2012 SAP AG 5

// set properties, e.g. the text (there is also a shorter way of setting

several properties)

myButton.setText("Hello World!");

// attach an action to the button's "press" event (use jQuery to fade

out the button)

myButton.attachPress(function(){$("#btn").fadeOut()});

// place the button into the HTML element defined below

myButton.placeAt("uiArea");

// an alternative, more jQuery-like notation for the same is:

/*

$(function(){

$("#uiArea").sapui("Button", "btn", {

text:"Hello World!",

press:function(){$("#btn").fadeOut();}

});

});

*/

</script>

</head>

<body class="sapUiBody">



<div id="uiArea"></div>

</body>

</html>



© 2012 SAP AG 6

Result

If you followed the steps above you should now see a button like this which fades out when clicked:

Next Steps

You could now…

…add more buttons

…let them do trickier things

…use a different visual theme

… find out about further properties and events of button controls and use those

… find out about further controls and add them



© 2012 SAP AG 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.

HTML5

Documents

Transcript of HTML5