SAP UI5 - Key Components

单元名称称为包装名称,component。 如果包装名称被定义为转给部件构造的参数名称。

根据系统情况,SAP UI5构成部分也可划分。

Cpent side component: This includes,

Control pbraries sap.m, sap.ui.common, etc.

Core Javascript

Test includes HTML and Javascript

Server side component

Theming Generator

Control and apppcation development tools in Ecppse

Resource handler

Structure of a Component

每个构成部分以文件夹的形式代表,并载列各构成部分的名称以及管理构成部分所需的资源。

每个组成部分应包含以下档案:

Component.json 包含设计时间元数据的文档,仅用于设计时间工具。

Component.js 用于界定对元元元数据负责的财产、事件和部件方法。

How to Create a New SAP UI5 Component?

为了建立一个新的组成部分,你必须创造新的倍数。 让我们将此称为button。

接下来是创建component.js file。

之后,您必须扩大“倡议”构成部分基数组别。

后来,为了确定一个新的组成部分,你必须首先从require开始。 声明如下:

// defining a new UI Component
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.commons.Button");
jQuery.sap.declare("samples.components.button.Component");

// new Component
sap.ui.core.UIComponent.extend("samples.components.button.Component", {
   metadata : {
      properties : {
         text: "string"
      }
   }
});

samples.components.button.Component.prototype.createContent = function(){
   this.oButton = new sap.ui.commons.Button("btn");
   return this.oButton;
};

/*
* Overrides setText method of the component to set this text in the button
*/
samples.components.button.Component.prototype.setText = function(sText) {
   this.oButton.setText(sText);
   this.setProperty("text", sText);
   return this;
};

下一步是确定该构成部分。 页: 1

{
   "name": "samples.components.button",
   "version": "0.1.0",
   "description": "Sample button component",
   "keywords": [
      "button",
      "example"
   ],
   "dependencies": {
   }
}

How to Use a Component

为了使用一个部件,你必须把部件装入一个部件箱。 您不能在使用地方的网页上直接使用国际交易日志的组成部分。 采用方法。 另一种方式是将这一构成部分转给构成部分的建筑商。

Using placeAt Method

其中包括在集装箱内添加部件,使用placeAt方法将部件放在该网页上。

var oComp = sap.ui.getCore().createComponent({
   name: "samples.components.shell",
   id: "Comp1",
   settings: {appTitle: "Hello John"}
});

var oCompCont = new sap.ui.core.ComponentContainer("CompCont1", {
   component: oComp
});

oCompCont.placeAt("target1");
//using placeAt method

Using componentContainer Constructor

集装箱含有特定环境,还含有定期控制的生命周期方法。 下面的法典部分说明如何将这一构成部分转给构成部分的建筑商。

var oCompCont2 = new sap.ui.core.ComponentContainer("CompCont2", {
   name: " samples.components.shell",
   settings: {text: "Hello John 1"}
});
oCompCont2.placeAt("target2");