DocumentaçãoAEM as a Cloud ServiceGuia do usuário

Visão geral do editor universal para desenvolvedores do AEM developer-overview

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

Se você for um desenvolvedor do AEM interessado em como o Editor universal funciona e como usá-lo no seu projeto, este documento fornecerá uma introdução completa, orientando você pela instrumentação do projeto WKND para trabalhar com o Editor universal.

Propósito purpose

Este documento serve como uma introdução do desenvolvedor sobre como o Universal Editor funciona e como instrumentar seu aplicativo para trabalhar com ele.

Ele faz isso tomando um exemplo padrão com o qual a maioria dos desenvolvedores de AEM está familiarizada, os Componentes principais e o site WKND, e instrumenta alguns componentes de exemplo para serem editáveis usando o editor universal.

TIP
Este documento contém etapas extras para ilustrar como o Universal Editor funciona e tem como objetivo aprofundar a compreensão do desenvolvedor sobre o editor. Portanto, não é preciso a rota mais direta para instrumentar um aplicativo, mas o mais ilustrativo do Editor universal e como ele funciona.
Se você quiser começar a usar o mais rápido possível, consulte o documento Introdução ao Editor Universal no AEM.

Pré-requisitos prerequisites

Para acompanhar essa visão geral, você precisa do seguinte disponível.

Além da familiaridade geral com o desenvolvimento na web, este documento presume a familiaridade básica com o desenvolvimento do AEM. Se você não tiver experiência com desenvolvimento de AEM, considere revisar o tutorial do WKND antes de continuar.

Iniciar AEM e Entrar no Editor Universal sign-in

Se ainda não tiver feito isso, você deve ter sua instância de desenvolvimento local do AEM em execução com o WKND instalado e o HTTPS habilitado, conforme detalhado nos pré-requisitos. Esta visão geral presume que sua instância está em execução em https://localhost:8443.

  1. Abra a página principal de idioma inglês da WKND no Editor de AEM.

    code language-text 
    https://localhost:8443/editor.html/content/wknd/language-masters/en.html

  2. No menu do editor Informações da página, selecione Exibir como Publicado. Isso abre a mesma página em uma nova guia com o Editor de AEM desativado.

    code language-text 
    https://localhost:8443/content/wknd/language-masters/en.html?wcmmode=disabled

  3. Copie este link.

  4. Agora, entre no Editor universal.

    code language-text 
    https://experience.adobe.com/#/aem/editor

  5. Cole o link copiado anteriormente do conteúdo WKND no campo URL do Site do Universal Editor e clique em Abrir.

    Abrir a página WKND no Editor Universal

O Editor Universal Tenta Carregar o Conteúdo sameorigin

O Editor universal carrega o conteúdo a ser editado em um quadro. As configurações padrão do AEM para opções de X-Frame impedem isso, que pode ser visto claramente no navegador como um erro e detalhado na saída do console ao tentar carregar sua cópia local do WKND.

Erro de navegador devido à opção SAMEORIGIN

A opção X-Frame sameorigin impede a renderização de páginas AEM dentro de um quadro. Você deve remover esse cabeçalho para permitir que as páginas sejam carregadas no Universal Editor.

  1. Abra o Gerenciador de configurações.

    code language-text 
    https://localhost:8443/system/console/configMgr

  2. Editar a configuração OSGi org.apache.sling.engine.impl.SlingMainServlet

    Propriedade OSGi para SAMEORIGIN

  3. Exclua a propriedade X-Frame-Options=SAMEORIGIN da propriedade Cabeçalhos de resposta adicionais.

  4. Salve as alterações.

Agora, se você recarregar o Editor universal, verá que sua página AEM é carregada.

TIP

Manipular cookies do mesmo site samesite-cookies

Quando o Editor universal carrega sua página, ela é carregada na página de logon do AEM para garantir que você esteja autenticado para fazer alterações.

No entanto, você não pode fazer logon com êxito. Ao mostrar o console do navegador, você pode ver que o navegador bloqueou a entrada no quadro

Entrada bloqueada

O cookie do token de logon é enviado ao AEM como um domínio de terceiros. Portanto, os cookies do mesmo site devem ser permitidos no AEM.

  1. Abra o Gerenciador de configurações.

    code language-text 
    https://localhost:8443/system/console/configMgr

  2. Editar a configuração OSGi com.day.crx.security.token.impl.impl.TokenAuthenticationHandler

    Propriedade OSGi para cookies do mesmo site

  3. Altere a propriedade atributo SameSite do cookie de token de logon para None.

  4. Salve as alterações.

