在我们介绍了模型-视图-控制器(MVC)概念的所有三个部分之后，现在我们将讨论SAPUI5的另一个重要的结构方面。

在这一步中，我们将把所有UI资产封装在一个独立于索引的组件中。html文件。组件是SAPUI5应用程序中使用的独立且可重用的部件。无论何时访问资源，我们都将相对于组件(而不是相对于index.html)执行此操作。这种架构上的变化允许我们的应用程序在比静态索引更灵活的环境中使用。html页面，如在周围的容器中，如SAP Fiori launchpad。

Preview

An input field and a description displaying the value of the input field (No visual changes to last step)

Coding

You can view and download all files at Walkthrough - Step 9.

Folder Structure for this Step

在此步骤之后，您的项目结构将如图所示。我们将创建Component.js文件并修改app中的相关文件。

webapp/Component.js (New)

sap.ui.define([

   "sap/ui/core/UIComponent"

], function (UIComponent) {

   "use strict";

   return UIComponent.extend("", {

      init : function () {

         // call the init function of the parent

         UIComponent.prototype.init.apply(this, arguments);

      }

   });

});

我们创建一个初始组件。在webapp文件夹中的js文件将保存我们的应用程序设置。组件的init函数由SAPUI5在实例化组件时自动调用。我们的组件继承自基本类sap.ui.core.UIComponent，必须在重写的init方法中对基类的init函数进行超调用。

webapp/Component.js

sap.ui.define([

   "sap/ui/core/UIComponent",

   "sap/ui/model/json/JSONModel",

   "sap/ui/model/resource/ResourceModel"

], function (UIComponent, JSONModel, ResourceModel) {

   "use strict";

   return UIComponent.extend("sap.ui.demo.walkthrough.Component", {

      metadata : {

         rootView: {

            "viewName": "sap.ui.demo.walkthrough.view.App",

            "type": "XML",

            "async": true,

            "id": "app"

         }

      },

      init : function () {

         // call the init function of the parent

         UIComponent.prototype.init.apply(this, arguments);

         // set data model

         var oData = {

            recipient : {

               name : "World"

            }

         };

         var oModel = new JSONModel(oData);

         this.setModel(oModel);

         // set i18n model

         var i18nModel = new ResourceModel({

            bundleName : "sap.ui.demo.walkthrough.i18n.i18n"

         });

         this.setModel(i18nModel, "i18n");

      }

   });

});

在init函数中，我们实例化了数据模型和i18n模型，就像以前在app控制器中所做的那样。请注意，模型是直接在组件上设置的，而不是在组件的根视图上设置的。但是，由于嵌套控件会自动从其父控件继承模型，因此模型也可以在视图中使用。该Component.js文件现在由两部分组成:新的元数据部分定义了对根视图的引用，以及前面介绍的初始化组件时调用的init函数。正如我们之前所做的，而不是直接在index.html中显示根视图。组件现在将管理app视图的显示。

webapp/controller/App.controller.js

sap.ui.define([

   "sap/ui/core/mvc/Controller",

   "sap/m/MessageToast"

], function (Controller, MessageToast) {

   "use strict";

   return Controller.extend("sap.ui.demo.walkthrough.controller.App", {

      onShowHello : function () {

         // read msg from i18n model

         var oBundle = this.getView().getModel("i18n").getResourceBundle();

         var sRecipient = this.getView().getModel().getProperty("/recipient/name");

         var sMsg = oBundle.getText("helloMsg", [sRecipient]);

         // show message

         MessageToast.show(sMsg);

      }

   });

});

删除onInit函数和所需模块;这现在在组件中完成。现在您已经看到了上面显示的代码。

webapp/index.html

<!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-bindingSyntax="complex"

         data-sap-ui-compatVersion="edge"

         data-sap-ui-preload="async"

         data-sap-ui-resourceroots='{

            "sap.ui.demo.walkthrough": "./"

         }' >

      </script>

      <script>

         sap.ui.getCore().attachInit(function () {

            new sap.ui.core.ComponentContainer({

         name: "sap.ui.demo.walkthrough",

         settings : {

            id : "walkthrough"

         }

            }).placeAt("content");

         });

      </script>

   </head>

   <body class="sapUiBody" id="content">

   </body>

</html>

Conventions

　　在索引页上，我们现在实例化组件，而不是应用程序视图。辅助方法sap.ui.core.ComponentContainer通过搜索组件实例化组件。作为参数传入的名称空间中的js文件。组件自动加载我们在上面定义的根视图并显示它。如果现在调用index.html文件，应用程序应该仍然看起来一样，但现在被打包成一个UI组件.

　　▪组件名为component .js。

　　▪组件与应用程序的所有UI资产一起位于webapp文件夹中。

　　▪index.html文件被有效地使用，它位于webapp文件夹中。

Parent topic: Walkthrough

Previous: Step 8: Translatable Texts

Next: Step 10: Descriptor for Applications

Related Information

Components

API Reference:sap.ui.core.mvc.ViewType

