Componentes para la creación de páginas

Los siguientes componentes están diseñados para utilizarse al crear contenido para una página web estándar. Forman un subconjunto de los componentes disponibles para su uso para efectuar una instalación estándar de AEM.

Algunos están disponibles directamente mediante la barra de tareas, mientras que otros se pueden habilitar o deshabilitar desde el modo Diseño.

Los componentes están disponibles mientras se edita una página en la ficha Componentes de la barra de tareas y el selector Insertar nuevo componente (cuando se hace doble clic en la zona Arrastrar componentes o activos aquí).

Puede seleccionar un componente, arrastrarlo a la ubicación necesaria en la página y, a continuación, editar el contenido y las propiedades.

Los componentes se clasifican en varias categorías (grupos de componentes), incluyendo (para la creación de páginas):

• General: incluye componentes básicos, como texto, imágenes, tablas, gráficos, etc.
• Columnas: incluye componentes necesarios para organizar el diseño del contenido.
• Formulario: incluye todos los componentes necesarios para crear un formulario.

Los componentes generales son los básicos que se utilizan para crear contenido.

Es posible definir un vínculo con título y descripción.

El componente de base de la imagen adaptable genera imágenes que se ajustan al tamaño de la ventana en la que se abre la página web. Para utilizar el componente, escoja un medio de imagen del sistema de archivos o DAM. Cuando se abre la página web, el navegador web descarga una copia de la imagen que ha cambiado de tamaño para ajustarse a la ventana actual. 

Las características siguientes determinarán el tamaño de la ventana:

• Pantalla del dispositivo: los dispositivos móviles acostumbran a mostrar páginas web de forma que cubran toda la pantalla. 
• Tamaño de la ventana del navegador web: los usuarios de equipos portátiles o de escritorio pueden cambiar el tamaño de las ventanas del navegador web.

Por ejemplo, el componente genera una imagen pequeña al abrir la página web en un teléfono móvil y una imagen de tamaño medio al abrirla en una tableta. En un equipo portátil, el componente crea y presenta una imagen grande cuando la página se abre en un navegador web. Cuando el navegador web se cambia de tamaño para ajustarse a una parte de la pantalla, el componente se adapta presentando una imagen más pequeña y actualiza la vista.

Puede utilizar archivos de imagen con las extensiones de nombre de archivo siguientes con el componente imagen adaptable:

• .jpg
• .jpeg
• .png
• .gif **

En la tabla siguiente se indica la anchura de la imagen generada para la anchura de cada visor determinado. La altura de la imagen generada se calcula para mantener una proporción de aspecto constante y para que no haya espacio en blanco dentro del borde de la imagen. Se puede utilizar el recorte para evitar los espacios en blanco.

Cuando la imagen es una imagen JPEG, el tamaño del visor también puede influir en la calidad JPEG. Hay disponibles las calidades JPEG siguientes:

• Baja (0,42)
• Media (0,82)
• Alta (1,00)

Este diálogo le permite editar las propiedades de su instancia del componente de imagen adaptable, muchas de las cuales coinciden con el componente Imagen en el que este se basa. Las propiedades están disponibles en dos fichas:

• Imagen
  • Imagen
    Arrastre una imagen desde el buscador de contenido o haga clic para abrir una ventana de navegación desde la que podrá cargar una imagen. Tras cargar la imagen, puede recortarla, girarla o eliminarla. Para aumentar o disminuir la imagen, utilice la barra de deslizamiento situada bajo la imagen (sobre los botones Aceptar y Cancelar).
  • Recortar
    Recortar una imagen. Arrastre el borde para recortar la imagen.
  • Rotar
    Haga clic en Rotar varias veces hasta que la imagen haya girado como lo desee.
  • Borrar
    Eliminar la imagen actual.
• Avanzado
  • Título
    El componente de imagen adaptable no utiliza esta propiedad.
  • Texto alternativo
    Texto alternativo que se utilizará para la imagen.
  • Vincular a
    El componente de imagen adaptable no utiliza esta propiedad.
  • Descripción
    El componente de imagen adaptable no utiliza esta propiedad.

Para obtener información sobre la personalización del componente de imagen adaptable, consulte Uso del componente de imagen adaptable.

El componente Carrusel le permite visualizar imágenes asociadas a páginas:

• una cada vez
• por un breve período de tiempo
• en el orden que especifique
• con el retraso que se especifique

Los controles en los que se puede hacer clic también permiten al usuario recorrer las páginas mostradas en tiempo real, según sea necesario. Al hacer clic en la imagen de página visible actualmente, se le redirige a esa página. Es decir, el componente Carrusel actúa como un control de navegación.

Están disponibles en dos fichas:

