-
Notifications
You must be signed in to change notification settings - Fork 2
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.
Índice:
- Campos
- Contenedores
- Estructuras de control
- Tablas y listados
- Menú
- Contenidos
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()
).
Representa una agenda diaria (solo un día) con eventos. Todos los eventos deben tener un horario inicial y un horario final; por el momento, no soporta eventos para "todo el día" o recordatorios.
El origen de datos debe ser un listado de eventos, y se repetirá el contenido del componente por cada uno de ellos. En otras palabras, todos los componentes que se inserten dentro de la Agenda serán el contenido de cada uno de los eventos del día.
Nota: Todas las fechas deben estar en tiempo Epoch. Cabe aclarar que esto implica que los horarios siempre se asumen UTC y son convertidos a hora local del cliente.
Deben configurarse las propiedades de cada objeto a utilizar como valores de inicio y final del evento. Por defecto, serán desde
y hasta
. Si cualquiera de las dos fecha es indefinida, o no es numérica, se omitirá el elemento. Existen dos modos de indicar estos valores según la propiedad Modo de origen (modo
):
-
Fechas (predeterminado): Ambas propiedades deben ser tiempo Epoch. Se requerirá que la propiedad Fecha (
fecha
) esté establecida y solo mostrará los eventos que correspondan al día indicado. -
Horas o minutos: Ambas propiedades admiten tanto la hora como cadenas en formato
H:mm
(siempre 24 hs.) o la cantidad de minutos desde las 0:00. Por ejemplo,15:30
equivaldría a930
.
Cada elemento autogenerado, al igual que toda su descendencia, tendrá asignado como origen de datos el elemento correspondiente de los datos del evento. 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.agenda.removerElemento(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.
Este componente toma el valor asignado como origen de datos.
La forma correcta de utilizar campos dentro de la agenda es asignándoles la propiedad Propiedad valor (propiedadValor
) 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 valor (propiedadValor
). Este valor, además, puede ser un nombre de propiedad o una ruta (propiedad.propiedad2
).
Ejemplo: Insertando un campo con Propiedad = descripcion
, cuando se le asigne a la agenda el siguiente origen de datos:
componentes.agenda.establecerDatos([
{ desde:1623074400, hasta:1623076200, id:1, descripcion:"Reunión" },
{ desde:1623079800, hasta:1623081600, id:2, descripcion:"Almuerzo"}
]);
Generará los dos eventos, cada uno con su campo; el primero con el valor Reunión
y el segundo, Almuerzo
. Cuando el primer campo se modifique por el valor Reunión con Gabriel
, componentes.agenda.valor()
devolverá:
[
{ desde:1623074400, hasta:1623076200, id:1, descripcion:"Reunión con Gabriel" },
{ desde:1623079800, hasta:1623081600, id:2, descripcion:"Almuerzo"}
]
Nótese que la agenda 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()
.
En algunos casos puede ser necesario leer/establecer el valor en una propiedad determinada, pero sin filtrar el origen de datos asignado. Para estos casos existe la propiedad Propiedad valor (propiedadValor
), que hace exactamente eso: Tiene prioridad sobre Propiedad (propiedad
) en la recuperación/almacenamiento del valor del campo, pero no afecta en absoluto el origen de datos asignado. Esto es particularmente útil en los componentes Desplegable. Ejemplo:
Dado un campo con Propiedad = eventos
, cuando se asigne (o herede) el siguiente origen de datos:
{ propiedadA:1, propiedadB:2, eventos:[...] }
Los datos efectivamente asignados serán el listado asignado a eventos
(ya que Propiedad filtra el objeto). Pero si el campo tiene Propiedad valor = eventos
, su origen de datos efectivo será el objeto original pero, al leer o establecer los valores, afectará la propiedad eventos
.
Detectar clicks:
Al procesar el evento Click (click
), al igual que cualquier otro evento del mouse o toques, del componente del lado del cliente, la función recibirá los dos parámetros estándar: La instancia del componente y el objeto del evento (MouseEvent
en este caso). Pero el evento (segundo argumento) tendrá una propiedad adicional fecha
con la fecha (y hora) de inicio de la franja horaria en la que se hizo el click, en tiempo Epoch.
Al procesar el mismo del lado del servidor, el objeto recibido en el primer argumento presentará la propiedad fecha
.
Los clicks en los distintos elementos o eventos pueden trabajarse mediante los componentes hijos.
Nota: El valor será la fecha completa (en tiempo Epoch) o el número de minutos dependiendo de la configuración de la propiedad Modo de origen (modo
).
Tip: Construir un calendario semanal:
Pueden utilizarse múltiples componentes Agenda, o bien uno dentro de un componente Bucle. Los horarios desde - hasta pueden sincronizarse automáticamente (es decir, si un día se extiende, se alinearán los demás) mediante la propiedad Grupo (grupo
) (todos los componentes que tengan en mismo valor en esta propiedad se sincronizarán entre sí). Utilizando un bucle, puede asignarse la propiedad Propiedad valor propiedadValor
para obtener los eventos desde el origen de datos del bucle, por ejemplo:
componentes.bucleDias.establecerDatos([
{
dia:"Lunes",
eventos:[
{ desde:..., hasta:..., descripcion:... },
{ desde:..., hasta:..., descripcion:... },
{ desde:..., hasta:..., descripcion:... },
...
]
},
{
dia:"Martes",
eventos:[
...
]
},
...
]);
En este ejemplo, bucleDias
sería un componente Bucle (podría contener una columna y, dentro, la agenda) y el componente Agenda debería tener Propiedad valor propiedadValor
igual a eventos
y Grupo grupo
, algún valor arbitrario, como ser semana
.
Filtrar valor devuelto:
La propiedad Filtrar valor devuelto (filtrarItems
) permite establecer el nombre de una propiedad que debe evaluarse como verdadera (truthy) en cada elemento a fin de ser incluido en el listado. Esta opción es útil si, por ejemplo, se agrega un campo de opción (checkbox) y se desea que el valor devuelto incluya solo aquellos items marcados, evitando tener que filtrar el resultado manualmente.
La propiedad Devolver propiedades (filtrarPropiedades
) permite establecer el listado de nombres de propiedades (separadas por coma) que se deben incluir en cada item del valor (por defecto, el componente devuelve el objeto asignado).
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
). Ejemplo, asignando Propiedad igual a subitems
:
componentes.miArbol.establecerDatos([
{
nombre: "Item 1",
subitems: [
{ nombre: "Subitem 1" },
{ nombre: "Subitem 2" }
]
}
]);
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
).
La forma correcta de utilizar campos dentro de un árbol es asignándoles la propiedad Propiedad valor (propiedadValor
) 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 valor (propiedadValor
). Este valor, además, puede ser un nombre de propiedad o una ruta (propiedad.propiedad2
).
Filtrar valor devuelto:
La propiedad Valor devuelto (devuelve
) permite establecer si, al obtener el valor del componente (mediante valor()
, ui.obtenerValores()
o al enviar los datos al servidor), debe mantenerse la estructura anidada, o devolverse un listado plano de todos los elementos.
La propiedad Filtrar valor devuelto (filtrarItems
) permite establecer el nombre de una propiedad que debe evaluarse como verdadera (truthy) en cada elemento a fin de ser incluido en el listado. Esta opción es útil si, por ejemplo, se agrega un campo de opción (checkbox) y se desea que el valor devuelto incluya solo aquellos items marcados, evitando tener que filtrar el resultado manualmente.
Nota: Al utilizar la propiedad Filtrar valor devuelto con Valor devuelto igual a Origen de datos actualizado (
normal
), no se incluirá la descendencia de aquellos items que no coincidan con el filtro. Por el contrario, si Valor devuelto es Listado plano (listado
), todos los ítems que coincidan con el filtro se incluirán en el valor devuelto, independientemente de si su ascendencia también está incluida o no.
La propiedad Devolver propiedades (filtrarPropiedades
) permite establecer el listado de nombres de propiedades (separadas por coma) que se deben incluir en cada item del valor (por defecto, el componente devuelve el objeto asignado).
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, permitiendo 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 deFile
(solo JS) -
datos
Cuerpo del archivo en Base 64, disponible únicamente luego de haber invocadoobtenerBase64()
(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.
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).
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.removerElemento(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 importante: El componente debe tener un solo hijo para funcionar correctamente, especialmente si contiene campos. Esto puede resolverse fácilmente utilizando un componente contenedor (por ejemplo tipo bloque) y colocando los demás componentes dentro del mismo.
Además, es importante considerar que el componente generará los ítems duplicados 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 valor (propiedadValor
) 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 valor (propiedadValor
). 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 el bucle 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()
.
En algunos casos puede ser necesario leer/establecer el valor en una propiedad determinada, pero sin filtrar el origen de datos asignado. Para estos casos existe la propiedad Propiedad valor (propiedadValor
), que hace exactamente eso: Tiene prioridad sobre Propiedad (propiedad
) en la recuperación/almacenamiento del valor del campo, pero no afecta en absoluto el origen de datos asignado. Esto es particularmente útil en los componentes Desplegable. Ejemplo:
Dado un campo con Propiedad = dato
, cuando se asigne (o herede) el siguiente origen de datos:
{ id:1, dato:2 }
Los datos efectivamente asignados serán el valor 2
(ya que Propiedad filtra el objeto). Pero si el campo tiene Propiedad valor = dato
, su origen de datos efectivo será { id:1, dato:2 }
mientras que, al leer o establecer los valores, afectará la propiedad dato
.
Filtrar valor devuelto:
La propiedad Filtrar valor devuelto (filtrarItems
) permite establecer el nombre de una propiedad que debe evaluarse como verdadera (truthy) en cada elemento a fin de ser incluido en el listado. Esta opción es útil si, por ejemplo, se agrega un campo de opción (checkbox) y se desea que el valor devuelto incluya solo aquellos items marcados, evitando tener que filtrar el resultado manualmente.
La propiedad Devolver propiedades (filtrarPropiedades
) permite establecer el listado de nombres de propiedades (separadas por coma) que se deben incluir en cada item del valor (por defecto, el componente devuelve el objeto asignado).
Cuando el usuario modifique el valor del campo, se invocará el evento Buscar (buscar
), el cual puede ser procesado del lado del servidor o del cliente.
En el caso de métodos de servidor, recibirán un objeto con las propiedades buscar
, valor
, listado
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á las propiedades adicionales buscar
, valor
y listado
.
Cuando la propiedad Desplegable (desplegable
) esté activa, el usuario podrá hacer click para desplegar todos los resultados, es decir, sin ingresar un texto de búsqueda. En ese caso, listado
será true
.
Cuando sea necesario obtener un item específico (por ejemplo, al establecer el valor del campo), se enviará la solicitud con la propiedad valor
(en lugar de buscar
) y automáticamente se establecerá como valor del campo el primer elemento del listado de resultados.
El método debe devolver los resultados siempre como un listado (array) de objetos, incluso cuando se trate de un único elemento. Cuando el método del cliente deba realizar llamados al servidor u otros procesos asincrónicos, puede devolver null
para que el componente quede a la espera; cuando estén disponibles los resultados, debe invocarse componente.establecerResultados(listado)
(donde componente
es el nombre del campo de búsqueda).
El campo mostrará las etiquetas de acuerdo a la propiedad Propiedad a mostrar (propiedadEtiqueta
) y devolverá como valor la propiedad establecida en Propiedad valor (propiedadValorItem
). Al establecer el valor del campo (componente.valor(...)
), debe especificarse el valor de dicha propiedad. En ambos casos, puede ser el nombre de una propiedad de los objetos del listado, o una expresión. Por defecto, la propiedad a mostrar es titulo
y la propiedad valor id
.
Desde el código del controlador, también puede obtenerse el objeto seleccionado completo mediante componente.obtenerItem()
.
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.
Pendiente.
Representa una columna (<div class="col ...">
) en un componente Fila.
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 (Ver más).
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.
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 origen de datos, se invoque actualizar()
o se establezca el valor del componente. En las expresiones, valor
contendrá el valor asignado (Ver más).
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.
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
).
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.
Pendiente.
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>
.
También es posible agrupar opciones (<optgroup>
s) estableciendo la propiedad Grupos (grupos
) o utilizando el método establecerGrupos()
en lugar de establecer las opciones. En este caso, debe proveerse un listado de objetos, cada uno con las propiedades {etiqueta,opciones[,nombre]}
, donde etiqueta
es la etiqueta o título del grupo y opciones
es el objeto o listado de opciones. No deben mezclarse objetos y arrays en los diferentes grupos.
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. Asimismo, para seleccionar una opción, debe proveerse la clave del elemento a componente.valor(valor)
.
Nota: Cuando se asignen grupos de arrays, el valor tendrá como prefijo el orden (comenzando de 0
) o el nombre del grupo al que pertenece el elemento, seguido de un _
. Es decir que valor()
devolverá 0_0
si está seleccionado el primer elemento del primer grupo, 1_0
para el primer elemento del segundo grupo, o grupoA_0
si el grupo tiene asignada la propiedad nombre
(="grupoA"
). Esto no es válido cuando los grupos sean objetos, en cuyo caso el valor será siempre la propiedad clave, la cual debe ser única entre todos los grupos.
En algunos casos puede ser necesario leer/establecer el valor en una propiedad determinada, pero sin filtrar el origen de datos asignado. Para estos casos existe la propiedad Propiedad valor (propiedadValor
), que hace exactamente eso: Tiene prioridad sobre Propiedad (propiedad
) en la recuperación/almacenamiento del valor del campo, pero no afecta en absoluto el origen de datos asignado. Ejemplo:
Si el desplegable tiene Propiedad = dato
, cuando se asigne (o herede) el siguiente origen de datos:
{ id:1, dato:2 }
Los datos efectivamente asignados serán el valor 2
(ya que Propiedad filtra el objeto). Puede que este no sea el comportamiento deseado porque necesitemos alguna de las otras propiedades para generar el listado de opciones, especialmente cuando se lo inserta dentro de un bucle o una tabla. Si se asigna Propiedad valor = dato
, el origen de datos efectivo será { id:1, dato:2 }
mientras que, al leer o establecer los valores, el desplegable afectará la propiedad dato
.
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 ×.
Representa un elemento que sirve como espaciador, salto de línea o relleno.
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.
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 correspondiente, 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 eliminar 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
.
Representa una fila (<div class="row ...">
).
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.
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()
.
Pendiente.
Pendiente.
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.
Nota: Por la estructura del DOM (un <img>
dentro de un <picture>
), normalmente es necesario establecer el ancho y/o alto máximos (en lugar del ancho y alto absolutos, a menos que se desee que la imagen tenga el tamaño exacto sin ser adaptativa).
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.
Cuando se cargue una vista, será invocado el evento listo
. Asimismo, cuando se cambie de vista, se invocará el evento fin
en el controlador de la vista saliente (y, si no se lo detiene, en la clase del controlador y en los componentes de la vista).
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).
Genera un menú independiente, inicialmente oculto, el cual puede utilizarse luego como menú desplegable cuando el usuario 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.
Pendiente.
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.
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
.
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.
Una tabla de datos. Recibe como hijos componentes Fila de tabla los cuales, a su vez, deben contener componentes Columna 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 valor (propiedadValor
) 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 valor (propiedadValor
). Este valor, además, puede ser un nombre de propiedad o una ruta (propiedad.propiedad2
).
Ejemplo: Dada 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()
.
En algunos casos puede ser necesario leer/establecer el valor en una propiedad determinada, pero sin filtrar el origen de datos asignado. Para estos casos existe la propiedad Propiedad valor (propiedadValor
), que hace exactamente eso: Tiene prioridad sobre Propiedad (propiedad
) en la recuperación/almacenamiento del valor del campo, pero no afecta en absoluto el origen de datos asignado. Esto es particularmente útil en los componentes Desplegable. Ejemplo:
Dado un campo con Propiedad = dato
, cuando se asigne (o herede) el siguiente origen de datos:
{ id:1, dato:2 }
Los datos efectivamente asignados serán el valor 2
(ya que Propiedad filtra el objeto). Pero si el campo tiene Propiedad valor = dato
, su origen de datos efectivo será { id:1, dato:2 }
mientras que, al leer o establecer los valores, afectará la propiedad dato
.
Filtrar valor devuelto:
La propiedad Filtrar valor devuelto (filtrarItems
) permite establecer el nombre de una propiedad que debe evaluarse como verdadera (truthy) en cada elemento a fin de ser incluido en el listado. Esta opción es útil si, por ejemplo, se agrega un campo de opción (checkbox) y se desea que el valor devuelto incluya solo aquellos items marcados, evitando tener que filtrar el resultado manualmente.
La propiedad Devolver propiedades (filtrarPropiedades
) permite establecer el listado de nombres de propiedades (separadas por coma) que se deben incluir en cada item del valor (por defecto, el componente devuelve el objeto asignado).
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).
Este componente es la representación lógica del cuerpo de la vista y no puede insertarse.
¿Probaste Foxtrot? Contanos qué te pareció 🥰 contacto@foxtrot.ar
Índice
Primeros pasos
Gestor de aplicaciones
Editor de vistas
Componentes
Módulos
Comunicación cliente<->servidor
Modelo de datos - ORM
PHPDOC
JSDOC
☝ Comentarios
🤷♂️ Dudas
🤓 Ayuda
⌨ Contribuciones
Escribinos: contacto@foxtrot.ar