Show Menu
TEMAS×

Estilo del formulario adaptable

Aprenda a crear un tema personalizado, a diseñar componentes individuales y a utilizar fuentes web en un tema
Este tutorial es un paso de la serie Crear su primer formulario adaptable. Se recomienda seguir la serie en secuencia cronológica para comprender, realizar y demostrar el caso de uso completo del tutorial.

Acerca del tutorial

Puede utilizar temáticas para proporcionar un aspecto 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 temas para crear temáticas personalizadas. Un solo tema puede proporcionar un aspecto diferente al mismo formulario adaptable que se abre en un dispositivo móvil, tablet o escritorio. No es necesario tener conocimientos previos de CSS o LESS para utilizar el editor de temas, pero se desea.
Al final del tutorial, aprenderá a:
  • Aplicar un tema predefinido a un formulario adaptable
  • Creación de un tema para un formulario adaptable mediante el editor de temas
  • Estilo de componentes individuales
  • Sección de primas: Uso de fuentes web en un tema personalizado
El formulario tendrá un aspecto similar al siguiente una vez completado el tutorial:

Antes de comenzar

Descargue las imágenes de estilo de encabezado y logotipo que se muestran a continuación en el equipo local. El encabezado del formulario shipping-address-add-update-form adaptable utiliza el estilo de encabezado y las imágenes de logotipo. La imagen de estilo de encabezado aparece en la parte derecha del encabezado.

Paso 1: Aplicar un tema al formulario adaptable

El editor de formularios adaptables proporciona varias temáticas listas para usar. Si tiene previsto no utilizar un estilo personalizado en el formulario adaptable, también puede publicar los formularios adaptables con un tema incorporado. Las Temáticas son independientes de los formularios adaptables. Puede aplicar el mismo tema a varios formularios adaptables. Para aplicar un tema a un formulario adaptable:
  1. Abra el formulario adaptable para editarlo.
  2. Abrir propiedades del contenedor de formulario adaptable. En el navegador de propiedades, vaya a Básico > Tema de formulario adaptable. El campo Tema de formulario adaptable lista todas las temáticas integradas y personalizadas. De forma predeterminada, se aplica el tema Lienzo.
  3. Seleccione un tema en el campo Tema de formulario adaptable. Por ejemplo, el tema de Encuesta. Toque para aplicar el tema seleccionado.
Figura: Formulario adaptable con el tema predeterminado
Figura: Formulario adaptable con el tema de Encuesta

Paso 2: Actualizar el formulario adaptable

El diseño que se muestra arriba requiere cambios en el texto del marcador de posición y en el logotipo del formulario adaptable existente. Realice los siguientes pasos para realizar los cambios necesarios:
  1. Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo:
    1. Abra el formulario en el editor de formularios.
    2. Toque la imagen del logotipo en el componente de encabezado y toque las propiedades . En la propiedad image, toque X para eliminar la imagen del logotipo existente.
    3. Toque cargar, seleccione el logo.png y toque para guardar los cambios. La imagen se ha descargado en la sección Antes del inicio .
    4. Toque texto del encabezado We.Retail y toque edit . Cambiar el texto del encabezado a we retail . Aplicar formato de negrita solo a we la we retail .
  2. Elimine el título y añada texto de marcador de posición:
    1. Toque el campo ID de cliente y las propiedades .
    2. Copie el contenido del campo Título en el campo Texto del marcador de posición.
    3. Elimine el contenido del campo Título y toque .
    4. Repita los tres pasos anteriores para todos los cuadros de texto, cuadros numéricos y campos de correo electrónico del formulario.

Paso 3: Creación de un tema personalizado para el formulario adaptable

Puede utilizar el editor de temas para crear temáticas personalizadas. El editor de temas 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 paneles de un formulario adaptable.
Un tema 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 un tema, 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. inicios con la creación de un tema:

Crear un tema

  1. Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Formularios > Temáticas . La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes .
  2. Toque Crear y seleccione Tema . Aparece la página Crear tema con los campos necesarios para crear un tema. Los campos Título y Nombre son obligatorios:
    • Título: Especifique un título del tema. Por ejemplo, Tema global. El título le ayuda a identificar el tema a partir de la lista de temáticas.
    • Nombre: Especifique el nombre del tema. Por ejemplo, Tema global. En el repositorio se crea un nodo con el nombre especificado. Al escribir un título con inicio, se genera automáticamente el valor del campo de nombre. 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 reemplazan con un guión.
  3. Toque Crear . Se crea un tema y un cuadro de diálogo para abrir el formulario y editarlo. Toque Abrir para abrir el tema recién creado en una ficha nueva. El tema se abre en el editor de temas. Para aplicar estilo, el editor de temas utiliza un formulario adaptable incorporado que se incluye con AEM Forms.
    Para obtener información sobre el uso de la IU del editor de temas, consulte Acerca del editor de temas.
  4. Puntee en Opciones ​de tema de tema > Configurar . En el campo Formulario de Previsualización, seleccione el formulario adaptable Shipping-address-add-update-form , toque y Guardar . Ahora, el editor de temas está configurado para utilizar su propio formulario adaptable en lugar del formulario adaptable predeterminado. Toque Cancelar para volver al editor de temas.
    Figura: Editor de temas con el formulario adaptable Shipping-address-add-update-form
    Figura: Formulario adaptable con el formulario predeterminado

Estilo del componente de captura de datos y aplicación de un fondo al formulario adaptable

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 un estilo independiente para cada componente. En este tutorial, se aplica un estilo idéntico a los cuadros numéricos (ID del cliente, código postal) y los cuadros de texto (ID del cliente, nombre, dirección de envío, estado, correo electrónico). Para aplicar estilo a los componentes de captura de datos:
  1. Puntee en el campo ID del cliente y toque la opción Utilidad de campo. Defina las siguientes propiedades y toque .
Acordeón Propiedad Value
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 18px
Dimensiones y posición Anchura 60%
Dimensiones y posición imagen
  • Izquierda: 10 rem
  1. Toque en el área vacía sobre el campo ID del cliente y toque el Contenedor del panel interactivo. Establezca el Fondo > Color de fondo en F1F2F2. Toque .

Estilo de los botones

Puede utilizar un tema personalizado para aplicar un estilo idéntico a todos los botones del formulario adaptable y el estilo en línea para aplicar un estilo a un botón específico. Para aplicar estilo a los botones:
  1. Toque el botón Enviar y toque la opción Botón . Defina las siguientes propiedades y toque .
Acordeón Propiedad Value
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 18px
  1. Aplique el tema personalizado, Tema global, al formulario adaptable. Si el estilo no se refleja en el formulario adaptable, limpie la caché del explorador e inténtelo de nuevo.

Paso 4: Estilo de componentes individuales

Algunos estilos solo se aplican a un componente específico. Estos componentes están diseñados en el editor de formularios adaptables.
  1. En la barra superior, seleccione la opción Estilo .
  2. Toque el botón Adjuntar y toque el editicon. Defina las siguientes propiedades en el acordeón Dimensiones y Posición :
    Propiedad
    Value
    Flotante
    Izquierda
    Anchura
    10%
  3. Toque la opción de prueba de dirección aprobada por el gobierno y toque el editicon. Establezca las siguientes propiedades:
Acordeón Propiedad Value
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 40px
Dimensiones y posición imagen
  • Derecha: 2 rem
  • Izquierda: 10 rem
Fondo Color de fondo FFFFFF
Borde Anchura de borde 1px
Borde Estilo de borde Sólido
Borde Color del borde A7A9AC
Borde Radio de borde 7px
Texto Familia de fuentes Arial
Texto Color de fuente BCBEC0
Texto Tamaño de fuente 18px
Texto Altura de la línea 2
  1. Toque el botón Enviar y toque el icono . Establezca las siguientes propiedades:
Acordeón Propiedad Value
Dimensiones y posición Flotante Derecha
Dimensiones y posición imagen
  • Superior: 5 rem
  • Derecha: 14 rem
  • Inferior: 20 px
  • Izquierda: 20 px
Fondo Color de fondo F6921E
Borde Color del borde F6921E

Paso 5: Sección de primas: Uso de fuentes web en un tema personalizado

Puede utilizar varias fuentes para diseñar un formulario adaptable. Es posible que todos los dispositivos en los que se visualiza el formulario adaptable no tengan las fuentes utilizadas para diseñar el formulario adaptable. Puede utilizar un servicio de fuentes web para proporcionar las fuentes necesarias al dispositivo destinatario.
Adobe Typekit es un servicio de fuentes web. Puede configurar y utilizar el servicio con formularios adaptables. Para utilizar Adobe Typekit en un formulario adaptable:
Typekit ahora se denomina Adobe Fonts y se incluye con Creative Cloud y otras suscripciones. Más información .
  1. Cree una cuenta de Adobe Typekit , cree un kit, añada la fuente Myriad Pro al kit, publique el kit y obtenga el ID del kit. Es necesario utilizar fuentes Adobe Typekit (fuentes web) en un formulario adaptable.
  2. En el servidor de AEM Forms, vaya a Adobe Experience Manager > Herramientas > Implementación > Servicios de nube. En la página Servicios de nube, vaya a Servicios de terceros > Typekit y haga clic en Configurar ahora en Typekit. Si ya hay una configuración disponible, haga clic en el botón + para crear una nueva instancia.
    En el cuadro de diálogo Crear configuración, especifique un Título para la configuración y haga clic en Crear . Se le redirige a la página de configuración. En el cuadro de diálogo Editar componente que aparece, proporcione el ID del Kit y haga clic en Aceptar .
  3. Configure el tema para utilizar la configuración de TypeKit. En la instancia de autor, abra Tema global en el editor de temas. En el editor de temas, vaya a Opciones de tema: Opciones de de tema > Configurar. En el campo Configuración de Typekit, seleccione el kit y haga clic en Guardar .
    Las fuentes agregadas a Typekit están disponibles para su selección en el acordeón Texto de todos los componentes.