Consulter les pages du site Web
L’application de site Web marketing Café Supremo comporte trois pages : HOME, MENU et BLOG.
Page HOME
La page d'accueil affiche les campagnes marketing, telles que les publicités et les promotions.
Les articles disponibles sur le site sont publiés avec des détails et des liens sur la page d'accueil. En haut, il existe une promotion avec un bouton Plus qui, lorsqu'il est cliqué, ouvre une page décrivant l'élément. Sous la promotion, trois publicités sont disponibles avec les boutons Boutique maintenant. A la fin de la page d'accueil, le dernier blog s'affiche et la page de détails correspondante apparaît lorsque vous cliquez dessus.
Description de l'image home_page.png
Regardons la page d'accueil pour comprendre comment les composants Oracle Content Management de l'échange de composants sont utilisés dans l'application Cafe-Supremo d'Oracle Visual Builder.
Description de l'illustration home-start_page.png
Les composants Liste de contenu avec les paramètres appropriés sont utilisés pour afficher le contenu sur la page d'accueil.
Par exemple, voyons la configuration du composant Liste de contenu utilisé en haut de la page.
Description de l'image home_page_component.png
Les paramètres clés suivants sont spécifiés dans le panneau Propriétés de ce composant pour afficher la promotion en haut.
- ID - ID API unique de la ressource.
- Serveur de contenu - Valeur par défaut
- Jeton de canal - Valeur par défaut
- Type de contenu - Promo
- Disposition - Promo-Default
- Nombre maximal d'éléments - 1
- Commencer à l'élément - 1
Le type de contenu Promo est utilisé dans ce composant. Le nombre d'éléments à afficher est limité à un. Le bouton Plus est configuré pour pointer vers la page de détails correspondante. Un gestionnaire d'événements est configuré pour configurer ce bouton plus afin d'ouvrir la page de détails de promotion correspondante. Dans les propriétés du composant, dans l'onglet Evénements, les paramètres d'événement sont configurés pour définir un événement et une chaîne d'actions (une séquence d'actions) qui spécifie ce qui se passe lorsque l'événement spécifié se produit, c'est-à-dire ce qui se produit lorsqu'un élément est cliqué sur la page (par exemple, le bouton Plus). Les processus d'écoute d'événement sont définis pour cette page dans l'onglet Event Listeners pour écouter les événements et démarrer les chaînes d'actions définies dans l'onglet Actions.
Description de l'image component_event.png
Dans l'onglet Actions, les actions associées aux événements définis dans l'onglet Evénements d'un élément de liste de contenu sont définies, ainsi que les chaînes d'actions. Les actions font partie d'une chaîne d'actions. Par exemple, dans l'onglet Actions, lorsque vous cliquez sur la première action définie pour la première liste de contenu, vous pouvez visualiser sa configuration. Dans la section Diagram, lorsque vous cliquez sur Naviguer dans les détails de promotion (action de navigation), le champ Cible du volet des propriétés est défini sur promo-details, de sorte qu'il accède à la page de détails lorsqu'un utilisateur clique sur le bouton Plus de la promotion.
Description de l'image actions_tab.png
La page promo-details contient un composant Espace réservé au contenu configuré pour afficher dynamiquement les éléments de contenu. Ainsi, lorsqu'un utilisateur clique sur le bouton Plus, le composant Espace réservé de contenu de la page de détails de promotion charge automatiquement les détails de l'élément de contenu associé.
Description de l'image promo_details.png
De même, nous avons une page de détails de blog qui permet d'afficher l'article de blog correspondant lorsqu'un utilisateur clique sur le blog affiché à la fin de la page d'accueil.
Ces composants Oracle Content Management peuvent être glissés à partir de l'échange de composants et ajoutés aux pages de l'application Web, puis configurés avec les paramètres appropriés en fonction de vos besoins.
Description de l'image component_exchange.png
Par exemple, pour comprendre comment ajouter un élément de contenu à la page d'accueil, reportez-vous à la section Personnaliser de ce livre de jeux de solutions.
De même, deux autres composants de liste de contenu sont utilisés pour afficher les publicités et le blog sous la promotion.
En fonction de leurs paramètres, ces composants extraient dynamiquement le contenu du référentiel que vous avez créé précédemment dans Oracle Content Management, puis affichent ce contenu sur la page d'accueil.
Page MENU
La page MENU répertorie tous les éléments de menu d'un catalogue.
Description de l'image menu_page.png
Cette page affiche trois onglets : COFFEE, TEA et TREATS. Chacun de ces onglets affiche différentes variétés d'articles disponibles sous cette catégorie. Par exemple, sous l'onglet COFFEE, les variétés telles que CLASSIC ESPRESSO, SUPREMO CAPPUCCINO, COFFEE DE PRESS COLD et BLACK SUPREMO affichent des informations sur chaque variété. Certains éléments ont également des vidéos. Au-dessous de ces onglets, les différents peignes Café Supremo affichent des informations détaillées, y compris des images décrivant les éléments disponibles dans chacun des kombos.
Sur la page de menu, certains des composants clés utilisés sont Barre d'onglets et Liste de contenu. Ces composants ont été utilisés avec les paramètres appropriés pour afficher le contenu dans la page de menu. Le composant Liste de contenu provient de l'échange de composants.
Par exemple, voyons la configuration d'un des composants Liste de contenu utilisés en haut de la page.
Description de l'image menu_page_component.png
Les paramètres clés suivants sont spécifiés dans le panneau Propriétés de ce composant pour afficher les éléments de contenu (éléments de menu).
- ID - ID API unique de la ressource.
- Serveur de contenu - Valeur par défaut
- Jeton de canal - Valeur par défaut
- Type de contenu - MenuItem
- Disposition - MenuItem-Par défaut
- Nombre maximal d'éléments - 10
- Commencer à l'élément – 1
- Chaîne de requête supplémentaire - fields.menuitem_category eq "COFFEE"
Le type de contenu MenuItem est utilisé dans ce composant. Le nombre d'éléments à afficher est limité à dix. Pour le premier onglet (onglet COFFEE), le champ Chaîne de requête supplémentaire est défini sur fields.menuitem_category eq "COFFEE". De même, il est également défini pour les autres onglets. Le champ Chaîne de requête supplémentaire permet de spécifier des paramètres de requête supplémentaires afin d'affiner la liste des options de menu affichées.
De même, un autre composant de liste de contenu est utilisé avec les paramètres appropriés pour afficher les options de menu disponibles dans Café Supremo.
Les composants de l'échange de composants permettent à ces pages d'obtenir du contenu enrichi en extrayant dynamiquement du contenu du référentiel dans Oracle Content Management et en les affichant dans l'application dans Oracle Visual Builder.
Page BLOG
La page BLOG permet d'afficher des articles de blog de différentes catégories.
Description de l'image blog_page.png
Cette page comporte quatre onglets pour les différentes catégories de blog telles que HOW TO, DRINKS, PEOPLE et RECIPES. Chaque onglet affiche les articles de blog disponibles pour cette catégorie spécifique avec des détails tels qu'une image, un titre de blog et une date de publication. Lorsqu'un utilisateur clique sur un article de blog, la page de l'article de blog s'ouvre dans la même fenêtre.
Les composants tels que Barre d'onglets et Liste de contenu avec les paramètres appropriés sont utilisés pour afficher le contenu sur la page de blog. Le composant Liste de contenu provient de l'échange de composants.
Le composant Barre d'onglets est configuré avec les paramètres appropriés pour afficher les quatre catégories sous forme d'onglets sur la page de blog. Les paramètres clés suivants sont indiqués dans le panneau Propriétés de ce composant pour afficher les quatre catégories de blog sous forme d'onglets.
- ID - ID API unique de la ressource.
- Sélection - La clé de l'élément sélectionné est indiquée.
- Onglets - Les informations d'onglet des quatre catégories sont spécifiées et le premier onglet est défini comme onglet par défaut.
- Edge - Haut
Les propriétés de la variable requise pour ces onglets sont définies dans l'onglet Variables.
Voyons la configuration du composant Liste de contenu. Les paramètres clés suivants sont indiqués dans le panneau Propriétés de ce composant pour afficher les éléments de blog.
- ID - ID API unique de la ressource.
- Serveur de contenu - Valeur par défaut
- Jeton de canal - Valeur par défaut
- Type de contenu - Blog
- Présentation - Blog-Par défaut
- Vue Liste - threeColumns
- Nombre maximal d'éléments - 10
- Commencer à l'élément – 1
- Chaîne de requête supplémentaire - fields.blog_category eq "HOW TO"
Le type de contenu Blog est utilisé dans ce composant. Le nombre d'éléments à afficher est limité à dix. Pour le premier onglet (HOW TO), le champ Additional Query String est défini sur fields.menuitem_category eq "HOW TO". De même, il est également défini pour les autres onglets. Un gestionnaire d'événements est configuré pour définir les actions et événements associés aux éléments de liste de contenu afin d'indiquer ce qui se passe lorsqu'un utilisateur clique sur un élément de blog. Dans les propriétés du composant, dans l'onglet Evénements, les paramètres d'événement sont configurés pour définir un événement et une chaîne d'actions qui spécifie ce qui se passe lorsque l'événement spécifié se produit, c'est-à-dire ce qui se passe lorsqu'un élément est cliqué sur la page. Les processus d'écoute d'événement sont définis pour cette page dans l'onglet Event Listeners pour écouter les événements et démarrer les chaînes d'actions définies dans l'onglet Actions.
Description de l'illustration blog-start_page.png
Dans l'onglet Actions, les actions associées aux événements définis dans l'onglet Evénements d'un élément de liste de contenu sont définies, ainsi que les chaînes d'actions. Les actions font partie d'une chaîne d'actions (séquence d'actions). Par exemple, dans l'onglet Actions, lorsque vous cliquez sur la première action, vous pouvez visualiser sa configuration. Dans la section Diagram, lorsque vous cliquez sur Naviguer blog-detail (action de navigation), le champ Cible du panneau de propriétés est défini sur blog-detail, de sorte qu'il accède à la page d'article de blog correspondante (détails du blog) lorsqu'un utilisateur clique sur un élément de blog sur la page de blog.
Description de l'image target_setting.png
La page de détails de blog comporte un composant Espace réservé de contenu configuré pour afficher dynamiquement les éléments de contenu. Ainsi, lorsqu'un utilisateur clique sur un élément de blog, le composant Espace réservé du contenu de la page de détails du blog charge automatiquement les détails de l'élément de contenu associé.
Description de l'illustration blog-details_page.png
Une fois l'application de site Web publiée, lorsque de nouveaux articles de blog (éléments de contenu du blog) sont ajoutés et publiés (dans l'interface Web d'Oracle Content Management), ces articles de blog sont extraits dynamiquement sur la page de blog de l'application de site Web (dans Oracle Visual Builder) et sont immédiatement mis à la disposition des utilisateurs.