Dibujar una aplicación de Studio

Objetivo

Dibujar una pantalla en el lienzo e indicar qué es cada objeto.

Dónde se abre

Abra su solución, elija Aplicaciones de Studio, seleccione una y pulse Diseño. El lienzo se abre en el mismo sitio, bajo la misma ruta de navegación y los mismos selectores de entorno y de solución. Es el mismo lienzo que usan los diseñadores de informes y de paneles, así que nada de lo que ya sabe sobre él ha cambiado.

Una aplicación son varias pantallas

Cada marco que etiquete como la pantalla es una pantalla de esta aplicación. Dibuje un segundo marco junto al primero, etiquételo igual, y su aplicación tendrá dos, en un mismo lienzo, una al lado de la otra, donde puede ver ambas a la vez.

Una pantalla se llama como se llama su marco. Cambie el nombre del marco en la lista Capas y habrá cambiado el nombre de la pantalla. Ese nombre no es decorativo: es lo que pedirá la navegación, así que dos pantallas con el mismo nombre se rechazan al guardar, indicando cuál hay que renombrar.

Indique en cuál se abre. En cuanto una aplicación tiene dos pantallas, aparece un selector Se abre en en la barra de título. Elija la pantalla a la que debe llegar quien entre en su aplicación. Con una sola pantalla no hay selector, porque no hay nada que elegir.

Moverse entre ellas es lo siguiente

Dibujar dos pantallas ya funciona, y también elegir cuál se abre. Lo que todavía no está es navigate (la acción que lleva a alguien de una a otra) ni los botones que la llaman. Es la siguiente entrega, y falta deliberadamente en lugar de estar presente sin hacer nada: una acción que no hace nada es peor que una que no se ofrece.

La única novedad: qué es un objeto

Seleccione un objeto y abra la pestaña Pantalla, junto a Gráfico. Allí hay una única pregunta:

Este objeto es…

Respóndala y le habrá dicho a la plataforma algo que no puede averiguar por sí misma. Un rectángulo de texto que es un título y un rectángulo de texto que es un párrafo tienen exactamente el mismo aspecto en el lienzo; solo usted sabe cuál es cuál, y la diferencia está en lo que anunciará un lector de pantalla y en el aspecto que tendrá la pantalla terminada.

Respuesta	Úsela para
La pantalla	El marco dentro del que se dibuja todo lo demás. Su tamaño es el tamaño de la pantalla.
Una región	Un cuadro que agrupa otras cosas: una franja de cabecera, una barra lateral, una tarjeta.
Un título	Un título.
Un párrafo	Un fragmento de texto normal.
Una lista / Un elemento de lista	Una lista, y una entrada de ella.
Un botón	Algo que se pulsa.
Una imagen	Una imagen que significa algo, frente a una decorativa.
(en blanco)	El gráfico de la pantalla: dibujado, pero sin decir nada sobre lo que contiene la pantalla.

Debajo de esas, la misma lista ofrece Control: un Botón, un Cuadro de texto, un Área de texto, una Casilla, una Lista desplegable o un Selector de fecha. Consulte más abajo: esos no son dibujos.

Notará que la lista cambia según lo que tenga seleccionado. Un marco puede ser la pantalla; un objeto de texto no, porque el tamaño de la pantalla es el tamaño de la pantalla. Una línea o una forma no tiene ninguna respuesta posible, y la pestaña lo indica en lugar de mostrarle un panel vacío.

Empiece dibujando un marco y marcándolo como la pantalla. Todo lo demás va dentro de él, y los objetos que están dentro de un marco se pueden anclar a sus bordes para que le sigan cuando cambie de tamaño: el mismo anclaje que ya usa en los otros dos diseñadores.

Dimensionar un fragmento de texto

Seleccione cualquier texto y su sección Texto termina con dos botones:

• Tamaño fijado: el predeterminado, y lo que el texto ha hecho siempre. El ancho es suyo y las palabras se ajustan dentro de él. El alto también es suyo, y es un mínimo: haga el cuadro más alto si quiere, y nunca será más bajo que las palabras. (Antes, los tiradores verticales se movían y el cuadro volvía de golpe a su tamaño, que es lo que hacía que el texto pareciera el único objeto al que no se le podía cambiar el tamaño).
• Ajustar al texto: el cuadro pasa a ser exactamente el texto: tan ancho como la línea más larga que escribió y tan alto como esas líneas. Nada se ajusta, y los tiradores de tamaño desaparecen, porque ya no les queda nada que decidir. Pulse Tamaño fijado para recuperarlos.

No hay deliberadamente un tercer modo que permita que un cuadro sea más bajo que sus palabras. Un cuadro que oculta lo que escribió detrás de su propio borde es un error que no se ve, y un mínimo le da todo lo que necesita «cambiar el tamaño» sin ese riesgo.

Dónde se colocan las palabras en el cuadro

La fila de alineación de Texto tiene un segundo grupo de tres: Texto arriba, Texto en el centro y Texto abajo. Indica a qué borde se anclan las palabras cuando el cuadro es más alto que ellas.

El centro es el valor predeterminado, y es lo que necesita el rótulo de un botón: un cuadro de rótulo dibujado dentro de un botón de 40 px es deliberadamente más alto que su única línea, y centrarlo es lo que coloca las palabras donde dibujó el botón.

