✒️SAP BTPFIORI / El diseño con el layout flexible column Por Roberto Santucho
SAP BTPFIORI El diseño con el layout flexible column
1. LOS CONTROLES DE DISENO
- Permiten organizar los controles de la UI en la vista
- HAY 2 NOMBRES PRINCIPALES QUE CONTIENEN CONTROLES DE DISENO
- sap.ui.layout
- sap.ui.commons > OBSOLETO
- sap.m.FlexBox crea un contenedor para un diseno de caja flexible.
- beneficio: es responsibe, en tablet muestra mas de una columna mientras que en smartphone muestra solo una
- podemos disenar cualquier de estos layout
- OneColumn
- TwoColumnsBeginExpanded
- TwoColumnsMidExpanded
- MidColumnFullScreen
- ThreeColumnsMidExpanded
- ThreeColumnsEndExpanded
- ThreeColumnsMidExpandedEndHidden
- ThreeColumnsBeginExpandedEndHidden
- EndColumnFullScreen
3. EL DISENO DE UNA VISTA USANDO EL CONTROL FLEXIBLE COLUMN
<f:FlexibleColumnLayout id="fcl" ... layout="OneColumn">
<f:beginColumnPages>
<mvc:XMLView id="masterProductosView" viewName="ns.controles.view.MasterProductos"></mvc:XMLView>
</f:beginColumnPages>
<f:midColumnPages>
<mvc:XMLView id="detailProductosView" viewName="ns.controles.view.ProductoDetails"></mvc:XMLView>
</f:midColumnPages>
<f:endColumnPages>
<Page id="_IDGenPage333"> </Page>
</f:endColumnPages>
</f:FlexibleColumnLayout >
4. LA LOGICA PARA MOSTRAR LA VISTA DE DETALLES
Al hacer click en la primer columna, debe mostrarse la segunda columna
- En la vista MasterProductos: definir dentro de la lista de productos QUE EL TIPO ES NAVEGACION, y el metodo que se ejecuta al hacer click sobre la columna, en este caso showProducto
<items>
<ColumnListItem id. .. type="Navigation" press=""showProducto">
<cells>
<Label id/.. >
</cells>
</ColumnListItem>
</items>
4.1 EL EventBus
Para comunicacion entre controles, contiene 2 metodos:
- otro para SUSCRIBIRSE
- uno para PUBLICARLO
Actualmente hay 2 APIs que devuelven su propia instancia de EventBus
- de forma global: sap.ui.getCore().getEventBus();
- por el componente: this.getOwnerComponent().getEventBus(); << RECOMENDADO
CON EL EVENTBUS PODEMOS DISPARAR A TRAVES DE PUBLISH() Y ESCUCHAR A TRAVES DE SUBSCRIBE() NUESTROS PROPIOS EVENTOS PERSONALIZADOS LIBREMENTE.
1) EL EN CONTROLADOR DE LA VISTA MAIN VAMOS A REALIZAR LA SUSCRIPCION AL EVENTO PARA MOSTRAR LOS DETALES DEL PRODUCTO CON EL METODO SUBSCRIBE DE LA INSTANCIA DEL EVENTBUS
FIRMA DE LA FUNCION SUBSCRIBE: bus.subscribe("canal", "evento", "metodo a ejecutar", this)
2) En el controlador de la vista se hace la PUBLICACION del evento CUANDO EL USUARIO HACE CLICK EN UNA FILA DE LA TABLA, y se ejecuta el "metodo a ejecutar".
TENEMOS QUE tener EL MISMO CANAL Y NOMBRE DE EVENTO QUE EN LA SUBSCRIPCION, tambien le pasamos el path, que en ese momento es el objeto del item seleccionado.
IMPORTANTE, CANCELAR LA SUSCRIPCION EN LA FUNCION onExit SI ESTAMOS USANDO FL, porque al quedar abierta, generara errores al salir y volver a entrar a la app.
5. EL CONTROL PARA AGREGAR PESTANAS
sap.m.IconTabBar
<mvc:View ..
>
<m:page id .. title ... >
<m: items>
<m:IconTabFilter id=".." text="{i18n>InformacionGeneral}" >
//contenido primer pestana
</m:IconTabFilter>
<m:IconTabFilter id=".." text="{i18n>Medidas}" >
//contenido segunda pestana
</m:IconTabFilter>
<m: items>
</m:Page>
</mvc:View>
6. LA VISUALIZACION DE UN CONTROL DE FORMA DINAMICA
por ejemplo para ocultar una de las pestanas, agregamos un boton "ocultar pestana":
- Definimos un modelo que se va a encargar de hacer visible o no el control dependiendo del valor que tenga seteado que esta asociado a la propiedad visible del control. COMO OBTENER EL MODELO DE LA VISTA POR CODIGO:
- var oJSONModelConfig = new sap.ui.model.json,JSONModel ({
visibleTabMedidas: true,
visibleTabInfGeneral: true,
visiblebtnShowTabMedidas: false,
visiblebtnHideTabMedidas: true,
});
this.getView().setModel(oJSONModelConfig, "jsonModelConfig");
- para setear la propiedad visible de un control PODEMOS HACERLO A TRAVES DEL BINDING DEL MODELO A DICHA PROPIEDAD. EJEMPLO DE COMO MOSTRAR U OCULTAR UN BOTON "Ocultar pestana Medidas" dependiendo si la pestana esta visible o no.
<m:Button id="btnShowTabMedidas"
text="{i18n>shoTabMedidas}"
visible="{jsonModelConfig>/visiblebtnShowTabMedidas}"
press="onShowTabMedidas"/>
<m:Button id="btnHideTabMedidas"
text="{i18n>shoTabMedidas}"
visible="{jsonModelConfig>/visiblebtnHideTabMedidas}"
press="onHideTabMedidas"/>
- ya dentro de la pestana, le decimos donde esta el atributo visible para poder ocularla
<m:IconTabFilter
id=",,"
text=
visible="{jsonModelConfig>,visi}"
.....
- Por ultimo, el codigo del metodo: PODMEOS OBTENER LOS DATOS DEL MODELO CON getModel() PARA PODER MODIFICAR EL VALOR DE LAS PROPIEDADES visible con el metodo setProperty() :
onShowTabMedidas: function () {
var oJSONModelConfig = this.getView().getModel("jsonModelConfig");
oJSONModelConfig.setProperty("/visibleTabMedidas", true);
oJSONModelConfig.setProperty("/visiblebtnShowTabMedidas", false);
oJSONModelConfig.setProperty("/visiblebtnHideTabMedidas", true);
},
onShowTabMedidas: function () {
var oJSONModelConfig = this.getView().getModel("jsonModelConfig");
oJSONModelConfig.setProperty("/visibleTabMedidas", false);
oJSONModelConfig.setProperty("/visiblebtnShowTabMedidas", true);
oJSONModelConfig.setProperty("/visiblebtnHideTabMedidas", false);
},
7. EL FORMATEO DE LOS CAMPOS
- formateadores: funciones de JavaScript del lado del cliente
- PARA PODER REALIZAR EL FORMATEO SE PUEDE CREAR UN ARCHIV0 CON LA FUNCION PARA REALIZAR EL FORMATEO DE LA FECHA Y EN EL BINDING SE ASIGNA LA FUNCION FORMATEADORA A LA PROPIEDAD formatter :
<expandedHeading>
<m:Title id="xx"
text = "{path : 'products_json>DateofSale', formatter:'.Formatter.DateFormat'}"
wrapping=....
/>
</expandedHeading>
DURANTE EL TIEMPO DE EJECUCION, SAPUI5 PASARA EL VALOR DEL MODELO PARA QUE FUNCIONE COMO ARGUMENTO. LA FUNCION AHORA PUEDE ACCEDER Y FORMATEAR EL VALOR DADO.
En el ProductoDetails.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller",
"ns/controles/utils/Formatter"
], function (Controller , Formatter) {
return Controler.externd("ns.controles.controller.ProductoDetails", {
Formatter:Formatter,
Escanear / Compartir
Sobre el autor
Publicación académica de Roberto Hernan Santucho, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
Roberto Hernan Santucho
Profesión: Ingeniero en Sistemas - Mexico - Legajo: VA51C
✒️Autor de: 43 Publicaciones Académicas
🎓Egresado del módulo:
Certificación Académica de Roberto Santucho
Disponibilidad Laboral: FullTime 
