Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Fundo

componentes(Componente) é um componente independente e reutilizável em um aplicativo SAPUI5.

SAPUI5 fornece os dois tipos de componentes a seguir:

• componente sem rosto (aula:sap.ui.core.Component): Nenhum componente de interface significa que não háinterface de usuárioElementos relacionados, usados ​​em cenários que não exigem codificação de elementos de UI;

• Componentes da IU (aula:sap.ui.core.UICcomponent): os componentes da UI são usados ​​para representar elementos da UI na interface do aplicativo, como botões, bem como configurações e metadados correspondentes.

Nota: "Componentes headless" não podem ser adicionados ao contêiner de componentesComponent Containermeio;
sap.ui.core.UICcomponent estende sap.ui.core.Component e adiciona função de renderização de tela baseada em sap.ui.core.Component.

De modo geral, em uma aplicação, um componente completo deve conter duas partes: componentecontroladordocumento(component .js) e o arquivo descritor de descrição do aplicativo (manifest.json)。

A maior vantagem do uso de componentes é que os componentes encapsulados podem ser incorporados de forma flexível emdiferente组件容器（Component Container） meio. Por exemplo, Fiori Launchpad é um contêiner de componentes durante o teste de aplicativos, geralmente também criamos um contêiner de componentes manualmente;

Nota: Ao instanciar o contêiner do componente, o namespace do aplicativo será especificado e o contêiner do componente usará esse caminho para localizar o arquivo do controlador do componente.

2. Exemplo

2.1 Definir arquivo controlador de componente

A seguir está um exemplo de arquivo de controlador de componente Component.js:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
    "use strict";

    return UIComponent.extend("my.namespace.demo.Component", {

        metadata : {
            manifest: "json"
        },

        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);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Neste exemplo, primeiro definimos um novo componente de UI e, em seguida, definimos o manifesto como json no atributo metadados, o que significa que usaremos o arquivo de manifesto no formato JSON para definir a configuração do componente.

Então, na função init, primeiro chamamos a função init da classe pai, depois definimos o modelo JSON e o definimos como o modelo do componente. Este modelo contém um objeto destinatário, que possui um atributo name com o valor World.

2.2 Carregando componentes

Após definir o arquivo do componente, iremos adicioná-lo ao arquivo da aplicaçãoindex.jsarquivo, instancie o contêiner do componente, carregue o componente criado e carregue-o na página.

Aqui está um exemplo de componente de carregamento de arquivo index.js:

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";
    new ComponentContainer({
        name: "my.namespace.demo",
        settings : {
            id : "demo"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12

3. Pratique

Neste exercício do blog, vamos encapsular todos os elementos da UI em um componente independente do arquivo index.html.

Desta forma, sempre que acessarmos um recurso, o faremos em relação ao componente (não em relação ao index.html).

Essa mudança arquitetônica torna o carregamento do aplicativo mais flexível do que a página index.html estática anterior. Por exemplo, ele pode ser incorporado diretamente em um contêiner como o launchpad do SAP Fiori.

3.1 Criar arquivo Component.js

Primeiro, vamoswebappUma inicialComponent.js Arquivo para armazenar as configurações do nosso aplicativo.Quando o componente for instanciado, SAPUI5 chamará automaticamente o componenteinit função.Nosso componente herda da classe basesap/ui/core/UICcomponent, na reescritainitO método deve primeiro chamar a função init da classe base.

A estrutura do arquivo de projeto criada é a seguinte:

O código do Component.js é o seguinte:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";

    return UIComponent.extend("zsapui5.test.Component", {
        init() {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

3.2 Adicionar metadados ao Component.js

A seguir, vamos adicionar a configuração do aplicativo ao arquivo Component.js.

O código Component.js modificado é o seguinte:

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("zsapui5.test.Component", {
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
        },

        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

O arquivo .js do componente modificado consiste em duas partes:元数据部分e chamado quando o componente é inicializado.init函数部分。

A seção de metadados define a visualização raizApp.view.xmlreferência de arquivo para que o componente possa gerenciar a exibição da visualização do aplicativo em vez de diretamente noindex.js Crie e exiba a visualização raiz diretamente no arquivo.A parte de definição de metadados também implementasap.ui.core.IAsyncContentCreationInterface que permite a criação de componentes de forma totalmente assíncrona.

...
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
...
1
2
3
4
5
6
7
8
9

Observe que a interface sap.ui.core.IAsyncContentCreation define implicitamente o rootView do componente e a configuração do roteador como "async": true; discutiremos sua função em um blog subsequente sobre "Roteamento e navegação".

Na seção de função init, fazemos a mesma coisa que antesApp.controller.jsInstancie o modelo de dados como você fez no arquivo do controladoroModele modelo i18ni18nModel。

...
        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Observe que o modelo éVincule diretamente ao componente , não na visualização raiz do componente. No entanto, como os controles aninhados herdam automaticamente o modelo do controle pai, o modelo também está disponível na exibição.

3.3 Ajustar arquivo App.controller.js

Como já implementamos a ligação de objetos de dados e objetos de modelo i18n no arquivo Component.js, vamos escrever antesApp.controller.jsRemoção lógica de arquivos do controlador, ou seja, exclusão onInit 函数e所需的模块引用。

O efeito do código modificado é o seguinte:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
], function (Controller, MessageToast) {
    "use strict";

    return Controller.extend("zsapui5.test.controller.App", {

        onShowHello: function () {
            // read msg from i18n model
            const oBundle = this.getView().getModel("i18n").getResourceBundle();
            const sRecipient = this.getView().getModel().getProperty("/recipient/name");
            const sMsg = oBundle.getText("helloMsg", [sRecipient]);

            // show message
            MessageToast.show(sMsg);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.4 Ajustar arquivo index.js

No arquivo index.js anterior, instanciamos diretamente o objeto de visualização do aplicativoXMLView . Agora, vamos instanciar a visualização por meio do contêiner do componente.

Para fazer isso, substituímos a dependência de visualização adicionada anteriormente pela novasap/ui/core/ComponentContainer dependências. O contêiner do componente atua como o componente pai do componente do aplicativo e manipula suas propriedades e eventos de navegação.

Ao criar uma instância de um contêiner de componente, você precisa especificar o namespace do aplicativo, ou seja,zsapui5.test(Ele aponta para a pasta webapp do projeto, onde estão localizados os arquivos .js do componente).

O efeito do arquivo index.js ajustado é o seguinte:

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "zsapui5.test",
        settings : {
            id : "test"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12
13

3.5 Acordos Gerais

Ao encapsular os componentes de uma aplicação, devemos seguir as seguintes convenções:

• O nome do componente é Component .js
• Os componentes devem estar localizados junto com todos os recursos de UI do aplicativowebapppasta
• Se você quiser usar o arquivo index.html de forma eficiente, ele também está localizado emwebappna pasta

3.6 Operação

Execute o programa ajustado e o efeito será o seguinte:

O aplicativo é executado da mesma forma que antes do ajuste.Mas se passarctrl + shift + alt + sAbra a janela de diagnóstico para visualizar o layout do controle, podemos encontrar as seguintes diferenças.

O ComponentContainer recém-adicionado é o controle pai do XMLView.

4. Resumo

Este artigo apresenta o conceito e método de encapsulamento de componentes no SAPUI5 e demonstra seu uso por meio de um exemplo.