Elija arriba para todo lo que pueda crecer. Un cuadro centrado que resulta ser demasiado pequeño se desborda en las dos direcciones, así que una nota que se ajustó en tres líneas sube por encima de la etiqueta que tiene encima. Anclarlo arriba significa que solo puede crecer hacia abajo, hacia un espacio que usted ve. Además es lo que el lienzo ha dibujado siempre, así que es el único ajuste en el que el dibujo y la pantalla coinciden exactamente.

Para volver a seleccionar más tarde el marco de la pantalla, haga clic una vez en su fondo vacío. Hacer clic en un marco suele alcanzar lo que haya dibujado dentro, y un solo clic en una zona vacía selecciona el propio marco, con sus tiradores y todo. Cuando no queda ninguna zona vacía, use clic con el botón derecho → Seleccionar capa, o el panel Capas. Cámbiele el tamaño arrastrando un tirador o escribiendo un ancho y un alto en el inspector; en ambos casos, los objetos anclados de dentro le siguen.

Dibujar sobre una cosa cuando hay varias apiladas

Una pantalla con pestañas son varios paneles dibujados en el mismo rectángulo, de los que se muestra uno cada vez. En el lienzo están todos dibujados, así que solo se puede hacer clic, arrastrar o cambiar el tamaño del de arriba, y los demás quedan en algún lugar por debajo, inalcanzables.

Pulse el botón de diana en la fila de una capa (junto al ojo y el candado) y todo lo demás desaparece del lienzo. Dibuje sobre ella y vuelva a pulsarlo, o pulse Mostrar todo en el aviso de la parte superior de la lista Capas, que está ahí para que un lienzo que se ha quedado medio vacío siempre explique por qué.

No cambia nada de su aplicación. El ojo de al lado también despejaría el camino, pero el ojo es la visibilidad propia del dibujo: una capa que ocultó es una capa que no aparece en absoluto en su aplicación, así que ocultar dos paneles y olvidarse de volver a mostrarlos publicaría una pantalla a la que le faltan dos paneles. Esto afecta solo al lienzo, no se guarda y desaparece la próxima vez que abra el diseñador.

La lista Capas tiene el mismo menú contextual

Haga clic con el botón derecho en una fila del árbol Capas y obtendrá el menú que le da el lienzo: reordenar, agrupar, enmascarar, voltear, crear un componente, bloquear, duplicar, eliminar. Todo, actuando sobre esa fila.

Primero selecciona la fila, así que el menú siempre actúa sobre lo que señaló y no sobre lo que estuviera seleccionado antes. Aquí no hay submenú Seleccionar capa: ese existe para deshacer la ambigüedad de un clic sobre formas apiladas, y una fila de un árbol ya es un único objeto.

Resulta especialmente útil precisamente para los objetos que el lienzo complica: algo enterrado dentro de un marco, detrás de otra cosa o desplazado fuera de la vista. Búsquelo en el árbol y actúe sobre él allí.

Teclas para la vista y las formas

• Zoom con Ctrl+= y Ctrl+- (⌘ en un Mac), o con Ctrl y la rueda del ratón. Ctrl+0 vuelve al 100 %.
• Mayús+1 muestra todo el lienzo. Mayús+2 llena la ventana con lo que tenga seleccionado.
• Desplazarse con la rueda del ratón (Mayús para ir de lado), manteniendo la barra espaciadora y arrastrando, o con la herramienta Mano (H).
• Las flechas mueven la selección un píxel; con Mayús, diez. Cada pulsación es un paso de deshacer.
• Una forma recién dibujada queda seleccionada y vuelve la herramienta Seleccionar, así que puede darle color y nombre enseguida.
• Escribir una Rotación gira la forma sobre su centro, como el tirador de giro.
• Al arrastrar, las guías alinean bordes y centros con lo que hay en pantalla. Mantenga Alt para colocar libremente.
• Haga clic con la herramienta Texto y escriba. El texto nuevo queda seleccionado con su marcador resaltado, así que la primera tecla lo sustituye.
• Un clic en una forma de un grupo selecciona el grupo entero. Haga doble clic para llegar a esa forma.
• Unión, Restar, Intersecar y Excluir dejan el resultado donde estaba la forma de abajo: en el mismo marco, con su nombre y con las esquinas redondeadas si las tenía.
• Ctrl+D sobre algo dentro de un diseño automático pone la copia justo después, en la fila.

Requisitos previos

• La pantalla existe; consulte Crear una aplicación de Studio.

Pasos

1. Abra su solución, elija Pantallas, seleccione una y pulse Diseño.
2. Dibuje un marco. Con él seleccionado, abra la pestaña Pantalla y establezca Este objeto es en La pantalla.
3. Dibuje dentro de él: marcos para las regiones, texto para los títulos y la prosa, imágenes donde quiera fotos.
4. Seleccione cada uno e indique qué es. Deje en blanco los puramente decorativos.
5. Pulse Vista previa para ver la pantalla tal como la verá un usuario.
6. Pulse Guardar.

Al volver a abrir la pantalla, su dibujo aparece exactamente como lo dejó.

La vista previa le muestra lo real

