Acerca de los temas de estilo en Jitterbit App Builder
Los temas tienen un botón de Vista previa, donde puedes obtener una representación visual rápida de cómo se verán exactamente diferentes pantallas y paneles en App Builder con el tema seleccionado aplicado. Esta guía describe la implementación actual de temas.
Nota
Copia un tema si deseas conservar tus cambios durante una actualización. Si utilizas un tema para propósitos de página o panel, deja el tema base en blanco. Si lo estableces al tema de la aplicación, se cargará el CSS del tema de la aplicación dos veces.
Descripción general
App Builder permite personalizar cómo se ve visualmente una aplicación en la capa de interfaz de usuario mediante el uso de temas de estilo. En App Builder, los temas se definen como pares de componentes y tipos de valor que te permiten controlar la apariencia de áreas definidas de la interfaz de usuario. Un componente aquí representa un área en la interfaz de usuario cuyas propiedades se pueden cambiar (por ejemplo, las páginas son componentes). Los tipos de valor representan las propiedades específicas que se pueden cambiar o definir (por ejemplo, Color de fondo es un tipo de valor).
Por ejemplo, podrías establecer el color de fondo (un tipo de valor) del área de Enlaces en púrpura.
App Builder incluye varios temas base predefinidos que se pueden usar fácilmente en tu aplicación tal como están, o aprovechar como tema base que puedas personalizar aún más. Además, las siguientes opciones están disponibles a través de temas:
- Los tipos de configuración de tema están disponibles para configurar Alineación, Espaciado y transiciones CSS.
-
Las siguientes áreas nuevas de páginas de App Builder se exponen para personalizarse mediante temas:
- Áreas de gráficos, mapas y calendarios.
- Margen de mosaico en tableros/carriles, centrado de mosaico en un panel.
- Grupos de campos de panel de varias filas, encabezados y celdas (permitiendo filas de panel de varias filas más grandes).
- Validaciones (errores, advertencias, indicadores y excepciones presentados al usuario).
- Botón Atrás.
- Botón Cargar más filas.
-
Capacidad de ocultar la barra de herramientas si todos los controles intrínsecos están ocultos, incluyendo la desactivación del contador.
- El botón Cerrar ahora es parte del panel y se puede estilizar de manera similar.
- Compatibilidad con visibilidad de panel que oculta el panel pero reserva el espacio (valor de
3). - Ahora puedes ocultar encabezados de panel o ajustar su tamaño mediante formatos.
- Las fuentes a nivel de sitio se pueden cargar de forma remota.
Estado sin tema
Sin información de tema definida y aplicada, App Builder a nivel de capa de interfaz de usuario aparece en un estado sin tema con estilización mínima. Con el uso de temas, un diseñador puede mejorar rápidamente la apariencia general de una aplicación.
Interfaces
Crear un tema completamente nuevo y asignarlo a una aplicación no resultará en cambios visibles, ya que el nuevo tema no tiene implementaciones. Los colores elegidos a nivel de tema no se aplican automáticamente a ninguna parte de la interfaz de usuario. Para ver colores personalizados a través de la capa de interfaz de usuario, necesitas configurar los paneles de Componentes y Subcomponentes. La Fig 2 muestra el componente Página - Barra de título con su Color de fondo establecido en púrpura para el área de Enlaces.
Los componentes son partes de la interfaz de usuario que pueden recibir implementaciones de estilo.
Tipos de valor
Con un componente especificado, puedes seleccionar un tipo de valor para aplicar una propiedad. Los tipos de valor pueden referirse a colores de fuente, colores de fondo, imágenes, alineación, información de gradiente, información de tamaño, etc., dependiendo de qué área específica de la interfaz de usuario hayas seleccionado para personalizar. En la página de tema, cada tipo de valor tiene información de texto de ayuda correspondiente que contiene consejos e instrucciones útiles sobre qué información específica proporcionar.
Referencia de colores por sintaxis reservada
Al especificar colores en el área de temas de App Builder (color de borde, color de fondo, etc.), se puede hacer referencia al nombre de uno de los tres colores definidos a nivel de tema. Esto permite una personalización más rápida al usar la función Copiar.
Los términos de sintaxis reservados que se pueden especificar son:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Ajuste de colores
Al usar nombres reservados, también se pueden ajustar los colores para mayor o menor brillo y opacidad.
Se pueden ajustar los colores para mayor o menor brillo y opacidad. Esta personalización está disponible para los siguientes términos reservados:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Para ajustar el brillo y oscuridad del color, se añade un carácter de barra vertical junto con un valor decimal numérico (valor positivo para aumentar u valor negativo para oscurecer el color). Los valores esperados son -.9 - .9.
Sintaxis: {PrimaryColor|.25} o {PrimaryColor|-.25}
Para ajustar la opacidad del color, se añade el carácter de tilde junto con un valor decimal numérico. Los valores esperados son .1 - .9.
Sintaxis: {PrimaryColor~.25}
Función Copiar
Se puede copiar cualquier tema. Usa esta función si deseas comenzar rápidamente con un tema y solo establecer los tres colores para Primario, Secundario y Complementario. Hay muchos temas predefinidos disponibles que se pueden seleccionar y usar tal como están o personalizarse más para comenzar rápidamente.
Temas predefinidos de App Builder
App Builder incluye varios temas predefinidos. Aunque técnicamente son editables, cuando actualices se perderán los cambios.
Desde App Builder 4.67, los temas predefinidos Light, Dark, Shapes, Violet, Gradient, Light - Modern y Login Base Theme incluyen cada uno un tema móvil preintegrado, ya establecido como el tema móvil de ese tema para que se aplique automáticamente en pantallas pequeñas. Estos temas móviles están optimizados para uso móvil desde el inicio, con los siguientes ajustes:
- Objetivos táctiles amigables, con un tamaño mínimo de 44x44 píxeles.
- Tipografía y alturas de línea escaladas para móvil.
- Espaciado interno y márgenes compactos.
- Apilamiento de campos de formulario en una sola columna.
Este comportamiento automático solo se aplica a aplicaciones que usan directamente uno de estos temas del sistema. Un tema personalizado basado en un tema del sistema no hereda su tema móvil predefinido. Si usas un tema del sistema directamente y deseas optar por no usar su tema móvil predefinido, crea un tema personalizado basado en el tema del sistema y úsalo en su lugar; el tema móvil predefinido no se transfiere. Si ya usas un tema personalizado basado en un tema del sistema y deseas adoptar su tema móvil predefinido, consulta Usar un tema móvil predefinido con un tema base personalizado.
Consulta Cómo crear un tema móvil para crear un tema móvil personalizado en su lugar.
Sugerencias
Si especificas un color de fondo oscuro, asegúrate de usar un color de fuente que sea legible para todo el texto. Aprovecha la propiedad text-shadow incluida en el color de fuente para añadir contraste adicional.
Apéndice
Componentes
| Área de Bienes Raíces | Nombre de Interfaz | Descripción |
|---|---|---|
| Página | Contenedor - Página | El contenedor para las páginas |
| Contenedor - Sitio | El cuerpo general del sitio, ventanas modales, otros elementos emergentes | |
| Pestaña - Activa | Pestañas activas en una página | |
| Pestaña - Inactiva | Pestañas inactivas en una página | |
| Contenedor de Pestañas | El contenedor para las pestañas que aparecen en ventanas gráficas reducidas | |
| Página - Barra de Título | Enlaces | Enlaces en la barra de página superior |
| Menús desplegables - Contenedor | Los elementos del menú desplegable | |
| Menús desplegables - Elementos del Menú | El menú desplegable, abierto con elementos del menú | |
| Barra de Título - Botón Atrás | El botón atrás que navega a la página anterior | |
| Barra de Título - Contenedor | La barra superior que contiene el nombre de la página, navegación y el botón Más | |
| Barra de Título - Título de Página | El elemento contenedor en la barra superior solo para el título de la página | |
| Barra de Título - Divisores | Pequeños divisores entre elementos | |
| Página - Cajón de Acciones | Elementos del cajón | Botones del cajón de acciones |
| Menú del Sitio | El enlace Inicio que va a la página de Inicio del sitio | |
| Estado del Servicio - Desconectado | El icono de triángulo usado para indicar que el servicio no está en ejecución | |
| Estado del Servicio - Conectado | El icono de triángulo usado para indicar que el servicio está en ejecución | |
| Estado del Servicio - Desconocido | El icono de triángulo usado para indicar que el servicio está en estado desconocido | |
| Elemento Emergente de Página | Botón Cerrar | El botón X que cierra los paneles modales |
| Contenedor | Contenedor de página superpuesto | |
| Contenedor - Contenedor de Panel | Paneles que aparecen como una superposición | |
| Panel | Indicador de Actividad | Círculo animado que indica actividad de red del panel |
| Panel - Contenedor | Panel que contiene el encabezado y el contenido del panel | |
| Panel - Contenido | Contenedor de contenido del panel | |
| Panel - Deshabilitado | Paneles que están deshabilitados porque tienen enlaces incompletos | |
| Panel - Contenedor de Panel | El contenedor externo de cada panel | |
| Panel - Barra de Título | El área encima de un panel, contiene el nombre del panel | |
| Panel - Barra de Herramientas | Barra de Herramientas | Barra de herramientas que contiene botones y controles a nivel de panel |
| Panel - Panel de Una Fila | Grupo de Campos - Contenedor | Contenedor de conjunto de campos que contiene controles de formulario |
| Grupo de campos - Etiqueta | La parte de leyenda del contenedor de conjunto de campos | |
| Grupo de campos - Contenido del Panel | El contenedor de contenido con un panel de una fila | |
| Campo - Etiqueta | El título que representa el campo en un formulario | |
| Campo - Valor | El valor del estado de visualización del campo en un formulario | |
| Panel - Tablero y Carril | Icono de Enlace a Página | El icono que enlaza a una página |
| Mosaico - Contenedor | El elemento contenedor de mosaico de un tipo de panel en mosaico | |
| Mosaico - Relleno | Un elemento de relleno usado para asegurar que los tableros envueltos se alineen a la izquierda. Ocúltalo para centrar, junto con justify-content: center |
|
| Mosaico - Título del Carril | El encabezado encima de carriles o grupos de mosaicos | |
| Mosaico - Seleccionado | El elemento contenedor de mosaico de un tipo de panel en mosaico, cuando está activo | |
| Mosaico - Contenedor de Panel de Mosaico | Un contenedor adicional que envuelve todos los mosaicos | |
| Panel - Múltiples Filas | Campo - Agrupado En | Valores de celda que se difuminan al usar agrupar por |
| Encabezado - Contenedor | Fila de encabezado de columna en una cuadrícula de datos | |
| Encabezado - Grupo de Campos | Columnas agrupadas en una cuadrícula de datos | |
| Encabezado - Etiqueta de Grupo de Campos | La etiqueta encima de cada grupo de campos | |
| Encabezado - Etiqueta | Cada celda de encabezado de columna en una cuadrícula de datos | |
| Fila - Añadir | La fila de adición que aparece al insertar en un panel de múltiples filas | |
| Fila - Celdas | Celdas en un panel de múltiples filas | |
| Fila - Par | Cada fila par en una cuadrícula de datos | |
| Fila - Botón Cargar más filas | El botón que aparece cuando se pueden cargar más filas | |
| Fila - Impar | Cada fila impar en una cuadrícula de datos | |
| Fila - Seleccionada | La fila en la cuadrícula de datos que está actualmente seleccionada | |
| Fila - Total | La fila total de una cuadrícula de datos | |
| Panel - Gráfico | Colores del Gráfico - Color 1 | La primera serie en un gráfico |
| Colores del Gráfico - Color 2 | La segunda serie en un gráfico | |
| Colores del Gráfico - Color 3 | La tercera serie en un gráfico | |
| Colores del Gráfico - Color 4 | La cuarta serie en un gráfico | |
| Colores del Gráfico - Color 5 | La quinta serie en un gráfico | |
| Colores del Gráfico - Color 6 | La sexta serie en un gráfico | |
| Colores del Gráfico - Color de Texto | El texto renderizado para varias partes de un gráfico | |
| Misc - Banderas | Las banderas en un gráfico | |
| Misc - Seleccionado | El color del gráfico resaltado | |
| Panel - Calendario | Contenedor | Los días en un calendario |
| Evento - Contenedor | La caja de evento dentro de un calendario | |
| Evento - Seleccionado | La caja de evento resaltada dentro de un calendario | |
| Fecha de Hoy - Contenedor | La caja completa de la fecha de hoy | |
| Fecha de Hoy - Día | La parte numérica de la fecha de hoy | |
| Fecha de Hoy - Seleccionado | El día seleccionado del mes | |
| Controles | Insignia | El elemento de insignia que se adjunta a otros controles |
| Campos de Icono | Tipos de control de campo de icono | |
| Control de Línea | Controles de línea, usados para dividir contenido en un panel | |
| Barra de Progreso | Elemento de barra de progreso | |
| Botón - Indicador de Actividad | El icono giratorio usado para indicar actividad | |
| Botón - Contenedor | Botones en un panel | |
| Campos - Contenedores de Campos Adicionales | Contenido de campo de formulario adicional, como opciones de cuadro de lista. | |
| Campos - Siempre Editable | El efecto de desplazamiento sobre un campo siempre editable | |
| Campos - Edición Automática | El efecto de desplazamiento sobre un campo de edición automática | |
| Campos - Estado de Edición | Elementos de formulario en la página | |
| Campos - Estado de Edición en uso | Elementos de formulario en la página, cuando están enfocados u otro modo activo | |
| Campos - Control de Formulario | Control de formulario | |
| Campos - No Editable | Todos los valores de texto no editables provenientes de una fuente de datos | |
| Campos - Requerido | El pequeño elemento de color que indica que un campo es requerido | |
| Campos - Seleccionado | Varios elementos de datos resaltados como listas o días en un panel de fecha | |
| Enlaces - Chevron | El chevron que aparece después de un hipervínculo | |
| Enlaces - Contenedor | Enlaces en toda la aplicación | |
| Validaciones | Confirmación | Solicitudes de confirmación para eventos como Eliminar |
| Error | Resultados de validación de tipo Error | |
| Excepción | Excepciones de App Builder que aparecen en la parte inferior de la pantalla | |
| Información | Resultados de validación de tipo Información | |
| Advertencia | Resultados de validación de tipo Advertencia |
Tipos de valor
| Nombre del tipo de valor | Descripción de entrada | Texto de ayuda |
|---|---|---|
| 1 Gradiente de fondo | Una transición de color de un valor de color a otro | Value1 y Value2 se utilizan para los colores Para y Desde. Value3 es para el color del borde. |
| 2 Color de fondo | Código de color o valor nombrado utilizado para rellenar todo el elemento | Value1 se utiliza para el color de fondo. Puede ser un código HTML o usar {PrimaryColor} por ejemplo para utilizar el color del tema. |
| 3 Imagen de fondo | URL o valor de imagen Base64 | Value1 es una URL o una imagen codificada en Base64. Haz clic derecho en cualquier imagen del Generador de aplicaciones y Copiar URL para utilizar imágenes alojadas en el Generador de aplicaciones. Value2 se utiliza para estirar la imagen o repetirla. Para estirar, ingresa cover; de lo contrario, déjalo en blanco para repetir (mosaico) la imagen. |
| 4 Color del borde | Código de color o valor nombrado | Value1 se utiliza para el color del borde. |
| 5 Icono - Glifo | Código de Glyphicon, no valor nombrado | Value1 se utiliza para el código de Glyphicon. |
| 6 Color de fuente | Código de color o valor nombrado | Value1 se utiliza para el color de fuente. Value2 debe estar en un formato específico: 0 1px 1px #222. Cambia el código de color para afectar el color real. |
| 7 Estilos avanzados | Establece valores CSS más avanzados para las propiedades Display, Opacity y Transition |
Value1 oculta elementos estableciendo el valor en none. Value2 establece el margen del elemento, mientras que Value3 establece el relleno. Opacity se utiliza para especificar la opacidad o transparencia de un elemento. Los valores esperados son 0.1 - 0.9. Por ejemplo: 0.5 |
| 8 Fondo avanzado | Todas las opciones relacionadas con el fondo | Value1 representa la abreviatura de fondo. Con esto puedes especificar todas las opciones de fondo a la vez. Value2 es la propiedad de tamaño de fondo. |
| 9 Sombra de caja | Efecto de sombra en cajas | Value1 representa los valores de sombra de caja, mientras que Value2 se utiliza para el color de la sombra. |
| 10 Fuente avanzada | Configuración de varios estilos de fuente como tipo, tamaño y grosor | Value1 se utiliza para los nombres de fuente. Utiliza una lista separada por comas. Value2 es el tamaño de fuente. Puede ser cualquier unidad de medida. Value3 es el grosor. Puedes ingresar un valor o usar bold u otras palabras reservadas. |
| 11 Radio del borde | La curvatura de un borde. Usa 100% para crear un círculo. |
Value1 se utiliza para redondear las esquinas de un elemento. |
| 12 Mosaico de caja flexible | Configuración de estilos que afectan los mosaicos del panel de tablero. | Los valores 1 y 2 controlan el tamaño de los mosaicos. |
| 13 Texto avanzado | Modificaciones de texto | Value1 establece text-decoration, utilizado para agregar subrayado y otras propiedades. Value2 establece text-transform, utilizado para poner texto en mayúsculas. Value3 establece font-style, utilizado para cursivas. |
| 14 Alineación | Establece la alineación para diferentes elementos en un área especificada | Value1 especifica la alineación vertical de un contenedor en línea, por ejemplo: middle. Value2 se utiliza para establecer la alineación horizontal del texto, por ejemplo: center. |
| 15 Fuente | Establece información de varios estilos de fuente, como tipo de fuente, tamaño y grosor (peso) de los caracteres | Value1 se utiliza para especificar el tipo de fuente de un elemento. Utiliza una lista separada por comas. Por ejemplo: Calibri, Arial, sans-serif. Value2 se utiliza para establecer Tamaño de fuente. Las opciones de Tamaño de fuente van desde xx-small hasta xx-large. Por ejemplo: small. Value3 se utiliza para establecer Peso de fuente, o qué tan grueso o delgado aparecen los caracteres de fuente en la página. Las opciones de Peso de fuente van desde normal hasta bolder. Un Peso de fuente de 400 es lo mismo que normal, 700 es lo mismo que bold. Por ejemplo: bold. |
| 16 Espaciado | Especifica valores de espaciado para contenido que aparece en un contenedor | Value1 establece Altura de línea. La propiedad Altura de línea especifica la altura de un elemento. No se permiten valores negativos. Por ejemplo: 1.4em. Value2 se utiliza para establecer Margen. La propiedad Margen se utiliza para crear espacio alrededor de elementos. No se permiten valores negativos. Los 4 lados de un elemento pueden tener Margen definido: top, right, bottom, left. Value3 se utiliza para establecer Relleno. La propiedad Relleno se utiliza para generar espacio alrededor del contenido de un elemento. Los 4 lados de un elemento pueden tener Relleno definido: top, right, bottom, left. |