Documentación Plataforma ByXOne

Herramientas de usuario

Herramientas del sitio

Estás aquí: start » wiki » 2.-desarrollo-app » 2.3.-codigo » b.-controles-xone » 5.-listado-de-datos
Traza: • 5.-listado-de-datos

Barra lateral

BUSCADOR

INDICE



INDICE PÁGINA ACTUAL

Tabla de Contenidos



wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:start

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:


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.


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:

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.



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 &lt; objContent.count(); i++) {
                        var item = objContent.get(i);  
                        if (activo == 1) {
                            if ( item.MAP_SELECTED == 1 &amp;&amp; item.REALIZADA == 0 ) {
                                ReportarTareaPendiente2(item);
                                item.MAP_SELECTED = 0;
                            }
                        } else {
                            if (item.MAP_SELECTED == 1 &amp;&amp; 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. 


 <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. 




 <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


wiki/2.-desarrollo-app/2.3.-codigo/b.-controles-xone/5.-listado-de-datos/start.txt · Última modificación: 2024/01/19 10:41 por ary

Herramientas de la página

Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki