Skip to Content

Este blog es la version en español de mi blog Pointers while updating sapui5 version

 

Después de varios meses de estar ausente en mis blogs, he regresado a escribir algunos blogs a cerca de SAPUI5. Mi estimado amigo Mike Hows recientemente escribió un blog acerca de Lumira Designer 2.0 SDK Components el cual se los recomiendo que leean. Además de que sus blogs siempre genial y tienen excelente contenido, el me ha dado motivación para regresar a blogear. Yo también he estado ocupado siendo papá, asi que aquí les ve el mio. Gracias Mike por tu motivación! Segundamente, tambien me motivó una pregunta que vi recientemente en la pag de la comunidad de usuarios asi que espero clarificar algunas dudas.

En mi experiencia pasada (~ 4 años usando SAP HANA y XS) he desarrollado applicaciones en XS desde su incepción en la version SP5 (ya llovió!) empezé usando la version 1.26, con vistas en JavaScript hasta lo mas reciente que desarrolle en la version 1.38 (se que actualmente la versión mas reciente es 1.46) y las recomendaciones para las vistas de la interface son de tipo XML. Aqui les paso un blog que escribí y expliqué como crear applicaciones custom en Fiori how to create custom Fiori applications, pain points – se preguntaran el porque menciono esto ahora?

Bueno, ahora que ya he dando un antecedente y también por la motivación de Mike, he re-visitado algunas de las aplicaciones en las que participé anteriormente y me pregunté, que me tomaría actualizar la version de sapui5 a una mas reciente? (las versiones anteriores que use los controles de las librerias sap.ui.commons, vistas en JavaScript, etc) hacia una versión mas reciente que usa controles responsivos de la libreria sap.m, vistas en XML, etc). El proposito de este ejercicio es subrallar los puntos técnicos si decides avanzar con un ejercicio similar.

Empezando con la UI. Como puedo ver los controles nuevos que están disponibles.

Lo primero que hay que hacer es saber a que version del ui5 queremos actualizar y que esté disponible su nuestro sistema o si van a utilizar una version del openui5. Para la finalidad de este ejercicio, asumieré que ya tenemos una version nueva, digamos la 1.46 installada en nuestro ambiente de SAP HANA. Recuerden que versiones multiples de sapui5 pueden co-existir en el ambiente o pueden también usar una de un content delivery network (CDN) como lo es openui5.

Inicialmente, necesitas actualizar la referencia en tu archivo index.html antes de mover la referencia hacia tu nueva version de sapui5 (parte del bootstap) Necesitarás también un archivo llamado component y uno llamado manifest, etc. todo lo he explicado en este blog How to develop a custom Fiori application

 

El siguiente paso es ver a las vistas de la interface. Si fuera a remplazar vistas desarrolladas en JavaScript con vistas desarrolladas en XML, después de todo, el tipo de vista no hacer mucha diferiencia mas que las vistas en XML, proveen facilidad para leer, para dar mantenimiento a la larga, usando declaraciones en lso namespaces. Añado también, si todos los conceptos del patrón de arquitectura MVC son ciertos, puedieramos desconectar las vistas (part V del MVC) y remplazarlas sin ningun problema major *

porque menciono problema mayor? Una vista por definición solo debe contener los controles que definen la interface sin ningún comportamiento. (todo el comportamiento – eventos de los controles deben mantenerse en la parte del controller)

Nota rápida:  si las vistas llegaran a contener lógica en JavaScript que debiese estar en el controller, les sugiero que primeramente hagan refactor del codigo y lo muevan al lugar correcto. He visto estas practicas de desarrollo generalmente en los eventos de ciertos controles como el evento press de un botón o una lista. Para mejores practicas de desarrollo, este tipo de codigo debe ir en la parte del controller y solo ser referienciado desde la vista como una llamada a una función (o desde otra función en el controller). Ahora que ya dijimos eso, seguiré desde el punto de vista que mis vistas solo tienen controles y todos los eventos estan definidos en el archivo controller correspondiente.

 

Otras cosas que tomar en cuenta:

  • Modelos de datos  (con y sin nombre y como se deben de referenciar desde su path)
  • archivos Component / manifest (en una aplicación custom de Fiori, estos deben ser incluidos)
  • etc

He obtenido ciertos controles mas comunes de los que he usado en mis proyectos anteriores y comparado con los controles reponsivos que debemos de usar.

