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

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

Create Your First SAPUI5 Application

<script type="text/javascript">// ADD BUTTONvar mybtn = new sap.ui.commons.Button("btn"); //set text"My Button"); //set press eventfunction(){$("#btn").fadeOut()}); //set place"content");// an alternative, more jQuery-like notation for the same is: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 instancevar 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 belowmyButton.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 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:

src="// create the button instancevar 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 belowmyButton.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​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。