Share via Share via... Twitter LinkedIn Facebook Pinterest Telegram WhatsApp Yammer Reddit TeamsCambios recientesSend via e-MailImprimirEnlace permanente × Tabla de Contenidos LISTADO DE DATOS Declaración del Content Atributos principales del Content Edición del Content Edición Directa del Objeto Edición en la fila del Content Edición con Nodo SELECTEDITEM Filtro y Ordenación Filtro y Multiselección Pintar línea seleccionada por Script Elementos con fechas y cálculos de días Otros tipos de visualización del Content en XOne GridView LISTADO DE DATOS La visualización de datos es una representación gráfica de la información. Mediante el uso de elementos visuales, como gráficos y mapas, la visualización de datos ofrece una manera accesible para detectar y comprender las tendencias, los valores atípicos y los patrones en los datos. Por ejemplo, ya conocemos que para mostrar los datos en forma de listado en XOne, se define la propiedad tipo Content type=“Z”, que por defecto muestra los datos en forma de grid. Sin embargo, podemos hacer que su visualización sea diferente, interpretando dichos datos, de forma que el contents podemos mostrarlo en forma de calendario, mapa, catálogo, estructura de árbol, slider de imágenes, gráficos, etc. Este comportamiento viene definido por el uso del atributo viewmode. Declaración del Content <frame name="c1" width="98%" height="78%" framebox="true" border-corner-radius="10" lmargin="1%" tmargin="2%"> <prop name="@content1" height="96%" type="Z" contents="content1" bgcolor="#FFFFFF" onchange="refresh(@content1)" /> <contents name="content1" src="ContentDatos" /> </frame> En esta declaración los datos se visualizarán en forma de grid (por defecto) pues no se ha definido atributo viewmode. Atributos principales del Content Atributos Principales del Content widht Para definir ancho del content. height Para definir alto del content. bgcolor Para definir color de fondo del content. edit-in-row Toma valor true o false, el valor por defecto es true, que al seleccionar el registro se lanza el objeto en edición onchange Para definir que ejecutar acción a ejecutar cuando hay cambios en el content. locked Por defecto tiene valor false, bloquea edición del content. filter Para definir filtro para la visualización de los datos. disableedit Para habilita o deshabilitar edición del content y registros, por defecto es false pero puede asociarse también una condición. disablevisible Para ocultar o mostrar en content en dependecia de la condición definida en el atributo. viewmode Para definir formato visual en que se mostrarán los datos. Edición del Content Edición del Content Edicion directa del Objeto Edición en la Fila del Content Edición con Nodo SELECTEDITEM Filtro y Ordenación Filtro y Multiselección Pintar línea de seleccionada por script Elementos con fechas y cálculos de días Edición Directa del Objeto Al seleccionar un elemento del Content, por defecto, lo que ocurre es un pushvalue del elemento en edición. Si se define el nodo selecteditem vacío, sin acciones, logramos que el usuario al seleccionar el registro no ocurra el pushvalue. Útil para cuando se quiera mostrar listado sin acción alguna. Por tanto, las acciones que queramos definir sobre el content serán definidas en el nodo SELECTEDITEM. Ejemplo: <group name="Group1" id="1" onfocus="ExecuteNode(onfocusgrupo(1))"> <frame name="group1Frame" width="100%" height="1040" alignx="center"> <prop name="CABECERA_LBL1" type="TL" class="classtl" title="Edición directa del Objeto" /> <frame name="c1" width="98%" height="78%" framebox="true" border-corner-radius="10" lmargin="1%" tmargin="2%"> <prop name="@content1" height="96%" type="Z" contents="content1" forceonchange="true" bgcolor="#FFFFFF" onchange="refresh(@content1)" /> <contents name="content1" src="ContentDatos" /> </frame> <frame name="floatadd1" top="920p" left="610p" width="90p" height="90p" floating="true"> <prop name="BTADD1" type="B" visible="1" labelwidth="0" method="ExecuteNode(nuevo)" width="75p" img="add.png" imgsel="add_click.png" /> </frame> </frame> </group> <coll name="ContentDatos" title="mapaDatos" edit-inrow="false" xloadall="true" cell-odd-color="#FFFFFF" cell-even-color="#F2F2F2" sql="select t1.*, t1.NOMBRE as MAP_NOMBRE_GRID, t1.DIRECCION as MAP_DIRECCION_GRID, replace(t1.LATITUD, ',', '.') as MAP_LATITUD_GRID, replace(t1.LONGITUD, ',', '.') as MAP_LONGITUD_GRID from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj" filter="" sort="" check-owner="false" dependent="false" notab="true" group-swipe="false"> <group name="HEADER" id="10" class="groupfixed_header"> <frame name="frmtitulo" class="frmsuperior"> <prop name="SALIR" type="B" class="btvolversuper" /> <prop name="MENU" type="TL" class="tlsuper" title="ContentsDatos" /> <prop name="MAP_COLORACTIVO" type="T" visible="0" /> </frame> </group> <group name="FOOTER" id="0" class="groupfixed_footer"> <prop name="MAP_GROUP" type="N" visible="0" /> <prop name="MAP_TOTAL_PAGES" type="N" visible="0" /> <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior"> <prop name="MAP_CANCELAR" type="B" title="Cancelar" method="ExecuteNode(onback)" class="btinferior" /> <prop name="MAP_LAST" class="btinferior" type="B" title="Capturar" method="ExecuteNode(accion(capturar))" lmargin="3%" newline="false" /> <prop name="MAP_NEXT" class="btinferior" type="B" title="Grabar" method="ExecuteNode(accion(grabar))" lmargin="3%" newline="false" /> </frame> </group> <group name="General" id="1"> <prop name="IMAGEN" type="IMG" width="115p" height="118p" visible="4" tmargin="2p" lmargin="0" /> <frame name="frm1" newline="false" width="600p" lmargin="5p" height="120p"> <prop name="MAP_NOMBRE_GRID" type="T" class="classgrid" /> <prop name="MAP_DIRECCION_GRID" class="classgrid" type="T" text-forecolor="#666666" textfont-size="5" lines="2" fixed-lines="true" /> </frame> <prop name="NOMBRE" type="T" visible="1" title="Nombre" class="classT" /> <prop name="DIRECCION" class="classTMultiline" type="T" title="Dirección" visible="1" locked="true" /> <prop name="LATITUD" type="N6" title="Latitud" visible="1" locked="true" /> <prop name="LONGITUD" type="N6" title="Longitud" visible="1" locked="true" /> <prop name="MAP_LATITUD_GRID" type="N6" title="Latitud" visible="0" locked="true" /> <prop name="MAP_LONGITUD_GRID" type="N6" title="Longitud" visible="0" locked="true" /> <prop name="mapaDatosDireccion" title="mapaDatosDireccion" type="Z" visible="1" viewmode="mapview" mapview-embedded="true" contents="mapaDatosDireccion" /> <contents name="mapaDatosDireccion" src="ContentmapaDatosDireccion" filter="ID=##FLD_ID##" /> </group> <onback show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> appData.failWithMessage (-11888,"##EXIT##"); </script> </action> </onback> <before-edit> <action name="runscript"> <script language="javascript"> self.MAP_GROUP=1; self.MAP_TOTAL_PAGES=1; self.MAP_COLORACTIVO = "#666666"; </script> </action> </before-edit> <accion show-wait-dialog="false"> <action name="runscript"> <param name="param" /> <script language="javascript"> if (param==="capturar") { GetPosGPS ("Actual",self); if (parseInt(self.LATITUD)===0 || parseInt(self.LONGITUD)===0) { ui.msgBox ("La latitud o longitud obtenida no son correctas y por ello se dejará la que tiene actualmente el cliente.","AVISO",0); self.LATITUD=self.MAP_LATITUD_GRID; self.LONGITUD=self.MAP_LONGITUD_GRID; } else { if (parseInt(self.LATITUD)===0) self.LATITUD=self.MAP_LATITUD_GRID; else self.MAP_LATITUD_GRID=self.LATITUD; if (parseInt(self.LONGITUD)===0) self.LONGITUD=self.MAP_LONGITUD_GRID; else self.MAP_LONGITUD_GRID=self.LONGITUD; } } else { self.save(); appData.failWithMessage (-11888,"##EXIT##"); } </script> </action> </accion> </coll> Edición en la fila del Content Para editar un registro del content posicionado en la misma fila del registro dentro del content, para esto se define el atributo edit-in-row=“true” en la declaración del Content. Se visualiza de la siguiente forma: edicionenfila_‐_hecho_con_clipchamp.mp4 Ejemplo: <group name="Group2" id="2" onfocus="ExecuteNode(onfocusgrupo(2))"> <frame name="group2Frame" width="100%" height="100%"> <prop name="CABECERA_LBL2" type="TL" class="classtl" title="Edición en la Fila" /> <frame name="c2" width="98%" height="75%" framebox="true" border-corner-radius="10" lmargin="1%" tmargin="2%"> <prop name="@content2" height="96%" type="Z" contents="content2" mask="0" edit-inrow="true" bgcolor="#FFFFFF" /> <contents name="content2" src="ContentDatosEditRow" /> </frame> </frame> </group> <coll name="ContentDatosEditRow" title="mapaDatos" cell-even-color="#FFFFFF" cell-odd-color="#F2F2F2" xloadall="true" sql="select t1.*, 'Latitud/Longitud: ' || replace(t1.LATITUD, ',', '.') || '--' || replace(t1.LONGITUD, ',', '.') as MAP_LATLON_GRID from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj"> <group name="HEADER" id="10" fixed="true" orientation="top" width="100%" height="120p"> <frame name="frmtitulo" class="frmsuperior"> <prop name="SALIR" type="B" class="btvolversuper" /> <prop name="MENU" type="TL" class="tlsuper" title="BASICOS" /> <prop name="MAP_COLORACTIVO" type="T" visible="0" /> </frame> </group> <group name="FOOTER" id="0" fixed="true" orientation="bottom" width="100%" height="7%"> <prop name="MAP_GROUP" type="N" visible="0" /> <prop name="MAP_TOTAL_PAGES" type="N" visible="0" /> <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior"> <prop name="MAP_CANCELAR" type="B" title="Cancelar" method="ExecuteNode(onback)" class="btinferior" /> <prop name="MAP_LAST" class="btinferior" type="B" title="Capturar" method="ExecuteNode(accion(capturar))" lmargin="3%" newline="false" /> <prop name="MAP_NEXT" class="btinferior" type="B" title="Grabar" method="ExecuteNode(accion(grabar))" lmargin="3%" newline="false" /> </frame> </group> <group name="General" id="1"> <prop name="IMAGEN" type="IMG" width="17%" height="17%" visible="4" tmargin="2p" lmargin="0" locked="true" /> <frame name="frm1" newline="false" width="100%" height="17%" lmargin="5p"> <prop name="NOMBRE" type="T" class="classgrid" locked="true" /> <prop name="MAP_LATLON_GRID" class="classgrid" type="T" text-forecolor="#666666" textfont-size="5" locked="true" /> </frame> <prop name="MAP_BOTON_DEMO" type="B" method="ExecuteNode(demoBoton)" visible="7" width="17%" height="17%" title="Botón" labelwidth="8" /> <frame name="frm2" newline="false" width="100%" height="17%" lmargin="5p"> <prop name="DISTANCIA" type="N2" visible="7" title="Distancia:" labelwidth="8" text-align="left" width="60%" /> <prop name="OBSERV" type="T" visible="7" title="Observaciones:" labelwidth="8" size="150" fixed-text="true" lines="2" fixed-lines="true" /> </frame> </group> <demoBoton refresh="false" show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> ui.showToast("self: " + self.toString() + " Distancia: " + self.DISTANCIA); </script> </action> </demoBoton> </coll> Edición con Nodo SELECTEDITEM Al definir nodo SELECTEDITEM, lo que haremos será programar en este nodo las acciones que queremos que ocurran al seleccionar un elemento del content. selecteditem_‐_hecho_con_clipchamp.mp4 Ejemplo: <group name="Group3" id="3" onfocus="ExecuteNode(onfocusgrupo(3))"> <frame name="group3Frame" width="100%" height="15%"> <prop name="CABECERA_LBL3" type="TL" class="classtl" title="Edición con SelectedItem" /> <prop name="MAP_NOMBRESEL" type="T" class="classTsinborde" labelwidth="0" /> <prop name="MAP_LINEASEPARAR3" disablevisible="MAP_NOMBRESEL=''" type="B" bgcolor="#333333" visible="1" labelwidth="0" width="300p" lmargin="210p" height="5p" tmargin="2p" bmargin="2p" locked="true" /> <frame name="floatadd3" top="75p" left="550p" floating="true" width="200p" height="120p" disablevisible="MAP_NOMBRESEL=''"> <prop name="BTADD31" type="B" visible="1" labelwidth="0" method="ExecuteNode(editar)" postonchange="ExecuteNode(EjecutaVolverBoton)" width="75p" img="ok.png" imgsel="ok_click.png" /> <prop name="BTADD32" type="B" visible="1" labelwidth="0" method="ExecuteNode(eliminar)" width="75p" img="delete.png" imgsel="delete_click.png" newline="false" lmargin="6p" /> </frame> </frame> <frame name="c3" width="98%" height="68%" framebox="true" border-corner-radius="10" lmargin="1%" tmargin="2%"> <prop name="@content3" height="96%" type="Z" contents="content3" bgcolor="#FFFFFF" disableedit="1=1" /> <contents name="content3" src="ContentDatosSelItem" /> <prop name="MAP_SELECTEDID" visible="0" type="N" /> <prop name="MAP_IDLINEA" type="N" visible="0" /> </frame> </group> <coll name="ContentDatosSelItem" title="mapaDatos" cell-even-color="#FFFFFF" cell-odd-color="#F2F2F2" xloadall="true" sql="select t1.*, t1.NOMBRE as MAP_NOMBRE_GRID, t1.DIRECCION as MAP_DIRECCION_GRID, replace(t1.LATITUD, ',', '.') as MAP_LATITUD_GRID, replace(t1.LONGITUD, ',', '.') as MAP_LONGITUD_GRID from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj" cell-selected-bgcolor="#C9E5EF"> <group name="HEADER" id="10" fixed="true" orientation="top" width="100%" height="120p"> <frame name="frmtitulo" class="frmsuperior"> <prop name="SALIR" type="B" class="btvolversuper" /> <prop name="MENU" type="TL" class="tlsuper" title="BASICOS" /> <prop name="MAP_COLORACTIVO" type="T" visible="0" /> </frame> </group> <group name="FOOTER" id="0" fixed="true" orientation="bottom" width="100%" height="7%"> <prop name="MAP_GROUP" type="N" visible="0" /> <prop name="MAP_TOTAL_PAGES" type="N" visible="0" /> <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior"> <prop name="MAP_CANCELAR" type="B" labelwidth="0" width="100%" bgcolor="#00000000" locked="true" /> </frame> </group> <group name="General" id="1"> <prop name="IMAGEN" type="IMG" width="115p" height="118p" visible="4" tmargin="2p" lmargin="0" /> <frame name="frm1" newline="false" width="600p" lmargin="5p" height="120p"> <prop name="MAP_NOMBRE_GRID" type="T" class="classgrid" /> <prop name="MAP_DIRECCION_GRID" class="classgrid" type="T" text-forecolor="#666666" textfont-size="5" lines="2" fixed-lines="true" /> </frame> <frame name="frm2"> <prop name="ID" visible="0" type="N" /> <prop name="LATITUD" type="N6" title="Latitud" class="classnumber" locked="true" /> <prop name="LONGITUD" type="N6" title="Longitud" class="classnumber" locked="true" /> <prop name="NOMBRE" type="T" title="Nombre" class="classT" /> <prop name="DIRECCION" type="T" title="Dirección" class="classT" locked="true" /> <prop name="@mapa" title="Mapa" type="Z" visible="1" viewmode="mapview" mapview-embedded="true" contents="mapaDatos" /> <contents name="mapaDatos" src="ContentmapaDatos" filter="ID=##FLD_ID##" /> </frame> </group> <onback show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> appData.failWithMessage (-11888,"##EXIT##"); </script> </action> </onback> <before-edit> <action name="runscript"> <script language="javascript"> self.MAP_GROUP=1; self.MAP_TOTAL_PAGES=1; </script> </action> </before-edit> <selecteditem refresh-owner="MAP_NOMBRESEL,floatadd3,MAP_LINEASEPARAR3" show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> self.getOwnerCollection().getOwnerObject().MAP_NOMBRESEL=self.NOMBRE; self.getOwnerCollection().getOwnerObject().MAP_IDLINEA=self.getOwnerCollection().getObjectIndex(self); self.getOwnerCollection().getOwnerObject().MAP_SELECTEDID=self.ID; </script> </action> </selecteditem> </coll> Filtro y Ordenación Al listado de datos que ofrecemos a través del content, podemos añadir filtros a través del atributo filter, pero esto sería siempre a través de la App, pero podemos añadirle funcionalidad al Content de filtro y ordenación a través de script, de la siguiente manera: filtroyorden_‐_hecho_con_clipchamp.mp4 Declaramos el content y mediante botones de control añadimos funcionalidad de filtro y orden. <group name="Group4" id="4" onfocus="ExecuteNode(onfocusgrupo(4))"> <frame name="group4Frame" width="100%" height="28%"> <prop name="CABECERA_LBL4" type="TL" class="classtl" title="Filtro y Ordenación" /> <prop name="MAP_FILTRO" type="T" tooltip="Escriba aquí para buscar..." labelwidth="0" width="60%" class="classT" /> <prop name="BTBUSCAR" type="B" visible="1" labelwidth="0" method="ExecuteNode(buscar(1))" width="75p" img="lupa.png" imgsel="lupa_click.png" /> <prop name="BTORDENAR" type="B" visible="1" newline="false" lmargin="6p" labelwidth="0" method="ExecuteNode(buscar(2))" width="75p" img="##FLD_MAP_BTORDEN##" imgsel="##FLD_MAP_BTORDENCLICK##" /> <!--<prop name="MAP_FILTRONOMBRE" type="T" class="classT" title="Nombre" />--> <!--<prop name="MAP_FILTRODIRECCION" type="T" class="classT" title="Dirección" />--> <frame name="floatbtbuscar" top="185p" left="550p" width="170p" height="120p" floating="true"> <prop name="MAP_BTORDEN" type="T" visible="0" /> <prop name="MAP_BTORDENCLICK" type="T" visible="0" /> <prop name="MAP_ORDEN" type="T" visible="0" /> </frame> </frame> <frame name="c4" width="98%" height="64%" framebox="true" border-corner-radius="10" lmargin="1%"> <prop name="@content4" height="96%" type="Z" contents="content4" locked="true" bgcolor="#FFFFFF" /> <contents name="content4" src="ContentDatosFiltro" /> </frame> </group> <coll name="ContentDatosFiltro" title="mapaDatos" xloadall="true" cell-even-color="#FFFFFF" cell-odd-color="#F2F2F2" sql="select t1.NOMBRE as MAP_NOMBRE_GRID, t1.DIRECCION as MAP_DIRECCION_GRID, replace(t1.LATITUD, ',', '.') as MAP_LATITUD_GRID, replace(t1.LONGITUD, ',', '.') as MAP_LONGITUD_GRID, t1.* from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj"> <group name="HEADER" id="10" fixed="true" orientation="top" width="100%" height="120p"> <frame name="frmtitulo" class="frmsuperior"> <prop name="SALIR" type="B" class="btvolversuper" /> <prop name="MENU" type="TL" class="tlsuper" title="BASICOS" /> <prop name="MAP_COLORACTIVO" type="T" visible="0" /> </frame> </group> <group name="FOOTER" id="0" fixed="true" orientation="bottom" width="100%" height="7%"> <prop name="MAP_GROUP" type="N" visible="0" /> <prop name="MAP_TOTAL_PAGES" type="N" visible="0" /> <frame name="FLOAT_FOOTER_FRAME" class="frmsuperior"> <prop name="MAP_CANCELAR" type="B" title="Cancelar" method="ExecuteNode(onback)" class="btinferior" /> <prop name="MAP_LAST" class="btinferior" type="B" title="Capturar" method="ExecuteNode(accion(capturar))" lmargin="3%" newline="false" /> <prop name="MAP_NEXT" class="btinferior" type="B" title="Grabar" method="ExecuteNode(accion(grabar))" lmargin="3%" newline="false" /> </frame> </group> <group name="General" id="1"> <prop name="IMAGEN" type="IMG" width="115p" height="118p" visible="4" tmargin="2p" lmargin="0" /> <frame name="frm1" newline="false" width="600p" lmargin="5p" height="120p"> <prop name="MAP_NOMBRE_GRID" type="T" class="classgrid" /> <prop name="MAP_DIRECCION_GRID" class="classgrid" type="T" text-forecolor="#666666" textfont-size="5" lines="2" fixed-lines="true" /> </frame> <prop name="MAP_LATITUD_GRID" type="N6" visible="0" title="Latitud" locked="true" /> <prop name="MAP_LONGITUD_GRID" type="N6" visible="0" title="Longitud" locked="true" /> <prop name="NOMBRE" type="T" visible="0" title="Nombre" /> <prop name="DIRECCION" class="classTMultiline" type="T" title="Dirección" visible="0" locked="true" /> <prop name="LATITUD" type="N6" title="Latitud" visible="0" /> <prop name="LONGITUD" type="N6" title="Longitud" visible="0" /> </group> <onback show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> appData.failWithMessage(-11888,"##EXIT##"); </script> </action> </onback> <before-edit> <action name="runscript"> <script language="javascript"> self.MAP_GROUP = 1; self.MAP_TOTAL_PAGES = 1; </script> </action> </before-edit> <accion show-wait-dialog="false"> <action name="runscript"> <param name="param" /> <script language="javascript"> if (param == "capturar"){ GetPosGPS("Actual",self); if ( self.LATITUD == 0 || self.LONGITUD == 0){ ui.msgBox("La latitud o longitud obtenida no son correctas y por ello se dejará la que tiene actualmente el cliente.","AVISO",0); }else{ if (self.LATITUD == 0){ self.LATITUD = self.MAP_LATITUD_GRID; }else{ self.MAP_LATITUD_GRID = self.LATITUD; } if ( self.LONGITUD == 0){ self.LONGITUD = self.MAP_LONGITUD_GRID; }else{ self.MAP_LONGITUD_GRID = self.LONGITUD; } } }else{ self.save(); appData.failWithMessage(-11888,"##EXIT##"); } </script> </action> </accion> </coll> <buscar show-wait-dialog="false" refresh="false"> <action name="runscript"> <param name="param" /> <script language="javascript"> if ( param == "1"){ if (self.MAP_FILTRO.length == 0){ self.getContents("content4").setFilter(""); }else{ self.getContents("content4").setFilter("NOMBRE like '%" + self.MAP_FILTRO.toString() + "%' OR DIRECCION like '%"+ self.MAP_FILTRO.toString() + "%'"); } }else{ if( self.MAP_ORDEN == "ASC" ){ self.MAP_ORDEN = "DESC"; self.MAP_BTORDEN = "sortZA.png"; self.MAP_BTORDENCLICK = "sortZA_click.png"; }else{ self.MAP_ORDEN = "ASC"; self.MAP_BTORDEN = "sortAZ.png"; self.MAP_BTORDENCLICK = "sortAZ_click.png"; } self.getContents("content4").sort = "NOMBRE " + self.MAP_ORDEN.toString(); } self.getContents("content4").unlock(); self.getContents("content4").loadAll(); self.getContents("content4").lock(); ui.getView(self).refresh("@content4,BTORDENAR"); </script> </action> </buscar> Filtro y Multiselección Además de poder filtrar y ordenar los Contents desde script como en el ejemolo anterior, habilitamos la funcionalidad de selección de uno o varios elementos, para accionar sobre ellos. videofiltro.mp4 Ejemplo: <group name="Group6" id="6" onfocus="ExecuteNode(onfocusgrupo(6))"> <prop name="CABECERA_LBL6" type="TL" class="classtl" title="Filtro y Multiselección" /> <prop name="PENDIENTES" visible="0" title="Used Pending" type="NC" class="texteditnc" labelwidth="12" /> <frame name="frmBuscador" width="98%" lmargin="1%" height="150p" tmargin="1%" framebox="true" > <prop name="MAP_BUSCAR_TEXT" ontextchanged="javascript:FiltraMarcados(e);" labelwidth="0" text-border="true" type="T" lpadding="10p" rpadding="10p" width="98%" tmargin="10p" lmargin="1%" height="60p" tooltip="Texto a buscar"></prop> <prop name="MAP_BUSCAR_MARCADOS" title="Done" labelwidth="5" lmargin="1%" tmargin="10p" bmargin="10p" type="NC" width="49%" height="60p"></prop> <prop name="MAP_BUSCAR_NOMARCADOS" title="Not done" labelwidth="8" tmargin="10p" bmargin="10p" type="NC" width="49%" height="60p" newline="false"></prop> </frame> <prop name="MAP_BUSCAR_PENDIENTES_BT" border-corner-radius="0" title="Apply filter" method="Executenode(applyfilter)" border-width="0" type="B" width="98%" height="56p" labelwidth="1" bmargin="1%" lmargin="1%" class="background-accent-dark color-default-bright" ></prop> <frame name="campos4" framebox="true" height="-2" class="framecontents" width="98%" lmargin="1%"> <frame name="campos42" height="-2" width="70%"> <prop name="TLCAMPO16" type="TL" title="Nombre - Dirección" lmargin="2%" width="96%" /> </frame> <prop name="TLCAMPO19" type="TL" title="Multiple selection" newline="false" width="30%" /> </frame> <prop name="@ContentDatosFiltroMultiseleccion" edit-inrow="true" type="Z" contents="ContentDatosFiltroMultiseleccion" mask="0" width="100%" height="48%" lmargin="0" postonchange="refresh" onchange="Refresh" editmodal="true" /> <contents name="ContentDatosFiltroMultiseleccion" src="ContentDatosFiltroMultiseleccion" filter="((t1.MARCADO=1 AND 1=##FLD_MAP_BUSCAR_MARCADOS##) OR (t1.MARCADO=0 AND 1=##FLD_MAP_BUSCAR_NOMARCADOS##)) AND (ifnull(t1.NOMBRE,'') LIKE ##FLD_MAP_BUSCAR_TEXT## OR ifnull(t1.DIRECCION,'') LIKE ##FLD_MAP_BUSCAR_TEXT##) " /> <prop name="MAP_DONE_PENDIENTES_BT" border-corner-radius="0" title="Marcar seleccionados" method="Executenode(checkAll(1))" border-width="0" type="B" width="48%" height="56p" labelwidth="1" tmargin="1%" bmargin="1%" lmargin="1%" class="background-accent-dark color-default-bright" ></prop> <prop name="MAP_NOTDONE_PENDIENTES_BT" border-corner-radius="0" title="Desmarcar seleccionados" method="Executenode(checkAll(0))" border-width="0" type="B" width="48%" height="56p" labelwidth="1" tmargin="1%" newline="false" bmargin="1%" lmargin="2%" class="background-accent-dark color-default-bright" ></prop> </group> <coll name="ContentDatosFiltroMultiseleccion" title="mapaDatos" cell-even-color="#FFFFFF" cell-odd-color="#F2F2F2" sql="select t1.*, t1.NOMBRE as MAP_NOMBRE_GRID, t1.DIRECCION as MAP_DIRECCION_GRID, t1.IMAGEN as MAP_IMAGEN_GRID from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj"> <group name="General" id="1"> <frame name="grid" class="cellframe" width="98%" lmargin="1%" height="-2"> <frame name="grid11" width="10%" height="-2"> <prop name="MAP_IMAGEN_GRID" locked="true" width="98%" XXXclass="camposvistagrid" visible="4" lmargin="1%" labelwidth="0" type="IMG" /> </frame> <frame name="grid12" width="60%" height="-2"> <prop name="MAP_NOMBRE_GRID" locked="true" width="98%" XXXclass="camposvistagrid" visible="4" lmargin="1%" text-forecolor="#4B4D4F" labelwidth="0" type="T" /> <prop name="MAP_DIRECCION_GRID" locked="true" width="98%" XXXclass="extendsprop camposvistagrid text-color-accent-dark" visible="4" lmargin="1%" labelwidth="0" type="T" /> </frame> <prop name="MAP_PUSHVALUE" XXXmethod="ExecuteNode(openColl)" type="B" visible="4" width="90%" height="70p" lmargin="-80%" bgcolor="#33000000" labelwidth="0" newline="false"/> <prop name="MAP_SELECTED" type="NC" visible="4" width="10%" height="60p" xlmargin="8%" labelwidth="0" newline="false"/> </frame> </group> </coll> <checkAll refresh="false"> <action name="runscript"> <param name="activo" /> <script language="javascript"> var objContent = self.getContents("ContentDatosFiltroMultiseleccion"); if (activo == 1) { var vres = userMsgBox("OPCIONES", "Confirme que desea marcar todos los registros", "2"); else var vres = userMsgBox("OPCIONES", "Confirme que desea DESmarcar todos los registros", "2"); } if (vres == 1) { for ( var i=0; i < objContent.count(); i++) { var item = objContent.get(i); if (activo == 1) { if ( item.MAP_SELECTED == 1 && item.REALIZADA == 0 ) { ReportarTareaPendiente2(item); item.MAP_SELECTED = 0; } } else { if (item.MAP_SELECTED == 1 && item.REALIZADA == 1 ) { DesregistrarPendiente2(item); item.MAP_SELECTED = 0; } } } } self.executeNode("applyfilter"); </script> </action> </checkAll> <applyfilter> <action name="runscript"> <script language="javascript"> self.getContents("ContentDatosFiltroMultiseleccion").clear(); self.getContents("ContentDatosFiltroMultiseleccion").loadAll(); ui.refresh("@ContentDatosFiltroMultiseleccion"); </script> </action> </applyfilter> Pintar línea seleccionada por Script En este ejemplo lo que hacemos es a través del selecteditem definimos una acción cada vez que se selecciona el registro aparecerá sombreado el elemento en el content, mostrando al usuario en cual de los registros se está posicionado. selectlinea.mp4 <group name="Group7" id="7" onfocus="ExecuteNode(onfocusgrupo(7))"> <frame name="group7Frame" width="100%" height="1040" alignx="center"> <prop name="CABECERA_LBL7" type="TL" class="classtl" title="Pintar linea seleccionada por Script" /> <frame name="c7" width="98%" height="92%" framebox="true" border-corner-radius="10" lmargin="1%" tmargin="2%"> <prop name="MAP_LINEA" visible="0" type="N" /> <prop name="MAP_LINEAANT" visible="0" type="N" /> <prop name="ContentDatosSeleccionarLinea" height="96%" type="Z" contents="ContentDatosSeleccionarLinea" forceonchange="true" bgcolor="#FFFFFF" onchange="refresh(@content1)" /> <contents name="ContentDatosSeleccionarLinea" src="ContentDatosSeleccionarLinea" /> </frame> </frame> </group> <coll name="ContentDatosSeleccionarLinea" title="ContentDatosSeleccionarLinea" edit-inrow="false" loadall="true" sql="select t1.*, t1.NOMBRE as MAP_NOMBRE_GRID, t1.DIRECCION as MAP_DIRECCION_GRID, replace(t1.LATITUD, ',', '.') as MAP_LATITUD_GRID, replace(t1.LONGITUD, ',', '.') as MAP_LONGITUD_GRID, '#FFFFFF' AS MAP_COLOR from ##PREF##mapa_datos t1" objname="mapa_datos" updateobj="mapa_datos" progid="ASData.CASBasicDataObj" filter="" sort="" check-owner="false" dependent="false" notab="true"> <group name="General" id="1"> <prop name="IMAGEN" type="IMG" width="115p" height="118p" visible="4" tmargin="2p" lmargin="0" /> <frame name="frm1" newline="false" width="600p" lmargin="5p" height="120p" bgcolor="##FLD_MAP_COLOR##"> <prop name="MAP_NOMBRE_GRID" type="T" class="classgrid" /> <prop name="MAP_DIRECCION_GRID" class="classgrid" type="T" text-forecolor="#666666" textfont-size="5" lines="2" fixed-lines="true" /> </frame> <prop name="NOMBRE" type="T" visible="1" title="Nombre" class="classT" /> <prop name="DIRECCION" class="classTMultiline" type="T" title="Dirección" visible="1" locked="true" /> <prop name="LATITUD" type="N6" title="Latitud" visible="1" locked="true" /> <prop name="LONGITUD" type="N6" title="Longitud" visible="1" locked="true" /> <prop name="MAP_LATITUD_GRID" type="N6" title="Latitud" visible="0" locked="true" /> <prop name="MAP_LONGITUD_GRID" type="N6" title="Longitud" visible="0" locked="true" /> <prop name="MAP_COLOR" type="T" title="COLOR" visible="0" locked="true" /> </group> <selecteditem refresh="false" show-wait-dialog="false"> <action name="runscript"> <script language="javascript"> self.getParent().MAP_LINEAANT=self.getParent().MAP_LINEA; self.getParent().MAP_LINEA = self.getOwnerCollection().getObjectIndex(self); self.getParent().executeNode('refrescarlinea'); </script> </action> </selecteditem> </coll> <refrescarlinea refresh="false"> <action name="runscript"> <script language="javascript"> pintarLineaContentScript(self); </script> </action> </refrescarlinea> function pintarLineaContentScript(objself) { var coll = objself.getContents("ContentDatosSeleccionarLinea"); var mObjItem; mObjItem=coll.getItem(Number(objself.MAP_LINEA)); if (objself.MAP_LINEA === objself.MAP_LINEAANT) { if (mObjItem.MAP_COLOR==="#FFFFFF") { mObjItem.MAP_COLOR="#B2C5F0"; } else { mObjItem.MAP_COLOR="#FFFFFF"; } } else { mObjItem.MAP_COLOR="#B2C5F0"; if (objself.MAP_LINEAANT!==-1) { mObjItem=coll.getItem(Number(objself.MAP_LINEAANT)); mObjItem.MAP_COLOR="#FFFFFF"; ui.refreshContentRow("ContentDatosSeleccionarLinea", objself.MAP_LINEAANT); } } ui.refreshContentRow("ContentDatosSeleccionarLinea", objself.MAP_LINEA); } Elementos con fechas y cálculos de días Se detalla ejemplo de Content que contiene elemento de fechas y como trabajar con estos campos, dar alta tipo fecha y cálculo de días. edicionfechas_‐_hecho_con_clipchamp.mp4 <group name="Group5" id="5" onfocus="ExecuteNode(onfocusgrupo(5))"> <frame name="group4Frame2" width="100%" height="28%"> <prop name="CABECERA_LBL5" type="TL" class="classtl" title="Fecha y datediff" /> <prop name="CABECERA_LBL52" type="TL" class="classtl" title="dar alta fecha y pulsar calculo días" /> </frame> <frame name="c5" width="98%" height="64%" framebox="true" border-corner-radius="10" lmargin="1%"> <prop name="@content5" height="96%" type="Z" contents="content5" bgcolor="#FFFFFF" /> <contents name="content5" src="ContentFechaDatediff" /> </frame> </group> <coll name="ContentFechaDatediff" title="XoneCollvacia" sql="select * from gen_pruebafecha" objname="pruebafecha" updateobj="pruebafecha" progid="ASData.CASBasicDataObj" cell-height="50p"> <group name="GRID" id="1"> <prop name="MAP_FECHA" type="D" title="FECHA1" visible="4" forecolor="#000000" lmargin="5p" text-align="center" textfont-bold="true" onchange="Refresh" width="50%" /> <prop name="MAP_FECHA2" type="D" title="FECHA2" visible="4" forecolor="#000000" lmargin="5p" text-align="center" textfont-bold="true" onchange="Refresh" newline="false" width="50%" /> <prop name="FECHA" type="D" title="FECHA1" visible="1" forecolor="#000000" lmargin="5p" text-align="center" textfont-bold="true" onchange="Refresh" /> <prop name="FECHA2" type="D" title="FECHA2" visible="1" forecolor="#000000" lmargin="5p" text-align="center" textfont-bold="true" onchange="Refresh" /> <prop name="btn_sav" type="B" title="SALVAR FECHA" visible="1" method="ExecuteNode (salvar)" tmargin="10p" /> <prop name="btn_cal" type="B" title="CALCULAR DIAS" visible="1" method="ExecuteNode (CALCULAR)" tmargin="10p" /> <prop name="MAP_DIAS" type="N" title="DIFERENCIA DIAS" visible="1" forecolor="#000000" lmargin="5p" text-align="center" textfont-bold="true" onchange="Refresh" /> </group> <salvar> <action name="runscript"> <script language="javascript"> self.save(); </script> </action> </salvar> <CALCULAR> <action name="runscript"> <script language="VBScript"> if isdate(this("FECHA")) AND isdate(this("FECHA2")) then this("MAP_DIAS")= datediff("d", this("FECHA"), this("FECHA2")) else ui.msgbox "rellene las fechas antes de calcular","ATENCION!!!", 0 end if </script> </action> </CALCULAR> </coll> Otros tipos de visualización del Content en XOne Como ya hemos visto anteriormente al no declararse el atributo viewmode, la visualización de los datos por defecto, será en forma de listado, pero en XOne se han implementado varias definiciones a este atributo que nos permite ver los datos de varias formas: Tipos de Visualización de Contents valor atributo viewmode Mapas viewmode=“mapview” / viewmode=“openstreetmap” Calendario viewmode=“calendarview” Gráficos viewmode=“” PictureMap viewmode=“picturemap” SlideView viewmode=“slideview” TreeView viewmode=“treeview” GridView viewmode=“gridview” GridView Métodos del prop Z, viewmode=“gridview” Al definir en la declaración el atributo viewmode=“gridview”, logramos mostrar los datos en forma de cuadrícula, similar al diseño que usan las aplicaciones de fotos, imágenes que ya conocemos. De la misma forma, podemos usar atributos que se usan conjuntamente con el gridview para lograr dististas apariencias. Para definir un content con vista de cuadrícula declaramos: <prop name="ContentFotos" type="Z" visible="1" width="90%" lmargin="5%" height="-2" tmargin="0p" contents="ContentFotos" onchange="refresh" border="false" show-no-data="true" no-data-fontsize="8" no-data-text="Pulse en + para añadir fotos" viewmode="gridview" gallery-columns="4" postonchange="executeNode(after-edit)" /> <contents name="ContentFotos" src="ContentFotos" filter="vf.ID_SOLICITUD=##FLD_ID_SOLICITUD##" En este ejemplo, hemos definido un content que se visualizará en forma de 4 cuadrículas, al declarar el contents con el atributo viewmode=“gridview” asociado al atributo gallery-columns=“4”. Atributos para utilizar en los props de la colección del content con gridview: Atributos Funcionalidad gallery-columns Número de columnas a definir en la vista del content gridview orientation Orientación a definir en la vista, horizontal o vertical