App View e Controller para inicializar o aplicativo UI5

Prefácio – Este post faz parte do Programas UI5 série.

Introdução

Quando criamos um aplicativo UI5 em branco, ele é criado com uma visualização e um controlador em branco. Recomenda-se criar uma visualização de aplicativo em cima dessas visualizações individuais para páginas, para que possa atuar como uma visualização raiz para outras pessoas. A SAP recomenda ter este arquivo como uma visão raiz.

App View e Controller para inicializar o aplicativo UI5Como desenvolvedor, você pode ter estas perguntas em mente:

  1. Por que o App View é necessário na UI5?
    Resp.
    É um elemento raiz do aplicativo móvel UI5. Ele adiciona certas tags de cabeçalho que são importantes para aplicativos móveis. Além disso, ele fornece recursos de navegação.
  2. O que acontecerá se nenhuma visualização de aplicativo for adicionada?
    Resp.
    Você pode ter problemas durante a navegação ou durante a visualização móvel.
  3. O que tudo o que você pode fazer com a ajuda da visualização do aplicativo?
    Resp.
    Você pode modificar a cor de fundo, a imagem de fundo, definir o ícone inicial, definir o carregador de tela inicial com a ajuda da visualização do aplicativo.

Visualização do aplicativo

Você pode simplesmente adicionar um novo UI5 View clicando com o botão direito do mouse no nível do projeto e nomeando-o como "App". Isso adicionará uma visualização e um controlador nas respectivas pastas com o nome “App.view.xml” e “App.controller.js”. Lembre-se, não precisamos de nenhum roteamento e navegação para a visualização do aplicativo, portanto, você deve excluí-lo se for criado automaticamente.
Adicione o código fornecido no arquivo de visualização:

    
    /busy}"
         busyIndicatorDelay="{appView>/delay}"/>
    

Controlador de aplicativos

Adicione o seguinte código no arquivo do controlador:

sap.ui.define([ "sap/ui/core/mvc/Controller" ], function (Controller) { "use strict"; return Controller.extend("TestApp.controller.App", { onInit: function () { } }); });

Alterações de manifesto

Dentro do arquivo manifest, modifique o objeto “rootView” conforme mostrado abaixo:

"rootView": { "viewName": "TestApp.view.App", "type": "XML", "id": "app" }

Também defina o controlId como “app” na configuração de roteamento.

Agora, você adicionou com sucesso uma visualização App Root em seu aplicativo UI5 personalizado.

Código de manifesto completo

{
    "_version": "1.12.0",
    "sap.app": {
        "id": "testApp",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "1.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "sourceTemplate": {
            "id": "servicecatalog.connectivityComponentForManifest",
            "version": "0.0.0"
        },
        "dataSources": {
            "oDataService": {
                "uri": "<Your Service Name>",
                "type": "OData",
                "settings": {
                    "odataVersion": "2.0",
                    "localUri": "<local Metadata>"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": false,
        "dependencies": {
            "minUI5Version": "1.65.6",
            "libs": {
                "sap.ui.layout": {},
                "sap.ui.core": {},
                "sap.m": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "testApp.i18n.i18n"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "ODataModel": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Request",
                    "json": true,
                    "defaultUpdateMethod": "PUT",
                    "useBatch": false
                },
                "dataSource": "oDataService",
                "preload": true
            }
        },
        "resources": {
            "css": [{
                "uri": "css/style.css"
            }]
        },
        "rootView": {
            "viewName": "testApp.view.App",
            "type": "XML",
            "id": "app"
        },
        "routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewPath": "testApp.view",
                "controlId": "app",
                "bypassed": {
                    "target": ["NotFound"]
                }
            },
            "routes": [{
                "name": "Tab_1",
                "pattern": "",
                "target": ["masterTarget", "Tab_1"]
            }, {
                "name": "Tab_2",
                "pattern": "Tab_2",
                "target": ["masterTarget", "Tab_2"]
            }],
            "targets": {
                "masterTarget": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "masterPages",
                    "viewId": "idMaster",
                    "viewName": "Master",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_1": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_1",
                    "viewName": "Tab_1",
                    "viewLevel": 1,
                    "controlId": "Splitapp"
                },
                "Tab_2": {
                    "viewType": "XML",
                    "transition": "slide",
                    "controlAggregation": "detailPages",
                    "viewId": "idTab_2",
                    "viewName": "Tab_2",
                    "viewLevel": 2,
                    "controlId": "Splitapp"
                }
            }
        }
    },
    "sap.platform.hcp": {
        "uri": "webapp",
        "_version": "1.1.0"
    }
}

 

Autor

  • Barry Allen

    Desenvolvedor Full Stack com mais de 10 anos de experiência em diferentes domínios, incluindo SAP, Blockchain, IA e Desenvolvimento Web.

    Ver todos os posts

Comentários

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *

Este site usa o Akismet para reduzir o spam. Saiba como seus dados de comentário são processados.