Aprenda a crear un tema personalizado, a diseñar componentes individuales y a utilizar fuentes web en un tema
Este tutorial es un paso en 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.
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:
El formulario tendrá un aspecto similar al siguiente una vez que complete el tutorial:
Descargue las imágenes de estilo de encabezado y logotipo que se muestran a continuación en el equipo local. El encabezado del formulario adaptable shipping-address-add-update-form
utiliza el estilo de encabezado y las imágenes de logotipo. La imagen de estilo de encabezado aparece en la parte derecha del encabezado.
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:
Abra el formulario adaptable para editarlo.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Abrir propiedades de contenedor de formulario adaptable. En el navegador de propiedades, vaya a Basic > Tema del formulario adaptable. El campo Tema del formulario adaptable lista todas las temáticas predeterminadas y personalizadas. De forma predeterminada, se aplica el tema Lienzo.
Seleccione un tema en el campo Tema del formulario adaptable. Por ejemplo, tema de Encuesta. Toque para aplicar el tema seleccionado.
Figura:Formulario adaptable con el tema predeterminado
Figura:Formulario adaptable con el tema de Encuesta
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:
Cambie el logotipo y el texto existentes del encabezado. Para eliminar el logotipo:
Abra el formulario en el editor de formularios.
http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html
Toque la imagen del logotipo en el componente header y toque properties. En la propiedad image, toque X para eliminar la imagen del logotipo existente.
Toque upload, seleccione el archivo logo.png y toque para guardar los cambios. La imagen se descargó en la sección Antes de inicio.
Toque texto de encabezado, We.Retail
y toque edit. Cambie el texto del encabezado a
we retail
. Aplicar formato de negrita solo a we
en we retail
.
Elimine el título y añada texto de marcador de posición:
Toque el campo ID de cliente y toque propiedades.
Copie el contenido del campo Título en el campo Texto del marcador de posición.
Elimine el contenido del campo Título y toque .
Repita los tres pasos anteriores para todos los cuadros de texto, cuadros numéricos y campos de correo electrónico del formulario.
Puede utilizar 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:
Inicie sesión en la instancia de creación de AEM y vaya a Adobe Experience Manager > Forms > Temáticas. La dirección URL predeterminada es http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.
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:
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 pestaña 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.
Toque Opciones de tema > Configurar. En el campo Formulario de Previsualización, seleccione el formulario adaptable Shipping-address-add-update-form, toque
y toque 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
El encabezado y el pie de página proporcionan un aspecto coherente y distintivo a un formulario adaptable. Generalmente, el encabezado contiene el logotipo y el nombre de la organización, el pie de página contiene información de copyright y estas permanecen idénticas en varias formas de una organización. Para aplicar estilo al encabezado y al pie de página del formulario adaptable Shipping-address-add-update-form:
Vaya a la opción Encabezado > Texto en el panel Selectores. El panel Selectores se encuentra a la izquierda del editor de temas. Si el panel no está visible, toque Alternar panel lateral.
Defina las siguientes propiedades en el acordeón Texto y toque .
Propiedad | Value |
---|---|
Familia de fuentes | Arial |
Color de fuente | FFFFFF |
Tamaño de fuente | 54 px |
Toque la utilidad encabezado y toque Encabezado. Las opciones para aplicar estilo al widget de encabezado aparecen a la izquierda. Expanda el acordeón Dimension y posición, establezca la altura en 120px
y toque .
Expanda el acordeón Fondo del widget de encabezado, establezca el Color de fondo en F6921E.
Pase el ratón sobre Imagen y degradado > + Añadir, toque Imagen. Defina las siguientes propiedades y toque .
Propiedad | Valor |
---|---|
image | Cargue header-style.png. La imagen se descargó en la sección Antes de inicio. |
Posición | Inferior Derecha |
Mosaico | No repetir |
En el editor de temas, toque el logotipo en el encabezado y toque Logotipo de encabezado. Expanda el acordeón Dimension y posición, defina las siguientes propiedades y toque .
imagen | Valor |
imagen |
Sugerencia: Toque el icono del |
Altura | 4,75 rem |
Toque el widget de pie de página y toque Pie de página. Expanda el acordeón Fondo, establezca el Color de fondo en F6921E
y toque .
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:
Toque el campo ID del cliente y toque la opción Utilidad del campo. Defina las siguientes propiedades y toque .
Acordeón | Propiedad | Valor |
Borde | Color del borde | A7A9AC |
Borde | Radio de borde |
|
Texto | Familia de fuentes | Arial |
Texto | Color de fuente | 939598 |
Texto | Tamaño de fuente | 18 px |
Dimension y posición | Anchura | 60% |
Dimension y posición | imagen |
|
Toque en el área vacía encima del campo ID del cliente y toque Contenedor del panel interactivo. Establezca el Fondo > Color de fondo en F1F2F2. Toque .
Puede utilizar un tema personalizado para aplicar un estilo idéntico a todos los botones del formulario adaptable y estilo en línea para aplicar un estilo a un botón específico. Para aplicar estilo a los botones:
Toque el botón Enviar y toque la opción Botón. Defina las siguientes propiedades y toque .
Acordeón | Propiedad | Valor |
Fondo | Color de fondo | F6921E |
Borde |
Color del borde | F6921E |
Borde | Radio de borde |
|
Texto |
Familia de fuentes | Arial |
Texto | Color de fuente | FFFFFF |
Texto | Tamaño de fuente | 18 px |
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.
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.
Toque el botón Adjuntar y toque el icono . Defina las siguientes propiedades en el acordeón Dimension y posición:
Propiedad | Valor |
---|---|
Flotante | Izquierda |
Anchura | 10% |
Toque la opción prueba de dirección aprobada por el gobierno y toque el icono . Establezca las siguientes propiedades:
Acordeón | Propiedad | Valor |
Dimensiones y posición | Flotante | Izquierda |
Dimensiones y posición | Anchura | 73 % |
Dimensiones y posición | Espacio |
|
Dimensiones y posición | Altura | 40 px |
Dimensiones y posición |
imagen |
|
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 |
Toque el botón Enviar y toque el icono . Establezca las siguientes propiedades:
Acordeón | Propiedad | Valor |
Dimension y posición | Flotante | Derecha |
Dimension y posición | imagen |
|
Fondo | Color de fondo | F6921E |
Borde | Color del borde | F6921E |
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 Fonts es un servicio de fuentes web. Puede configurar y utilizar el servicio con formularios adaptables. Para utilizar Adobe Fonts en un formulario adaptable:
Typekit fontsis ahora se denomina Adobe Fonts y se incluye con Creative Cloud y otras suscripciones. Más información.
Cree una cuenta Adobe Fonts, cree un kit, agregue la fuente Myriad Pro al kit, publique el kit y obtenga el ID del kit. Es necesario utilizar Adobe Fonts (fuentes Web) en un formulario adaptable.
En el servidor AEM Forms, navegue a Adobe Experience Manager > Herramientas
> Adobe Fonts. Ahora, abra una carpeta de configuración. Si ya hay una configuración disponible, haga clic en el botón Crear 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.
Configure el tema para utilizar la configuración Adobe Fonts. En la instancia de autor, abra Tema global en el editor de temas. En el editor de temas, vaya a Opciones de tema > Configurar. En el campo Configuración de Adobe Fonts, seleccione el kit y haga clic en Guardar.
Las fuentes agregadas a Adobe Fonts están disponibles para su selección en el acordeón Texto de todos los componentes.