Editor de vistas

El editor de vistas WYSIWYG Drag&Drop trabaja con el HTML/CSS de la vista, sin perder la relación entre elementos del DOM y los objetos del framework. Permite editar la versión real de la vista, con todos sus estilos y preservando cualquier modificación que se realice externamente.

El editor también permite configurar visualmente estructuras de control (bucles, condicionales, etc)., variables (acceso a datos) e integraciones con los controladores JS y PHP de la vista.

Importante: Es necesario deshabilitar todas las extensiones del navegador que puedan alterar el cuerpo de la página, como bloqueadores de publicidad y trackers.

Estructura adaptativa

Es posible cambiar el tamaño de pantalla mediante el desplegable de la esquina superior derecha. Esto no solo afecta la visualización, sino que muchas propiedades se establecen por tamaño de pantalla.

Los estilos se heredan del tamaño más pequeño al más grande. Es decir que si establecemos una propiedad en tamaño Medio, se mantendrá igual en Grande y Extra grande. Algunas propiedades no son adaptativas, como, por ejemplo, los eventos, el nombre del componente o la clase CSS.

Los tamaños Extra pequeño y Global son equivalentes. Están diferenciados para poder previsualizar la vista en dichos tamaños de pantalla, pero comparten los valores de las propiedades. Esto significa que toda propiedad establecida en cualquiera de los dos tamaños se mantendrá en todos los tamaños, hasta que se sobreescriba en alguno intermedio.

Por ejemplo, podemos crear una fila con columnas y establecer en Extra pequeño su Tamaño (tamano) en 12 (100%) y en Medio, en 6 (50% cada una). Esto producirá que ocupen el 100% del ancho en tamaño Extra pequeño y Pequeño, y el 50% desde tamaño Medio en adelante, incluso en Global (aunque en el cuadro de propiedades se muestre el valor global 12, el valor definitivo se hereda desde Medio).

Además se recomienda, cuando sea posible, aprovechar las utilidades de Bootstrap. Por ejemplo, si a la primer columa quisiéramos agregarle un márgen debajo sólo cuando se visualice al 100%, podríamos establecer la clase CSS mb-3 mb-md-0.

Estilos

Las propiedades que afecten estilos serán establecidas directamente en una hoja de estilos CSS, utilizando media queries para aquellas adaptativas (según el tamaño de pantalla en que se esté trabajando en el editor).

Excepto cuando el valor establecido presente expresiones (ver a continuación), en cuyo caso será procesado en forma dinámica al cargar la vista, y refrescado cada vez que cambie el tamaño de la ventana.

Expresiones

La mayoría de las propiedades admite expresiones, que son bloques de código delimitados entre { y }, los cuales son evaluados al momento de leer la propiedad, ya sea por el framework o manualmente mediante componente.propiedad().

Nota importante: Cuando se ingrese una expresión en una propiedad dentro del editor de vista, deben utilizarse únicamente comillas simples (') y evitarse las dobles (").

Más información.

Consejos de usabilidad

• Al arrastrar un componente sobre otro, tanto si se trata de uno nuevo o se está moviendo uno existente, esperando un segundo aparecerán zonas azules alrededor del componente de destino para poder soltarlo antes/arriba o después/debajo, y zonas amarillas alrededor del componente padre.

  Un caso de uso frecuente de esta funcionalidad es cuando se trabaja con contenedores, filas y columnas. Por ejemplo: Cuando una fila contiene columnas, es posible agregar una columna entre medio de otras dos utilizando las zonas azules. Por otro lado, en este caso, la única forma de soltar un componente entre dos filas es haciendo uso de las zonas amarillas.

• Para seleccionar un componente sobre el cual no se puede hacer click, haciendo click secundario sobre uno de sus hijos se desplegará un menú contextual con opciones para seleccionar cualquier componente en su ascendencia.

  También es posible seleccionar el padre del componente mediante Control + click: Cada vez que se haga click manteniendo presionado Control, se seleccionará el elemento superior al actual.

  Un caso de uso de esta funcionalidad es cuando una fila contiene columnas y es imposible hacer click en la fila porque las columnas ocupan toda su superficie. Haciendo click con el botón secundario sobre cualquier columna, es posible seleccionar la fila, el contenedor o cualquier componente de su ascendencia.

• Al seleccionar un componente, una pequeña pestaña (también la llamamos asa) se muestra en su equina superior izquierda. Esta pestaña no solo muestra el ícono del componente para ayudar a identificarlo, también sirve para arrastrar y recibir componentes (soltar otros componentes dentro del seleccionado).

• Haciendo doble click sobre un componente que tenga texto editable (Texto, Botón, Alternar) se iniciará la edición de texto. Presionando la tecla Escape finalizará la edición. El borde color verde indica que la edición de texto está activa en el componente.

• Los componentes con texto editable aceptan componentes hijos (por ejemplo, una imagen) durante la edición, es decir, únicamente luego de hacerles doble click (o cuando presentan borde verde). Excepto el Botón, que siempre acepta hijos, y de hecho si se van a colocar varios componentes dentro del botón (ej. ícono y texto), se recomienda utilizar un componente Texto en lugar de escribir directamente en él.

• Pueden seleccionarse múltiples componetes manteniendo presionada la tecla Shift.

• Cuando se seleccionen múltiples componentes, la barra de propiedades mostrará las propiedades combinadas de todos ellos, pero no mostrará ningún valor. Cualquier modificación en las propiedades, será aplicada por igual a todos los componentes seleccionados.

• Para copiar o cortar los componentes seleccionados puede presionarse Ctrl+C / Ctrl+X. Asimismo, para pegar los componentes copiados, luego de seleccionar el destino o el cuerpo de la vista, se debe presionar Ctrl+V. Es posible copiar y pegar entre distintas ventanas.

Nota: El editor solo está probado en la última versión de Opera (WebKit).