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

How to Create and Run a Simple SAP HTML5 Application from Scratch within 20 Seconds
SAP COMMUNITY NETWORK scn.sap.com
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 servers 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!",
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

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML5

Enviado por

Direitos autorais:

Formatos disponíveis

SAP COMMUNITY NETWORK scn.sap.

Você também pode gostar