Vista previa sustituye el lienzo por la propia pantalla: no una imagen de ella, ni el lienzo con las guías desactivadas. Es el mismo componente que monta el Shell de la plataforma, así que lo que ve es lo que obtiene un usuario. Seleccione algo de texto en ella y comprobará que se selecciona; pulse Ctrl+F y el navegador lo encuentra.

Pulse Diseño para volver. La vista previa siempre muestra lo que hay en el lienzo ahora, incluidos los cambios que no ha guardado.

Qué hace realmente Guardar

Al guardar se almacenan dos cosas: su dibujo y la pantalla compilada en elementos web normales. Un título se convierte en un título real, un párrafo en un párrafo real y un botón en un botón real. Eso es lo que hace que el texto se pueda seleccionar y buscar, da al botón un anillo de foco y permite que un lector de pantalla anuncie la página correctamente, y nada de eso lo puede hacer un dibujo por sí solo.

Así que sus respuestas en la lista Este objeto es no son etiquetas. Deciden en qué se convierte cada objeto.

De ello se derivan dos cosas que conviene saber:

• Su pantalla se refleja para los lectores de persa y árabe. Todo lo que ancló a la izquierda aparece a la derecha, y el texto que alineó a la izquierda se alinea con el borde de lectura. No tiene que dibujarla dos veces.
• Cambiar el tamaño no cuesta nada. Anclar un objeto a los dos bordes hace que se estire, y anclarlo abajo lo mantiene ahí: lo hace el propio navegador, así que una pantalla se mantiene fluida por mucho que se redimensione. Si se estrecha lo suficiente, la página se desplaza en lugar de encogerse: una pantalla es algo en lo que la gente lee y escribe, y encogerla produce texto que nadie puede leer.

Si Guardar le indica algo

Al guardar puede aparecer una observación. Ninguna de ellas impide el guardado:

• Ningún objeto está etiquetado como la pantalla: se usó el dibujo entero en su lugar. Etiquete un marco como la pantalla para que los objetos de dentro tengan algo a lo que anclarse.
• Hay otro objeto etiquetado también como la pantalla: solo se usa el primero; el resto se convierte en cuadros normales.
• Un botón no tiene texto dentro: no hay nada que pueda anunciar un lector de pantalla. Dibuje un objeto de texto dentro del botón.
• Se dibujó un estado para un control: no se usó. Un control ya sabe qué aspecto tiene cuando se le señala, se le pulsa, tiene el foco o está deshabilitado.

Cuando quiere un control real, no el dibujo de uno

Dibuje un cuadro y, en la pestaña Pantalla, elija una de las entradas de Control en lugar de un elemento. Lo que aparece en la pantalla terminada es el propio control de la plataforma: el mismo selector de fecha que usan los formularios de registros, el mismo cuadro de texto, el mismo botón.

Eso importa más de lo que parece. Un rectángulo con aspecto de campo de fecha no tiene calendario. Un rectángulo con aspecto de cuadro de texto no tiene cursor, ni selección, ni autocompletado, ni comportamiento de teclado. Y cuando un usuario persa abre su pantalla, el selector de fecha real muestra un calendario jalalí sin que usted tenga que hacer nada, porque nunca se volvió a dibujar.

Lo que conserva, y lo que sigue siendo de la plataforma. Dónde lo dibujó, qué tamaño tiene y cómo lo pintó es todo suyo: el relleno, el borde, el radio de las esquinas, y el color y el grosor de las palabras de dentro. Lo que sigue siendo de la plataforma es todo lo que un dibujo no puede expresar: el cursor, el calendario, los números, el comportamiento de teclado y el anillo de foco que usted no pintó encima.

Todo lo que no toque sigue siendo de la plataforma, y esa es la idea, no una limitación. Un control que nunca pintó tiene exactamente el mismo aspecto que cualquier otro control del producto, y sigue al tema cuando cambia. Pinte solo el borde, y solo el borde será suyo.

Pinte con un token, no con un color

Elija una muestra de la fila de tokens que hay bajo el relleno en lugar de escribir un valor hexadecimal. Primary es el color de acento del inquilino en modo claro y en modo oscuro; un valor hexadecimal es correcto en uno de los dos. Un control soltado desde la paleta Controles llega ya pintado con tokens, y por eso se ve bien en ambos.

Escriba la etiqueta dentro del cuadro. Las palabras que dibuja en él se convierten en el rótulo de un botón, la etiqueta de una casilla o el texto de ejemplo atenuado de un cuadro de texto: no hay un campo aparte que rellenar.

Cosas que se escriben en lugar de dibujarse:

• Opciones, en una lista desplegable, una por línea. Es lo único de un control que no se puede dibujar: una lista desplegable cerrada muestra un valor y nunca la lista.
• Admite, en un cuadro de texto: qué tipo de valor contiene: Texto, Una contraseña, Una dirección de correo electrónico, Un número, Un número de teléfono, Una dirección web. No es decorativo: un cuadro de contraseña oculta lo que se escribe e incluye el botón de la plataforma para mostrarla, un cuadro de correo electrónico o de dirección web muestra el teclado adecuado en un teléfono, y un cuadro de número, un teclado numérico.
• Solo lectura, en un cuadro de texto o un área de texto: se puede leer, seleccionar y copiar, pero no cambiar. Es distinto de Deshabilitado, que está en todos los controles y significa que el control no es para este usuario en absoluto: el teclado y los lectores de pantalla se saltan un control deshabilitado, pero no uno de solo lectura.
• Máximo de caracteres, en un cuadro de texto o un área de texto: el navegador deja de admitir escritura al llegar a esa longitud.
• Admite, en un selector de archivos: Cualquier archivo o Una imagen. Decide dos cosas a la vez: qué ofrece el cuadro de diálogo de archivos y si lo elegido se muestra como imagen.
• Elige, en un selector de fecha: Una fecha, Una fecha y una hora o Una hora.
• Calendario, en un selector de fecha: La configuración del inquilino, Gregoriano o Persa. Déjelo en la primera opción salvo que el calendario sea un hecho sobre los datos y no sobre el lector: la caducidad de un pasaporte es gregoriana para todo el mundo, mientras que «la fecha en que se aprobó esto» debe mostrarse en el calendario que use quien la lea.