Agora, se você recarregar o Editor universal, poderá entrar no AEM e sua página de destino será carregada.

TIP

O Editor Universal Conecta-se ao Quadro Remoto ue-connect-remote-frame

Com a página carregada no Editor universal e você conectado ao AEM, o Editor universal tenta se conectar ao quadro remoto. Isso é feito por meio de uma biblioteca JavaScript que deve ser carregada no quadro remoto. Se a biblioteca do JavaScript não estiver presente, a página criará um erro de tempo limite no console.

Erro de tempo limite

Você deve adicionar a biblioteca JavaScript necessária ao componente Página do aplicativo WKND.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Em /apps/wknd/components/page, edite o arquivo customheaderlibs.html.

    Editando o arquivo customheaderlibs.html

  3. Adicione a biblioteca do JavaScript ao final do arquivo.

    code language-html 
    <script src="https://universal-editor-service.experiencecloud.live/corslib/LATEST"></script>

  4. Clique em Salvar tudo e recarregue o Editor Universal.

A página agora é carregada com a biblioteca JavaScript adequada para permitir que o Editor universal se conecte à sua página e o erro de tempo limite não é mais exibido no console.

TIP
  • A biblioteca pode ser carregada no cabeçalho ou no rodapé.
  • A biblioteca universal-editor-embedded.js está disponível no NPM e você mesmo pode hospedá-la, se necessário, ou colocá-la diretamente no aplicativo.

Definição de uma Conexão para Persistir Alterações connection

A página WKND agora é carregada com sucesso no Editor universal, e a biblioteca do JavaScript é carregada para conectar o editor ao seu aplicativo.

No entanto, você provavelmente notou que não é possível interagir com a página no Editor universal. O Editor universal não pode realmente editar sua página. Para que o Editor universal possa editar seu conteúdo, é necessário definir uma conexão para que ele saiba onde escrever o conteúdo. Para desenvolvimento local, você precisa gravar na sua instância de desenvolvimento local do AEM em https://localhost:8443.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Em /apps/wknd/components/page, edite o arquivo customheaderlibs.html.

    Editando o arquivo customheaderlibs.html

  3. Adicione os metadados necessários para a conexão com sua instância de AEM local ao final do arquivo.

    code language-html 
    <meta name="urn:adobe:aue:system:aem" content="aem:https://localhost:8443">

  4. Adicione os metadados necessários para a conexão com o serviço local do Universal Editor ao final do arquivo.

    code language-html 
    <meta name="urn:adobe:aue:config:service" content="https://localhost:8000">

  5. Clique em Salvar tudo e recarregue o Editor Universal.

Agora, o Universal Editor não só pode carregar seu conteúdo com êxito da instância de desenvolvimento local do AEM, como também sabe onde persistir qualquer alteração feita usando o serviço local do Universal Editor. Esta é a primeira etapa na instrumentação do aplicativo para que ele seja editável com o Editor universal.

TIP

Componentes de instrumentação instrumenting-components

No entanto, você provavelmente percebe que ainda pode fazer pouco com o Editor universal. Se você tentar clicar no teaser na parte superior da página WKND no Editor universal, não será possível realmente selecioná-lo (ou qualquer outra coisa na página).

Seus componentes também devem ser instrumentados para serem editados com o Editor universal. Para fazer isso, edite o componente de teaser. Portanto, é necessário sobrepor os Componentes Principais, pois os Componentes Principais estão em /libs, que é imutável.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Selecione o nó /libs/core/wcm/components e clique em Sobrepor Nó na barra de ferramentas.

  3. Com /apps/ selecionado como Local de Sobreposição, clique em OK.

    Sobrepor o teaser

  4. Selecione o nó teaser em /libs/core/wcm/components e clique em Copiar na barra de ferramentas.

  5. Selecione o nó sobreposto em /apps/core/wcm/components e clique em Colar na barra de ferramentas.

  6. Clique duas vezes no arquivo /apps/core/wcm/components/teaser/v2/teaser/teaser.html para editá-lo.

    Editando o arquivo teaser.html

  7. No final do primeiro div, aproximadamente na linha 26, adicione os detalhes de instrumentação do componente.

    code language-text 
    data-aue-resource="urn:aem:${resource.path}"
