Anatomía de la aplicación de Jutro
En esta página, se proporciona una descripción general de los elementos constitutivos que componen la interfaz de usuario de una aplicación.
Para ver cómo se ve una aplicación de Jutro cuando está completamente ensamblada, consulte la galería de Jutro.
Aplicación web
El término “aplicaciones web” hace referencia a las aplicaciones que se crean en Guidewire Cloud Platform utilizando Jutro Design System y que respetan la anatomía de la aplicación recomendada por Guidewire. Las aplicaciones web se pueden diseñar o ejecutar como aplicaciones independientes, o bien incrustarse como microfrontends en otras aplicaciones. Todas las aplicaciones se pueden construir con metadatos o JSX.
La anatomía de una aplicación consta de lo siguiente:
- Planos de planta
- Patrones
- Componentes
Planos de planta, disposición y composición
Los planos de planta proporcionan la estructura general de la aplicación y se pueden configurar de manera global o página por página. Al seleccionar un plano de planta, también puede cambiar la disposición y composición de la página.
Los planos de planta se componen de lo siguiente:
- Encabezado y pie de página
- Panel de navegación
- Área de contenido
Patrones
Los patrones son patrones de interfaz de usuario repetibles, elaborados con componentes de Jutro, que se utilizan con frecuencia en la industria de los seguros de propiedades y de accidentes.
Pueden ser genéricos, como una pantalla de actualización de cuenta, o pueden estar vinculados a una línea de negocio (line of business, LOB) o a un trabajo específico que debe realizarse, como agregar un vehículo o realizar un pago. Encontrará ejemplos de patrones de Jutro aquí.
Atributos de los patrones:
- Son responsive, pero tienen valores mín./máx. específicos.
- No tienen una composición y disposición de plano de planta.
- Metadatos de componente.
- Sin sistema de cuadrícula, el valor predeterminado es flexible.
- Se puede extender.
Componentes
Los componentes son los elementos básicos de Jutro Design System. Cada componente está diseñado e implementado para abordar una interacción específica o una necesidad de la interfaz de usuario. Puede combinar componentes como bloques de Lego para crear patrones y experiencias de usuario intuitivas.
Los atributos de los componentes incluyen lo siguiente:
- Son responsive, pero tienen valores mín./máx. específicos.
- Se puede crear con JSX.
- Pueden tener propiedades predefinidas.
Los botones, las notificaciones y los campos de texto de entrada son ejemplos de componentes.
También encontrará algunos componentes más grandes que combinan varios elementos de interfaz. El encabezado global, por ejemplo, consta de componentes individuales como el avatar, las notificaciones y la búsqueda.
