Criação de um Cloud Service personalizado
- Tópicos:
- Desenvolvimento
Criado para:
- Desenvolvedor
O conjunto padrão de Cloud Services pode ser estendido com tipos de Cloud Service personalizados. Isso permite inserir uma marcação personalizada na página de forma estruturada. Isso será usado principalmente para provedores de análises de terceiros, por exemplo, Google Analytics, Chartbeat etc. Cloud Services são herdadas de páginas pai para páginas filho com a capacidade de quebrar a herança em qualquer nível.
-
No CRXDE Lite, crie um novo nó em
/apps
:- Nome:
acs
- Tipo:
nt:folder
- Nome:
-
Crie um novo nó em
/apps/acs
:- Nome:
analytics
- Tipo:
sling:Folder
- Nome:
-
Crie 2 novos nós em
/apps/acs/analytics
:- Nome: componentes
- Tipo:
sling:Folder
e
- Nome: modelos
- Tipo:
sling:Folder
-
Clique com o botão direito em
/apps/acs/analytics/components
. Selecionar Criar… seguida de Criar componente… A caixa de diálogo que é aberta permite especificar:- Rótulo:
googleanalyticspage
- Título:
Google Analytics Page
- Super Type:
cq/cloudserviceconfigs/components/configpage
- Grupo:
.hidden
- Rótulo:
-
Clique em Próximo duas vezes e especifique:
- Primários permitidos:
acs/analytics/templates/googleanalytics
Clique em Próximo duas vezes e clique em OK.
- Primários permitidos:
-
Adicionar uma propriedade a
googleanalyticspage
:- Nome:
cq:defaultView
- Valor:
html
- Nome:
-
Crie um novo arquivo com o nome
content.jsp
under/apps/acs/analytics/components/googleanalyticspage
, com o seguinte conteúdo:<%@page contentType="text/html" pageEncoding="utf-8"%><% %><%@include file="/libs/foundation/global.jsp"%><div> <div> <h3>Google Analytics Settings</h3> <ul> <li><div class="li-bullet"><strong>accountID: </strong><br><%= xssAPI.encodeForHTML(properties.get("accountID", "")) %></div></li> </ul> </div>
-
Crie um novo nó em
/apps/acs/analytics/components/googleanalyticspage/
:-
Nome:
dialog
-
Tipo:
cq:Dialog
-
Propriedades:
- Nome:
title
- Tipo:
String
- Valor:
Google Analytics Config
- Nome:
xtype
- Tipo:
String
- Valor:
dialog
- Nome:
-
-
Crie um novo nó em
/apps/acs/analytics/components/googleanalyticspage/dialog
:-
Nome:
items
-
Tipo:
cq:Widget
-
Propriedades:
- Nome:
xtype
- Tipo:
String
- Valor:
tabpanel
- Nome:
-
-
Crie um novo nó em
/apps/acs/analytics/components/googleanalyticspage/dialog/items
:- Nome:
items
- Tipo:
cq:WidgetCollection
- Nome:
-
Crie um novo nó em
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items
:-
Nome: tab1
-
Tipo:
cq:Panel
-
Propriedades:
- Nome:
title
- Tipo:
String
- Valor:
Config
- Nome:
-
-
Crie um novo nó em
/apps/acs/analytics/components/googleanalyticspage/dialog/items/items/tab1
:-
Nome: items
-
Tipo:
nt:unstructured
-
Propriedades:
-
Nome:
fieldLabel
-
Tipo: String
-
Valor: ID da conta
-
Nome:
fieldDescription
-
Tipo:
String
-
Valor:
The account ID assigned by Google. Usually in the form UA-NNNNNN-N
-
Nome:
name
-
Tipo:
String
-
Valor:
./accountID
-
Nome:
validateOnBlur
-
Tipo:
String
-
Valor:
true
-
Nome:
xtype
-
Tipo:
String
-
Valor:
textfield
-
-
-
Copiar
/libs/cq/cloudserviceconfigs/components/configpage/body.jsp
para/apps/acs/analytics/components/googleanalyticspage/body.jsp
e alterarlibs
paraapps
na linha 34 e fazer da referência do script na linha 79 um caminho totalmente qualificado. -
Crie um novo modelo em
/apps/acs/analytics/templates/
:- com Tipo de recurso =
acs/analytics/components/googleanalyticspage
- com Rótulo =
googleanalytics
- com Título=
Google Analytics Configuration
- com allowedPath =
/etc/cloudservices/googleanalytics(/.*)?
- com allowedChildren =
/apps/acs/analytics/templates/googleanalytics
- com sling:resourceSuperType =
cq/cloudserviceconfigs/templates/configpage
(no nó do modelo, não no nó jcr:content) - com cq:designPath =
/etc/designs/cloudservices/googleanalytics
(em jcr:content)
- com Tipo de recurso =
-
Criar novo componente:
/apps/acs/analytics/components/googleanalytics
.Adicione o seguinte conteúdo a
googleanalytics.jsp
:<%@page import="org.apache.sling.api.resource.Resource, org.apache.sling.api.resource.ValueMap, org.apache.sling.api.resource.ResourceUtil, com.day.cq.wcm.webservicesupport.Configuration, com.day.cq.wcm.webservicesupport.ConfigurationManager" %> <%@include file="/libs/foundation/global.jsp" %><% String[] services = pageProperties.getInherited("cq:cloudserviceconfigs", new String[]{}); ConfigurationManager cfgMgr = resource.getResourceResolver().adaptTo(ConfigurationManager.class); if(cfgMgr != null) { String accountID = null; Configuration cfg = cfgMgr.getConfiguration("googleanalytics", services); if(cfg != null) { accountID = cfg.get("accountID", null); } if(accountID != null) { %> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', '<%= accountID %>']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'https://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script><% } } %>
Isso deve produzir a marcação personalizada com base nas propriedades de configuração.
-
Navegar para
http://localhost:4502/miscadmin#/etc/cloudservices
e criar uma nova página:- Título:
Google Analytics
- Nome:
googleanalytics
Volte em CRXDE Lite, e em
/etc/cloudservices/googleanalytics
, adicione a seguinte propriedade ajcr:content
:- Nome:
componentReference
- Tipo:
String
- Valor:
acs/analytics/components/googleanalytics
- Título:
-
Navegue até a página Serviço recém-criada (
http://localhost:4502/etc/cloudservices/googleanalytics.html
) e clique no botão + para criar uma nova configuração:- Configuração primária:
/etc/cloudservices/googleanalytics
- Título:
My First GA Config
Choose Configuração do Google Analytics e clique em Criar.
- Configuração primária:
-
Insira um ID da conta, por exemplo
AA-11111111-1
. Clique em OK. -
Navegue até uma página e adicione a configuração recém-criada nas propriedades da página, no Cloud Services guia .
-
A página terá a marcação personalizada adicionada a ela.
Experience Manager
- Visão geral do Guia do usuário para desenvolvimento
- Introdução para desenvolvedores
- Introdução ao desenvolvimento do AEM Sites - Tutorial de WKND
- AEM Conceitos principais
- Estrutura da interface de usuário habilitada para toque do AEM
- Conceitos da interface de usuário habilitada para toque do AEM
- Desenvolvimento de AEM - Diretrizes e práticas recomendadas
- Uso de bibliotecas do cliente
- Desenvolvimento e diff de página
- Limitações do editor
- Quadro de proteção do QREF
- Modelagem de Dados - Modelo de David Nuescheler
- Contribuição para AEM
- Segurança
- Materiais de referência
- Criar um site com recursos completos (interface clássica)
- Designs and the Designer (Classic UI)
- Plataforma
- Folha de características do Sling
- Uso de adaptadores Sling
- Bibliotecas de tags
- Modelos
- Uso da Fusão de Recursos do Sling em AEM
- Sobreposições
- Convenções de nomenclatura
- Criação de um novo componente de campo da interface do usuário do Granite
- Query Builder
- Marcação com tags
- Personalização de páginas mostradas pelo Manipulador de erros
- Tipos de nó personalizados
- Adicionar fontes para renderização de gráficos
- Conexão com Bancos de Dados SQL
- Exteriorização de URLs
- Criação e consumo de trabalhos para descarregamento
- Configuração do uso de cookies
- Como acessar programaticamente o JCR AEM
- Integração de serviços com o console JMX
- Desenvolvimento do editor em massa
- Desenvolvimento de relatórios
- eCommerce
- Componentes
- Componentes principais
- Sistema de estilos
- Visão geral dos componentes
- Componentes AEM - Noções básicas
- Desenvolvimento de componentes de AEM
- Desenvolvimento de componentes de AEM - Amostras de código
- Exportador JSON para serviços de conteúdo
- Ativação de exportação em JSON para um componente
- Editor de imagem
- Tag de decoração
- Uso de condições de ocultação
- Configuração de vários editores no local
- Modo de desenvolvedor
- Testar sua interface do usuário
- Componentes para fragmentos de conteúdo
- Obter informações de página no formato JSON
- Internacionalização
- Componentes da interface clássica
- Gerenciamento de experiência headless
- Sem cabeçalho e híbrido com AEM
- Ativação da exportação em JSON para um componente
- Aplicativos de página única
- Introdução e passo a passo do SPA
- Tutorial WKND do SPA
- Introdução ao SPA no AEM - React
- Introdução ao SPA no AEM - Angular
- Implementação de um componente de reação para SPA
- Aprofundamentos de SPA
- Visão geral do editor de SPA
- Desenvolvimento de SPAs para o AEM
- Blueprint do SPA
- Componente de página SPA
- Modelo dinâmico para mapeamento de componentes para SPA
- Roteamento do Modelo de SPA
- Integração do SPA e Adobe Experience Platform Launch
- Renderização de SPA e do servidor
- Materiais de referência SPA
- API HTTP
- Fragmentos de conteúdo
- Fragmentos de experiência
- Ferramentas de desenvolvimento
- Ferramentas de desenvolvimento
- Ferramentas de Modernização do AEM
- Editor de caixa de diálogo
- Ferramenta de conversão de caixa de diálogo
- Desenvolvimento com o CRXDE Lite
- Gerenciamento de pacotes usando o Maven
- Como desenvolver projetos AEM usando o Eclipse
- Como criar projetos AEM usando o Apache Maven
- Como desenvolver projetos AEM usando o IntelliJ IDEA
- Como usar a ferramenta VLT
- Como usar a ferramenta Servidor proxy
- Extensão de colchetes AEM
- Ferramentas de desenvolvedor do AEM para Eclipse
- Ferramenta AEM Repo
- Personalização
- ContextHub
- Referência de API do Javascript do ContextHub
- Extensão do ContextHub
- Adicionar o ContextHub às páginas e acessar armazenamentos
- Exemplos de candidatos à loja do ContextHub
- Exemplos de tipos de módulo da interface do usuário do ContextHub
- Diagnósticos do ContextHub
- Desenvolvimento de conteúdo direcionado
- ClientContext
- Extensão de AEM
- Personalização da criação de página
- Personalização dos consoles
- Personalização de exibições das propriedades da página
- Configurar sua página para a edição de itens em massa das propriedades da página
- Personalização e extensão de fragmentos de conteúdo
- Extensão de fluxos de trabalho
- Extensão do Gerenciador de vários sites
- Rastreamento e análise
- Cloud Services
- Criação de extensões personalizadas
- Forms
- Integração de serviços com o console JMX
- Desenvolvimento do editor em massa
- Extensão da interface clássica
- Testes
- Planejamento
- Quais ambientes de teste serão necessários?
- Definição dos casos de teste
- Teste - quando e com quem?
- Compilação do plano de teste
- Rastrear resultados e fornecer feedback
- Ferramentas de teste e rastreamento
- Aceitação e aprovação
- A próxima versão…
- Listas de verificação
- Dia difícil
- Testar sua interface do usuário
- Práticas recomendadas
- Visão geral das práticas recomendadas
- Diretrizes de desenvolvimento de AEM e práticas recomendadas
- Práticas recomendadas de desenvolvimento
- Arquitetura de conteúdo
- Arquitetura de software
- Implementação de referência We.Retail
- Implementação de referência We.Retail
- Experimentação de fragmentos de conteúdo no We.Retail
- Como experimentar os Componentes principais no We.Retail
- Tentando modelos editáveis no We.Retail
- Tentando um layout responsivo no We.Retail
- Tentar a estrutura do site globalizado no We.Retail
- Experiência de fragmentos de experiência no We.Retail
- Dicas de codificação
- armadilhas de código
- Pacotes OSGI
- Integração JCR
- Amostras de código
- Solução de problemas de consultas lentas
- Web móvel