Un selector de archivos guarda el archivo en la página; un controlador lo almacena

Enlace Valor a un campo de estado y el archivo elegido llega a él. Un texto enlazado al mismo campo muestra el nombre del archivo. Para conservar el archivo, pase el campo a createRecord o updateRecord como valor de un campo Archivo o Imagen — updateRecord("contact", id, { new_photo: getState("photo") }) — y se almacena con el registro. Hasta que un controlador lo haga, el archivo se queda en la página y desaparece cuando sale de la pantalla. Un archivo de más de 4 MB se rechaza en el selector, antes de leerlo.

nota

Si ha enlazado Habilitado a una expresión, la casilla Deshabilitado aparece atenuada y explica por qué: la expresión ya responde cuándo se puede usar el control, y una casilla a su lado sería una segunda respuesta. Enlace enabled o marque Deshabilitado, no las dos cosas.

Los controles también admiten estados dibujados. Dibuje el control, duplíquelo, cambie los colores de la copia y etiquete la copia como invalid, exactamente igual que haría con un cuadro que dibujó. Lo que se traslada es la diferencia, y se aplica al propio control. Consulte Reutilizar un diseño con componentes para saber cómo se declara un estado.

Entonces, ¿cuál usa? Dibújelo cuando lo importante sea el aspecto: una llamada a la acción con sus propios colores y un efecto al pasar el puntero que dibujó usted. Elija un control cuando lo importante sea el comportamiento: un calendario, un cursor, un teclado.

Crear un «botón de peligro»

No hay ninguna lista desplegable Aspecto, ni hace falta. Para obtener un botón rojo:

1. Suelte un Botón desde la paleta Controles.
2. Establezca su relleno en el token Error y el color del rótulo en blanco.
3. Selecciónelo y pulse Crear componente: el propio botón se convierte en el componente. Cambie el nombre de la capa a Danger button y el componente cambia de nombre con ella.

Ahora está en la lista Componentes, y cada pantalla que coloque uno obtiene el mismo botón rojo. ¿Quiere un efecto al pasar el puntero? Agregue un estado al componente y dibuje la copia más oscura. ¿Quiere también un botón Success? Haga lo mismo otra vez: es un gesto que ya conoce, en lugar de una quinta entrada en una lista desplegable que alguien tiene que agregar por usted.

Vincular a otro sitio

Seleccione un cuadro o un fragmento de texto y, en la pestaña Pantalla, elija Un vínculo. A continuación aparecen dos campos:

• Dirección: adónde lleva: https://example.com/docs, mailto:someone@example.com, tel:+441234567890, o una ruta dentro de esta aplicación, como /reports/monthly.
• Se abre: En esta ventana (lo habitual) o En una pestaña nueva.

Para ir a otra pantalla de esta aplicación, escriba su nombre: Contacts. El vínculo lleva a esa pantalla dondequiera que se abra la aplicación, sola o dentro de una aplicación basada en modelos, cuyas direcciones para la misma pantalla son distintas. Al pulsarlo se cambia de pantalla dentro de la aplicación sin recargar la página, y con el botón central se sigue abriendo la pantalla en una pestaña nueva.

Por qué es un vínculo y no un botón con un controlador. Al hacer clic con el botón central se abre una pestaña. Al hacer clic con el botón derecho se ofrecen Abrir vínculo en una pestaña nueva y Copiar dirección del vínculo. Al pasar el puntero se muestra el destino en la barra de estado del navegador. Un lector de pantalla puede enumerar todos los vínculos de la pantalla y leer el suyo entre ellos. Nada de eso viene de un controlador: todo viene de que el elemento sea un vínculo real, y esa es precisamente la razón de que sea algo que se etiqueta y no algo que se programa.

Cuando el destino se calcula, enlace Dirección en lugar de escribirla: "https://example.com/" + state.topic. El enlace tiene prioridad, y el panel atenúa el cuadro y lo indica. Consulte Hacer que una pantalla reaccione.

Algunas direcciones se rechazan, y el panel se pone en rojo mientras escribe una: solo se permiten direcciones web (http, https), direcciones de correo electrónico, números de teléfono y rutas dentro de esta aplicación. Un vínculo que ejecuta un script no es un vínculo, y una pantalla puede llegar de una importación en lugar de salir de sus propias manos.

consejo

Cuando es la pantalla la que decide adónde ir (después de guardar, o según lo que alguien haya elegido), use openUrl("…") en un controlador. Se aplica la misma regla sobre las direcciones; consulte Hacer que una pantalla reaccione.

