在我们介绍了模型-视图-控制器(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. 使用VI编辑器在Linux下编写Java文件

    1.cd 文件名称.进入一个文件夹下 2.vi 文件名称,新建一个文件(如此文件已存在则打开) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWlfc3N ...

  2. mibox connections

    tcp        0      0 :::52549                :::*                    LISTEN      4398/net.myvst.v2:mt ...

  3. golang 如何判断变量的类型

    本文介绍两种用于判断变量类型的方式. 方法一 package main import ( "fmt" ) func main() { v1 := "123456" ...

  4. Package rdkafka was not found in the pkg-config search path.

    问题 在使用confluent-kafka-go 时遇到如下问题: $ go build t.go # pkg-config --cflags rdkafka Package rdkafka was ...

  5. iotBaidu问题小结

    1.后台程序不能正常运行: d:\>java -jar MqttService.jar Exception in thread "main" java.lang.Securi ...

  6. css-inline-block和float的布局二者择其一？

    几个月前,带着不甘和忐忑毅然决然的在亚马逊离职了,当时不知道对我来说是好是坏,现在看来,当初的选择还是蛮不错的.感觉在亚马逊的几个月貌似接触最多的就是wiki和tt了,怀着对技术热忱离开,拒绝了腾讯, ...

  7. wxWidgets：wxApp概述

    在我们编写wxWidgets应用程序的时候,我们不需要为之定义一个main函数:不过我们需要实现wxApp派生类的一个成员函数OnInit,它的地位大致等价于一般C++程序中的main. 一般来说On ...

  8. Zabbix监控windows的CPU利用率和其他资源

    zabbix的WEB端--配置-模板--Template OS Windows--项目--创建项目 名称:UserPerfCountercpu 键值:UserPerfCountercpu 数据类型:数 ...

  9. springMVC学习(11)-json数据交互和RESTful支持

    一.json数据交互: json数据格式在接口调用中.html页面中较常用,json格式比较简单,解析还比较方便. 比如:webservice接口,传输json数据. springMVC进行json交 ...

  10. Access restriction: The type Resource is not accessible due to restriction on required library

    方法一: 全局属性Project>preferences>java>Compiler>Errors/Warnings>把右侧的[Deprecated and restri ...