data-aue-type="component"
data-aue-label="Teaser"

  8. Clique em Salvar tudo na barra de ferramentas e recarregue o Editor Universal.

  9. No Editor universal, clique no componente Teaser na parte superior da página e veja que agora você pode selecioná-lo.

  10. Se você clicar no ícone Árvore de conteúdo no painel de propriedades do Editor universal, verá que o editor reconheceu todos os teasers da página agora que você os instrumentou. O teaser selecionado é o que está destacado.

    Selecionando o componente de teaser instrumentado

TIP
Consulte o documento Uso da Sling Resource Merger no Adobe Experience Manager as a Cloud Service para obter mais detalhes sobre a sobreposição de nós.

Subcomponentes de instrumento do teaser subcomponents

Agora é possível selecionar o teaser, mas ainda não editá-lo. Isso ocorre porque o teaser é composto de diferentes componentes, como o componente de imagem e título. Você deve instrumentar esses subcomponentes para editá-los.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Selecione o nó /apps/core/wcm/components/teaser/v2/teaser/ e clique duas vezes no arquivo title.html.

    Editar o arquivo title.html

  3. Insira as seguintes propriedades no final da marca h2 (próximo à linha 17).

    code language-text 
    data-aue-prop="jcr:title"
data-aue-type="text"
data-aue-label="Title"

  4. Clique em Salvar tudo na barra de ferramentas e recarregue o Editor Universal.

  5. Clique no título do mesmo componente de teaser na parte superior da página e veja que agora você pode selecioná-lo. A árvore de conteúdo também mostra o título como parte do componente de teaser selecionado.

    Selecionar título no teaser

Agora você pode editar o título do componente de teaser!

O que tudo isso significa? what-does-it-mean

Agora que você pode editar o título do teaser, vamos analisar o que você realizou e como.

Você identificou o componente de teaser para o Editor universal ao instrumentá-lo.

  • data-aue-resource identifica o recurso no AEM que está sendo editado.
  • data-aue-type define que os itens devem ser tratados como um componente de página (em vez de um contêiner).
  • data-aue-label exibe um rótulo amigável na interface do usuário para o teaser selecionado.

Você também instrumentou o componente de título dentro do componente de teaser.

  • data-aue-prop é o atributo JCR que está gravado.
  • data-aue-type é como o atributo deve ser editado. Nesse caso, com o editor de texto, pois é um título (em vez de dizer, o editor de rich text).

Definindo Cabeçalhos de Autenticação auth-header

Agora é possível editar o título do teaser em linha e as alterações são persistentes no navegador.

Título editado do teaser

No entanto, se você recarregar o navegador, o título anterior será recarregado. Isso ocorre porque, embora o Editor universal saiba como se conectar à instância do AEM, ele ainda não pode se autenticar na instância do AEM para gravar as alterações no JCR.

Se você exibir a guia rede das ferramentas de desenvolvedor do navegador e pesquisar por update, verá que há um erro 401 ao tentar editar o título.

Erro ao tentar editar o título

Ao usar o Editor universal para editar o conteúdo AEM de produção, o Editor universal usa o mesmo token IMS usado para fazer logon no editor e autenticar no AEM para facilitar a gravação no JCR.

Quando você está desenvolvendo localmente, não é possível usar o provedor de identidade AEM, pois os tokens IMS são passados apenas para domínios de propriedade de Adobe. Você precisa fornecer manualmente uma maneira de autenticar, definindo explicitamente um cabeçalho de autenticação.

  1. Na interface do Universal Editor, clique no ícone Cabeçalhos de Autenticação na barra de ferramentas.

  2. Copie no cabeçalho de autenticação necessário para autenticar na instância de AEM local e clique em Salvar.

    Configurando cabeçalhos de autenticação

  3. Recarregue o Editor universal e edite o título do teaser.

Não há mais erros relatados no console do navegador e as alterações são persistentes de volta à instância de desenvolvimento local do AEM.

Se você investigar o tráfego nas ferramentas de desenvolvedor do navegador e procurar os eventos update, poderá ver os detalhes da atualização.

Edição bem-sucedida do título do teaser 