Dibujar su aspecto cuando se señala

Los estados pertenecen a un componente. Seleccione aquello a lo que quiere dar un estado, haga clic con el botón derecho y elija Crear componente; después agregue sus estados en el componente, donde aparecen juntos. Recorrido completo: Reutilizar un diseño con componentes.

Eso es un solo sitio en lugar de dos. Antes había también un cuadro Dibujar un estado en esta pestaña, que pedía un nombre y una interacción antes de que hubiera dibujado nada y aparecía en objetos que no tenían ninguna lista de estados a la que agregarlo; ahora la pestaña Pantalla indica dónde viven los estados.

Un componente con una sola instancia es un componente perfectamente válido. Si lo único que quiere es un efecto al pasar el puntero sobre un botón, conviértalo en componente y dele el estado: ese es el precio, y también es lo que le permite colocar ese botón dos veces mañana.

Qué es el nombre de un estado, y qué es Mientras

Un estado tiene dos mitades, y se indican en dos sitios:

• El nombre es suyo: invalid, overBudget, awaitingApproval. Selected, Ticked, Invalid, Success, Warning, Loading y Read-only son solo sugerencias.
• Mientras, en el propio panel de la variante: Siempre, o Puntero encima, Presionado, Con el foco. Esos tres son del navegador, así que son los que no puede inventar.

nota

Deshabilitado es un nombre, no un Mientras. Antes estaba en ese selector, y no le corresponde estar ahí: Puntero encima, Presionado y Con el foco son cosas que alguien está haciendo, y cada una termina en el momento en que deja de hacerlas. Deshabilitado es lo que el control es (lo decidió su pantalla), así que es un nombre de estado como cualquier otro, escrito como disabled.

No tiene que indicar cuándo está activo. La pantalla ya lo sabe, por la casilla Deshabilitado del control o por su expresión Habilitado, y activa el estado por usted. Dibuje una variante, llámela disabled, y un control que no se puede usar la lleva.

Establezca ambas y tendrá una combinación: Invalid mientras se señala. Nunca tiene que dibujar todas las combinaciones: si un usuario señala algo en el estado Invalid y usted solo dibujó Invalid, obtiene Invalid.

Use letras, dígitos, - y _, empezando por una letra. Un nombre que no podría ser un estado atenúa el botón y lo indica, en lugar de dejarle dibujar cuatro y encontrarse con el rechazo al guardar.

Tres cosas que conviene saber:

• Solo se guardan las diferencias. Si cambia el fondo de la copia, solo se recuerda el fondo. Así, cambiar el tamaño del original, o editar su rótulo, no tiene que repetirse en cada estado, y eso es lo que evita que un botón dé un salto cuando se le señala.
• Mueva la copia donde quiera. El lugar que ocupa la copia en el lienzo no forma parte del estado; es solo un sitio desde el que mirarla.
• Pero mover algo dentro de la copia sí forma parte. Deslice el mando de un interruptor al otro extremo de su guía en la copia, y el mando del interruptor se desliza cuando se activa el estado: se desplaza suavemente en lugar de saltar. Así se dibuja un interruptor, un control de incremento o un resaltado que se desplaza. Cambiar el tamaño de algo dentro de la copia también cuenta, y cambia de golpe en lugar de suavemente: agrandar un cuadro redistribuye lo que lo rodea, y animar eso es lo que hace que una pantalla dé tirones.
• No se ejecuta nada. Lo hace todo el navegador, así que una pantalla con cincuenta estados al pasar el puntero es exactamente igual de rápida que una sin ninguno.

Agregue o quite un objeto en la copia y el estado deja de funcionar, y Guardar lo indica, nombrándolo. Un estado tiene que tener la misma forma que lo que refleja. Para mostrar algo más al señalar, dibújelo en el original, ocúltelo allí y hágalo visible en el estado: oculto y visible es una diferencia de aspecto, que es algo que un estado sí puede hacer.

Ponerle un icono

Componentes → Icono… abre el propio selector de iconos de la plataforma: todo el conjunto Lucide, en el que se puede buscar por lo que significa un icono y no por su nombre exacto. Elija uno y cae en el lienzo.

Lo que cae es un objeto dibujado normal, no un tipo de objeto especial:

• se pinta con los mismos rellenos que todo lo demás, así que dele un token de diseño y seguirá el modo claro u oscuro del lector;
• admite estados dibujados, así que puede cambiar de color al pasar el puntero junto con la tarjeta en la que está;
• puede enlazar Visible, que es como un botón lleva dos glifos y muestra el que corresponde: el botón de modo de color del ejemplo dibuja una luna y un sol y muestra el que no es el modo actual.

Llega con trazo en lugar de relleno, pintado con color.text, de 24 por 24. Cámbiele el tamaño, cámbiele el color, suéltelo dentro de un botón junto al rótulo. Después ya no tiene nada de especial.

Un botón que solo contiene un icono se rechaza. Guardar avisa de que no tiene texto dentro, así que un lector de pantalla no tiene nada que anunciar: ponga las palabras junto al glifo, como hace el control Dark mode del ejemplo Support desk. Es además el control más amable: no todo el mundo ha aprendido que una luna significa modo oscuro.