Samples:sap.ui.core.mvc.ViewType

UI5-文档-4.9-Component Configuration的更多相关文章

  1. Ehcache 3.7文档—基础篇—XML Configuration

    你可以使用xml配置创建CacheManager,根据这个schema definition ( http://www.ehcache.org/documentation/3.7/xsds.html# ...

  2. SpringBoot系列: 使用 Swagger 生成 API 文档

    SpringBoot非常适合开发 Restful API程序, 我们都知道为API文档非常重要, 但要维护好难度也很大, 原因有: 1. API文档如何能被方便地找到? 以文件的形式编写API文档都有 ...

  3. springBoot Swagger2 接口文档生成

    // 生成配置类 package com.irm.jd.config.swagger; import org.springframework.context.annotation.Bean; impo ...

  4. spring整合mybatis错误：Caused by: org.xml.sax.SAXParseException; lineNumber: 5; columnNumber: 62; 文档根元素 "mapper" 必须匹配 DOCTYPE 根 "configuration"。

    运行环境:jdk1.7.0_17+tomcat 7 + spring:3.2.0 +mybatis:3.2.7+ eclipse 错误:Caused by: org.xml.sax.SAXParseE ...

  5. BooStrap4文档摘录 2 Content, Component

    Content Reboot:从新写了主要元素的排列. 本章讲了各种元素及其相关的类. ⚠️ 文档左上角有搜索栏. Components Alert✅ Badge✅ Button✅和Button gr ...

  6. SpingMVC 核心技术帮助文档

    声明:本篇文档主要是用于参考帮助文档,没有实例,但几乎包含了SpringMVC 4.2版本的所有核心技术,当前最新版本是4.3,4.2的版本已经经是很新的了,所以非常值得大家一读,对于读完这篇文档感觉 ...

  7. Spring Boot文档阅读

    原因之初 最初习惯百度各种博客教程,然后跟着操作,因为觉得跟着别人走过的路走可以少走很多弯路,省时间.然而,很多博客的内容并不够完整,甚至错误,看多了的博客甚至有千篇一律的感觉.此外,博客毕竟是记载博 ...

  8. 分享一个集成在项目中的REST APIs文档框架swagger

    1 为什么是使用swagger? 1-1 当后台开发人员开发好接口,是不是还要重新书写一份接口文档提给前端人员,当然对于程序员最不喜欢的就是书写文档(当然文档是必须的,有利于项目的维护) 1-2 当后 ...

  9. springmvc+swagger构建Restful风格文档

    本次和大家分享的是java方面的springmvc来构建的webapi接口+swagger文档:上篇文章分享.net的webapi用swagger来构建文档,因为有朋友问了为啥.net有docpage ...

  10. Unity文档阅读 第一章 入门

    Before you learn about dependency injection and Unity, you need to understand why you should use the ...

随机推荐

  1. Opengl研究4.0 走样与反走样

    Opengl研究4.0 走样与反走样 DionysosLai(906391500@qq.com) 2014-06-25          走样与反走样,也叫混淆与反混淆.所谓走样,是因为使用离散量(像 ...

  2. Linux 下安装 Redis server

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/defonds/article/details/30047611         本文简介了 Linu ...

  3. NOSQL之MONGODB

    MongoDB 基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案,它是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富, ...

  4. 4.图像sensor的特性和驱动解析

    修改 摄像头SDK中支持的sensor需要做的事 例如:ar0130 --> ov9712 1.修改加载load3518e脚本的参数 vi /etc/profile ./load3518e -i ...

  5. asterisk channel driver dev ref

    入口函数load_module    load_config    ast_channel_register console_tech    ast_cli_register_multiple     ...

  6. Debug---Eclipse断点调试基础

    1.进入debug模式(基础知识列表)1.设置断点 2.启动servers端的debug模式 3.运行程序,在后台遇到断点时,进入debug调试状态 ========================= ...

  7. linux 信号处理 五 (示例)

    [摘要]本文分析了Linux内核对于信号的实现机制和应用层的相关处理.首先介绍了软中断信号的本质及信号的两种不同分类方法尤其是不可靠信号的原理.接着分析了内核对于信号的处理流程包括信号的触发/注册/执 ...

  8. Android应用程序如何调用shell脚本（一）

    转自: Android应用程序如何调用shell脚本(一) 一般来说, Android 下的应用程序可以“直接”得到的最大的权限为 system ,但是如果我们需要在程序中执行某些需要 root 权限 ...

  9. 【FusionCharts学习-2】第一个FusionCharts程序

    获取资源 到官网:http://www.fusioncharts.com/download/ 获取FusionCharts文件: 目录结构: js目录下的文件: 创建项目 1. 项目名称:Fusion ...

  10. java web程序 登陆验证页面 4个页面人性化设置

    到这里,快期末考试了,老师不讲课,我心里有苦不想说,也许没有考虑到老师的感受,让老师难堪了 但是我的行为已不再是我可以做的了.不可能了,我只是职业性的机械的做事了. 思路: 1.第一个是form表单, ...