Aplicar estilo a un formulario adaptable :headding-anchor:do-not-publish-style-your-adaptive-form
Aprenda a crear una temática personalizada, aplicar estilo a componentes individuales y utilizar Web Fonts en una temática.
Este tutorial es un paso en la serie Crear su primer formulario adaptable. El Adobe recomienda seguir la serie en secuencia cronológica para comprender, realizar y mostrar el caso de uso completo del tutorial.
Información sobre el tutorial :headding-anchor:about-the-tutorial
Puede utilizar temáticas para proporcionar una apariencia y un estilo únicos a un formulario adaptable. Puede aplicar temáticas predeterminadas con el editor de formularios adaptables o crear temáticas personalizadas propias. AEM Forms proporciona un editor de temáticas para crear temáticas personalizadas. Una sola temática puede proporcionar una apariencia diferente al mismo formulario adaptable abierto en dispositivos móviles, tabletas o de escritorio. No es necesario tener conocimientos previos de CSS o LESS para utilizar el editor de temáticas, pero es preferible tenerlos.
Al final del tutorial, debería poder hacer lo siguiente:
- Aplicar una temática predeterminada a un formulario adaptable
- Crear una temática para un formulario adaptable mediante el editor de temáticas
- Aplicar estilo a los componentes individuales
- Sección bonus: usar Web Fonts en una temática personalizada
El formulario debe ser similar al siguiente después de completar el tutorial:
Antes de comenzar :headding-anchor:before-you-start
Descargue las siguientes imágenes de estilo de encabezado y logotipo en su equipo local. El encabezado del formulario adaptable shipping-address-add-update-form
utiliza las imágenes de estilo de encabezado y logotipo. La imagen de estilo de encabezado aparece a la derecha del encabezado.
Paso 1: Aplicar una temática a un formulario adaptable :headding-anchor:step-apply-a-theme-to-your-adaptive-form
El editor de formularios adaptables proporciona varias temáticas predeterminadas. Si no pretende utilizar un estilo personalizado para el formulario adaptable, también puede publicar los formularios adaptables con una temática incorporada. Las temáticas son independientes de los formularios adaptables. Puede aplicar la misma temática a varios formularios adaptables.
Para aplicar un tema a su formulario adaptable:
-
Abra el formulario adaptable para editarlo.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
Abra las propiedades del Contenedor de formularios adaptables. En el explorador de propiedades, navegue hasta Básico > Temática del formulario adaptable. El campo Temática del formulario adaptable enumera todas las temáticas predeterminadas y personalizadas. De forma predeterminada, se aplica la temática Lienzo.
-
Seleccione una temática del campo Temática del formulario adaptable. Por ejemplo, Temática de encuesta. Seleccione para poder aplicar el tema seleccionado.
Figura: formulario adaptable con la temática predeterminada
Figura: formulario adaptable con la temática de encuesta
Paso 2: Actualizar el formulario adaptable :headding-anchor:step-update-your-adaptive-form
El diseño que se muestra más arriba requiere cambios en el texto del marcador de posición y en el logotipo de su formulario adaptable.
Para actualizar el formulario adaptable:
-
Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo, haga lo siguiente:
-
Abra el formulario en el editor de formularios.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
Seleccione la imagen del logotipo en el componente header y seleccione properties. En la propiedad image, seleccione X para eliminar la imagen del logotipo existente.
-
Seleccione upload, seleccione el logo.png y seleccione para guardar los cambios. La imagen se descargó en la sección Antes de comenzar.
-
Seleccione el texto del encabezado
We.Retail
y seleccione edit. Cambie el texto del encabezado awe retail
. Aplique formato de negrita solo awe
enwe retail
.
-
-
Elimine el título y agregue un texto de marcador de posición:
-
Seleccione el campo ID de cliente y seleccione las propiedades .
-
Copie el contenido del campo Título en el campo Texto del marcador de posición.
-
Elimine el contenido del campo Title y seleccione .
-
Repita los tres pasos anteriores para todos los cuadros de texto, cuadros numéricos y campos de correo electrónico del formulario.
-
Paso 3: Crear una temática personalizada para el formulario adaptable :headding-anchor:step-create-a-custom-theme-for-your-adaptive-form
Puede usar el editor de temáticas para crear temáticas personalizadas. El editor de temáticas es un poderoso editor WYSIWYG. Es un método visual para aplicar CSS a varios componentes de un formulario adaptable. Proporciona controles más precisos para aplicar estilo a los componentes y los paneles de un formulario adaptable.
Una temática es una entidad independiente como los formularios adaptables. Contiene estilos (CSS) para los componentes y paneles de un formulario adaptable. Los estilos incluyen propiedades CSS como colores de fondo, colores de estado, transparencia, alineación y tamaño. Al aplicar una temática, el estilo especificado se aplica a los componentes correspondientes de un formulario adaptable.
En este tutorial, aplicará estilo al encabezado y al pie de página, a los componentes numéricos y de texto, al componente de datos adjuntos y a los botones. Empecemos por crear una temática:
Crear una temática :headding-anchor:create-a-theme
-
Inicie sesión en la instancia de autor de AEM y navegue hasta Adobe Experience Manager > Formularios > Temáticas. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
-
Seleccione Crear y seleccione Tema. Aparecerá la página Crear temática con los campos necesarios para crear una temática. Los campos Título y Nombre son obligatorios:
- Título: especifique un título para la temática. Por ejemplo, Temática Global. El título le ayuda a identificar la temática en la lista de temáticas.
- Nombre: especifique el nombre de la temática. Por ejemplo, Temática Global. Se crea un nodo con el nombre especificado en el repositorio. A medida que empieza a escribir un título, el valor del campo de nombre se genera automáticamente. Puede cambiar el valor sugerido. El campo de nombre solo puede incluir caracteres alfanuméricos, guiones y guiones bajos. Todas las entradas no válidas se sustituyen por guiones.
-
Seleccione Crear. Se crea una temática y aparece un cuadro de diálogo para abrir el formulario y editarlo. Seleccione Abrir para abrir el tema recién creado en una pestaña nueva. La temática se abre en el editor de temáticas. Para aplicar estilo, el editor de temáticas utiliza un formulario adaptable incorporado que se incluye con AEM Forms.
Para obtener información acerca del uso de la interfaz de usuario del editor de temáticas, consulte Acerca del editor de temáticas.
-
Seleccione Opciones de tema > Configurar. En el campo Vista previa del formulario, seleccione el formulario adaptable shipping-address-add-update-form, seleccione , seleccione Guardar. Ahora, el editor de temáticas está configurado para usar su propio formulario adaptable en lugar del formulario adaptable predeterminado. Seleccione Cancelar para volver al editor de temáticas.
Figura: editor de temáticas con el formulario adaptable shipping-address-add-update-form
Figura: formulario adaptable con el formulario predeterminado
Aplicar estilo al encabezado y al pie de página :headding-anchor:style-header-and-footer
El encabezado y el pie de página proporcionan una apariencia coherente y distintiva a un formulario adaptable. Por lo general, el encabezado contiene el logotipo y el nombre de la organización, el pie de página contiene información sobre los derechos de autor y estos datos son idénticos en varias formas de organización. Para aplicar estilo al encabezado y al pie de página del formulario adaptable Formulario-actualizar-agregar-dirección-envío:
-
Navegue hasta la opción Encabezado > Texto en el panel Selectores. El panel Selectores se encuentra a la izquierda del editor de temáticas. Si el panel no está visible, seleccione Alternar panel lateral.
-
Establezca las siguientes propiedades en el acordeón Text y seleccione .
table 0-row-2 1-row-2 2-row-2 3-row-2 Propiedad Valor Familia de fuentes Arial® Color de fuente FFFFFF Tamaño de fuente 54 px -
Seleccione el widget header y seleccione Header. Las opciones para aplicar estilo al widget de encabezado aparecen a la izquierda. Expanda el acordeón Dimension y posición, establezca la altura a
120px
y seleccione . -
Expanda el acordeón del widget de encabezado Fondo, establezca el Color de fondo a
F6921E.
Pase el ratón sobre Imagen y degradado > + Agregar y seleccione Imagen. Establezca las siguientes propiedades y seleccione .
table 0-row-2 1-row-2 2-row-2 3-row-2 Propiedad Valor image Cargue header-style.png. La imagen se descargó en la sección Antes de comenzar. Posición Inferior Derecha Mosaico No repetir -
En el editor de temáticas, selecciona el logotipo en el encabezado y selecciona Logotipo de encabezado. Expanda el acordeón Dimension y posición, establezca las siguientes propiedades y seleccione .
table 0-row-2 1-row-2 2-row-2 html-authored no-header Margen Valor Margen - Superior: 1,5 rem
- Inferior: -35 px
- Izquierda: 1rem
Sugerencia: Seleccione el icono de vínculo para proporcionar un valor diferente a cada campo.
Altura 4,75 rem -
Seleccione el widget de pie de página y seleccione Pie de página. Expanda el acordeón Fondo, establezca el Color de fondo en
F6921E
y seleccione .
Aplicar un estilo al componente de captura de datos y un fondo al formulario adaptable :headding-anchor:style-the-data-capture-component-and-apply-a-background-to-the-adaptive-form
Puede utilizar varios componentes en un formulario adaptable para capturar datos. Por ejemplo, cuadro de texto y cuadro numérico. Puede proporcionar un estilo idéntico a todos los componentes de captura de datos o a uno independiente para cada componente. En este tutorial, se aplica un estilo idéntico a los cuadros numéricos (ID de cliente, código postal) y los cuadros de texto (ID de cliente, nombre, dirección de envío, estado, correo electrónico). Para aplicar estilo a los componentes de captura de datos, haga lo siguiente:
-
Seleccione el campo ID de cliente y luego seleccione la opción Widget del campo. Establezca las siguientes propiedades y seleccione .
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 html-authored no-header Acordeón Propiedad Valor Borde Color del borde A7A9AC Borde Radio de borde - Superior: 7 px
- Derecha: 7 px
- Inferior: 7 px
- Izquierda: 7 px
Texto Familia de fuentes Arial® Texto Color de fuente 939598 Texto Tamaño de fuente 18 px Dimensiones y posición Anchura 60 % Dimensiones y posición Margen - Izquierda: 10 rem
-
Seleccione el área vacía encima del campo ID de cliente y seleccione Contenedor del panel interactivo. Configure el Contexto > Color de fondo a F1F2F2. Seleccione .
Aplicar estilo a los botones :headding-anchor:style-the-buttons
Puede utilizar una temática personalizada para aplicar un estilo idéntico a todos los botones del formulario adaptable y aplicar estilo dentro de la línea para aplicar un estilo a un botón específico. Para aplicar estilo a los botones, haga lo siguiente:
-
Seleccione el botón Enviar y luego seleccione la opción Botón. Establezca las siguientes propiedades y seleccione .
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 html-authored no-header Acordeón Propiedad Valor Fondo Color de fondo F6921E Borde Color del borde F6921E Borde Radio de borde - Superior: 7 px
- Derecha: 7 px
- Inferior: 7 px
- Izquierda: 7 px
Texto Familia de fuentes Arial® Texto Color de fuente FFFFFF Texto Tamaño de fuente 18 px -
Aplicar la temática personalizada, Temática global, a su formulario adaptable. Si el estilo no se refleja en el formulario adaptable, limpie la memoria caché del explorador y vuelva a intentarlo.
Paso 4: Aplicar estilo a componentes individuales :headding-anchor:step-style-individual-components
Algunos estilos solo se aplican a un componente específico. Estos componentes están diseñados en el editor de formularios adaptables.
-
Abra el formulario adaptable para editarlo. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
-
En la barra superior, seleccione la opción Estilo.
-
Seleccione el botón Adjuntar y seleccione el icono Icon. Establezca las siguientes propiedades en el acordeón Dimensiones y posición:
table 0-row-2 1-row-2 2-row-2 Propiedad Valor Flotante Izquierda Anchura 10 % -
Seleccione la opción Prueba de dirección aprobada por el gobierno y seleccione el icono icono. Establezca las siguientes propiedades:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3 html-authored no-header Acordeón Propiedad Valor Dimensiones y posición Flotante Izquierda Dimensiones y posición Anchura 73 % Dimensiones y posición Espacio - Izquierda: 10 px
Dimensiones y posición Altura 40 px Dimensiones y posición Margen - Derecha: 2 rem
- Izquierda: 10 rem
Fondo Color de fondo FFFFFF Borde Anchura de borde 1 px Borde Estilo de borde Sólido Borde Color del borde A7A9AC Borde Radio de borde 7 px Texto Familia de fuentes Arial® Texto Color de fuente BCBEC0 Texto Tamaño de fuente 18 px Texto Altura de la línea 2 -
Seleccione el botón Enviar y seleccione el icono . Establezca las siguientes propiedades:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 html-authored no-header Acordeón Propiedad Valor Dimensiones y posición Flotante Derecha Dimensiones y posición Margen - Superior: 5 rem
- Derecha: 14 rem
- Inferior: 20 píxeles
- Izquierda: 20 px
Fondo Color de fondo F6921E Borde Color del borde F6921E
Paso 5: Sección Bonus: usar Web Fonts en una temática personalizada :headding-anchor:step-bonus-section-using-web-fonts-in-a-custom-theme
Puede utilizar varias fuentes para diseñar un formulario adaptable. Es posible que no todos los dispositivos en los que se visualiza el formulario adaptable tengan las fuentes utilizadas para diseñar el formulario adaptable. Puede utilizar un servicio de fuentes web para enviar las fuentes necesarias al dispositivo de destino.
Adobe Fonts es un servicio de Web Fonts. Puede configurar y utilizar el servicio con formularios adaptables. Para usar Adobe Fonts en un formulario adaptable, haga lo siguiente:
- Examine la biblioteca de fuentes de Adobe y elija una fuente para aplicar estilo al formulario.
-
Haga clic en el botón </> para añadir la familia a un proyecto web, en caso de que encuentre una fuente que le guste.
Aparecerá la pantalla de diálogo Agregar fuentes a un proyecto web.
note note NOTE Solo puede añadir fuentes al proyecto web si tienen el botón </> disponible. -
Asigne un nombre al proyecto web.
-
Seleccione las casillas de verificación para seleccionar los pesos y estilos de fuente que desee incluir.
-
Seleccione Haga clic para crear el proyecto.
-
Copie el código incrustado y la dirección URL desde la pantalla.
-
Haga clic en Listo para cerrar la ventana del proyecto web.
-
AEM Inicie sesión en la instancia de y vaya a la dirección URL
http://server:port/crx/de/index.jsp#
-
Cree una estructura de carpetas en CRXDE, por ejemplo
/apps/[fontslibrary]/[customlibrary(clientlibrary)]
. -
Vaya a la carpeta
clientlibs
recién creada y agregue las propiedadesallowProxy
ycategories
. -
Vaya a
/apps/[fontslibrary]/[customlibrary(clientlibrary)]
y cree una carpeta css. -
Vaya a la carpeta CSS creada y cree un archivo. Por ejemplo, cree un archivo como
fonts.css
y pegue el código incrustado junto con la dirección URL.
-
Guarde los cambios.
Ahora el formulario adaptable puede acceder a las fuentes incluidas a través de la siguiente biblioteca de cliente de fuentes personalizada.