在使用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/

UI5-文档-4.2-Bootstrap的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（17）-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

    在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序.APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML ...

  2. 【LookLook文档】通过less 定制自己的Bootstrap 样式

    闲话 学习还是看文档最快,看文档要仔细点,不可走马观花.感谢 “Bootstrap中文网” 思路 1.早在2015开始接触,由于公司中使用的是easyui 固一直没完全使用Bootstrap,开始接触 ...

  3. Twitter Bootstrap 中文帮助文档

    http://wrongwaycn.github.io/bootstrap/docs/index.htmlTwitter Bootstrap 中文帮助文档 翻译得很不错~~~ 但是,还是要看英文文档 ...

  4. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

  5. Bootstrap FileInput中文API文档

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  6. bootstrap帮助文档

    概览 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属 ...

  7. 使用Adminlite + ASP.NET MVC5(C#) + Entityframework + AutoFac + AutoMapper写了个api接口文档管理系统

    一.演示: 接口查看:http://apidoc.docode.top/ 接口后台:http://apiadmin.docode.top/ 登录:administrator,123456 二.使用到的 ...

  8. Elasticsearch配置详解、文档元数据

    目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 1.Elasticsearch配置文件详解 a. 在上面博客中,我们已经安装并且成功 ...

  9. WebAPI使用多个xml文件生成帮助文档

    一.前言 上篇有提到在WebAPI项目内,通过在Nuget里安装(Microsoft.AspNet.WebApi.HelpPage)可以根据注释生成帮助文档,查看代码实现会发现是基于解析项目生成的xm ...

  10. linkedin开源的kafka-monitor安装文档

    linkedin开源的kafka-monitor安装文档 linkedin 开源的kafka-monitor的安装使用可以参考官方的readme:流程介绍的已经比较清楚,但是还是有一些地方需要修正.让 ...

随机推荐

  1. 寻找高边电流IC

    因为项目需要,无法使用地的电流检测,需要使用高边的电流检测 IC. 搜索的关键字: 高边 电流 高侧 电流 目前找到以下几款: INA199A1,来自参考方案,属于宽电压输入的. INA180B4ID ...

  2. centos7 取消自动锁屏

    CentOS7默认短时间会锁屏,这带来了一定的麻烦,比如看电影时,你不得不时不时的动动鼠标,才能防止锁屏.在网上查了一些资料,也没有找到相关的解决办法,不过最终还是找到了. 1.打开 applicat ...

  3. php实现cookie加密解密

    1.加密解密类 class Mcrypt { /** * 解密 * * @param string $encryptedText 已加密字符串 * @param string $key 密钥 * @r ...

  4. Selenium2+python自动化40-cookie相关操作

    前言 虽然cookie相关操作在平常ui自动化中用得少,偶尔也会用到,比如登录有图形验证码,可以通过绕过验证码方式,添加cookie方法登录. 登录后换账号登录时候,也可作为后置条件去删除cookie ...

  5. C#利用zxing.net操作二维码和条形码

    下载地址:http://zxingnet.codeplex.com/ zxing.net是.net平台下编解条形码和二维码的工具,使用非常方便. 首先下载二进制dll文件,引入工程: 代码: usin ...

  6. 捕获长时间不提交的SQL语句

    /* Formatted on 2014/5/19 17:16:16 (QP5 v5.240.12305.39476) */ SELECT s.sid, s.serial#, ss.sql_text ...

  7. Ice框架简介及Vs2013安装Ice 3.7.0步骤及实例

    ICE是什么? ICE是ZEROC官网的开源通信协议产品,它的全称是:The Internet Communications Engine,翻译为中文是互联网通信引擎,是一个面向对象的中间件,支持C+ ...

  8. 更加灵活的编写控制层的方法____结合eval函数

    结合EVAL函数,我们可以把API放到测试用例那边去,就可以使用一个定位元素,测试用例可以使用多个API 发现eval里面可以拼接str.那么写成这样更顺眼     eval("self.d ...

  9. JSON: JSON 用法

    ylbtech-JSON: JSON 用法 1. JSON Object creation in JavaScript返回顶部 1. <!DOCTYPE html> <html> ...

  10. [UE4]GameMode

    GameMode定义了正在玩的游戏规则,积分等方面,游戏中有些数据和逻辑不适合放在某一个对象身上,这些数据在整个游戏运行中腰持续存在的(比如:积分.排名). 每次游戏一启动,GameMode就被创建, ...