Siempre que empiezo un proyecto nuevo y quiero saber cualquier parte del UI5, mi punto inicial es el SDK:

https://sapui5.hana.ondemand.com

Los controles responsivos pueden verse aqui:

https://sapui5.hana.ondemand.com/explored.html

y los controles de la libreria que ahora estan obsoletos (sap.ui.common) todavía se pueden ver aqui

https://sapui5.hana.ondemand.com/#content/Controls/index.html

sap.ui.commons sap.m
Button Button
FormattedTextView FormattedText
Image Image
Label Label
TextArea TextArea
AutoComplete Input *Assisted
ComboBox ComboBox
DropdownBox ComboBox
DatePicker DatePicker
Checkbox Checkbox
TabStrip IconTabBar
Splitter (sap.ui) Splitter Layout / Split Container
Panel Panel
MatrixLayout does not exist
HorizontalDivider ?
Dialog Dialog
MessageBox MessageBox

 

entre otros… entonces, que fué lo que cambió o como me puedo preparar para la actualización? esto debe ser un proceso analizado completamente acerca de los controles en la vistas de la interface. Recuerda que también puedes tener controles que fueron creados dinamicamente (no solo los que fueron creados en la vista JavaScript)

 

Empezaré con uno de los controles mas comunes en mi lista y de la mayoria de las aplicaciones. Table (Sap.ui.table.Table)

 

ahora el sap.m.Table (dentro d

var oTable = new sap.ui.table.Table(myTable', {
                     visibleRowCount: 10,
                     selectionMode: sap.ui.table.SelectionMode.Single,
                     enableCellFilter: true,
                     filter: oController.onColumnFiltered
// other properties omitted for simplicity
              });

// for each column on the table, we needed to assign a few properties of the column // and any additional context needed for the type of control in its template

oTable.addColumn(
new sap.ui.table.Column({
              label: new sap.ui.commons.Label({text: columnName, tooltip: columnName}),
              template: new sap.ui.commons.TextView().bindProperty("text", { path: property.name })
       })); 

e la vista XML)

 

<Table id="myTable" growing="true" growingThreshold="10" visibleRowCount="20" >
<columns>
   <Column>
     <Text text="Product" />
   </Column>
   <Column>
      <Text text=”Description” />
   </Column>
   <Column>
       <Text text=”Some Action” />
   </Column>
<!— other columns -->
</columns>
<items>
   <ColumnListItem>
       <cells>
           <ObjectIdentifier title="{Name}" text="{someId}" />
           <Text text=”{Description}” />                   
           <Button press=”onTableButtonPressed” />       
        </cells>
   </ColumnListItem>
</items>
</Table>

 

el siguiente es el boton. La mayoria de las aplicaciones siempre tienen un evento que se llama press y también texto. Muy bien, hoy es tu día de suerte poque el evento press es el mismo en las dos librerias.

Una cosa que me tomó por sorpresa fue cuando use una propiedad llamada CustomData en los controles en mis vistas. En las vistas tipo JavaScript lo hize asi:

Var customData = new sap.ui.commons.CustomData({ writeToDom: “true”, key: “someKEy”, value: “someValue” });// make sure the value is a string so that you don’t get syntax errors

anotherControl.addCustomData(customData);

pero cuando trate de hacer lo equivalente en las vistas de tipo XML, tuve que añadir información adicional para poder utilizar este atributo en mi codigo xml. En la parte de arribva de mi vista tuve que incluir el namespace como lo hize asi (ejemplo de la guia de desarrollo puede verse aqui)

https://sapui5.hana.ondemand.com/#docs/guide/91f0c3ee6f4d1014b6dd926db0e91070.html

 

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="my.own.controller"
     xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
 <Button id="myBtn" text="Click to show stored coordinates data" app:mySuperExtraData="just great" 
       press="alertCoordinates"></Button>
</mvc:View>

 

No iré en pleno detalle de cada control, pero por este medio, queria compartir algunas ideas de como analizar e implementar este tipo de ejercicio y señalar y recordar las mejores practicas de desarrollo. Asi también di mi punto de vista de como yo seguiré ciertos pasos para completar mi ejercicio. Al seguir estas mejores practicas facilitaras el mantenimiento de la aplicación a la larga y minimizaras los problemas y riesgos al momento de realizar otra actualización en el futuro.

 

Muchisimas gracias por leer este blog y espero que haya sido de su agrado. Espero que otros también compartan sus experiencias y dolores de cabeza!

 

Saludos!

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply