Listado de componentes

Documentación:

• Componente (JS) Métodos y propiedades comunes a todos los componentes
• Componente (PHP) Métodos y propiedades comunes a todos los componentes con controlador de servidor.

---

Referencias: Al mencionar propiedades, se utiliza el formato: Etiqueta (nombre), donde Etiqueta es cómo se describe la propiedad en el editor y nombre es el nombre real de la propiedad, a utilizar en caso de asignar o leer la misma desde JS (componente.propiedad()).

Agenda

Pendiente.

Árbol

Genera una lista con formato de árbol o lista jerárquica (también conocido como tree view) a partir del origen de datos. El origen de datos debe ser un listado o array de objetos, donde cada objeto presente una propiedad que contenga, a su vez, el listado de objetos hijos. El nombre de esta propiedad se establece en la propiedad Propiedad (propiedad).

El componente generará un <ul> anidado. El tema Sistema incluye estilos mejorados para este componente.

Nótese que los eventos, como Click (click), se ejecutarán sobre el componente, no sobre el ítem de la lista. Por ello, el objeto del evento incluye una propiadad ruta con la ruta del item donde se produjo el evento. Existen diferentes métodos para obtener elementos del DOM u objetos del origen de datos a partir de la ruta (ver documentación).

//Se ha asignado en el componente árbol Click = click
this.click=function(componente,evento) {
    //Se ejecuta cuando el usuario hace click sobre el componente
    //componente = componenteArbol
    //evento.ruta = 1.2.3
    ui.alerta(evento.ruta);
};

Esto solo es válido para los manejadores de eventos asignados directamente al componente. Los eventos en los hijos funcionan igual que en las estructuras de control (Ver más). En este último caso, el origen de datos del componente presenta los métodos adicionales obtenerNivel() y obtenerRuta().

En todos los casos, la ruta es una concatenación de los índices hasta el item, separados por punto (ejemplo 0.1.0).

Archivo (campo de carga de archivo)

Permite realizar la carga de un archivo o múltiples archivos. El componente subirá los archivos automáticamente a un directorio seguro del servidor y su valor, tanto del lado del cliente (componente.valor()) como al enviar los datos al servidor, será un array de objetos, cada uno con las siguientes propiedades:

nombre Nombre original del archivo.