La fila es solo de clic y no se puede arrastrar, porque un arrastre tiene que saber qué lleva, y este llevaría un cuadro de diálogo.

¿Eligió el que no era? Cámbielo

Seleccione el icono y el panel de propiedades muestra un campo Icono bajo su nombre, con el mismo selector dentro. Elija otro y solo se sustituye el dibujo: su tamaño, su color, sus estados y sus enlaces se quedan exactamente como los estableció.

Esa es toda la razón de cambiarlo ahí en lugar de eliminarlo y colocar uno nuevo: un icono nuevo llega de 24 por 24 en color.text y no sabe nada del botón en el que lo había puesto.

Un icono que dibujó usted mismo con la pluma no tiene campo Icono, ni debe tenerlo: no hay ningún nombre detrás que intercambiar, y lo único que podría hacer un selector es tirar su dibujo.

Poner un icono en un botón

Seleccione un botón y el panel de propiedades muestra un campo Icono del botón, con el mismo selector. Elija un icono y se dibuja dentro del botón: en el centro si no tiene texto, delante del texto si lo tiene, a la mitad de la altura del botón y en su sitio cuando el botón cambia de tamaño. Elija otro para cambiarlo, o vacíe el campo para quitarlo.

Una lista, una tabla o un menú: pintar las filas

Dibuje un cuadro, ponga las filas dentro y los campos Filas del cuadro las pintan, por encima de cómo dibujara cada fila. Son cuatro:

• Filas alternas: las bandas de cebra. La primera fila conserva lo que dibujó, así que lo que ve mientras dibuja es el aspecto de la fila uno.

• Fila bajo el puntero: el resaltado que sigue al ratón por una lista. No cuesta nada: lo hace el navegador, así que una tabla de doscientas filas es tan rápida como una vacía.

• Fila elegida: la fila que alguien eligió. Consulte más abajo cómo indica una fila que es la elegida.

• Borde de la fila elegida: una barra en esa misma fila, y La barra va indica en qué borde:

  • A lo largo del borde inicial: a la izquierda en español, a la derecha en persa y en árabe, sin que tenga que establecerlo dos veces. Lo que quiere un carril de navegación.
  • Debajo de la fila, como una pestaña: lo que quiere una franja de pestañas, porque así es como se marca una pestaña elegida en todos los productos que existen. Una fila de pestañas va en horizontal, así que una barra a la izquierda de la primera es un control que nadie reconoce.

  Es el color de acento de forma predeterminada, porque en una lista discreta una fila elegida y una fila señalada son dos tonos del mismo gris, y la barra es lo que dice está aquí de un vistazo.

Cuando dos colores pintarían la misma fila, gana el que aparece después en esa lista: el puntero cubre la cebra, y la fila elegida conserva su propio color incluso bajo el puntero. Hacer que una fila elegida parezca no elegida justo cuando alguien va a por ella sería peor que el resaltado se quede quieto durante una fila. El borde no es un color de la fila y queda fuera de esa competición: se pinta además de lo que haya ganado, y no mueve nada de la fila, así que nada salta hacia los lados cuando cambia la selección.

consejo

No dibuje la barra. Un rectángulo junto a un elemento no se puede mover, así que pulsar otro elemento lo deja donde estaba, y eso es una imagen de una selección, no una selección. Establezca Borde de la fila elegida y seguirá la misma respuesta que el relleno.

Se aplican a los cuadros directamente dentro de aquel en el que los establece, y no más abajo: así, una lista de tarjetas pone bandas en las tarjetas, no en los cuadros de dentro de cada tarjeta.

Siempre que pueda, elija un color del tema en lugar de un color propio. Un gris que tomó con el cuentagotas es correcto en modo claro e incorrecto en modo oscuro, y lo es de forma invisible: el dibujo sigue pareciendo el dibujo de una pantalla clara.

Cuando hay más filas que alto tiene el cuadro

Un cuadro que dibujó para seis filas contiene cien en cuanto tiene detrás una tabla real, así que toda lista tiene que resolver esto. El lugar es la lista desplegable Contenido que no cabe del marco:

• Mostrarlo: se desborda es lo que hace un dibujo, y es lo correcto para una tarjeta con sombra. En una lista es lo que hace que las filas bajen por encima del paginador y de todo lo que hay debajo.
• Ocultarlo las corta. La séptima fila queda entonces inalcanzable, que rara vez es lo que se pretendía.
• Desplazarse hasta él es la respuesta para una lista: el cuadro conserva el tamaño con el que lo dibujó y su contenido se desplaza dentro. Una lista lo bastante corta para caber no muestra ninguna barra de desplazamiento.

Después, indique hacia dónde se desplaza. En cuanto elige Desplazarse hasta él aparece una segunda lista desplegable, Hacia dónde se desplaza:

• En ambas direcciones es lo que quiere una lista.
• Hacia abajo: el texto se ajusta es lo que quiere una columna de prosa. El eje en el que no se desplaza se recorta, y recortar el horizontal es exactamente lo que hace que un párrafo pase a la línea siguiente en lugar de salirse por el lado del cuadro. Úselo siempre que el cuadro contenga un campo de texto largo.
• En horizontal: las filas se quedan en una línea es lo que quiere una tabla ancha con columnas, para que una fila siga siendo una fila.

Un campo de texto largo es un marco que dibuja alrededor del texto