• Carrusel
  Aquí especifica el funcionamiento del carrusel:
  
  • Velocidad de reproducción
    El tiempo, en milisegundos, antes de que se muestre la siguiente diapositiva.
  • Tiempo de transición
    El tiempo, en milisegundos, de transición entre dos diapositivas.
  • Estilo de controles
    Hay varias opciones disponibles en un menú desplegable; por ejemplo, los botones Anterior/Siguiente y los interruptores Superior-Derecha.
    
• Lista
  Aquí especifica cómo se incluyen las páginas en el carrusel:
  • Lista de creación que utiliza
    Existen varias formas de crear una lista de páginas (páginas secundarias, lista fija, búsqueda o búsqueda avanzada; todas ellas se describen a continuación).
    Tenga en cuenta que no importa qué método elija, las páginas incluidas en la lista ya deben disponer de una imagen asociada a la página, que será la imagen que se muestre en el carrusel. Si no existe ninguna imagen para una página determinada en sus propiedades de página, es necesario asociar una imagen a la página antes de comenzar, ya que de lo contrario el carrusel mostrará una página en blanco (o casi en blanco). Consulte Edición de las propiedades de página.
    Se mostrará un panel nuevo en función del elemento que elija:
    • Opciones de Páginas secundarias
      • Página principal
        Especificar una ruta manualmente o con el selector. Deje esta opción en blanco para utilizar la página actual como página principal.
    • Opciones de Lista fija
      • Páginas
        Seleccione una lista de páginas. Utilice + para añadir más entradas y las teclas de flecha hacia arriba y hacia abajo para ajustar el orden.
    • Opciones de Buscar
      • Iniciar en
        Indique una ruta de inicio manualmente o con el selector.
        
      • Consulta de búsqueda
        Puede introducir una consulta de búsqueda en forma de texto sin formato.
    • Opciones de Búsqueda avanzada
      • Anotación predicada Querybuilder
        Es posible introducir una consulta de búsqueda utilizando una anotación predicada QueryBuilder. Por ejemplo, puede introducir "fulltext=Marketing" para que se muestren todas las páginas en cuyo contenido aparezca "Marketing" en el Carrusel.
        Consulte QueryBuilder API para un tratamiento más extenso de las expresiones de consulta y más ejemplos.
  • Ordenar por
    Seleccionar jcr:título, jcr:creado, q:últimaModificación, o cq:plantilla del menú desplegable.
    
  • Límite
    Máximo de elementos que se pueden utilizar en el Carrusel; es opcional.

El componente Gráfico permite añadir una barra, línea o gráfico circular. AEM crea un gráfico de los datos proporcionados. Los datos se proporcionan escribiéndolos directamente en la ficha Datos o copiando y pegando una hoja de cálculo.

• Datos
  • Datos del gráfico
    Introduzca los datos en su gráfico utilizando el formato CSV; el formato Valores separados por comas utiliza comas (",") como separador del campo.
• Avanzado
  • Tipo de gráfico
    Seleccione una de las opciones entre Gráfico circular, Gráfico de líneas y Gráfico de barras.
  • Texto alternativo
    Texto alternativo que se muestra en lugar del gráfico.
  • Anchura
    Anchura del gráfico en píxeles.
  • Altura
    Altura del gráfico en píxeles.

En el ejemplo siguiente se muestran los datos de un gráfico seguido del gráfico de barras resultante:

Los fragmentos de contenido se crean y administran como recursos independientes de las páginas. Después se pueden usar estos fragmentos, y sus variaciones, al crear páginas de contenido.

Permite cargar un archivo comprimido manteniendo el diseño del paquete.

El componente Descargar crea un vínculo en la página web seleccionada para descargar un archivo específico. Puede arrastrar un recurso desde el buscador de contenido o cargar un archivo.

• Descargar
  • Descripción
    Breve descripción que se muestra con el vínculo de descarga.
  • Archivo
    Archivo disponible para descargar la página web resultante. Arrastre un recurso desde Content Finder o haga clic en el área para cargar el archivo y que esté disponible para descarga.

En el siguiente ejemplo se muestra el componente Descargar en Geometrixx:

El componente de integración de aplicaciones externo (Externo) permite incrustar aplicaciones externas en su página AEM utilizando un iframe.

• Externo
  • Aplicación de destino
    Especifique la URL de la aplicación web que quiere integrar; por ejemplo:
        http://en.wikipedia.org/wiki/Main_Page
    
  • Pasar parámetros
    Active la casilla de los parámetros para pasarlos a la aplicación cuando sea necesario.
  • Anchura y altura
    Defina el tamaño del iframe

La aplicación externa se integra en el sistema de párrafos de la página AEM; por ejemplo, cuando se utiliza una aplicación de destino de http://en.wikipedia.org/wiki/Main_Page:

El componente Flash permite cargar una película Flash. Puede arrastrar un recurso flash desde el buscador de contenido al componente, o bien, puede utilizar el cuadro de diálogo:

• Flash
  • Película Flash
    Archivo de película flash. Arrastre un recurso desde el buscador de contenido, o bien haga clic para abrir una ventana de navegación.
  • Tamaño
    Dimensiones en píxeles de la zona de reproducción donde se muestra la película.
• Imagen alternativa
  Imagen alternativa que se muestra.
• Avanzado
  
  • Menú contextual
    Indica si se debería mostrar u ocultar el menú contextual.
  • Modo Ventana
    Cómo aparece la ventana, por ejemplo si es opaca, transparente o como una ventana nítida (sólida).
  • Color de fondo
    El color de fondo que se selecciona de una tabla de colores.
  • Versión mínima
    La versión mínima de Adobe Flash Player que se requiere para reproducir la película. El valor predeterminado es 9.0.0.
  • Atributos
    Cualquier otro atributo que se requiera.

El componente de imagen muestra una imagen y un texto de acompañamiento en función de los parámetros especificados.

Puede cargar una imagen y luego editarla y manipularla (p. ej., recortarla, girarla o añadirle un vínculo, un título o texto).

Es posible arrastrar y soltar una imagen del Buscador de contenido directamente en el componente o en su cuadro de diálogo de edición. También es posible hacer doble clic en la zona central del cuadro de diálogo de edición para explorar el sistema de archivos local y cargar una imagen. Las dos pestañas del cuadro de diálogo de edición también controlan las definiciones y la manipulación de la imagen:

Al cargar una imagen, se pueden configurar los aspectos siguientes:

• Asignar
  Para asignar una imagen, seleccione Asignar. Es posible especificar cómo será el mapa de imagen (un rectángulo, un polígono, etc.) y hacia dónde debe apuntar la zona.
• Recortar
  Seleccione Recortar para recortar una imagen. Utilice el ratón para recortar la imagen.
• Rotar
  Para rotar una imagen, seleccione Rotar. Utilícelo repetidamente hasta que la imagen rote hacia el lado que prefiera.
• Borrar
  Eliminar la imagen actual.
• Barra de zoom
  Para hacer zoom en una imagen, utilice la barra de deslizamiento que hay debajo de la imagen (encima de los botones Aceptar y Cancelar).
• Título
  Título de la imagen.
• Texto alternativo
  Texto alternativo para utilizar cuando se crea contenido accesible.
  
• Vínculo a
  Cree un vínculo a recursos u otras páginas en su página web.
  
• Descripción
  Descripción de la imagen.
• Tamaño
  Configure la altura y la anchura de la imagen.

La imagen final (con Título y Descripción) pueden aparecer así:

El componente Lista permite configurar criterios de búsqueda para mostrar una lista:

• Lista
  • Lista de creación que utiliza
    Aquí puede especificar la ubicación en la que la lista recuperará el contenido. Existen varios métodos:
  • Se mostrará un panel nuevo, en función del elemento que elija:
    • Opciones de Páginas secundarias
      • Elementos secundarios de (página principal)
        Especifique una ruta manualmente o con el selector. Deje esta opción en blanco para utilizar la página actual como página principal.
    • Opciones de Lista fija
      • Páginas
        Seleccione una lista de páginas. Utilice + para añadir más entradas y las teclas de flecha hacia arriba y hacia abajo para ajustar el orden.
    • Opciones de Buscar
      • Iniciar en
        Indique una ruta de inicio manualmente o con el selector.
      • Consulta de búsqueda
        Puede introducir una consulta de búsqueda en forma de texto sin formato.
    • Opciones de Búsqueda avanzada
      • Notación de predicado de QueryBuilder
        Puede indicar una consulta de búsqueda utilizando la notación de predicado de QueryBuilder. Por ejemplo, puede indicar "fulltext=Marketing" para que se muestren en el carrusel todas las páginas que contengan "Marketing".
        Consulte API de QueryBuilder para ver un análisis completo de las expresiones de consulta y más ejemplos.
    • Etiquetas
      Especifique la página principal, etiquetas o palabras clave y los criterios de coincidencia necesarios.
  • Mostrar como
    Cómo desea que se incluyan los elementos; incluye vínculos, teasers y noticias.
  • Ordenar por
    Indique si la lista se va a ordenar y, si es así, los criterios que se utilizarán para la ordenación. Puede introducir un criterio o seleccionar uno de la lista desplegable proporcionada.
  • Límite
    Especifique el número máximo de elementos que desea que se muestren en la lista.
  • Habilitar fuente
    Indica si una fuente RSS se debe activar para la lista.
  • Paginar tras
    Aquí puede especificar el número de elementos de lista que se muestran al mismo tiempo. Una lista con más elementos que los especificados utilizarán la paginación para mostrar la lista en varias partes.

En el siguiente ejemplo se muestra un componente Lista del modo en que puede mostrar una lista de páginas secundarias, con el diseño controlado mediante las definiciones CSS personalizadas del diseño del sitio.

Este componente proporciona los campos Nombre de usuario y Contraseña.

