Existe una manera muy sencilla para mostrar un listado de componentes por pantalla en forma de tabla. Vamos a hacer un ejemplo para ver cómo queda. Estos son los pasos a seguir:

  1. Debemos tener creado un proyecto o elegir uno donde vayamos a mostrar el listado.
  2. El código para crear una tabla es el siguiente:
<TableView id="table">
    <TableViewSection id="seccion1" headerTitle="Titulo Sección">
        <TableViewRow title="Texto de componente" />
    </TableViewSection>
</TableView>

Ahora miraremos un poco sus propiedades:

– TableViewSection: Con esta etiqueta indicamos que la tabla está dividida en secciones que contendrán filas en su interior. Además, en el atributo “headerTitle” escribimos el texto que queramos que se muestre por pantalla. Podemos no añadir este apartado si preferimos que nuestra tabla no contenga secciones.

– TableViewRow: Esta etiqueta indica que es una fila. Cada fila que queramos añadir tendrá que ser un “tableViewRow”. De la misma manera que con el “tableViewSection”, el atributo “title” indica el texto que mostrará en esta fila.

Aparte de estas propiedades, existen más para poder configurarlo al gusto de cada uno. Aquí dejo el enlace.

Es muy común que los datos que queremos mostrar en una tabla los obtengamos de una base de datos o los tengamos ya en un array guardados. Para eso habría que automatizar el proceso de creación de las filas para crear tantas filas como contenido queramos visualizar. Este sería el código que añade una fila por cada componente guardado en un array.

var arrayData = Array("Componente 1","Componente 2","Componente 3"); // En este array se guardan los datos a mostrar por pantalla
 
for(var i = 0; i < arrayData.length; i++){
	// Por cada componente que vamos a mostrar, creamos una fila dentro de la sección que hemos añadido a nuestra tabla.
	var row = Titanium.UI.createTableViewRow({
		title:arrayData[i] // Aquí indicamos el texto que se visualizará por pantalla en esa fila.
	});
	$.seccion1.add(row);
}

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies