Revise as Páginas do Site
O aplicativo do site de marketing Café Supremo tem três páginas, HOME, MENU e BLOG.
Página HOME
A página inicial exibe campanhas de marketing, como anúncios e promoções.
Os itens disponíveis no site são divulgados com detalhes e links na página inicial. Na parte superior, há uma promoção com um botão mais que, quando clicado, abre uma página descrevendo o item. Abaixo da promoção, há três propagandas com botões shop agora. No final da página inicial, o blog mais recente é exibido e abre a página de detalhes do blog correspondente quando clicado.
Descrição da ilustração home_page.png
Vamos percorrer a página inicial para entender como os componentes do Oracle Content Management a partir do intercâmbio de componentes são usados no aplicativo Cafe-Supremo no Oracle Visual Builder.
Descrição da ilustração home-start_page.png
Os componentes da Lista de Conteúdo com as definições apropriadas são usados para exibir o conteúdo na página inicial.
Por exemplo, vamos ver a configuração do componente Lista de Conteúdo usado na parte superior da página.
Descrição da ilustração home_page_component.png
As configurações de chave a seguir são especificadas no painel Propriedades deste componente para exibir a promoção na parte superior.
- ID - O ID da API exclusivo do ativo.
- Content Server - Valor padrão
- Token do Canal - Valor padrão
- Tipo de Conteúdo - Promoção
- Layout - Promo-Padrão
- Máximo de Itens - 1
- Iniciar no item - 1
O tipo de conteúdo Promoção é usado neste componente. O número de itens para exibição é limitado a um. O botão mais é configurado para apontar para a página de detalhes correspondente. Um manipulador de eventos é configurado para configurar este botão mais para abrir a página de detalhes de promoção correspondente. Nas propriedades do componente, na guia Eventos, as definições de evento são configuradas para definir um evento e uma cadeia de ações (uma sequência de ações) que especifica o que acontece quando o evento especificado ocorre, ou seja, o que acontece quando um item é clicado na página (como o botão mais). Os listeners de eventos são definidos para esta página na guia Listeners de Eventos para ouvir eventos e iniciar as cadeias de ações definidas na guia Ações.
Descrição da ilustração component_event.png
Na guia Ações, as ações associadas aos eventos definidos na guia Eventos de um item da lista de conteúdo são definidas, juntamente com cadeias de ação. As ações fazem parte de uma cadeia de ações. Por exemplo, na guia Ações, quando você clica na primeira ação definida para a primeira lista de conteúdo, é possível exibir sua configuração. Na seção Diagrama, quando você clicar em Navegar em detalhes promocionais (que é uma ação de navegação), verá que o campo Destino no painel de propriedades está definido como promo-details, para que ele navegue até a página de detalhes quando um usuário clicar no botão mais na promoção.
Descrição da ilustração action_tab.png
A página promo-details tem um componente Marcador de Conteúdo configurado para exibir dinamicamente os itens de conteúdo. Assim, quando um usuário clica no botão mais, o componente Marcador de Conteúdo na página de detalhes promocionais carrega automaticamente os detalhes do item de conteúdo associado.
Descrição da ilustração promo_details.png
Da mesma forma, temos uma página de detalhes do blog que é usada para exibir o artigo do blog correspondente quando um usuário clica no blog exibido no final da página inicial.
Esses componentes do Oracle Content Management podem ser arrastados da troca de componentes e soltos nas páginas do aplicativo do site e, em seguida, configurados com as configurações apropriadas com base nas suas necessidades.
Descrição da ilustração component_exchange.png
Por exemplo, para entender como você pode adicionar um item de conteúdo à página inicial, consulte a seção Personalizar deste manual de solução.
Da mesma forma, mais dois componentes da Lista de Conteúdo são usados para exibir as propagandas e o blog abaixo da promoção.
Com base em suas definições, esses componentes extraem dinamicamente o conteúdo do repositório criado anteriormente no Oracle Content Management e, em seguida, exibem esse conteúdo na home page.
Página MENU
A página CARDÁPIO lista todos os itens de menu de um catálogo.
Descrição da ilustração menu_page.png
Esta página exibe três guias, COFFEE, TEA e TREATS. Cada uma dessas guias exibe diferentes variedades de itens disponíveis sob essa categoria. Por exemplo, na guia COFFEE, variedades como CLASSIC ESPRESSO, SUPREMO CAPPUCCINO, COLD PRESS COFFEE e BLACK SUPREMO são exibidas com informações sobre cada variedade. Alguns dos itens também têm vídeos. Abaixo dessas guias, os diferentes combos do Café Supremo são exibidos com detalhes, incluindo imagens que descrevem os itens disponíveis em cada um dos combos.
Na página do menu, alguns dos componentes-chave usados são Barra de Guias e Lista de Conteúdo. Esses componentes foram usados com as definições apropriadas para exibir o conteúdo na página de menu. O componente Lista de Conteúdo é proveniente do intercâmbio de componentes.
Por exemplo, vamos ver a configuração de um dos componentes da Lista de Conteúdo usados na parte superior da página.
Descrição da ilustração menu_page_component.png
As definições de chave a seguir são especificadas no painel Properties deste componente para exibir os itens de conteúdo (itens de menu).
- ID - O ID da API exclusivo do ativo.
- Content Server - Valor padrão
- Token do Canal - Valor padrão
- Tipo de Conteúdo - MenuItem
- Layout - MenuItem-Padrão
- Máximo de Itens - 10
- Iniciar no item – 1
- String de Consulta Adicional - fields.menuitem_category eq "COFFEE"
O tipo de conteúdo MenuItem é usado nesse componente. O número de itens para exibição está limitado a dez. Para a primeira guia (guia COFFEE), o campo String de Consulta Adicional é definido como fields.menuitem_category eq "COFFEE". Da mesma forma, ela também é definida para as outras guias. O campo String de Consulta Adicional é usado para especificar parâmetros de consulta adicionais para refinar mais a lista de itens de menu exibidos.
Da mesma forma, outro componente da Lista de Conteúdo é usado com as configurações apropriadas para exibir os itens de menu de combinação disponíveis no Café Supremo.
Os componentes do intercâmbio de componentes permitem que essas páginas tenham conteúdo avançado extraindo dinamicamente conteúdo do repositório no Oracle Content Management e exibindo-os no aplicativo no Oracle Visual Builder.
Página BLOG
A página BLOG é usada para exibir artigos de blog de diferentes categorias.
Descrição da ilustração blog_page.png
Esta página tem quatro guias para as diferentes categorias de blog, como HOW TO, DRINKS, PEOPLE e RECIPES. Cada guia exibe os itens do blog disponíveis para essa categoria específica com detalhes como imagem, título do blog e data de publicação. Quando um usuário clica em um item do blog, a página do artigo do blog é aberta na mesma janela.
Componentes como Barra de Guias e Lista de Conteúdo com as configurações apropriadas são usados para exibir o conteúdo na página do blog. O componente Lista de Conteúdo é proveniente do intercâmbio de componentes.
O componente Tab Bar é configurado com as definições apropriadas para exibir as quatro categorias como guias na página do blog. As configurações de chave a seguir são especificadas no painel Properties deste componente para exibir as quatro categorias de blog como guias.
- ID - O ID da API exclusivo do ativo.
- Seleção - A chave do item selecionado é especificada.
- Guias - As informações da guia das quatro categorias são especificadas e a primeira guia é definida como a guia padrão.
- Borda - Superior
As propriedades da variável necessária para essas guias são definidas na guia Variáveis.
Vamos ver a configuração do componente Lista de Conteúdo. As definições de chave a seguir são especificadas no painel Properties deste componente para exibir os itens de blog.
- ID - O ID da API exclusivo do ativo.
- Content Server - Valor padrão
- Token do Canal - Valor padrão
- Tipo de Conteúdo - Blog
- Layout - Blog-Padrão
- View em Lista - threeColumns
- Máximo de Itens - 10
- Iniciar no item – 1
- String de Consulta Adicional - fields.blog_category eq "HOW TO"
O tipo de conteúdo Blog é usado nesse componente. O número de itens para exibição está limitado a dez. Para a primeira guia (guia OP TO), o campo String de Consulta Adicional é definido como fields.menuitem_category eq "HOW TO". Da mesma forma, ela também é definida para as outras guias. Um processador de eventos é configurado para definir as ações e os eventos associados aos itens da lista de conteúdo para especificar o que acontece quando um usuário clica em um item do blog. Nas propriedades do componente, na guia Eventos, as definições de evento são configuradas para definir um evento e uma cadeia de ações que especifica o que acontece quando o evento especificado ocorre, ou seja, o que acontece quando um item é clicado na página. Os listeners de eventos são definidos para esta página na guia Listeners de Eventos para ouvir eventos e iniciar as cadeias de ações definidas na guia Ações.
Descrição da ilustração blog-start_page.png
Na guia Ações, as ações associadas aos eventos definidos na guia Eventos de um item da lista de conteúdo são definidas, juntamente com cadeias de ação. As ações fazem parte de uma cadeia de ações (uma sequência de ações). Por exemplo, na guia Ações, ao clicar na primeira ação, você pode exibir sua configuração. Na seção Diagrama, quando você clicar em Navegar nos detalhes do blog (que é uma ação de navegação), verá que o campo Destino no painel de propriedades está definido como blog-Detail, para que ele navegue até a página de artigo do blog correspondente (detalhes do blog) quando um usuário clicar em um item do blog na página do blog.
Descrição da ilustração target_setting.png
A página blog-details tem um componente Marcador de Conteúdo configurado para exibir dinamicamente os itens de conteúdo. Assim, quando um usuário clica em um item de blog, o componente Marcador de conteúdo na página de detalhes do blog carrega automaticamente os detalhes do item de conteúdo associado.
Descrição da ilustração blog-details_page.png
Depois que o aplicativo do site tiver sido publicado, quando novos artigos do blog (itens de conteúdo do Blog) forem adicionados e publicados (na interface Web do Oracle Content Management), esses artigos do blog serão inseridos dinamicamente na página do blog do aplicativo do site (no Oracle Visual Builder) e disponibilizados imediatamente para os usuários.