Puede configurar:

• Inicio de sesión
  • Etiqueta Sección
    Texto introductorio para los campos de entrada.
    
  • Etiqueta Nombre de usuario
    Texto para etiquetar el campo de nombre de usuario.
    
  • Etiqueta Contraseña
    Texto para etiquetar el campo de contraseña.
    
  • Etiqueta del botón Iniciar sesión
    Texto para el botón de inicio de sesión.
    
  • Redirigir a
    Puede especificar la página de su sitio web que se debe abrir tras el inicio de sesión del usuario.
    
• Ya hay una sesión iniciada
  • Etiqueta del botón Continuar
    Texto que indica al usuario que ya ha iniciado sesión.
    
    

• Título
  • Título
    Especifique el texto del título que desea que se muestre.
  • Vínculo
    Especifique la página (producto) en la que se debe mostrar el estado de orden.
  • Tipo o tamaño
    Selecciónelo en la opción disponible.
    

El componente Referencia permite hacer referencia a un texto de otra página de su web AEM (dentro del caso presente). El contenido del párrafo indicado aparece luego como si estuviera en la página presente. El contenido se cargará cuando el párrafo original cambie (puede que sea necesario actualizar la página).

• Referencia del párrafo
  • Referencia
    Especifique la ruta a la página y al párrafo al que quiere hacer referencia (incluya el contenido).
    

Para especificar la ruta a un párrafo determine un sufijo para la ruta (hasta la página) con:

.../jcr:content/par/<paragraph-ID>

Por ejemplo:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par/similar-products

Además de hacer referencia a un párrafo en concreto, la ruta de acceso se puede modificar para especificar todo un sistema de párrafos. Puede hacerlo añadiendo un sufijo a la ruta con:

/jcr:content/par

Por ejemplo:

/content/geometrixx-outdoors/en/equipment/biking/cajamara/jcr:content/par

Una vez que se haya configurado, el contenido aparecerá exactamente como en la página de origen. Solo se puede comprobar que se trata de una referencia cuando se abre el componente de edición:

El componente Búsqueda añade la capacidad de búsqueda a la página.

Es posible configurar:

• Búsqueda
  • Tipos de nodo
    Si la búsqueda se va a restringir a tipos de nodo específicos, indíquelos aquí; por ejemplo, cq:Page.
  • Ruta para buscar
    Especifique la página raíz de la rama que desea buscar.
    
  • Texto del botón Buscar
    Nombre que se muestra en el botón de búsqueda.
  • Texto de las Estadísticas
    Texto que se muestra encima de los resultados de la búsqueda.
  • Texto para mostrar que no se han encontrado resultados
    Si no se han encontrado resultados, se mostrará el texto aquí descrito.
  • Texto para la corrección ortográfica
    Si se introduce un término similar se muestra este texto antes del término.
    Por ejemplo, si se escribe geometrixxe, el sistema muestra "¿Quiso decir geometrixx?".
  • Texto para Páginas similares
    Texto que se muestra al lado de un resultado para páginas similares. Haga clic en este vínculo para ver páginas de contenido similar.
  • Texto para Búsquedas relacionadas
    Texto que aparece al lado de búsquedas para términos y temas relacionados.
  • Texto para Tendencias de búsqueda
    Título sobre los términos de búsqueda que introducen los usuarios.
  • Etiqueta para las Páginas de los resultados
    Texto que aparece al final de esta lista con vínculos a otras páginas de resultados.
  • Etiqueta Anterior
    Nombre que aparece en el vínculo a páginas de resultados previos.
  • Etiqueta Siguiente
    Nombre que aparece en el vínculo a páginas de búsqueda posteriores.

En el siguiente ejemplo se muestra el componente Búsqueda después de buscar la palabra geometrixx desde el directorio raíz de una instalación estándar. También ilustra la paginación de los resultados:

En el siguiente ejemplo se muestra un término de búsqueda con errores ortográficos y que no está disponible:

Lista del mapa del sitio automática, que (con las configuraciones por defecto) enumera todas las páginas (como vínculos activos) en la página web actual. Por ejemplo, un extracto muestra:

 Si es obligatorio, se puede configurar:

• Sitemap
  • Ruta de raíz
    Ruta desde donde comienza la lista.

Este componente permite cargar una serie de imágenes para mostrar como presentación en la página. Puede añadir o eliminar las imágenes y asignar un título a cada una. En Avanzado puede especificar el tamaño del área de visualización.

Puede configurar:

• Diapositivas
  • Nueva diapositiva
    Es posible especificar una selección de diapositivas utilizando los botones Añadir (y Eliminar).
    
  • Título
    Especifique un título si se requiere. Se superpone en la diapositiva adecuada.
• Avanzado
  • Tamaño
    Especifique la anchura y la altura en píxeles.
    

El componente de presentación de diapositivas se muestra repetidamente en cada secuencia, durante un período corto de tiempo, antes de fundirse en la diapositiva siguiente:

