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

AEM 6.5 Além do Pacote de recursos do Screens mais recente.

AEM Screens Player

Ambiente de desenvolvimento local

Entrada Gerenciador de pacotes 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 Executar Ui.Apps e Ui.Content pacotes instalados por meio do Gerenciador de pacotes do CRX.

A variável screens-weretail-run.ui.apps o pacote 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. Este pacote inclui o código do componente e qualquer JavaScript ou CSS necessário. Este pacote também incorpora screens-weretail-run.core-0.0.1-SNAPSHOT.jar que contém qualquer código Java™ necessário para o projeto.

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

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

A variável screens-weretail-run.ui.content o pacote 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 We.Retail Executar projeto. /content/dam/we-retail-run inclui a inicialização de ativos digitais para o projeto. /content/screens/we-retail-run contém a estrutura de conteúdo do Screens. O conteúdo sob 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é a AEM Screens > We.Retail Executar projeto:

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

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

Adicione as seguintes propriedades à helloworld componente:

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

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

A variável Olá, mundo O componente estende a foundation/components/parbase para que possa ser usado corretamente dentro de um canal de sequência.

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld nomeado 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 usada:

1. Produção: modo de Visualização ou Publicação (wcmmode=disabled)
2. Editar: usado para todos os outros modos de criação, ou seja, edição, design, andaimes, desenvolvedor…

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

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld nomeado 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 item acima é a marcação de produção do componente Hello World. A data-duration O atributo é incluído porque o componente é usado em um canal de Sequência. A variável data-duration O atributo é usado pelo canal de sequência para saber por quanto tempo um item de sequência deve ser exibido.

O componente renderiza um div e uma 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 a variável message texto da propriedade.

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 por Componentes principais do AEM.

Criar um arquivo abaixo de /apps/weretail-run/components/content/helloworld nomeado 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 imagem 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 diálogo for inserida. A variável cq-placeholder e data-emptytext renderizar o rótulo Olá, mundo nesse caso, como titular. 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 /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 que o campo de número da Duração seja salvo em uma propriedade chamada duration. Essas duas propriedades são referenciadas na /apps/weretail-run/components/content/helloworld/production.html por 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 /apps/weretail-run/components/content/helloworld, crie uma pasta chamada clientlibs.

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

Adicione as seguintes propriedades à biblioteca de cliente compartilhada:

• allowProxy | Booleano | true

• categories| String[] | 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/JS definido no sharedclientlib é carregado em todos os modos.

É uma prática recomendada nunca expor nenhum caminho diretamente para /apps em um ambiente de produção. A propriedade allowProxy garante que o CSS e o JS da biblioteca do cliente sejam referenciados por meio de um prefixo of/etc.clientlibs.

Criar arquivo chamado css.txt abaixo da pasta compartilhada.

Preencha o arquivo com o seguinte:

#base=css

styles.less

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

Em vez de escrever CSS diretamente, este tutorial usa MENOS. MENOS O é 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.

Preencher /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 o shared pasta da biblioteca do cliente para criar uma biblioteca do cliente chamada production.

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

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

Isso garante que os estilos sejam carregados somente no modo de Pré-visualização/Produção.

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

Preencher /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.

Entrada 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 de we-retail-run adicione outro nó chamado jcr:content do tipo nt:unstructured. Adicione as seguintes propriedades à jcr:content nó:

Criar página em /apps/settings/wcm/designs/we-retail-run.

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

Clique em Criar botão

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.

Atualizar o campo Design para que 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.

Alternar o modo de página para Design Modo.

1. Clique em chave inglesa no Parsys para que você possa configurar os componentes permitidos.

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

Alternar o modo de página para Editar. O componente Hello World agora pode ser adicionado à página e combinado com outros componentes de canal de sequência.

Entrada 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 a components A propriedade agora inclui group:Screens, group:We.Retail Run - Content.

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