La lista desplegable está en un marco. Un fragmento de texto no tiene nada propio contra lo que recortarse, porque crece para ajustarse a sus palabras; así que dibuje un marco del tamaño que debe ocupar la nota, ponga el texto dentro y establezca ese marco en Desplazarse hasta él y Hacia abajo: el texto se ajusta.

Cuánto ve a la vez depende del tamaño con el que dibujó el marco. Hacer más alto el objeto de texto no cambia nada visible, porque es el marco el que sostiene la vista. El cuadro de diálogo de detalles del ejemplo Support desk es exactamente esto, sobre un campo Notes de dos mil caracteres.

Dos cosas que conviene hacer a la vez:

• Ancle el cuadro arriba y abajo en Restricciones, para que una ventana más alta muestre más filas en lugar de más espacio vacío debajo de ellas.
• Deje la cabecera fuera del cuadro. Una cabecera dibujada como primera fila de la propia lista se desplaza con las filas; dibujada como un marco aparte encima, se queda. El tablero del ejemplo Support desk hace exactamente esto.

Dibuje una fila, obtenga una por registro

Las filas de una tabla no son veinte cuadros que dibujó usted. Dibuje una e indique sobre qué se repite:

1. Cargue los registros. En el controlador Cargado de la pantalla, escriba loadRecords("par_account", "accounts"): el nombre de la tabla y un campo de estado en el que poner las filas. Un tercer argumento indica cuántas como máximo, o plantea una pregunta más completa: { top: 20, where: { par_status: "Open" }, orderBy: "par_name" }. Consulte Leer y escribir registros.
2. Indique qué se repite. Seleccione la fila que dibujó y rellene Uno de estos por cada con state.accounts.
3. Indique qué muestra cada celda. Enlace un rótulo de dentro de la fila a row.par_name: row es ese registro. rowIndex es su posición, contando desde cero.

Dos cosas sobre el cuadro que rodea la fila:

• Tiene que apilar sus elementos secundarios: active el diseño automático. Cada copia de un cuadro que usted colocó conserva la posición en la que lo colocó, así que las cuarenta caerían encima de la primera. Guardar lo indica si se le olvida.
• Todo lo demás de ese cuadro se deja como está. Una fila de cabecera dibujada encima del cuerpo no se repite, porque la repetición está en la fila y no en el cuadro.

Puede repetir un control con la misma facilidad que un cuadro: una casilla por fila es como alguien selecciona varios registros, y es una casilla normal con row.id en el controlador.

Un límite que conviene conocer antes de toparse con él: una repetición no puede ir dentro de otra repetición. row significaría dos cosas distintas en el mismo sitio, así que Guardar rechaza la interior e indica cuál.

Cuál es la fila elegida

Dos mitades, y ninguna ocupa más de una línea:

1. Indique cuál: enlace la propiedad Elegida de cada fila a una comparación, como row.id == state.picked. Es un enlace, no algo que se activa, y eso es lo que hace que la fila anterior deje de estar elegida en el mismo momento: cada fila vuelve a responder la pregunta cuando cambia el estado.
2. Establézcala cuando se pulse una fila: setState("picked", "…") en el controlador Presionado de la fila.

Si además dibujó una variante Elegida de la fila, el mismo enlace la activa también. Aquí hay una sola idea de «elegida», no dos: el relleno y la variante leen la misma respuesta.

Llenar la fila, y un menú para el teléfono

Cada objeto dentro de un marco con diseño automático tiene la longitud con la que lo dibujó, así que una fila nunca puede ser más estrecha que lo que contiene, y en un teléfono se sale por el lado. Seleccione el objeto y, en Cambio de tamaño de la pestaña Gráfico, marque Llenar la fila (o Llenar la columna): ocupa la longitud que dejen los demás, y la devuelve cuando hay menos.

Así se dibuja la barra superior de un sitio web: el nombre del sitio llena la fila, de modo que los vínculos se quedan pegados al borde opuesto con cualquier ancho.

Un formulario que ocupa todo el ancho de un teléfono, y una tarjeta en un escritorio. Seleccione un marco dentro de un diseño automático vertical y establezca Ancho máximo en Cambio de tamaño: la columna lo estira a lo ancho de una pantalla estrecha y, en una más ancha, se detiene en esos píxeles y lo centra. Una tarjeta de inicio de sesión o un formulario de contacto se dibujan una vez así, no una vez por ancho. Vacío significa sin límite.

Tres tarjetas en fila en un escritorio, una encima de otra en un teléfono. Seleccione un diseño automático horizontal y marque Ajustar en varias líneas en Diseño automático. Cada elemento de la fila empieza con el ancho con el que lo dibujó; cuando la pantalla es demasiado estrecha para todos, los que ya no caben pasan a la línea siguiente. Dé a cada tarjeta Llenar la fila y además se estirará por lo que quede de su línea: tres tarjetas comparten un escritorio, una tableta pone la tercera en una línea propia y un teléfono pone una por línea. Dibujadas una sola vez: no hay una segunda copia de las tarjetas que ocultar. El lienzo muestra la única línea que dibujó; el ajuste es lo que le hace una pantalla más estrecha.

Para un teléfono, dibuje los vínculos y un botón Menú, y dé a cada uno un enlace Visible sobre el ancho de la página:

