{{indexmenu_n>1}} ===== 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 ==== \\

\\ 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 ==== \\ |<60%>| ^ 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. | \\ {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:screenshot_20231025-135448.png?200|}} {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:screenshot_20231025-134854.png?200|}} {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:screenshot_20230914-123751.png?200|}} {{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:screenshot_20230913-112749.png?250|}} \\ \\ ==== Edición del Content ==== \\ |<60%>| ^ 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: \\

\\ \\ === 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: \\ \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:edicionenfila_‐_hecho_con_clipchamp.mp4?nolink600x600 |}} \\ Ejemplo: \\

\\ === 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. \\ \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:selecteditem_‐_hecho_con_clipchamp.mp4?nolink&600x600 |}} \\ Ejemplo: \\

\\ \\ === 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: \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:filtroyorden_‐_hecho_con_clipchamp.mp4?nolink&600x600 |}} \\ Declaramos el content y mediante botones de control añadimos funcionalidad de filtro y orden. \\ \\

\\ \\ === 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. \\ \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:videofiltro.mp4?nolink&600x600 |}} \\ \\ Ejemplo:

\\ \\ === 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. \\ \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:selectlinea.mp4?nolink&900x600 |}} \\


 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. \\ \\ {{ :wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:edicionfechas_‐_hecho_con_clipchamp.mp4?nolink&600x600 |}}\\ \\ \\

-------------------------------------------------------------------------------- ==== Otros tipos de visualización del Content en XOne ==== \\ /* {{indexmenu>:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos}} */ \\ 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** ^ | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:1.-mapview:start|Mapas]] | viewmode="mapview" / viewmode="openstreetmap" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:2.-calendario:start|Calendario]] | viewmode="calendarview" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:4.-graficos:start|Gráficos]] | viewmode="" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:6.-picture-map:start|PictureMap]] | viewmode="picturemap" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:7.-slide-view:start|SlideView]] | viewmode="slideview" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:8.-tree-view:start|TreeView]] | viewmode="treeview" | | [[wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:#grid-view|GridView]] | viewmode="gridview" | /* ====MAPVIEW==== \\ ===Métodos del prop Z, viewmode="mapview"=== \\ \\ Atributos para poner en los props de la colección del content:\\ \\ ^ATRIBUTOS^ |mapview-address="true"| Dirección del POI| |mapview-latitude="true"| Latitud del POI| |mapview-longitude="true"| Longitud del POI| |mapview-marker-icon="true"| Icono del POI| \\ ^ATRIBUTOS^ |**zoom-to-my-location**: con valor true hace zoom a la posición actual, con valor false, no hace zoom a la posición actual e intenta que se vean todos los POIs.| |**Show-pois**: con valor false no muestra el drawer de los POIs. | |**mapview-embedded**: con valor "true" este atributo embebe el mapa en la colección donde se haya definido. Valor por defecto false.| |**on-map-clicked**: atributo para definir el nodo cuando se haga un click sobre el mapa para poder ejecutar una acción.| \\ \\ **Ejemplo:**\\ \\



  Definimos en el prop type="Z" el siguiente atributo: on-map-clicked="onMapClicked"
  Nodo que ejecutar este atributo:

\\ \\ **MÉTODOS**: \\ ====isUserLocationEnabled==== \\ Método que te devuelve si el usuario tiene activa la geolocalización.\\ **Ejemplo**: \\ \\


  var ventana = ui.getView(self);
  if (ventana != null) {
                    ui.showToast("Enabled: " + 		ventana.MAP_MAPA.isUserLocationEnabled());
}

\\ ====enableUserLocation==== \\ Método que activa la geolocalización del dispositivo.\\ \\ **Ejemplo**:\\ \\


 var ventana = ui.getView(self);
 if (ventana != null) {
 	ventana.MAP_MAPA.enableUserLocation();
 }

\\ ====disableUserLocation==== \\ Método que desactiva la geolocalización del dispositivo.\\ **Ejemplo**:\\ \\



  var ventana = ui.getView(self);
  if (ventana != null) {
 	ventana.MAP_MAPA.disableUserLocation();
  }

====drawLine==== \\ Método que dibuja una línea uniendo los puntos que se le pasen como parámetros.\\ ^PARÁMETROS ^ Definición^ |**PARÁMETRO 1**|Nombre identificativo de la linea.| |**PARÁMETRO 2**|Color de la línea que se dibuje.| |**PARÁMETRO 3**|Tipo de línea que va a dibujar.| |**PARÁMETRO 4**|Del cuarto parámetro en adelante ,define los puntos por lo que se va a guiar la línea en este formato (Latitud,Longitud).| \\ **Ejemplo**: \\



 var ventana = ui.getView(self);
 ventana.MAP_MAPA.drawLine("ruta 1", "#FF00FF", "dashed", 40.4167747, -3.70379019, 41.3850632, 2.1734035);
 ventana.MAP_MAPA.drawLine("ruta 1", "#FF0000", "normal", 40.4167747, -3.70379019, 43.3850632, 3.1734035);
 ventana.MAP_MAPA.drawLine("ruta 2", "#FFFF00", "normal", 39.4167747, -2.70379019, 42.3850632, 2.0004035);



  var ventana = ui.getView(self);
  ventana.MAP_MAPA.drawRoute("ruta 1", 40.4167747, -3.70379019, 41.3850632, 2.1734035, "walking", "#FFFF00");
  ventana.MAP_MAPA.drawRoute("ruta 2", 40.4167747, -3.70379019, 39.3850632, -2.1734035, "walking", "#FFFF00");

\\ ====clearLine==== \\ Método que limpia la línea que se dibuje con drawLine.\\ \\ |**PARÁMETRO**|Nombre identificativo de la línea. | \\ **Ejemplo**:\\



 var ventana = ui.getView(self);
 ventana.MAP_MAPA.clearLine("ruta 1");

\\ ====clearAllLines==== \\ Método que limpia todas las líneas que se dibujen con drawLine.\\ \\ **Ejemplo**: \\



 var ventana = ui.getView(self);
      ventana.MAP_MAPA.clearAllLines();

\\ ====clearRoute==== \\ Método que limpia la ruta que se dibuje con drawRoute.\\ \\ |**PARÁMETRO** | Nombre identificativo de la ruta. | \\ \\ **Ejemplo**:\\ \\



var ventana = ui.getView(self);
ventana.MAP_MAPA.clearRoute("ruta 1");

\\ ====clearAllRoutes==== \\ Método que limpia todas las líneas que se dibujen con drawRoute.\\ \\ **Ejemplo**:\\ \\



 var ventana = ui.getView(self);
      ventana.MAP_MAPA.clearAllRoutes();


var ventana = ui.getView(self);
ventana.MAP_MAPA.addMarker(40.4167747, -3.70379019);

\\ ====setOnMapClickedListener==== \\ Define la función cuando se haga click sobre el mapa.\\ \\ **Ejemplo:** \\


var ventana = ui.getView(self);
ventana.MAP_MAPA.setOnMapClickedListener(function(nLatitude, nLongitude) {
                    ui.showToast("onMapClicked(), nLatitude: " + nLatitude + " nLongitude: " + nLongitude);
                    ventana.MAP_MAPA.addMarker(nLatitude, nLongitude);
                });

*/ ==== 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:\\ \\


   
   
\\


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




\\
\\
{{:wiki:2.-desarrollo-app:2.3.-codigo:b.-controles-xone:5.-listado-de-datos:screenshot_20230913-112749.png?nolink&200|}}
\\
\\
\\
Atributos para utilizar en los props de la colección del content con gridview:\\
\\
|<45%>|
^ 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       |

\\