zoukankan      html  css  js  c++  java
  • UI5-文档-4.2-Bootstrap

    在使用SAPUI5做一些事情之前,我们需要加载并初始化它。加载和初始化SAPUI5的过程称为引导。一旦引导完成,我们只需显示一个警告。

    Preview

     

    An alert "UI5 is ready" is displayed

    Coding

    你可以在此查看和下载所有文件Walkthrough - Step 2.

    webapp/index.html

    请注意:SAPUI5是一个JavaScript库,可以从应用程序所在的同一个Web服务器加载,也可以从不同的服务器加载。本教程中的代码示例总是显示相对路径,并假设SAPUI5在本地部署在Web服务器根上下文的resources文件夹中。

    如果SAPUI5部署在服务器上的其他地方,或者您希望使用不同的服务器,那么您需要调整引导程序中的相应路径(here:src="/resources/sap-ui-core.js")在本教程中根据您自己的需求。SAPUI5也可以从内容交付网络(CDN)在https://sapui5.hana.ondemand.com/resources/sap-ui-core.js .

    您可以在教程或测试目的中使用对SAPUI5最新稳定版本的引用,但绝不可将其用于生产用途。在实际的应用程序中,您总是必须显式地指定SAPUI5版本。

    有关CDN的更多信息,请参见Variant for Bootstrapping from Content Delivery Network.

    如果您正在使用SAP Web IDE,您可以右键单击该项目并选择New  HTML5 Application Descriptor参考/resources…作业。这就创建了一个neo-app.json文件,它为该路径配置URL映射。

    <!DOCTYPE html>
    
    <html>
    
       <head>
    
                   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
                   <meta charset="utf-8">
    
                   <title>Walkthrough</title>
    
          <script
    
             id="sap-ui-bootstrap"
    
             src="/resources/sap-ui-core.js"
    
             data-sap-ui-theme="sap_belize"
    
             data-sap-ui-libs="sap.m"
    
             data-sap-ui-compatVersion="edge"
    
             data-sap-ui-preload="async" >
    
          </script>
    
          <script>
    
             sap.ui.getCore().attachInit(function () {
    
                 alert("UI5 is ready");
    
             });
    
          </script>
    
       </head>
    
       <body>
    
          <p>Hello World</p>
    
       </body>
    
    </html>

      ▪第一个<script>标记的src属性告诉浏览器在哪里可以找到SAPUI5核心库——它初始化SAPUI5运行时并加载额外的资源,例如data-sap-ui-libs属性中指定的库。在此步骤中,我们从本地web服务器加载SAPUI5框架,并使用以下配置选项初始化核心模块:

      ▪SAPUI5控件支持不同的主题,我们选择sap_belize作为默认主题.

      ▪我们指定所需的UI库sap.m,其中包含本教程所需的UI控件。

      ▪为了利用SAPUI5的最新功能,我们将兼容性版本定义为edge。

      ▪我们将“bootstrapping”过程配置为异步运行。这意味着出于性能原因,SAPUI5资源可以在后台同时加载。

    当加载所有资源和库时,SAPUI5运行时将触发全局init事件,以表明库已经就绪。侦听此事件以便仅在事件被触发后触发应用程序逻辑,这是一种很好的实践。

    在上面的例子中,我们通过调用sap.ui.getCore()来获得对SAPUI5内核的引用,并通过在内核上调用attachInit(…)来为init事件注册一个匿名回调函数。在SAPUI5中,这类回调函数通常被称为处理程序、侦听器函数或简单的侦听器。核心是单例的,可以从代码中的任何地方访问。

    当SAPUI5的引导完成并显示原生JavaScript警告时,将执行匿名回调函数。

    sap-ui-core.js文件包含了jQuery,这意味着你可以使用jQuery的所有特性。


    Parent topic: Walkthrough

    Previous: Step 1: Hello World!

    Next: Step 3: Controls

    Related Information

    Bootstrapping: Loading and Initializing

    Preload Variant for Bootstrapping

    Compatibility Version Information

    Variant for Bootstrapping from Content Delivery Network

    https://jquery.org/

  • 相关阅读:
    第五周作业
    第四周编程总结
    第六周作业
    2019春第五周作业
    2019年春季学期第四周作业
    2019年春季学期第三周作业
    求最大值及其下标
    7-1
    第十周课程总结
    第九周课程总结&实验报告(七)
  • 原文地址:https://www.cnblogs.com/ricoo/p/10101776.html
Copyright © 2011-2022 走看看