screen.width >= 720      on the links
screen.width < 720       on the Menu button

screen.width es el ancho del cuadro en el que se muestra la pantalla, y cambia a medida que cambia la ventana. Ponga el botón Menú al principio de la barra y haga que ejecute openStartDrawer("Site menu"), donde Site menu es una tarjeta superpuesta con los mismos vínculos dentro; así el menú se abre desde el lado en el que está su botón (la izquierda en español, la derecha en persa). Dé a cada vínculo Elegida screen.name == "Home", y a la fila en la que está un relleno de puntero encima y otro de elegida, y el menú marcará dónde está. El ejemplo portal-pages-and-navigation dibuja uno por usted.

Dibuje la barra una sola vez. Una barra en cada pantalla es un componente: dibújela, conviértala en componente y coloque una instancia en cada pantalla; cambie el principal y todas las páginas lo siguen. Como un vínculo lee screen.name, a una instancia no hay que decirle nada sobre en qué página está.

Un marco dentro de un marco manual (con el diseño automático desactivado) tiene Restricciones en su lugar: áncelo a unos bordes y mantendrá su distancia respecto a ellos cuando el marco cambie de tamaño. Dentro de un diseño automático es el diseño el que decide dónde van las cosas, así que Cambio de tamaño es la única pregunta que queda.

Lo que todavía no está

Deliberadamente, y cada cosa en su propia versión:

• Las vistas guardadas, y las partes de un filtro que no caben en una línea. Una pantalla nombra una tabla, con pares de igualdad, pares de «contiene», un orden y una página; consulte Mostrar una lista página a página. No puede nombrar una de las vistas guardadas de la plataforma, así que un filtro que ya dibujó allí se vuelve a dibujar aquí. Y no hay o, ni intervalos, ni anidamiento: ahí es donde un filtro deja de ser una línea en un controlador y se convierte en el diseñador de consultas.
• Sumas y promedios. Una pantalla cuenta filas (eso es lo que son los mosaicos del ejemplo de panel), pero no puede totalizar una columna ni agrupar por ella.
• Un control de búsqueda. Los demás ya han llegado: una cuadrícula y un formulario rápido son el control Vista de tabla o formulario (Poner un panel en una pantalla dibujada), un cuadro de diálogo es una tarjeta superpuesta, las pestañas son un valor elegido y un enlace Visible por panel, y moverse entre pantallas es navigate. Lo que todavía no tiene un control propio es el selector de registros: la biblioteca de componentes tiene uno dibujado, que el ejemplo Support desk coloca y al que da su propio estado.
• Ranuras. Un componente admite propiedades y genera eventos; lo que todavía no puede hacer es dejar un hueco para que lo rellene la pantalla que lo coloca.
• El teclado, y cualquier cosa con temporizador. Hay ocho eventos, y el único sobre la propia vida de la pantalla es Cargado.

La pestaña solo ofrece lo que hoy significa algo. Un control que no hiciera nada le enseñaría un gesto que no hace nada.

Solución de problemas

• La pestaña Pantalla dice que mi objeto forma parte del gráfico. — las líneas, las formas y los trazados no tienen ningún significado que dar. Los marcos, el texto y las imágenes son los que se pueden responder.
• No se ofrece «La pantalla». — tiene seleccionado un objeto de texto o una imagen. Solo un marco puede ser la pantalla.
• Mi control no se parece en nada al cuadro que dibujé. — esa es la idea: un control trae su propio aspecto. De su dibujo solo salen su posición y su tamaño. Si quería los colores que eligió, déjelo como cuadro y dele el elemento Un botón en su lugar.
• No hay dónde dibujar un estado. — los estados pertenecen a un componente. Haga clic con el botón derecho en el objeto, elija Crear componente y agregue el estado en el componente. (Si el objeto es un control, no tiene ninguno por diseño: ya sabe qué aspecto tiene en cada estado).
• Guardar aparece atenuado. — no ha cambiado nada desde el último guardado.
• La vista previa está vacía. — no hay nada etiquetado como la pantalla, o el marco de la pantalla no tiene nada dentro. Dibuje un marco, márquelo como la pantalla y ponga algo dentro.
• Mi estado no hace nada. — o la copia es idéntica al original (no hay ninguna diferencia que guardar), o solo la movió, algo que un estado ignora deliberadamente. Cambie un color.
• Guardar dice que un estado cambia la estructura. — la copia tiene más o menos objetos que el original. Consulte más arriba.
• El objeto del que copié ha desaparecido. — Guardar lo indica: un estado que no tiene nada de lo que ser un estado no dibuja nada. Elimine la copia o vuelva a dibujar el objeto.
• Mi pantalla no aparece en una aplicación. — una pantalla tiene que estar colocada en una; consulte Abrir una aplicación de Studio desde una aplicación basada en modelo.
• Mi dibujo se ve bien pero la pantalla se ve sosa. — compruebe en qué está establecido cada objeto. Un objeto en blanco forma parte del gráfico: se dibuja, pero no dice nada sobre lo que contiene la pantalla.

Escenarios relacionados

• Hacer que una pantalla reaccione: estado y enlaces, para que el dibujo haga algo.
• Crear una aplicación de Studio.
• Reutilizar un diseño con componentes.
• Abrir una aplicación de Studio desde una aplicación basada en modelo.