El componente Tabla se configura previamente para que pueda crear, rellenar y dar formato a una tabla. Puede configurar su tabla y crear los contenidos utilizando el cuadro de diálogo de las maneras siguientes:

• desde cero
• copiar y pegar una hoja de cálculo o una tabla desde un editor externo (como Excel, OpenOffice, Notepad, etc.).
  

Las capturas de pantalla siguientes muestran un ejemplo del componente de la tabla; el CSS específico de la página determina el diseño:

Una nube de etiquetas muestra de manera gráfica una selección de las etiquetas que se aplican al contenido en su página web:

Al configurar el componente de la nube de etiquetas, es posible especificar:

• Etiquetas para mostrar
  De donde se recogen las etiquetas que se van a mostrar. Seleccione una página, una página con elementos secundarios o con etiquetas.
• Página
  Seleccione la página a la que se hará referencia.
  
• Etiquetas sin vínculos
  Si las etiquetas que se muestran deben actuar como vínculos.

Para obtener más información sobre mostrar etiquetas, consulte Utilizar etiquetas.

El componente de Texto permite introducir un bloque de texto mediante un editor WYSIWYG, con funcionalidad proporcionada por el editor de texto enriquecido. Una selección de iconos permite dar formato al texto, incluyendo características de fuente, alineación, vínculos, listas y sangría.

Cuando abra la ficha Estilos del cuadro de diálogo de edición, también podrá establecer:

• Separador
• Estilo del texto

El texto formateado se mostrará en la página; el diseño real dependerá del sitio CSS:

Para obtener más información detallada sobre el componente de Texto y la funcionalidad proporcionada por el editor de texto enriquecido, consulte la página Editor de texto enriquecido.

Además del modo de edición de texto enriquecido basado en el cuadro de diálogo, AEM también proporciona Edición in situ, que permite editar de manera directa el texto tal y como se muestra en el diseño de la página.

El componente Texto e imagen añade un bloque de texto y una imagen. También se puede añadir y editar texto e imágenes por separado. Consulte los componentes de Texto e imagen para obtener más información.

Puede configurar:

• Estilos del componente (Estilos)
  Es posible alinear la imagen a la izquierda o a la derecha. El modo predeterminado es el alineado a la Izquierda, con la imagen a la izquierda.
• Propiedades de la imagen (Propiedades de imagen avanzadas)
  Permite especificar lo siguiente:
  • Recurso de imagen
    Cargar la imagen en cuestión.
  • Título
    El título del bloque se mostrará al pasar el cursor por encima.
  • Texto alternativo
    El texto alternativo que aparecerá si la imagen no se puede mostrar. Si la opción se deja vacía, se utilizará el título.
  • Vincular a
    Especificar una ruta de destino.
    
  • Descripción
    Descripción de la imagen.
  • Tamaño
    Configure la altura y la anchura de la imagen.

En el siguiente ejemplo se muestra un componente de Imagen de texto que muestra la imagen alineada a la izquierda:

El componente Título puede:

• Mostrar el nombre de la página actual; esto se lleva a cabo dejando en blanco el campo Título.
• Mostrar un texto especificado en el campo Título.

Puede configurar:

• Título
  Si quiere utilizar un nombre distinto al del título de la página, introdúzcalo aquí.
• Vínculo
  El URI si el título debe funcionar como vínculo.
• Tipo o tamaño
  Seleccione Pequeño o Grande de la lista desplegable. El valor Pequeño se genera como imagen. El valor Grande se genera como texto.

En el siguiente ejemplo se muestra un componente Título; el diseño se determina mediante el CSS específico del sitio.

El componente Vídeo permite colocar un elemento de vídeo predefinido, listo para utilizar en una página.

Consulte también Configurar los perfiles de su vídeo para utilizarlos con elementos HTML5.

Después de colocar un ejemplo de componente en su página, puede configurar:

• Vídeo
  • Recurso de vídeo
    Cargue o arrastre hasta aquí sus recursos de vídeo.
    
  • Tamaño
    El tamaño nativo del vídeo (anchura x altura en píxeles) aparecerá en las casillas al lado de Tamaño (ver arriba). Indique aquí manualmente las dimensiones de anchura y altura si desea omitir las dimensiones nativas del vídeo. Haga clic en Aceptar para descartar el cuadro de diálogo.

En AEM, las columnas funcionan como un mecanismo para controlar el formato del contenido. En una instalación estándar se proporcionan los componentes para crear dos y/o tres columnas.

En el siguiente ejemplo se muestran los componentes 2 columnas y 3 columnas que están en uso. Puede utilizar los marcadores de posición para componentes nuevos:

Un componente Control de columna cuyo valor predeterminado es de 2 columnas iguales.

Componente Control de columna cuyo valor predeterminado es 3 columnas iguales.

