DocumentaciónAEM 6.5Guía del usuario

Aplicar estilo a un formulario adaptable do-not-publish-style-your-adaptive-form

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Administrador
  • Usuario
  • Desarrollador

Aprenda a crear una temática personalizada, aplicar estilo a componentes individuales y utilizar Web Fonts en una temática.

imagen a pantalla completa

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 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:

Formulario con una temática personalizada

Antes de comenzar 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.

Obtener archivo

Obtener archivo

Paso 1: Aplicar una temática a un formulario adaptable 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:

  1. Abra el formulario adaptable para editarlo.

    http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. 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.

  3. Seleccione una temática del campo Temática del formulario adaptable. Por ejemplo, Temática de encuesta. Seleccione aem_6_3_forms_save para poder aplicar el tema seleccionado.

    Formulario adaptable con la temática predeterminada

    Figura: formulario adaptable con la temática predeterminada

    Formulario adaptable con la temática de encuesta

    Figura: formulario adaptable con la temática de encuesta

Paso 2: Actualizar el formulario adaptable 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:

  1. Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo, haga lo siguiente:

    1. Abra el formulario en el editor de formularios.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

    2. Seleccione la imagen del logotipo en el componente header y seleccione cmppr properties. En la propiedad image, seleccione X para eliminar la imagen del logotipo existente.

    3. Seleccione upload, seleccione el logo.png y seleccione aem_6_3_forms_save para guardar los cambios. La imagen se descargó en la sección Antes de comenzar.

    4. Seleccione el texto del encabezado We.Retail y seleccione aem_6_3_edit edit. Cambie el texto del encabezado a we retail. Aplique formato de negrita solo a ween we retail.

      we-retail-logo-text

  2. Elimine el título y agregue un texto de marcador de posición:

    1. Seleccione el campo ID de cliente y seleccione las propiedades cmppr .

    2. Copie el contenido del campo Título en el campo Texto del marcador de posición.

    3. Elimine el contenido del campo Title y seleccione aem_6_3_forms_save .

    4. Repita los tres pasos anteriores para todos los cuadros de texto, cuadros numéricos y campos de correo electrónico del formulario.

      updated-adaptive-form

Paso 3: Crear una temática personalizada para el formulario adaptable 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 create-a-theme

  1. 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.

  2. 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.

  3. 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.

  4. Seleccione Opciones de tema theme-options > Configurar. En el campo Vista previa del formulario, seleccione el formulario adaptable shipping-address-add-update-form, seleccione aem_6_3_forms_save , 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.

    custom-theme

    Figura: editor de temáticas con el formulario adaptable shipping-address-add-update-form

    create-a-theme

    Figura: formulario adaptable con el formulario predeterminado

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:

  1. 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 toggle-side-panel Alternar panel lateral.

  2. Establezca las siguientes propiedades en el acordeón Text y seleccione aem_6_3_forms_save .

    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

  3. 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 aem_6_3_forms_save .

  4. 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 aem_6_3_forms_save .

    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

  5. 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 aem_6_3_forms_save .

    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

  6. 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 aem_6_3_forms_save .

Aplicar un estilo al componente de captura de datos y un fondo al formulario adaptable 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:

  1. Seleccione el campo ID de cliente y luego seleccione la opción Widget del campo. Establezca las siguientes propiedades y seleccione aem_6_3_forms_save .

    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

  2. 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 aem_6_3_forms_save .

    Contenedor de panel interactivo

Aplicar estilo a los botones 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:

  1. Seleccione el botón Enviar y luego seleccione la opción Botón. Establezca las siguientes propiedades y seleccione aem_6_3_forms_save .

    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

  2. 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.

    style-data-capture-components

Paso 4: Aplicar estilo a componentes individuales 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.

  1. Abra el formulario adaptable para editarlo. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

  2. En la barra superior, seleccione la opción Estilo.

    style-option

  3. Seleccione el botón Adjuntar y seleccione el icono aem_6_3_edit 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 %

  4. Seleccione la opción Prueba de dirección aprobada por el gobierno y seleccione el icono aem_6_3_edit 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

  5. Seleccione el botón Enviar y seleccione el icono aem_6_3_edit . 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

    styled-adaptive-form-1

Paso 5: Sección Bonus: usar Web Fonts en una temática personalizada 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:

  1. Examine la biblioteca de fuentes de Adobe y elija una fuente para aplicar estilo al formulario.
NOTE
Puede añadir etiquetas o filtros para restringir la lista de fuentes.

  1. 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.

    select-font-from-font-library

    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.

  2. Asigne un nombre al proyecto web.

  3. Seleccione las casillas de verificación para seleccionar los pesos y estilos de fuente que desee incluir.

    agregar una biblioteca de fuentes

  4. Seleccione Haga clic para crear el proyecto.

  5. Copie el código incrustado y la dirección URL desde la pantalla.
    código incrustado y dirección URL

  6. Haga clic en Listo para cerrar la ventana del proyecto web.

  7. AEM Inicie sesión en la instancia de y vaya a la dirección URL http://server:port/crx/de/index.jsp#

  8. Cree una estructura de carpetas en CRXDE, por ejemplo /apps/[fontslibrary]/[customlibrary(clientlibrary)].

  9. Vaya a la carpeta clientlibs recién creada y agregue las propiedades allowProxy y categories.

  10. Vaya a /apps/[fontslibrary]/[customlibrary(clientlibrary)] y cree una carpeta css.

  11. 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.
    Estructura de carpetas

  12. Guarde los cambios.

NOTE
Para utilizar las fuentes personalizadas agregadas en un formulario adaptable, asegúrese de que el nombre de la biblioteca de cliente de la Categoría de biblioteca de cliente se ajuste al nombre especificado en la opción categories de la carpeta clientlib.

Ahora el formulario adaptable puede acceder a las fuentes incluidas a través de la siguiente biblioteca de cliente de fuentes personalizada.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2