Revisión de las Páginas de Sitio Web
La aplicación web de marketing de Café Supremo cuenta con tres páginas, HOME, MENU y BLOG.
Página HOME
La página inicial muestra campañas de marketing, como anuncios y promociones.
Los artículos disponibles en el sitio web se anuncian con detalles y enlaces en la página de inicio. En la parte superior hay una promoción con un botón more que, al hacer clic en ella, abre una página que describe el artículo. Debajo de la promoción, hay tres anuncios con los botones Consultar ahora. Al final de la página de inicio, se muestra el blog más reciente y abre la página de detalles del blog correspondiente al hacer clic.
Descripción de la ilustración home_page.png
Vamos a recorrer la página inicial para comprender cómo se utilizan los componentes de Oracle Content Management del intercambio de componentes en la aplicación Cafe-Supremo de Oracle Visual Builder.
Descripción de la ilustración home-start_page.png
Los componentes de la lista de contenido con la configuración adecuada se utilizan para mostrar el contenido en la página inicial.
Por ejemplo, veamos la configuración del componente Lista de contenido que se utiliza en la parte superior de la página.
Descripción de la ilustración home_page_component.png
La siguiente configuración clave se especifica en el panel Propiedades de este componente para mostrar la promoción en la parte superior.
- ID: ID de API única del activo.
- Content Server: Valor por Defecto
- Token de canal: valor por defecto
- Tipo de contenido - Promoción
- Diseño: Valor por Defecto de Promoción
- Máximo de Elementos - 1
- Iniciar en elemento - 1
El tipo de contenido de promoción se utiliza en este componente. El número de elementos que se mostrarán está limitado a uno. El botón more se configura para que apunte a la página de detalles correspondiente. Se configura un manejador de eventos para configurar este botón más para abrir la página de detalles de promoción correspondiente. En las propiedades del componente, en el separador Eventos, la configuración del evento se configura para definir un evento y una cadena de acción (una secuencia de acciones) que especifica lo que ocurre cuando se produce el evento especificado, es decir, lo que ocurre cuando se hace clic en un elemento en la página (como el botón more). Los listeners de evento se definen para esta página en el separador Listeners de eventos para recibir eventos e iniciar las cadenas de acciones definidas en el separador Acciones.
Descripción de la ilustración component_event.png
En el separador Acciones, se definen las acciones asociadas con los eventos definidos en el separador Eventos para un elemento de lista de contenido, junto con las cadenas de acción. Las acciones forman parte de una cadena de acción. Por ejemplo, en el separador Acciones, al hacer clic en la primera acción definida para la primera lista de contenido, puede ver su configuración. En la sección Diagrama, al hacer clic en Navegar por detalles de promoción (que es una acción de navegación), verá que el campo Destino del panel de propiedades está definido en promo-details, de modo que navegue a la página de detalles cuando un usuario haga clic en el botón more de la promoción.
Descripción de la ilustración action_tab.png
La página promo-details tiene un componente Content Placeholder configurado para mostrar dinámicamente los elementos de contenido. Por lo tanto, cuando un usuario hace clic en el botón más, el componente Marcador de posición de contenido de la página de detalles de promoción carga automáticamente los detalles del elemento de contenido asociado.
Descripción de la ilustración promo_details.png
Del mismo modo, tenemos una página de blog-detalle que se utiliza para mostrar el artículo de blog correspondiente cuando un usuario hace clic en el blog que se muestra al final de la página de inicio.
Estos componentes de Oracle Content Management se pueden arrastrar desde el intercambio de componentes y soltar en las páginas de la aplicación web y, a continuación, configurar con la configuración adecuada según sus necesidades.
Descripción de la ilustración component_exchange.png
Por ejemplo, para comprender cómo puede agregar un elemento de contenido a la página inicial, consulte la sección Personalizar de este cuaderno de estrategias.
De manera similar, se utilizan otros dos componentes de la lista de contenido para mostrar los anuncios y el blog debajo de la promoción.
Según su configuración, estos componentes recuperan dinámicamente el contenido del repositorio creado anteriormente en Oracle Content Management y, a continuación, lo muestran en la página inicial.
Página MENU
La página MENU muestra todas las opciones de menú de un catálogo.
Descripción de la ilustración menu_page.png
Esta página muestra tres separadores, COFFEE, TEA y TREATS. Cada uno de estos separadores muestra diferentes variedades de artículos disponibles en esa categoría. Por ejemplo, en el separador COFFEE, se muestran variedades como CLASSIC ESPRESSO, SUPREMO CAPPUCCINO, COLD PRESS COFFEE y BLACK SUPREMO con información sobre cada variedad. Algunos de los elementos también tienen vídeos. Debajo de estas pestañas, los diferentes cafés Supremo se exhiben con detalles que incluyen imágenes que describen los artículos disponibles en cada uno de los combos.
En la página de menú, algunos de los componentes clave utilizados son Barra de fichas y Lista de contenidos. Estos componentes se han utilizado con la configuración adecuada para mostrar el contenido en la página de menú. El componente Lista de Contenido procede del intercambio de componentes.
Por ejemplo, vamos a ver la configuración de uno de los componentes de la lista de contenido utilizados en la parte superior de la página.
Descripción de la ilustración menu_page_component.png
La siguiente configuración de clave se especifica en el panel Propiedades de este componente para mostrar los elementos de contenido (elementos de menú).
- ID: ID de API única del activo.
- Content Server: Valor por Defecto
- Token de canal: valor por defecto
- Tipo de contenido - MenuItem
- Diseño: MenuItem-Predeterminado
- Máximo de Elementos - 10
- Iniciar en elemento - 1
- Cadena de consulta adicional - Fields.menuitem_category eq "COFFEE"
El tipo de contenido MenuItem se utiliza en este componente. El número de elementos que se mostrarán está limitado a diez. Para el primer separador (separador COFFEE), el campo Cadena de consulta adicional se define en Fields.menuitem_category eq "COFFEE". Del mismo modo, también se configura para los otros separadores. El campo Cadena de consulta adicional se utiliza para especificar parámetros de consulta adicionales para acotar más la lista de opciones de menú mostradas.
Del mismo modo, se utiliza otro componente de lista de contenido con la configuración adecuada para mostrar los elementos del menú combinado disponibles en Café Supremo.
Los componentes del intercambio de componentes permiten que estas páginas tengan contenido enriquecido mediante la recuperación dinámica del contenido del repositorio en Oracle Content Management y su visualización en la aplicación en Oracle Visual Builder.
Página de BLOG
La página BLOG se utiliza para mostrar artículos de blog de diferentes categorías.
Descripción de la ilustración blog_page.png
Esta página tiene cuatro separadores para las diferentes categorías de blog, como MOSTRAR, DRINKS, PEOPLE y RECIPES. Cada ficha muestra los elementos de blog disponibles para esa categoría específica con detalles como una imagen, título de blog y fecha publicada. Cuando un usuario hace clic en un elemento de blog, la página de artículo de blog se abre en la misma ventana.
Componentes como Barra de Separadores y Lista de Contenido con la configuración adecuada se utilizan para mostrar el contenido en la página de blog. El componente Lista de Contenido procede del intercambio de componentes.
El componente Barra de Separadores está configurado con la configuración adecuada para mostrar las cuatro categorías como fichas en la página de blog. La siguiente configuración clave se especifica en el panel Propiedades de este componente para mostrar las cuatro categorías de blog como fichas.
- ID: ID de API única del activo.
- Selección: se especifica la clave del elemento seleccionado.
- Separadores: se especifica la información del separador para las cuatro categorías y el primer separador se define como el separador por defecto.
- Borde - Superior
Las propiedades de la variable necesaria para estos separadores se definen en el separador Variables.
Veamos la configuración del componente Lista de Contenido. La siguiente configuración clave se especifica en el panel Propiedades de este componente para mostrar los elementos del blog.
- ID: ID de API única del activo.
- Content Server: Valor por Defecto
- Token de canal: valor por defecto
- Tipo de contenido - Blog
- Diseño - Por defecto de blog
- Vista de lista - threeColumns
- Máximo de Elementos - 10
- Iniciar en elemento - 1
- Cadena de consulta adicional - Fields.blog_category eq "HOW TO"
El tipo de contenido Blog se utiliza en este componente. El número de elementos que se mostrarán está limitado a diez. Para la primera ficha (separadorHOW TO), el campo Cadena de consulta adicional se define en Fields.menuitem_category eq "HOW TO". Del mismo modo, también se configura para los otros separadores. Se configura un manejador de eventos para definir las acciones y eventos asociados con los elementos de la lista de contenido a fin de especificar lo que ocurre cuando un usuario hace clic en un elemento de blog. En las propiedades del componente, en el separador Eventos, la configuración del evento se configura para definir un evento y una cadena de acción que especifica lo que ocurre cuando se produce el evento especificado, es decir, lo que ocurre cuando se hace clic en un elemento en la página. Los listeners de evento se definen para esta página en el separador Listeners de eventos para recibir eventos e iniciar las cadenas de acciones definidas en el separador Acciones.
Descripción de la ilustración blog-start_page.png
En el separador Acciones, se definen las acciones asociadas con los eventos definidos en el separador Eventos para un elemento de lista de contenido, junto con las cadenas de acción. Las acciones forman parte de una cadena de acción (una secuencia de acciones). Por ejemplo, en el separador Acciones, al hacer clic en la primera acción, puede ver su configuración. En la sección Diagrama, cuando hace clic en Navegar por detalle en blog (que es una acción de navegación), verá que el campo Destino en el panel de propiedades está establecido en blog-detail, para que navegue a la página de artículo de blog correspondiente (detalles de blog) cuando un usuario hace clic en un elemento de blog en la página de blog.
Descripción de la ilustración target_setting.png
La página de detalles del blog tiene un componente marcador de posición de contenido configurado para mostrar dinámicamente los elementos de contenido. Por lo tanto, cuando un usuario hace clic en un elemento de blog, el componente Marcador de posición de contenido de la página de detalles de blog carga automáticamente los detalles del elemento de contenido asociado.
Descripción de la ilustración blog-details_page.png
Una vez publicada la aplicación del sitio web, cuando se agregan y publican nuevos artículos de blog (elementos de contenido de blog) (en la interfaz web de Oracle Content Management), estos artículos de blog se introducen dinámicamente en la página del blog de la aplicación web (en Oracle Visual Builder) y se ponen a disposición de los usuarios inmediatamente.