{
  "connections": [
    {
      "name": "aem",
      "protocol": "aem",
      "uri": "https://localhost:8443"
    }
  ],
  "target": {
    "resource": "urn:aem:/content/wknd/language-masters/en/jcr:content/root/container/carousel/item_1571954853062",
    "type": "text",
    "prop": "jcr:title"
  },
  "value": "Tiny Toon Adventures"
}
  • connections é a conexão com sua instância local do AEM
  • target é o nó exato e as propriedades atualizadas no JCR
  • value é a atualização que você fez.

Você pode ver a alteração persistida no JCR.

Atualizar no JCR

TIP
Há muitas ferramentas disponíveis online para gerar os cabeçalhos de autenticação necessários para fins de teste e desenvolvimento.
O exemplo de cabeçalho de autenticação básica Basic YWRtaW46YWRtaW4= é para a combinação usuário/senha de admin:admin, como é comum para o desenvolvimento local do AEM.

Instrumentação do aplicativo para o painel Propriedades properties-rail

Agora você tem um aplicativo que é instrumentado para ser editável usando o Editor universal!

Atualmente, a edição está limitada à edição em linha do título do teaser. No entanto, há casos em que a edição no local não é suficiente. Texto como o título do teaser pode ser editado onde estiver com a entrada do teclado. No entanto, itens mais complicados precisam ser capazes de exibir e permitir a edição de dados estruturados separados de como é renderizado no navegador. É para isso que serve o painel de propriedades.

Para atualizar seu aplicativo para usar o painel de propriedades para edição, retorne ao arquivo de cabeçalho do componente Página do seu aplicativo. É aqui que você já estabeleceu as conexões com a instância de desenvolvimento local do AEM e o serviço local do Editor universal. Aqui, você deve definir os componentes editáveis no aplicativo e seus modelos de dados.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Em /apps/wknd/components/page, edite o arquivo customheaderlibs.html.

    Editando o arquivo customheaderlibs.html

  3. Ao final do arquivo, adicione o script necessário para definir os componentes.

    code language-html 
    <script type="application/vnd.adobe.aue.component+json">
{
  "groups": [
    {
      "title": "General Components",
      "id": "general",
      "components": [
        {
          "title": "Teaser",
          "id": "teaser",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/teaser"
              }
            }
          }
        },
        {
          "title": "Title",
          "id": "title",
          "plugins": {
            "aem": {
              "page": {
                "resourceType": "wknd/components/title"
              }
            }
          }
        }
      ]
    }
  ]
}
</script>

  4. Abaixo disso, ao final do arquivo adicione o script necessário para definir o modelo.

    code language-html 
    <script type="application/vnd.adobe.aue.model+json">
[
  {
    "id": "teaser",
    "fields": [
      {
        "component": "text-input",
        "name": "jcr:title",
        "label": "Title",
        "valueType": "string"
      },
      {
        "component": "text-area",
        "name": "jcr:description",
        "label": "Description",
        "valueType": "string"
      }
    ]
  },
  {
    "id": "title",
    "fields": [
      {
        "component": "select",
        "name": "type",
        "value": "h1",
        "label": "Type",
        "valueType": "string",
        "options": [
          { "name": "h1", "value": "h1" },
          { "name": "h2", "value": "h2" },
          { "name": "h3", "value": "h3" },
          { "name": "h4", "value": "h4" },
          { "name": "h5", "value": "h5" },
          { "name": "h6", "value": "h6" }
        ]
      }
    ]
  }
]
</script>

  5. Clique em Salvar tudo na barra de ferramentas.

O que tudo isso significa? what-does-it-mean-2

Para serem editáveis usando o painel de propriedades, os componentes devem ser atribuídos a groups, de modo que cada definição comece como uma lista de grupos contendo os componentes.

  • title é o nome do grupo.
  • id é o identificador exclusivo do grupo, neste caso, componentes gerais que compõem o conteúdo da página em oposição a componentes avançados para o layout da página, por exemplo.

Cada grupo tem uma matriz de components.

  • title é o nome do componente.
  • id é o identificador exclusivo do componente, neste caso, um teaser.

Cada componente tem uma definição de plug-in que define como o componente é mapeado para AEM.

  • aem é o plug-in que gerencia a edição. Isso pode ser considerado o serviço que processa o componente.
  • page define que tipo de componente é, neste caso um componente de página padrão.
  • resourceType é o mapeamento para o componente AEM real.

