[SAP] SAPUI5 para dummies parte 1: un ejercicio completo paso a paso


Introducci贸n y resumen


En la publicaci贸n de blog anterior , creamos una nueva aplicaci贸n SAPUI5 en nuestro stack SCIDE WebIDE completo de SAP SCP y la configuramos para usar el destino para el SAP Netweaver Gateway Demo ES5 .


驴Qu茅 se cubrir谩 en este ejercicio?


  • 驴Qu茅 es un manifiesto de metadatos XML y qu茅 contiene?
  • C贸mo usar nuestro modelo OData y vincularlo a nuestra aplicaci贸n
  • Use una sap.m.Table con elementos y enlace de propiedad
  • Use sap.ui.model.type.DateTime para formatear la fecha de JavaScript
  • C贸mo dise帽ar columnas para que act煤en de manera diferente en dispositivos m贸viles / tabletas / computadoras de escritorio

Cree una nueva aplicaci贸n SAPUI5 en SAP WebIDE Full-Stack, Parte 1


Codifiquemos


Ahora es el momento de ensuciarse las manos con algo de c贸digo. En este paso, va a mostrar una tabla de Business Partner con informaci贸n 煤til.


Lo primero que debe hacer es consultar los metadatos de nuestro servicio. Cada servicio oData expone un archivo XML especial llamado XML Metadata Manifest. Puede verlo agregando $metadata a la URL del servicio. Esta es nuestra URL de metadatos GWSAMPLE_BASIC . El Manifiesto Metatada es realmente importante porque describe:


  • Qu茅 conjunto de modelos expuesto por el servicio
  • Para cada modelo que es la clave principal, la lista de atributos (con tipo y restricciones) y si tiene alguna propiedad de navegaci贸n (c贸mo puede navegar de este modelo a otros como relaciones)
  • Muchas otras informaciones 煤tiles

Eche un vistazo al BusinessPartner EntitySet e intente adivinar qu茅 propiedad he usado para el resultado final de este paso. Ahora consulte la documentaci贸n de la tabla en SAPUI5 e intente replicar mi dise帽o con el orden correcto de columnas y elementos. Para cada nombre de columna, cree una traducci贸n en los archivos i18n.property y i18n.property en el XML como enlace. Ahora, adjunte el BusinessPartnerSet a la tabla, agregue la columna solicitada y aplique estilo a los valores de la columna seg煤n el ejemplo.


Tenga en cuenta que:


  • Created At tiene un formato de fecha y hora espec铆fico que se muestra
  • La columna act煤a de manera diferente si la aplicaci贸n se abre en un tel茅fono, tableta o navegador de escritorio

Una vez que haya terminado el ejercicio, puede consultar el resultado en el c贸digo fuente del paso 1 de la rama .

Source: https://habr.com/ru/post/es436876/


All Articles