Acerca de los temas de estilo en Jitterbit App Builder
Los temas tienen una función de Vista previa, donde se puede obtener una representación visual rápida de cómo se verán las diferentes pantallas y paneles en App Builder con el tema seleccionado aplicado. Esta guía describe la implementación actual de los temas.
Nota
Copia un tema si deseas mantener tus cambios durante una actualización. Si estás utilizando un tema para propósitos de página o panel, deja el tema base en blanco. Configurarlo al tema de la aplicación cargará el CSS del tema de la aplicación dos veces.
Resumen
App Builder permite la personalización de cómo una aplicación aparece visualmente en la Capa de Aplicación mediante el uso de Temas de Estilo. En App Builder, los temas son combinaciones definidas de Componentes y Tipos de Valor que te permiten controlar la apariencia de áreas definidas de la interfaz de usuario y la experiencia de usuario de la Capa de Aplicación. Un componente aquí representa un área en la interfaz de usuario de la Capa de Aplicación que puede tener sus propiedades cambiadas, por ejemplo, Página es un componente. Los tipos de valor representan las propiedades específicas que pueden ser cambiadas o definidas, por ejemplo, Color de fondo es un tipo de valor.
Por ejemplo: Establecer el Color de fondo [Tipo de valor] de los Enlaces [Interfaz] para que sea púrpura.
Varios Temas Base predefinidos se incluyen con App Builder que pueden ser utilizados fácilmente por tu aplicación tal como están, o aprovechados como un tema base que puedes personalizar aún más. Además, las siguientes opciones están disponibles a través de los temas:
- Los tipos de configuración de temas están disponibles para configurar Alineación, Espaciado y Transiciones CSS
- Las siguientes nuevas áreas de las Páginas de App Builder están expuestas para ser personalizadas a través de los temas:
- Áreas de Chart, Map y Calendar
- Margen de los mosaicos en Tableros/Líneas, centrado de mosaicos en un panel
- Grupos de campos de panel de múltiples filas, encabezados y celdas (permitiendo filas MRP más grandes)
- Validaciones (Errores, advertencias, mensajes y excepciones presentadas al usuario)
- Botón de retroceso
- Botón de cargar más filas
- Capacidad para ocultar la barra de herramientas si todos los controles intrínsecos están ocultos, incluyendo desactivar el conteo
- El botón de cerrar ('x') ahora es parte del panel y puede ser estilizado de manera similar
- Soporte para la visibilidad del panel que oculta el panel pero reserva el espacio (valor de "3")
- Ahora se pueden ocultar los encabezados del panel o ajustar su tamaño a través de formatos
- Las fuentes a nivel de sitio pueden ser cargadas de forma remota
Estado sin tema
Sin ninguna información de tema definida y aplicada, el Constructor de Aplicaciones a nivel de Capa de Aplicación aparece en un estado sin tema con una 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 ningún cambio visible, 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 de la Capa de Aplicación. Para ver colores personalizados a través de la Capa de Aplicación, es necesario configurar la Configuración de Componentes. La Fig 2 tiene el Color de Fondo del Componente - Barra de Título de la Página configurado 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 degradado, información de tamaño, etc., dependiendo del área específica de Bienes Raíces que hayas seleccionado para personalizar. En la página del 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.
Referenciando colores por sintaxis reservada
Al especificar colores en el área de Temas del Constructor de Aplicaciones (color de borde, color de fondo, etc.), puedes referenciar el 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 de Copia.
Los términos de sintaxis reservados que puedes especificar son:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Ajustando colores
Al usar nombres reservados, los colores también se pueden ajustar para brillo o oscuridad y opacidad.
Los colores se pueden ajustar para brillo o oscuridad y opacidad. Esta personalización está disponible para los siguientes términos reservados:
{PrimaryColor}{SecondaryColor}{ComplementaryColor}
Para ajustar el brillo y la oscuridad del color, agrega un carácter de barra (pipe) junto con un valor decimal numérico (valor positivo para aumentar o valor negativo para oscurecer el color). Los valores esperados son -.9 - .9.
Sintaxis: {PrimaryColor|.25} o {PrimaryColor|-.25}
Para ajustar la opacidad del color, agrega el carácter de tilde junto con un valor decimal numérico. Los valores esperados son .1 - .9.
Sintaxis: {PrimaryColor~.25}
Botón de copiar
Cualquier tema puede ser copiado. 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 cual o personalizar aún más para comenzar rápidamente.
Temas predefinidos del Creador de Aplicaciones
El Creador de Aplicaciones incluye varios temas predefinidos. Aunque estos son técnicamente editables, al actualizar, cualquier cambio se perderá.
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 de sombra de texto incluida en el color de fuente para agregar contraste adicional.
Apéndice
Componentes
| Área Inmobiliaria | 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 pop-ups | |
| 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 vistas reducidas | |
| Página - Barra de Título | Enlaces | Enlaces en la barra superior de la Página |
| 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 de Regreso | El botón de regreso 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 - Separadores | Separadores pequeños entre elementos | |
| Página - Cajón de Acción | Elementos del Cajón | Botones del cajón de acción |
| Menú del Sitio | El enlace de Inicio que va a la página de inicio del sitio | |
| Estado del Servicio - Fuera de Línea | El ícono de triángulo utilizado para indicar que el servicio no está en funcionamiento | |
| Estado del Servicio - En Línea | El ícono de triángulo utilizado para indicar que el servicio está en funcionamiento | |
| Estado del Servicio - Desconocido | El ícono de triángulo utilizado para indicar que el estado del servicio es desconocido | |
| Página Emergente | Botón de 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 la actividad de la red del panel |
| Panel - Contenedor | Panel que sostiene 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 exterior de cada panel | |
| Panel - Barra de Título | El área sobre 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 fieldset que sostiene controles de formulario |
| Grupo de Campos - Etiqueta | La parte de leyenda del contenedor de fieldset | |
| Grupo de Campos - Contenido del Panel | El contenedor de contenido con un panel de una sola 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 | Ícono de Enlace a Página | El ícono que enlaza a una página |
| Azulejo - Contenedor | El elemento de azulejo contenedor de un tipo de panel de azulejos | |
| Azulejo - Relleno | Un elemento de relleno utilizado para asegurar que los tableros envueltos se alineen a la izquierda. Oculta esto para centrar, junto con justify-content: center | |
| Azulejo - Título del Carril | El encabezado sobre los carriles o grupos de azulejos | |
| Azulejo - Seleccionado | El elemento de azulejo contenedor de un tipo de panel de azulejos, cuando está activo | |
| Azulejo - Contenedor del Panel de Azulejos | Un contenedor extra que envuelve todos los azulejos | |
| 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 del Grupo de Campos | La etiqueta sobre cada grupo de campos | |
| Encabezado - Etiqueta | Cada celda de encabezado de columna en una cuadrícula de datos | |
| Fila - Agregar | La fila de agregar 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 de cargar más filas | El botón que aparece cuando puedes 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 | |
| Varios - Banderas | Las banderas en un gráfico | |
| Varios - Seleccionado | El color de 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 íconos | Tipos de controles de campo de ícono | |
| Control de línea | Controles de línea, utilizados para dividir contenido en un panel | |
| Barra de progreso | Elemento de barra de progreso | |
| Botón - Indicador de Actividad | El ícono giratorio utilizado para indicar actividad | |
| Botón - Contenedor | Botones en un panel | |
| Campos - Contenedores de Campo Adicionales | Contenido adicional de campo de formulario, como opciones de cuadro de lista. | |
| Campos - Siempre Editable | El efecto de hover sobre un campo siempre editable | |
| Campos - Edición Automática | El efecto de hover 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 en foco o de otro modo activos | |
| 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 fechas | |
| Enlaces - Chevron | El chevron que aparece después de un hipervínculo | |
| Enlaces - Contenedor | Enlaces a través de 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 del Creador de Aplicaciones 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 | Un desvanecimiento de color de un valor de color a otro | Value1 y 2 se utilizan para los colores de De y A. Value3 es para el color del borde. |
| 2 Color de fondo | Código de color o valor nombrado utilizado para llenar todo el elemento | Value1 se utiliza para el color de fondo. Puede ser un código HTML o usar {PrimaryColor} por ejemplo para usar el color del tema. |
| 3 Imagen de fondo | Valor de imagen Url o Base64 | Value1 es ya sea una url o una imagen codificada en base64. Haz clic derecho en cualquier imagen de App Builder y selecciona Copiar URL para usar imágenes alojadas en App Builder. Value2 se utiliza para estirar la imagen o repetirla. Para estirar, ingresa 'cover', de lo contrario déjalo en blanco para repetir (azulejar) 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 la 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 | Establecer valores CSS más avanzados para las propiedades de Display, Opacidad y Transición | Value1 oculta elementos estableciendo el valor en 'none'. Value2 establece el margen del elemento, mientras que Value3 establece el relleno. La opacidad 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 forma corta del fondo. Con esto puedes especificar todas las opciones de fondo a la vez. Value2 es la propiedad del tamaño del 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 las fuentes. Usa una lista separada por comas. Value2 es el tamaño de la fuente. Esto 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 curva de un borde. Usa 100% para crear un círculo. | Value1 se utiliza para redondear las esquinas de un elemento. |
| 12 Azulejo de caja flexible | Configuración de estilos que afectan los azulejos del panel de tablero. | Los valores 1 y 2 controlan el tamaño de los azulejos. |
| 13 Texto avanzado | Modificaciones al texto | Value1 establece text-decoration, utilizado para agregar subrayado y otras propiedades. Value2 establece text-transform, utilizado para convertir el texto a mayúsculas. Value3 establece font-style, utilizado para cursivas. |
| 14 Alineación | Establecer 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 | Establecer información sobre varios estilos de fuente, como tipo de fuente, tamaño y grosor (negrita) de los caracteres | Value 1 se utiliza para especificar el tipo de fuente para un elemento. Usa una lista separada por comas. Por ejemplo: Calibri, Arial, sans-serif. Value 2 se utiliza para establecer el tamaño de la fuente. Las opciones de tamaño de fuente varían de xx-small a xx-large. Por ejemplo: small. Value 3 se utiliza para establecer el peso de la fuente, o cuán gruesos o delgados aparecen los caracteres de la fuente en la página. Las opciones de peso de fuente varían de normal a bolder. Un peso de fuente de 400 es lo mismo que normal, 700 es lo mismo que bold. Por ejemplo: bold. |
| 16 Espaciado | Especificar valores de espaciado para el contenido que aparece en un contenedor | Value1 establece la altura de línea. La propiedad de altura de línea especifica la altura de un elemento. No se permiten valores negativos. Por ejemplo: 1.4em. Value2 se utiliza para establecer el margen. La propiedad de margen se utiliza para crear espacio alrededor de los elementos. No se permiten valores negativos. Se pueden definir márgenes en 4 lados de un elemento: arriba, derecha, abajo, izquierda. Value 3 se utiliza para establecer el relleno. La propiedad de relleno se utiliza para generar espacio alrededor del contenido de un elemento. Se pueden definir rellenos en 4 lados de un elemento: arriba, derecha, abajo, izquierda. |