Guía de componentes de la comunidad community-components-guide

La guía de componentes de la comunidad es una herramienta de desarrollo interactiva para el marco de trabajo de componentes sociales (SCF). Proporciona una lista de los componentes de comunidades de Adobe Experience Manager AEM () disponibles o las funciones más complejas creadas de varios componentes.

Junto con la información básica de cada componente, la guía permite experimentar cómo funcionan los componentes o funciones de SCF y cómo se pueden configurar o personalizar.

Para obtener información acerca de los aspectos básicos de desarrollo relacionados con cada componente, vea Aspectos básicos de las características y los componentes.

Introducción getting-started

La guía está diseñada para utilizarse en instalaciones de desarrollo de instancias de autor (localhost:4502) e instancias de publicación (localhost:4503).

Para acceder al sitio de componentes de la comunidad, vaya a

Las interacciones con los componentes de las comunidades varían en función de:

En Autor, para entrar al modo de edición, inserte editor.html o cf# como el primer segmento de ruta de acceso después del nombre del servidor:

Página principal home-page

La guía proporciona una lista de los componentes de SCF disponibles para la vista previa y la creación de prototipos en la parte izquierda de la página.

Guía de componentes tal y como se ve en una instancia de autor en el modo de edición:

Páginas de componentes component-pages

Seleccione un componente de la lista que aparece en la parte izquierda de la página.

Se muestra el cuerpo principal de la guía:

Interacciones de autor author-interactions

Al utilizar la guía en una instancia de autor, es posible experimentar la configuración de un componente al abrir su cuadro de diálogo. La información para los desarrolladores se proporciona en la sección Componentes y características esenciales de la documentación, mientras que la configuración del cuadro de diálogo se describe en la sección Componentes de comunidades para autores.

Para la guía Componentes de la comunidad, algunos ajustes del cuadro de diálogo de componentes se superponen al estado de alternancia Incluible. Para alternar entre el uso del recurso existente o un recurso incluido dinámicamente, en el modo de edición, seleccione el componente y el texto que se puede incluir y haga doble clic para abrir el cuadro de diálogo de edición:

En la ficha Plantillas:

Interacciones de Publish publish-interactions

Al utilizar la guía en una instancia de publicación, es posible experimentar los componentes y las funciones como un visitante del sitio (sin iniciar sesión) y como miembros con varios privilegios al iniciar sesión.

Bibliotecas del cliente client-side-libraries

Las bibliotecas del lado del cliente (clientlibs) enumeradas para cada componente son las necesarias a las que se hace referencia cuando el componente se coloca en una página. Los clientlibs proporcionan un medio para administrar y optimizar la descarga de JavaScript y CSS utilizados para procesar el componente en el explorador.

Para obtener más información, visite Clientlibs for Communities Components.

Suplantación impersonation

En la instancia de autor, donde a menudo se inicia sesión como administrador o desarrollador, para experimentar cómo ha iniciado sesión el componente como otro usuario, utilice el cuadro de texto a la izquierda del botón Suplantar para escribir el nombre de usuario o seleccionar en la lista desplegable y, a continuación, haga clic en el botón. Haga clic en Revertir para cerrar la sesión y finalizar la suplantación.

La instancia de publicación no necesita suplantar. Solo tiene que usar el enlace Iniciar/Cerrar sesión para suplantar a varios usuarios, como los usuarios de demostración.

Personalización customization

Cuando se habilita, cada componente SCF está disponible para crear prototipos de posibles personalizaciones mediante la modificación temporal de la plantilla, CSS y datos del componente.

Habilitar la personalización enabling-customization

Para experimentar rápidamente con las personalizaciones, se debe agregar la propiedad scg:showIde al nodo JCR de contenido de la página de componente y establecerla en true.

Con el componente Comentarios como ejemplo, en la instancia de autor o publicación, ha iniciado sesión con privilegios de administrador:

Pestaña Plantillas templates-tab

Seleccione la pestaña plantillas para ver las plantillas asociadas al componente.

El Editor de plantillas permite compilar las ediciones locales y aplicarlas a la instancia del componente de muestra en la parte superior de la página sin afectar al componente en el repositorio.

La ejecución de compilaciones en ediciones locales resaltará los errores colocando un punto en el margen interno y marcando el texto en rojo.

Pestaña CSS css-tab

Seleccione la pestaña CSS para ver el CSS asociado al componente.

Si un componente está compuesto por varios componentes, parte del CSS puede aparecer enumerado en uno de los demás componentes.

El editor CSS permite modificar el CSS y aplicarlo a la instancia del componente de ejemplo en la parte superior de la página.

Se puede seleccionar una regla para resaltar las partes del DOM que utilizan esa regla haciendo clic en junto a la regla en el margen.

Pestaña Datos data-tab

Seleccione la pestaña Datos para mostrar los datos del extremo .social.json. Estos datos son editables y se aplican a la instancia de componente de ejemplo.

Los errores de sintaxis se pueden marcar en el margen interno y resaltar en el editor.