El componente de Control de columna permite a los usuarios seleccionar cómo quieren dividir el contenido del panel principal de la página web en múltiples columnas. Los usuarios pueden seleccionar el número de columnas que se requieren (de una lista predefinida) y crear, borrar o mover el contenido dentro de cada columna.

• Control de columna
  • Formato de la columna
    Seleccione el número de columnas que desea introducir. Una vez creada, cada columna tiene su propio vínculo para arrastrar componentes o recursos cuando se añada contenido.

Los componentes de formulario se usan para crear formularios para que los visitantes introduzcan información. Los formularios y los componentes de formulario pueden utilizarse para recopilar información, incluidos los comentarios de usuario (por ejemplo, un cuestionario de satisfacción de los clientes) e información sobre los usuarios (por ejemplo, registro de usuarios).

Los formularios incluyen diferentes componentes:

• Formulario
  El componente de formulario define el inicio y el final de un nuevo formulario en una página. Se pueden colocar otros componentes entre estos elementos, como tablas, descargas, etc. 
• Campos y elementos de formulario
  Los campos y elementos de formulario pueden incluir cuadros de texto, botones de opción, imágenes, etc. El usuario suele finalizar una operación en un campo de formulario, como la introducción de texto. Consulte los elementos independientes de formulario para obtener más información.
• Componentes de perfil
  Los componentes de perfil se refieren a perfiles de usuarios que se utilizan para colaboración social y otras áreas donde la personalización de los usuarios es obligatoria. 

En el ejemplo siguiente se muestra un formulario que se compone del componente Formulario (inicio y final), con dos campos de Texto de formulario utilizados para el contenido, un campo de Texto general que se utiliza para el texto y el botón Enviar.

Aunque cada uno de los componentes de formulario tiene un propósito diferente, muchos están compuestos de opciones y parámetros diferentes.

Al configurar cualquiera de los componentes de formulario, estarán disponibles las fichas siguientes en el cuadro de diálogo:

• Título y texto
  Es necesario especificar la información básica, como el título del formulario y cualquier texto acompañante. Si es apropiado, también permite definir otros tipos de información clave, como si se pueden realizar varias selecciones en el campo y si se pueden seleccionar elementos.
• Valores iniciales
  Permite especificar un valor por defecto.
• Restricciones
  Permite especificar si un campo es obligatorio y las restricciones de ese campo (por ejemplo, si debe ser numérico, etc.).
• Estilo
  Indica el tamaño y el estilo de los campos.

Esas pestañas proporcionan los parámetros necesarios, que pueden depender del tipo de componente individual, pero pueden incluir:

• Título y texto
  • Nombre del elemento
    Nombre del elemento del formulario. Indica en qué lugar del repositorio se almacenan los datos.
    Se trata de un campo obligatorio y solo debe incluir los siguientes caracteres:
    • Caracteres alfanuméricos
    • _ . / : -
  • Título
    El título que se muestra con el campo. Si se deja en blanco, se mostrará el título predeterminado.
  • Descripción
    Permite proporcionar información adicional para el usuario, en caso de que sea necesario. En el formulario aparece debajo del campo, en una fuente más pequeña que el título.
    
  • Mostrar y ocultar
    Determina cuándo se muestra visible el campo.
• Valores iniciales
  • Valor por defecto
    Valor que se muestra en el campo cuando se abre el formulario; por ejemplo, antes de que el usuario haya introducido ningún dato.
• Restricciones
  • Obligatorio
    Depende del tipo de componente del formulario, pero proporciona una o más casillas para indicar que el campo, o ciertas partes del campo, son obligatorios.
    
  • Mensaje obligatorio
    Mensaje que informa a los usuarios de que el campo es obligatorio; un campo obligatorio también estará marcado con un asterisco.
    
  • Restricción
    Las restricciones disponibles dependen del tipo de componente del formulario.
    
  • Mensaje de restricción
    Mensaje que informa a los usuarios de qué es obligatorio.
    
• Estilo
  • Tamaño
    En filas y columnas.
    
  • Anchura
    En píxeles.
    
  • CSS

El componente Formulario define el inicio y el final de un formulario utilizando los elementos Inicio de formulario y Fin de formulario. Estos siempre están emparejados para garantizar que el formulario se define correctamente.

Entre el inicio y el fin de un formulario, puede añadir componentes que definirán los campos de entrada reales de los usuarios.

Este componente es necesario para definir el inicio de un nuevo formulario en una página. Es posible configurar:

• Formulario
  • Página de agradecimiento
    Página a la que se hace referencia para agradecer a los visitantes su contenido. Si se deja en blanco, el formulario se vuelve a mostrar tras el envío.
  • Comenzar el flujo de trabajo
    Determina qué flujo de trabajo se activa al enviar el formulario.