archivo Nombre del archivo almacenado en el directorio de temporales privados (constante _temporalesPrivados=.

La propiedad Multimedia (multimedia) permite configurar el campo para que intente obtener audio, fotos o videos desde el dispositivo del cliente. Normalmente esto sólo funcionará en dispositivos móviles, permitiéndo seleccionar un archivo con normalidad cuando no sea soportado.

El evento Modificación (modificacion) será invocado cuando el usuario seleccione o deseleccione un archivo. Luego, el evento Listo (listo) será invocado cuando la subida haya finalizado.

El campo mostrará una barra de progreso durante la subida del archivo y, además, puede utilizarse el método subiendo() para consultar si la carga está en curso o no. El método obtenerBase64() puede utilizarse para generar una vista previa de los archivos seleccionados.

Al recibir el valor del campo en el controlador PHP, o al consultar el mismo mediante valor() (JS), tendremos un objeto con las propiedades:

• nombre Nombre original del archivo
• tamano Tamaño en bytes
• tipo Tipo MIME
• archivo Nombre del archivo temporal en el servidor
• nativo Instancia de File (solo JS)
• datos Cuerpo del archivo en Base 64, disponible únicamente luego de haber invocado obtenerBase64() (solo JS)

En el controlador PHP, se debe utilizar la clase \almacenamiento para mover el archivo subido (propiedad archivo del valor del campo) a su ubicación definitiva.

Documentación del controlador de servidor.

Botón (botón o enlace)

Doble click iniciará la edición de texto. Presioná ESC para finalizar la edición (mientras el componente presente borde verde, estará activada la edición de texto).

Bucle (estructura de control)

Repetirá el contenido del componente por cada elemento del origen de datos.

Cada elemento autogenerado, al igual que toda su descendencia, tendrá asignado como origen de datos el elemento correspondiente de los datos del bucle. Este objeto contará con el método obtenerIndice() que devolverá el índice del elemento. Esto es especialmente útil para procesar eventos en componentes, por ejemplo:

//Dentro del bucle se ha insertado un botón "Eliminar" con el evento Click = clickEliminar
this.clickEliminar=function(comp) {
    var datos=comp.obtenerDatos(),
        indice=datos.obtenerIndice();
    componentes.bucle.removerFila(indice);
};

El valor que se establezca al componente, ya sea mediante establecerValores() en la ascendencia o en la vista, o mediante valor(), se utilizará como origen de datos.

Nota: El componente generará los ítems en el componente padre (no dentro de sí mismo), por lo que usualmente el bucle deberá ubicarse dentro de algún tipo contenedor.

Este componente toma el valor asignado como origen de datos.

La forma correcta de utilizar campos dentro de un bucle es asignándoles la propiedad Propiedad (propiedad) y no un nombre. Esto se debe a que, al duplicarse los componentes, la propiedad nombre produciría interferencia por existir múltiples componentes con el mismo nombre. Cada campo automáticamente tomará y devolverá su valor a partir del valor de Propiedad (propiedad). Este valor, además, puede ser un nombre de propiedad o una ruta (propiedad.propiedad2).

Ejemplo: Dado un bucle con un campo con Propiedad = nombre, cuando se le asigne el siguiente origen de datos:

componentes.bucle.establecerDatos([
    { id:1, nombre:"Gabriel" },
    { id:2, nombre:"Juan"}
]);

Producirá un listado con dos campos, el primero con el valor Gabriel y el segundo, Juan. Cuando el primer campo se modifique por el valor Enrique, componentes.bucle.valor() devolverá:

[
    { id:1, nombre:"Enrique" },
    { id:2, nombre:"Juan"}
]

Nótese que la el sí debe tener nombre, y por lo tanto el valor también se envía automáticamente al servidor (eventos enviar:... o enviar-apl:...) y se incluye en la salida de ui.obtenerValores().

Buscador (campo de búsqueda)

Al modificar el valor del campo, invocará el evento Buscar, el cual puede ser del lado del servidor o del cliente.

En el caso de métodos de servidor, recibirán un objeto con las propiedades buscar y componente (nombre del mismo) como primer argumento. En el caso de métodos de cliente, recibirán los parámetros normales de un evento (instancia del componente, objeto del evento), donde el segundo parámetro tendrá la propiedad adicional buscar.

El método debe devolver un listado (array) de objetos.

El campo mostrará las etiquetas de acuerdo a la propiedad Propiedad a mostrar (puede ser el nombre de una propiedad o una expresión) y devolverá como valor la propiedad establecida en Propiedad valor del item seleccionado. Por defecto, la propiedad a mostrar es titulo y la propiedad valor id. Al establecer el valor del campo, debe especificarse la propiedad valor.

Cuando sea necesario obtener un item específico (por ejemplo, cuando se establece el valor del campo), la invocación será la misma pero incluyendo la propiedad valor (en lugar de buscar) y se establecerá como valor del campo el primer elemento del resultado.

Campo (texto, texto multilínea, numérico, contraseña, editor con formato)

Representa un campo de texto (una línea o multilínea), número o contraseña.

Cuando la propiedad Tipo (tipo) se establezca a Editor (TinyMce) (tinymce), importará automáticamente el módulo tinymce y configurará el editor en el campo.

Código (HTML)

Pendiente.

Columna

Representa una columna (<div class="col ...">) en un componente Fila.

Columna de tabla

Una columna de tabla de datos (<td>). Debe insertarse dentro del componente Fila de tabla, y puede contener cualquier otro componente.

Cada fila, junto con sus columnas (o celdas), se duplicará por cada uno de los elementos del origen de datos de la tabla. Las expresiones tendrán predefinidas las propiedades del elemento que se esté representando.

Cada celda define también el encabezado de la columna, el cual será generado automáticamente cuando se utilice un origen de datos. En el editor, cada celda mostrará una etiqueta con su encabezado a modo ilustrativo, sin respetar el diseño o los estilos reales de los encabezados.

Condicional (estructura de control)

Oculta o muestra el contenido del componente de acuerdo a la propiedad Condición (condicion). Cuando no se asigne una condición, utilizará el valor asignado mediante valor(). Nótese que si el componente tiene nombre, recibirá el valor correspondiente, si existe, al establecer los datos del formulario.

Es posible utilizar como condición cualquier manejador de evento, o una expresión la cual será evaluada cuando cambie el orgen de datos, se invoque actualizar() o se establezca el valor del componente. En las expresiones, valor contendrá el valor asignado.

El valor que se establezca al componente, ya sea mediante establecerValores() en la ascendencia o en la vista, o mediante valor(), se utilizará como origen de datos.

Cabe aclarar que el efecto es solo visual. Al obtener los valores de la vista o del formulario, no afectará la visibilidad* de los campos que contenga.

* Nota: En este caso, visibilidad no se refiere al estilo, o si el usuario puede ver el campo o no, sino a si su valor estaría disponible dentro del listado de componentes.

Este componente toma el valor asignado como origen de datos.

Contenedor

Permite insertar un bloque, el cual puede ser un contenedor (container o container-fluid) o bien mantenerse como un simple <div> mediante su propiedad Tipo (tipo).

Contenedor de menú (barra de navegación y menú adaptativo)

Genera un menú de navegación, el cual puede utilizarse como barra de navegación (fija o flotante) o como menú lateral (deslizable). Admite como hijos componentes Item de menú (no componentes Menú).

La propiedad Modo (modo) permite convertir la barra de menú en un menú flotante o en un menú deslizable. Esta propiedad es adaptativa, por lo que se puede utilizar para convertir al menú en adaptativo a distintos tamaños de pantalla. Un menú flotante puede abrirse relativo a otro elemento (ejemplo, un botón) mediante menu.abrir(componente) o menu.abrir(posicionIzquierda,posicionArriba) (donde posicion... es e píxeles). Un menú deslizable puede abrirse mediante menu.abrir(). Nótese la diferencia con ui.abrirMenu(): Este último es compatible con componentes Menú, pero no con contenedores de menús.

Deslizable (slider)

Pendiente.

Desplegable (campo)

Representa un campo de opciones desplegable (<select>).

Las opciones pueden asignarse utilizando una expresión en la propiedad Opciones (opciones), como por ejemplo {vista.miListaDeOpciones}, o desde el controlador mediante el método establecerOpciones().

El listado de opciones puede ser un objeto, en cuyo caso los valores serán sus propiedades, o un array de objetos. Las propiedades Propiedad a mostrar (propiedadEtiqueta) y Propiedad clave (propiedadClave) permiten controlar qué propiedad de cada objeto se utilizará para representar las opciones del <select>.

Nota: Cuando se especifique un array de objetos, la propiedad Propiedad clave (propiedadClave) es requerida, aunque no se necesite enviar el valor al servidor. El método obtenerItem() permite obtener el objeto seleccionado, pero no funcionará si la propiedad clave no está establecida a un valor único de cada objeto, como un ID.

Nota: El método valor() devolverá el valor de la propiedad clave de la opción seleccionada.

Diálogo

Permite construir un diálogo o pop-up. El contenido que se construya dentro de este se mostrará dentro del diálogo al invocar dialogo.abrir() (donde dialogo es el nombre del componente).

Un diálogo modal (propiedad Modal (modal)) únicamente podrá cerrarse desde código (dialogo.cerrar()), quedando deshabilitada la posibilidad de cancelarlo mediante Escape, click en el fondo o ícono de ×.

Espaciador

Representa un elemento que sirve como espaciador, salto de línea o relleno.

Etiqueta (estructura de control)

Este componente permite insertar valores del origen de datos. Presenta dos posibles comportamientos: Puede especificarse una propiedad (o una ruta con formato foo.bar) en la propiedad Propiedad, o bien una expresión en la propiedad Contenido. Todas las propiedades del origen de datos estarán disponibles en las expresiones, además de los valores estándar (más información sobre las expresiones).

Este componente toma el valor asignado como origen de datos.

Fecha (campo de selección de fecha)

Crea un campo que despliega un calendario al recibir foco.

También admite el ingreso de fechas por teclado, con los siguientes formatos (donde 0 representa cualquier dígito, siempre que sean válidos para lo que se intenta representar):

• 0 Será convertido al día del mes actual.
• 0/0 Será convertido al día y mes del año actual.
• 0/0/00 Será convertido a la fecha correspondiende, completando el año (20..).

El campo devuelve (lo que es equivalente, también, a que envía al servidor) la fecha epoch, en formato numérico, a las 0:00 del día seleccionado. Asimismo, cuando se deba establecer una fecha, tanto desde el editor como mediante valor(), se debe especificar la fecha epoch. Esto busca elimianar cualquier duda o controversia en los formatos de fecha. Nótese que el epoch siempre es UTC.

Nota: Por el momento, trabaja únicamente en formato dia/mes/año de cuatro dígitos o j/n/Y.

Fila

Representa una fila (<div class="row ...">).

Fila de tabla

Representación lógica de una fila (<tr>) de una tabla de datos (componente Tabla). Recibe como hijos componentes Columna de tabla.

Cuando el usuario haga click en una fila y no se haya establecido un manejador para el evento Click (click), intentará replicar el click en el botón que sea predeterminado en la fila (botón con propiedad Acción predeterminada predeterminado activa).

Nota: Los encabezados se definen en las columnas. No es necesario agregar una fila para los encabezados cuando se vaya a utilizar un origen de datos.

Formulario

Este componente es solo una representación lógica de un formulario, sin otra funcionalidad que la de un contenedor. Al igual que cualquier otro contenedor, también permite agrupar campos haciendo uso de su método obtenerValores().

Hora (campo de selección de hora)

Pendiente.

Ícono

Pendiente.

Imagen

Permite insertar una imagen cuyo origen es adaptativo, es decir, la URL de la imagen puede variar según el tamaño de pantalla. Admite expresiones en la propiedad Origen. Desde el editor es posible cargar un archivo que quede embebido en la vista (data) mediante la propiedad Embeber archivo.

Importar (estructura de control)

Permite importar una vista embebible dentro otra vista. Casos de uso son separar una vista en partes más pequeñas, reutilizar partes de la vista, o construir una aplicación de una sola página, ideal para aplicaciones offline o sólo JS (como Cordova).

Es posible configurar el componente para que importe automáticamente la vista correspondiente a la URL actual activando la propiedad Escuchar navegación.

Este componente recibe eventos externos con el nombre de la vista a cargar. Es decir, un manejador de evento nombre:vista, donde nombre es el nombre del componente Importar, desencadenará la carga de la vista vista.

Cada vez que se cambie la vista, se creará una nueva instancia del controlador.

Item de menú

Permite agregar un ítem de menú. Puede utilizarse dentro del componente Menú o dentro del componente Contenedor de menú. Cada Item puede contener, a su vez, componentes Menú para generar submenús.

Dentro del editor, los menús no responderán al paso del cursor sobre ellos (hover), sino que debe hacerse un click para desplegar y poder editar sus contenidos. Al deseleccionar el ítem de menú, el submenú se cerrará automáticamente.

Cabe aclarar que el doble click iniciará la edición de texto, al igual que en otros componentes. Presioná ESC para finalizar la edición (mientras el componente presente borde verde, estará activada la edición de texto).

Menú desplegable o contextual

Genera un menú independiente, inicialmente oculto, el cual puede utilizarse luego como menú desplegable cuando el usario interactúe con otro componente (por ejemplo, un botón) o como menú contextual (click secundario). Admite como hijos componentes Item de menú.

Nota: Los menús quedarán siembre visibles dentro el editor, a fin de poder visualizar y modificar los mismos, a menos que se oculten los elementos invisibles con el comando correspondiente de la barra de herramientas.

Navegación (paginado)

Pendiente.

Campo de opción

Este componente permite generar diferentes tipos de campos de opción:

• Campo de alternar (switch), que permite cambiar entre encendido y apagado.
• Checkbox.
• Botón de opción (radio).

Es posible agruparlos para que solo uno de los campos de opción del grupo pueda estar activo a la vez asignando a todos ellos un mismo valor en la propiedad Grupo (grupo). Al enviar el formulario o consultar el valor de cualquiera de ellos, devolverán la propiedad Valor (valor) del que esté activo. Al asignar el valor a cualquiera de ellos, se activará el componente cuya propiedad Valor (valor) coincida con el valor que se está asignando, o se desactivarán todos si el valor no existe. Excepto cuando se asigne true, caso en el que se activará el componente al que se le está asignando el valor.

Los componentes del grupo pueden tener diferentes nombres, lo cual puede ser útil para acceder a cada uno de ellos individualmente.

Nota: Si no se asigna la propiedad Valor (valor), se utilizará por defecto el nombre del componente.

Pestaña

Permite añadir una pestaña al componente Pestañas.

El texto del botón del encabezado se establece en la propiedad Encabezado (encabezado). Las pestañas pueden activarse desde el código mediante activar(), o bien con activarPestana(pestana) o activarPestana(indice) del componente Pestañas.

No es posible reordenar las pestañas arrastrando y soltando las mismas. Para cambiar el orden de las pestañas, deben utilizarse, desde el editor, la propiedad Mover o, desde el código fuente, el método pestana.mover(orden). La pestaña será reubicada en la posición especificada entre los hijos del componente Pestañas, comenzando desde 0.

Pestañas (contenedor de pestañas)

Permite crear un bloque de pestañas o tabs. Dentro del bloque, deben insertarse componentes Pestaña únicamente.

El evento Pestaña activada (pestanaActivada) será invocado cuando la pestaña activa cambie por cualquier motivo (por igual ya sea por interacción del usuario o por código), incluyendo la propiedad pestana en el objeto del evento (segundo parámetro) con la instancia del componente Pestaña que acaba de ser activado.

Cabe mencionar que la pestaña activa en el editor será la pestaña inicial en durante la ejecución de la vista.

Tabla

Una tabla de datos. Recibe como hijos componentes Fila de tabla. Cuando se asigne un origen de datos, cada una de las filas se duplicará por cada elemento del mismo.

Cada fila, al igual que toda su descendencia, tendrá asignado como origen de datos el elemento correspondiente de los datos de la tabla. Este objeto contará con el método obtenerIndice() que devolverá el índice del elemento. Esto es especialmente útil para procesar eventos en componentes dentro de la fila, por ejemplo:

//Dentro de la fila se ha insertado un botón "Eliminar" con el evento Click = clickEliminar
this.clickEliminar=function(comp) {
    var datos=comp.obtenerDatos(),
        indice=datos.obtenerIndice();
    componentes.tabla.removerFila(indice);
};

Nota: Los encabezados se definen en las columnas.

Este componente toma el valor asignado como origen de datos.

La forma correcta de utilizar campos dentro de las celdas de la tabla es asignándoles la propiedad Propiedad (propiedad) y no un nombre. Esto se debe a que, al duplicarse los componentes, la propiedad nombre produciría interferencia por existir múltiples componentes con el mismo nombre. Cada campo automáticamente tomará y devolverá su valor a partir del valor de Propiedad (propiedad). Este valor, además, puede ser un nombre de propiedad o una ruta (propiedad.propiedad2).

Ejemplo: Dadoa una tabla con una fila, una columna y una celda con un campo con Propiedad = nombre, cuando se le asigne el siguiente origen de datos:

componentes.tabla.establecerDatos([
    { id:1, nombre:"Gabriel" },
    { id:2, nombre:"Juan"}
]);

Producirá una tabla con dos filas, la primera con un campo con el valor Gabriel y la segundo con un campo con el valor Juan. Cuando el primer campo se modifique por el valor Enrique, componentes.tabla.valor() devolverá:

[
    { id:1, nombre:"Enrique" },
    { id:2, nombre:"Juan"}
]

Nótese que la tabla sí debe tener nombre, y por lo tanto el valor también se envía automáticamente al servidor (eventos enviar:... o enviar-apl:...) y se incluye en la salida de ui.obtenerValores().

Texto

Doble click iniciará la edición de texto. Presioná ESC para finalizar la edición (mientras el componente presente borde verde, estará activada la edición de texto).

Vista

Este componente es la representación lógica del cuerpo de la vista y no puede insertarse.