Create Your First SAPUI5 Application_SAP刘梦_新浪博客

Create Your FirstSAPUI5Application

<<span style="color:#3f7f7f">script type="text/javascript">
// ADD BUTTON
var mybtn = new sap.ui.commons.Button("btn");

//set text
"My Button");

//set press event
function(){$("#btn").fadeOut()});

//set place
"content");
// an alternative, more jQuery-like notation for the same is:
</<span style="color:#3f7f7f">script>

参考资料：

You can include a bootstrap to theSAPUI5JavaScript libraries to useSAPUI5in an HTML page without having set up theSAPUI5application development tools in Eclipse.

This page explains how to create and run a simpleSAPUI5application 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 skip the background information and read theAnd how to do it in 20 Secondssection below.

Background Information

AsSAPUI5is a client-side web UI library meaning that it runs in a browser, aSAPUI5application typically is composed of an HTML page and, if required, many more files.

SAPUI5is implemented in JavaScript. For loadingSAPUI5, its bootstrap needs to be included with atag. The last two attributes select the visual design to apply initially (other choices would besap_hcborsap_goldreflection) and theSAPUI5control library/libraries to use . In your scenario you need to make sure the URL points to aSAPUI5installation.

src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"
>
SAPUI5 UI elements are created and modified programmatically:
// create the button instance
var oMyButton = 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 oMyButton = new sap.ui.commons.Button({text:"Hello World!",tooltip:"Hello Tooltip!"});
Finally you need to tell SAPUI5 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 

 : 





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!",
press:function(){$("#btn").fadeOut();}
});
});

As a minor detail, the

should have a certain CSS class, so the page background and some other styles are properly set:

There are two meta tags at the beginning of the

: The first meta tag is used to ensure that Internet Explorer 8+ uses its most standard-compliant rendering mode. The second meta tag is used to let all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file):

And How to do it in 20 Seconds

Assumption for these instructions to work exactly as described: You have a Windows Computer (other OS will work similarly), Internet Explorer 9+ with security option set toAccess data across domainsfor the respective zone, Firefox, Safari or Chrome in the latest version, and you know where you can refer toSAPUI5on some server.

NoteThe URL in the script tag is pre-filled ashttps://sapui5.hana.ondemand.com/resources/sap-ui-core.js. This is the URL where the resources are located in theSAP HANA Cloud Platformdelivery. Test this URL first and if it doesnotwork, replace this URL with the location ofSAPUI5on your local server.

Proceed as follows:

Right click your desktop and select

New

Text Document

.Name the new file, for example "ui5.html", and accept the extension change warning.Right click the new file and selectEdit. Make sure that the file opens in Notepad andnotin MS Word.Copy and paste the below HTML code. Keep in mind to adapt theSAPUI5URLDrag the file to the browser window.That was it.

src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons">



// 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()});

// place the button into the HTML element defined below
myButton.placeAt("uiArea");

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

Result

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

Next Steps

You can now do the following:

Add more buttons.Let them do trickier things.Find out about further properties and events of button controls and use those..

Related Content

The following content is not part of SAP product documentation. For more information, see the following​​disclaimer​​

.

Product Availability

​​Product Availability Matrix (PAM)​​ ​​PAM Documentation​​ Support Information​​ Search for SAP Notes and SAP Knowledge Base Articles​​