• Avanzado
  • Tipo de acción
    Un formulario necesita una acción. La acción define la operación que se activa para ser ejecutada con los datos enviados por los usuarios (parecido a action= en HTML). Algunos requieren la Configuración de acción correspondiente.
    Se incluye una selección de tipos de acciones en la instalación AEM estándar:
    • Solicitud de cuenta
      
    • Crear contenido
    • Crear posible cliente
      
    • Crear y actualizar cuenta
    • Servicio de correo electrónico: crear suscriptor y añadirlo a la lista
    • Servicio de correo electrónico: enviar correos electrónicos de respuesta automática
    • Servicio de correo electrónico: dar de baja a un usuario de la lista
    • Editar comunidad
      
    • Editar recurso(s)
      
    • Editar recurso(s) controlado(s) de flujo de trabajo
      
    • Correo
    • Detalles de orden
      
    • Actualizar perfil
      
    • Restablecer contraseña
      
    • Configurar contraseña
      
    • Almacenar contenido
      Es el tipo de acción por defecto.
      
    • Almacenar contenido con cargas
    • Enviar pedido
    • Dar de baja a un suscriptor
    • Actualizar orden
      
  • Identificador de formulario
    El identificador de formulario únicamente identifica el formulario. Utilice el identificador del formulario si dispone de varios formularios en una misma página; asegúrese de que tengan identificadores distintos.
  • Ruta de acceso de carga
    Ruta a las propiedades de un nodo que se utiliza para cargar valores predefinidos en los campos del formulario.
    Se trata de un campo opcional que especifica la ruta a un nodo en el repositorio. Cuando este nodo cuenta con propiedades que coinciden con los nombres de campo, los campos apropiados del formulario se cargan previamente con el valor de estas propiedades. Si no existe coincidencia, el campo contiene el valor predeterminado.
    Si utiliza una ruta de carga puede cargar previamente el formulario con valores en los campos obligatorios. Consulte Cargar previamente valores de formulario.
  • Validar cliente
    Indica si se requiere la validación del cliente en este formulario (la validación del servidor siempre se requiere). Esto se puede lograr junto con el componente Captcha de formulario.
  • Tipo de validación del recurso
    Define el tipo de validación del recurso de formulario si quiere validar el formulario completo (en lugar de los campos individuales). Si va a validar el formulario completo, incluya también una de las siguientes operaciones: 
    • Un script para validar el cliente:
         /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
    • Un script para validar el lado del servidor:
         /apps/<myApp>/form/<myValidation>/formservervalidation.jsp
  • Configuración de la acción
    Las opciones disponibles en la Configuración de la acción dependen del tipo de acción seleccionado:
    • Solicitud de cuenta
      • Crear una página de cuenta
        Página que se utiliza cuando se crea una nueva cuenta.
    • Crear contenido
      • Ruta del contenido
        Ruta del contenido para cualquier contenido del formulario. Introduzca una ruta que termine con una barra diagonal /. La barra diagonal quiere decir que para cada puerto del formulario se crea un nodo nuevo en la ubicación dada, por ejemplo:
            /formularios/comentarios/
      • Tipo
        Seleccione el tipo requerido.
        
      • Formulario
        Especifique el formulario.
        
      • Renderizar con
        Seleccione la opción requerida de la lista.
        
      • Tipo de recurso
        Si está configurado, se añade a cada comentario como sling:resourceType.
        
      • Selector de vista
    • Crear posible cliente
      • El posible cliente se añadirá a esta lista
        Especifique la lista de posibles clientes requerida.
    • Crear y actualizar cuenta
      • Grupo inicial
        Grupo que asigna al nuevo usuario.
      • Inicio
        Página que se muestra después de iniciar sesión.
      • Ruta
        La ruta (relativa) donde se crea y se almacena una cuenta nueva.
      • Visualización de datos...
        Haga clic en este botón para acceder a la información sobre los resultados de los formularios en el editor por lotes. Desde aquí podrá exportar la información en un archivo .tsv (separado por tabulaciones) para utilizarlo, (por ejemplo, en una hoja de cálculo de Excel).
    • Correo
      • De
        Introduzca la dirección de correo electrónico desde la que se envía el correo.
      • Para
        Introduzca la dirección o direcciones de correo electrónico a la que se enviará el formulario.
      • CC
        Introduzca la dirección o direcciones de correo electrónico CC.
      • BCC
        Introduzca la dirección o direcciones de correo electrónico BCC.
      • Asunto
        Introduzca el asunto del correo electrónico.
    • Restablecer contraseña
      • Página para cambiar la contraseña
        Página que se utiliza para cambiar la contraseña.
    • Almacenar contenido
      • Ruta del contenido
        Ruta del contenido para cualquier contenido del formulario. Introduzca una ruta que termine con una barra diagonal /. La barra diagonal quiere decir que para cada puerto del formulario se crea un nodo nuevo en la ubicación dada, por ejemplo:
            /formularios/comentarios/
      • Visualización de datos...
        Haga clic en este botón para acceder a la información sobre los resultados de los formularios en el editor por lotes. Desde aquí podrá exportar la información en un archivo .tsv (separado por tabulaciones) para utilizarlo, (por ejemplo, en una hoja de cálculo de Excel).
    • Almacenar contenido con cargas
      Cuenta con las mismas opciones que Almacenar contenido.
      
    • Dar de baja a un suscriptor
      • El posible cliente se eliminará de esta lista
        Especifique la lista de posibles clientes requerida.