Cada componente deve ser mapeado para um model para definir os campos editáveis individuais.

  • id é o identificador exclusivo do modelo, que deve corresponder à identificação do componente.
  • fields é uma matriz de campos individuais.
  • component é o tipo de entrada, como texto ou área de texto.
  • name é o nome do campo no JCR para o qual o campo está mapeado.
  • label é a descrição do campo que aparece na interface do usuário do editor.
  • valueType é o tipo de dados.

Instrumentar o componente para o painel de propriedades properties-rail-component

Você também precisa definir no nível do componente, qual modelo o componente deve usar.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Clique duas vezes no arquivo /apps/core/wcm/components/teaser/v2/teaser/teaser.html para editá-lo.

    Editando o arquivo teaser.html

  3. No final do primeiro div, aproximadamente na linha 32, depois das propriedades adicionadas anteriormente, adicione os detalhes de instrumentação do modelo que o componente de teaser usará.

    code language-text 
    data-aue-model="teaser"

  4. Clique em Salvar tudo na barra de ferramentas e recarregue o Editor Universal.

Agora você está pronto para testar o painel de propriedades instrumentado para o seu componente.

  1. No Editor universal, clique no título do teaser para editá-lo mais uma vez.

  2. Clique no painel de propriedades para mostrar a guia de propriedades e ver os campos que você acabou de instrumentar.

    Painel de propriedades instrumentado

Agora é possível editar o título do teaser em linha, como anteriormente, ou no painel de propriedades. Em ambos os casos, as alterações são persistentes de volta à instância de desenvolvimento local do AEM.

Adicionar campos adicionais ao painel Propriedades add-fields

Usando a estrutura básica do modelo de dados para o componente que você já implementou, é possível adicionar campos adicionais, seguindo o mesmo modelo.

Por exemplo, é possível adicionar um campo para ajustar o estilo do componente.

  1. Abra o CRXDE Lite.

    code language-text 
    https://localhost:8443/crx/de

  2. Em /apps/wknd/components/page, edite o arquivo customheaderlibs.html.

    Editando o arquivo customheaderlibs.html

  3. No script de definição de modelo, adicione um item adicional à matriz fields para o campo de estilo. Lembre-se de adicionar uma vírgula após o último campo antes de inserir o novo.

    code language-json 
    {
   "component": "select",
   "name": "cq:styleIds",
   "label": "Style",
   "valueType": "string",
     "multi": true,
   "options": [
     {"name": "hero", "value":"1555543212672"},
     {"name": "card", "value":"1605057868937"}
   ]
}

  4. Clique em Salvar tudo na barra de ferramentas e recarregue o Editor Universal.

  5. Clique no título do teaser para editá-lo mais uma vez.

  6. Clique no painel de propriedades e veja se há um novo campo para ajustar o estilo do componente.

    O painel de propriedades instrumentadas com o campo de estilo

Qualquer campo no JCR do componente pode ser exposto no Editor universal dessa maneira.

Resumo summary

Parabéns! Agora você pode instrumentar seus próprios aplicativos AEM para funcionar com o Editor Universal.

Ao começar a instrumentar seu próprio aplicativo, lembre-se das etapas básicas executadas neste exemplo.

  1. Você configura seu ambiente de desenvolvimento.

    • AEM executado localmente em HTTPS com WKND instalado
    • Serviço do Editor Universal executado localmente em HTTPS

  2. Você atualizou as configurações OSGi do AEM para permitir que o conteúdo seja carregado remotamente.

  3. Você adicionou o

  4. Você definiu uma conexão para manter as alterações no

    • Você definiu uma conexão com a instância de desenvolvimento local do AEM.
    • Você também definiu uma conexão com o serviço local do Universal Editor.

  5. Você instrumentou o componente de teaser.

  6. Você instrumentou os subcomponentes do teaser.

  7. Você definiu um cabeçalho de autenticação personalizado para poder salvar as alterações usando o serviço local do Universal Editor.

  8. Você instrumentou o aplicativo para usar o painel de propriedades.

  9. Você instrumentou o componente de teaser para usar o painel de propriedades.

Você pode seguir essas mesmas etapas para instrumentar seu próprio aplicativo para uso com o Editor universal. Qualquer propriedade no JCR pode ser exposta ao Editor universal.

Recursos adicionais additional-resources

Consulte os seguintes documentos para obter mais informações e detalhes sobre os recursos do Universal Editor.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab