Introdução e Recapitulação
Na postagem anterior do blog , criamos um novo aplicativo SAPUI5 em nossa pilha completa do SAP SCP WebIDE e o configuramos para usar o destino na demonstração do SAP Netweaver Gateway ES5 .
O que será coberto neste exercício
- O que é um Manifesto de Metadados XML e o que há nele?
- Como usar nosso modelo OData e vinculá-lo ao nosso aplicativo
- Use uma
sap.m.Table com itens e associação de propriedades - Use
sap.ui.model.type.DateTime para formatar a data do JavaScript - Como estilizar colunas para agir de maneira diferente em dispositivos móveis / tablets / computadores
Vamos codificar
Agora é hora de sujar as mãos com algum código. Nesta etapa, você exibirá uma tabela do Parceiro de negócios com algumas informações úteis.
A primeira coisa a fazer é verificar nossos metadados de serviço. Cada serviço oData expõe um arquivo XML especial chamado XML Metadata Manifest. Você pode vê-lo anexando $metadata ao URL do serviço. Este é o nosso URL de metadados GWSAMPLE_BASIC . O Manifesto da Metatada é realmente importante porque descreve:
- Qual conjunto de modelos exposto pelo serviço
- Para cada modelo que é a chave primária, a lista de atributos (com tipo e restrições) e se ela possui alguma propriedade de navegação (como você pode navegar desse modelo para outros como relações)
- Muitas outras informações úteis
Dê uma olhada no BusinessPartner EntitySet e tente adivinhar qual propriedade eu usei para o resultado final desta etapa. Agora confira a documentação da tabela no SAPUI5 e tente replicar meu layout com a ordem correta de colunas e itens. Para cada nome de coluna, crie uma tradução nos arquivos i18n.property e use-a no XML como uma ligação. Agora, anexe o BusinessPartnerSet à tabela, adicione a coluna solicitada e estilize os valores da coluna de acordo com o exemplo.
Observe que:
- Criado em tem um DateTime específico formatado exibido
- A coluna age de maneira diferente se o aplicativo for aberto em um navegador de telefone, tablet ou computador
Depois de concluir o exercício, você pode conferir o resultado no código-fonte da etapa 1 da ramificação .