La interfaz de usuario de Granite proporciona una serie de componentes diseñados para utilizarse en formularios; estos se denominan campos en el vocabulario de la IU de Granite. Los componentes de formulario estándar de Granite están disponibles en:
/libs/granite/ui/components/foundation/form/*
Estos campos de formulario de la interfaz de usuario de Granite son de especial interés para cuadros de diálogo de componentes.
Para obtener información detallada sobre los campos de, consulte la Documentación de Granite UI.
Utilice el marco de trabajo Granite UI Foundation para desarrollar o ampliar componentes de Granite. Tiene dos elementos:
del lado del servidor:
una colección de componentes de base
ayudantes para el desarrollo de aplicaciones
lado del cliente:
El componente de interfaz de usuario de Granite genérico field
se compone de dos archivos de interés:
init.jsp
: administra el procesamiento genérico; el etiquetado, la descripción y proporciona el valor de formulario que necesita al procesar el campo.render.jsp
: aquí es donde se realiza la representación real del campo, que debe anularse para el campo personalizado. se incluye mediante init.jsp
.Consulte Documentación de la IU de Granite: campo para obtener más información.
Para ver ejemplos, consulte:
cqgems/customizingfield/components/colorpicker
granite/ui/components/foundation/form
Como este mecanismo utiliza JSP, i18n y XSS no se proporcionan listas para usar. Esto significa que debe internacionalizarse y escapar de sus cadenas. El siguiente directorio contiene los campos genéricos de una instancia estándar, que puede utilizar como referencia:
/libs/granite/ui/components/foundation/form
directorio
El campo personalizado solo debe anular la variable render.jsp
, donde se proporciona el marcado para el componente. Puede considerar JSP (es decir, el script de procesamiento) como un envoltorio para el marcado.
Cree un componente que utilice la variable sling:resourceSuperType
propiedad de la que heredar:
/libs/granite/ui/components/foundation/form/field
Anule la secuencia de comandos:
render.jsp
En este script, genere el marcado hipermedia (es decir, marcado enriquecido, que contiene la asequibilidad de hipermedia) para que el cliente sepa cómo interactuar con el elemento generado. Esto debe seguir el estilo de codificación del lado del servidor de Granite UI.
Al personalizar, el único contrato que debe fulfill es para leer el valor del formulario (inicializado en init.jsp
) de la solicitud utilizando:
// Delivers the value of the field (read from the content)
ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
vm.get("value, String.class");
Para obtener más información, consulte la implementación de los campos de interfaz de usuario de Granite predeterminados; por ejemplo, /libs/granite/ui/components/foundation/form/textfield
.
Por el momento, JSP es el método de script preferido, ya que pasar información de un componente a otro (que es frecuente en el contexto de formularios/campos) no se logra fácilmente en HTL.
Para agregar un comportamiento específico del lado del cliente al componente:
Crear una clientlib de categoría cq.authoring.dialog
.
Crear una clientlib de categoría cq.authoring.dialog
y defina su JS
/ CSS
dentro de él.
Defina su JS
/ CSS
dentro de clientlib.
Por el momento, la interfaz de usuario de Granite no proporciona escuchas o enlaces predeterminados que pueda utilizar directamente para agregar el comportamiento de JS. Por lo tanto, para agregar un comportamiento JS adicional al componente, debe implementar un vínculo JS a una clase personalizada que luego asigne al componente durante la generación de marcado.