Marca el final del formulario. Es posible configurar:

• Final del formulario
  • Mostrar el botón de Enviar
    Indica si se debería mostrar el botón de Enviar o no.
  • Enviar nombre
    Identificador por si utiliza múltiples botones de envío en un formulario.
  • Enviar título
    Nombre que aparece en el botón, como Enviar.
  • Mostrar el botón de Reiniciar
    Seleccione la casilla para hacer visible el botón de Reiniciar.
  • Reiniciar título
    Nombre que aparece en el botón de Reiniciar.
  • Descripción
    Información que aparece debajo del botón.

Permite al usuario introducir el nombre de la cuenta:

Permite añadir un campo de direcciones internacionales con el formato siguiente:

El componente está configurado para su uso inmediato, pero es posible cambiar la configuración, si es necesario. Por ejemplo, se pueden añadir restricciones para elementos o direcciones individuales. Al dejar estos campos vacíos, se usará la configuración predeterminada.

El componente Captcha requiere que el usuario escriba una cadena alfanumérica tal y como se muestra en pantalla. La cadena cambia con cada actualización.

Se pueden configurar distintos parámetros para este componente, incluyendo un mensaje que se mostrará cuando la cadena captcha no sea válida.

Una casilla de verificación permite crear una lista de una o varias casillas, algunas de las cuales se pueden activar al mismo tiempo.

Es posible especificar varios parámetros, incluidos el título, una descripción y el nombre del elemento. Al utilizar los botones + y -, es posible añadir o eliminar elementos y posteriormente situarlos con las flechas arriba y abajo.

Permite proporcionar los campos necesarios para introducir los datos de las tarjetas de crédito. Se puede configurar para especificar los tipos de tarjeta aceptadas y la información obligatoria (por ejemplo, el código de seguridad).

Se puede configurar una lista desplegable para proporcionar una selección de valores a elegir:

Se puede especificar un título y los elementos que deben aparecer en la lista. Al utilizar los botones + y -, es posible añadir o eliminar elementos de la lista y posteriormente situarlos con las flechas arriba y abajo. Es posible especificar si los usuarios pueden seleccionar varios elementos de la lista y cualquier elemento que se deba seleccionar automáticamente la primera vez que se abra la lista (valores iniciales).

El componente de carga de archivo ofrece al usuario un mecanismo para seleccionar y cargar un archivo.

Este componente permite crear un campo oculto. Se pueden utilizar con finalidades distintas; por ejemplo, cuando necesite llevar a cabo una acción después de enviar el formulario, o cuando se requieran datos ocultos en la post producción.

Un botón de imagen permite crear un botón con su propia imagen y texto:

El componente de carga de imagen ofrece al usuario un mecanismo para seleccionar y cargar un archivo de imagen.

El campo de vínculo permite que el usuario especifique una dirección URL:

Se suele utilizar sobre todo para el formulario de eventos del calendario, que se emplea para el campo URL/vínculo de un evento.

Se utiliza para permitir al usuario introducir su contraseña:

Este componente proporciona al usuario dos campos para:

• La introducción de una contraseña.
• introducción repetida de la contraseña para confirmar que los datos son correctos.

Con la configuración predeterminada, el componente aparecerá del modo siguiente:

Un grupo de opciones proporciona una lista de una o varias casillas de verificación de opciones donde sólo una de ellas se puede seleccionar en un momento concreto.

Es posible especificar el nombre del elemento junto con un título y una descripción. Al utilizar los botones + y -, es posible añadir o eliminar elementos y posteriormente situarlos con las flechas arriba y abajo y especificar un valor por defecto si es necesario:

Este componente permite crear un botón de envío, con el texto predeterminado:

O con su propio texto:

Este campo permite la selección de etiquetas:

Se pueden especificar distintos parámetros, incluyendo los espacios de nombres que se pueden usar utilizando la pestaña especializada:

• Campo de etiqueta
  • Espacios de nombres permitidos
    • Geometrixx Outdoors
    • Flujo de trabajo
    • Foro
    • Fotografía de archivo
    • Geometrixx Media
    • Etiquetas estándar
    • Marketing
    • Propiedades de los recursos
  • Anchura en píxeles
  • Tamaño de los elementos emergentes

El campo de texto estándar se puede configurar con el tamaño necesario y con su propio posible cliente en el mensaje:

Permite crear un botón de Enviar para utilizarlo en el flujo de trabajo.