sapui5开始使用sapui5


备注

什么是SAPUI5?

基于上述理论,SAP推出了基于HTML5的开发工具包SAPUI5,它鼓励一致的用户体验。通过利用上述理论,使用SAPUI5构建的应用程序可以跨浏览器和设备进行响应 - 它们可以在智能手机,平板电脑和台式机上运行。 UI控件自动适应每个设备的功能。为此,SAPUI5提供了强大的开发概念,可以使用基于浏览器的消费级业务应用程序创建应用程序。简而言之,UI5是一种基于JavaScript,CSS和HTML5的客户端UI技术。服务器可用于部署应用程序,存储SAPUI5库以及连接到数据库。根据您使用SAPUI5的环境,库和您的应用程序存储在SAP HANA Cloud Platform或其他应用程序服务器上。访问应用程序业务数据的首选方法是使用oData模型。

用于HTML5的SAP UI开发工具包是一种用户界面技术,用于构建和调整客户端应用程序。运行时是一个客户端HTML5呈现库,具有丰富的标准和扩展控件以及轻量级编程模型。

有两种风格, OpenUI5 (开源版本)和SAPUI5(原始许可版本)。两者都具有相同的技术核心机制,统称为UI5。

UI5提供了许多功能,使您可以轻松创建和扩展最先进的用户界面:

  • 它支持RIA,例如基于JavaScript的客户端功能
  • 它支持CSS3,它允许您以有效的方式使主题适应您公司的品牌
  • 它基于代码和应用程​​序级别的内置可扩展性概念
  • 它使用开源jQuery库作为基础
  • 它完全支持SAP产品标准
  • 它符合OpenAjax,可以与标准JavaScript库一起使用
  • 它提供了广泛的响应控制,可以轻松创建独立于平台的用户界面
  • 它提供完整的Translation / i18n支持
  • 它采用基于广泛的用户体验研究的Fiori Design语言

您可以在此处开始第一个UI5页面。另外,有关更多信息,请参阅相应SDK参考中提供的开发人员指南和API参考: OpenUI5 SDKSAPUI5 SDK 。演示应用程序可以在这里找到

你好,世界

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 Hello World</title>
    <!-- Load SAPUI5 , theme and control library -->
    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m"></script>

    <!-- Create a UI5 button and place it onto the page -->
    <script>
            new sap.m.Button({
                text:"Hello world",
                press: function(){
                    alert("hello SapUI5!");
                }
            }).placeAt("content");
     </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
 

你好,世界

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-xx-bindingSyntax="complex"
            data-sap-ui-compatVersion="1.24"
            data-sap-ui-resourceroots='{"<projectname>": "./"}'>
    </script>
    <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

    <script>
    sap.ui.getCore().attachInit( function () {
        new sap.ui.core.ComponentContainer ("<ComponentId(can be anyname you wish)>",{
            height : "100%",
            name : "<name of component>"
        }).placeAt('content');
    });
    </script>

</head>
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
 

将引导代码放在attachInit中,因为它将在加载核心库后触发

你好,世界!

我们首先为应用程序创建一个HTML页面。我们在那里定义了元标记,一个用于加载SAPUI5库的脚本标记,以及一个用于应用内容的占位符。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <title>Hello World App</title>
    <script src="http://<<server>>:<<port>>/resources/sap-ui-core.js"
        id="sap-ui-bootstrap"
        data-sap-ui-theme="sap_bluecrystal"
        data-sap-ui-libs="sap.m">
    </script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
 

根据您的安装调整资源所在的路径(<>:<>)。对于OpenUI5,您可以使用src =“ https://openui5.hana.ondemand.com/resources/sap-ui-core.js ”。例如,要访问SAP HANA Cloud Platform上的SAPUI5,请使用src =“ https://sapui5.hana.ondemand.com/resources/sap-ui-core.js ”。