Create Your First SAPUI5 Application

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

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

 

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

 

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

<<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 the SAPUI5 JavaScript libraries to use SAPUI5 in an HTML page without having set up the SAPUI5 application development tools in Eclipse.

This page explains how to create and run a simple SAPUI5 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 skip the background information and read the And how to do it in 20 Seconds section below.

Background Information

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

SAPUI5 is implemented in JavaScript. For loading SAPUI5, its bootstrap needs to be included with a tag. The last two attributes select the visual design to apply initially (other choices would be sap_hcb orsap_goldreflection) and the SAPUI5 control library/libraries to use . In your scenario you need to make sure the URL points to a SAPUI5 installation.

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 to Access data across domains for the respective zone, Firefox, Safari or Chrome in the latest version, and you know where you can refer to SAPUI5 on some server.

NoteThe URL in the script tag is pre-filled as https://sapui5.hana.ondemand.com/resources/sap-ui-core.js. This is the URL where the resources are located in the SAP HANA Cloud Platform delivery. Test this URL first and if it does not work, replace this URL with the location of SAPUI5 on your local server.

Proceed as follows:

  2. Right click your desktop and select

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

  3.  New 

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

  4.  Text Document 

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

  5. .
  6. Name the new file, for example "ui5.html", and accept the extension change warning.
  7. Right click the new file and select Edit. Make sure that the file opens in Notepad andnot in MS Word.
  8. Copy and paste the below HTML code. Keep in mind to adapt the SAPUI5 URL
  9. Drag the file to the browser window.
  10. 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:

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

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

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

 .

Product Availability