Desenvolvimento de um componente personalizado para o AEM Screens developing-a-custom-component-for-aem-screens

AEM 6.5 e Pacote de Recursos mais recente do Screens.

AEM Screens Player

Ambiente de desenvolvimento local

No Gerenciador de Pacotes do CRX, verifique se os dois pacotes a seguir estão instalados:

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail Execute pacotes Ui.Apps e Ui.Content instalados por meio do Gerenciador de Pacotes do CRX.

O pacote screens-weretail-run.ui.apps instala o código abaixo de /apps/weretail-run.

Este pacote contém o código responsável pela renderização dos componentes personalizados do projeto. Esse pacote inclui o código do componente e qualquer JavaScript ou CSS necessário. Este pacote também incorpora o screens-weretail-run.core-0.0.1-SNAPSHOT.jar que contém qualquer código Java™ necessário ao projeto.

Representação do código ui.apps no CRXDE Lite

O componente Olá, mundo é apenas um espaço reservado. Ao longo do tutorial, uma funcionalidade é adicionada, permitindo que um autor atualize a mensagem exibida pelo componente.

O pacote screens-weretail-run.ui.content instala o código abaixo de:

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

Este pacote contém o conteúdo inicial e a estrutura de configuração necessária para o projeto. /conf/we-retail-run contém todas as configurações para o projeto de execução We.Retail. /content/dam/we-retail-run inclui iniciar ativos digitais para o projeto. /content/screens/we-retail-run contém a estrutura de conteúdo do Screens. O conteúdo de todos esses caminhos é atualizado principalmente no AEM. Para promover a consistência entre ambientes (local, desenvolvimento, preparo, produção), geralmente uma estrutura de conteúdo básica é salva no controle de origem.

Navegue até AEM Screens > We.Retail Executar projeto:

No menu Iniciar do AEM, clique no ícone Screens. Verifique se We.Retail Executar projeto está sendo visto.

No CRXDE-Lite http://localhost:4502/crx/de/index.jsp (ou IDE de escolha), navegue até /apps/weretail-run/components/content/helloworld.

Adicionar as seguintes propriedades ao componente helloworld:

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

Propriedades de /apps/weretail-run/components/content/helloworld

O componente Olá, mundo estende o componente foundation, components, parbase para que ele possa ser usado corretamente dentro de um canal de Sequência.

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld chamado helloworld.html.

Preencha o arquivo com o seguinte:

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Os componentes do Screens exigem duas renderizações diferentes, dependendo de qual modo de criação está sendo usado:

1. Produção: modo de visualização ou Publish (wcmmode=disabled)
2. Editar: usado para todos os outros modos de criação, como editar, criar, andaime, desenvolvedor…

helloworld.htmlage como uma opção, verificando qual modo de criação está ativo e redirecionando para outro script HTL. Uma convenção comum usada por componentes de telas é ter um script edit.html para o modo de Edição e um script production.html para o modo de Produção.

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld chamado production.html.

Preencha o arquivo com o seguinte:

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

O conteúdo acima é a marcação de produção do componente Hello World. Um atributo data-duration foi incluído, pois o componente é usado em um canal de Sequência. O atributo data-duration é usado pelo canal Sequência para saber por quanto tempo um item de sequência deve ser exibido.

O componente renderiza uma marca div e uma marca h1 com texto. ${properties.message} é uma parte do script HTL que gera o conteúdo de uma propriedade JCR chamada message. Uma caixa de diálogo será criada posteriormente permitindo que um usuário insira um valor para o texto de propriedade message.

Observe também que a notação BEM (Block Element Modifier) é usada com o componente. BEM é uma convenção de codificação CSS que facilita a criação de componentes reutilizáveis. BEM é a notação usada pelos Componentes principais do AEM.

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld chamado edit.html.

Preencha o arquivo com o seguinte:

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

A tabela acima é a marcação editada para o componente Hello World. O primeiro bloco exibe uma versão editada do componente se a mensagem de diálogo tiver sido preenchida.

O segundo bloco é renderizado se nenhuma mensagem de caixa de diálogo for inserida. O cq-placeholder e o data-emptytext renderizam o rótulo Olá, mundo como um espaço reservado nesse caso. A string do rótulo pode ser internacionalizada usando i18n para oferecer suporte à criação em vários locais.

A caixa de diálogo Copiar Imagem do Screens a ser usada para o componente Olá, Mundo.

É mais fácil começar com uma caixa de diálogo existente e, em seguida, fazer modificações.

1. Copiar a caixa de diálogo de: /libs/screens/core/components/content/image/cq:dialog
2. Colar a caixa de diálogo abaixo de /apps/weretail-run/components/content/helloworld

Atualize a caixa de diálogo Olá, Mundo, para incluir uma guia para a mensagem.

Atualize a caixa de diálogo para que corresponda ao seguinte. A estrutura do nó JCR da caixa de diálogo final é apresentada abaixo em XML:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

O campo de texto da Mensagem é salvo em uma propriedade chamada message e o campo de número da Duração é salvo em uma propriedade chamada duration. Essas duas propriedades são referenciadas em /apps/weretail-run/components/content/helloworld/production.html pelo HTL como ${properties.message} e ${properties.duration}.

Olá, mundo - caixa de diálogo concluída

Crie uma pasta para bibliotecas do lado do cliente para o componente Hello World.

Abaixo de /apps/weretail-run/components/content/helloworld, crie uma pasta chamada clientlibs.

Abaixo da pasta clientlibs, crie um nó chamado shared do tipo cq:ClientLibraryFolder.

Adicione as seguintes propriedades à biblioteca de cliente compartilhada:

• allowProxy | Booleano | true

• categories| Cadeia de caracteres[] | cq.screens.components

Propriedades de /apps/weretail-run/components/content/helloworld/clientlibs/shared

A propriedade categories é uma string que identifica a biblioteca do cliente. A categoria cq.screens.components é usada nos modos Editar e Visualizar produção. Portanto, qualquer CSS ou JS definido em sharedclientlib é carregado em todos os modos.

Como prática recomendada, qualquer caminho diretamente para /apps em um ambiente de produção nunca deve ser exposto. A propriedade allowProxy garante que o CSS e o JS da biblioteca do cliente sejam referenciados por meio de um prefixo /etc.clientlibs.

Crie o arquivo chamado css.txt abaixo da pasta compartilhada.

Preencha o arquivo com o seguinte:

#base=css

styles.less

Crie uma pasta chamada css abaixo da pasta shared. Adicione um arquivo chamado style.less abaixo da pasta css. A estrutura das bibliotecas de clientes agora deve ficar assim:

Em vez de escrever CSS diretamente, este tutorial usa MENOS. LESS é um pré-compilador de CSS popular que oferece suporte a variáveis, mixins e funções de CSS. Bibliotecas de clientes AEM nativamente oferecem suporte à compilação LESS. Sass ou outros pré-compiladores podem ser usados, mas devem ser compilados fora do AEM.

Popular /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less com o seguinte:

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

Copie e cole a pasta da biblioteca cliente shared para criar uma biblioteca cliente chamada production.

Copie a biblioteca de cliente compartilhada para criar uma biblioteca de cliente de produção.

Atualize a propriedade categories da biblioteca de cliente de produção para cq.screens.components.production.

Isso garante que os estilos só sejam carregados quando estiverem no modo de Pré-visualização-produção.

Propriedades de /apps/weretail-run/components/content/helloworld/clientlibs/production.

Popular /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less com o seguinte:

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

Os estilos acima exibem a mensagem centralizada no meio da tela, mas somente no modo de Produção.

Em CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, navegue até /apps/settings/wcm/designs.

Crie um nó abaixo da pasta de designs, chamado we-retail-run, com um tipo de cq:Page.

Abaixo da página we-retail-run, adicione outro nó chamado jcr:content do tipo nt:unstructured. Adicione as seguintes propriedades ao nó jcr:content:

Página de Design em /apps/settings/wcm/designs/we-retail-run.

No menu Iniciar do AEM, navegue até Screens > We.RetailExecutar > e clique em Canais.

Clique no botão Criar

1. Escolher Criar Entidade

No assistente Criar:

Etapa de Modelo - escolher Canal de Sequência

1. Etapa Propriedades

• Guia Básica > Título = Canal Ocioso
• Guia Canal > verificar Tornar o canal online

Abra as propriedades de página do Canal ocioso.

Atualize o campo Design para que ele aponte para /apps/settings/wcm/designs/we-retail-run, a página de design criada na seção anterior.

Configuração de design apontando para /apps/settings/wcm/designs/we-retail-run

Edite o canal ocioso recém-criado para que você possa abri-lo.

Mudar o modo de página para o Modo de Design.

1. Clique na chave inglesa no Parsys para poder configurar os componentes permitidos.

2. Clique no grupo Screens e no grupo We.RetailExecutar - Conteúdo.

Mudar o modo de página para Editar. O componente Olá, mundo agora pode ser adicionado à página e combinado com outros componentes do canal de sequência.

Em CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par, navegue até /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. Observe que a propriedade components agora inclui group:Screens, group:We.Retail Run - Content.

Configuração de design em /apps/settings/wcm/designs/we-retail-run