Criação e adição de modelos e componentes

OBSERVAÇÃO

A Adobe recomenda o uso do Editor SPA para projetos que exigem renderização no lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, React). Saiba mais.

O AEM Mobile On-Demand fornece um modelo de aplicativo totalmente configurado, um modelo de artigo e componentes de artigo.

O aplicativo We.Unlimited é um modelo de amostra que representa o shell de um aplicativo AEM Mobile On-Demand totalmente configurável e gerenciável.

Selecionar esse modelo de amostra ao criar um novo aplicativo fornece um painel avançado de recursos do AEM Mobile.

chlimage_1-70

OBSERVAÇÃO

Para gerenciar o conteúdo do aplicativo móvel e do aplicativo no Centro de controle de aplicativos do AEM Mobile, consulte Painel de aplicativos do AEM Mobile.

Criação de modelos de aplicativo

Um modelo de aplicativo é usado para criar um novo aplicativo e atua como uma coleção de modelos de página e componentes que representam uma linha de base ou base de um aplicativo. O modelo elimina algumas propriedades fundamentais para liderar o aplicativo da maneira apropriada. Em geral, um cliente não criaria muitos aplicativos no total.

Os modelos de aplicativo fornecem uma maneira fácil de aproveitar os designs existentes criados por desenvolvedores, usados para a criação de novos aplicativos no AEM.

Ao criar um novo aplicativo com base no modelo de outro aplicativo, você obterá um aplicativo que tem um ponto de partida representativo do aplicativo no qual ele foi criado.

Etapas para criar um novo aplicativo com base em um modelo de aplicativo:

  1. Navegue até o catálogo de aplicativos do AEM Mobile: <server-url>/aem/apps.html/content/mobileapps
  2. Selecionar Criar —> Aplicativo conforme mostrado abaixo

Depois de criar um aplicativo usando esse modelo, você pode adicionar artigos, banners e coleções ao aplicativo. Para visitar novamente, criar artigos, banners e coleções, consulte Ações de gerenciamento de conteúdo.

OBSERVAÇÃO

Como alternativa, você também pode selecionar um modelo de aplicativo de amostra, por exemplo We.Unlimited aplicativo, disponibilizado a você por um desenvolvedor de AEM. Se você usar esse modelo de amostra para o seu aplicativo, obterá alguns artigos e coleções de exemplo para trabalhar. Você terá a opção de usar modelos e componentes de amostra, personalizar os existentes ou criar novos para seu aplicativo.

ATENÇÃO

Configuração redirectTarget propriedade

Ao usar um dos modelos do aplicativo, o desenvolvedor define o conteúdo do aplicativo. No entanto, o desenvolvedor deve estar ciente de onde o aplicativo é criado no jcr e o valor de redirectTarget propriedade.

A variável redirectTarget é calculado como parte da operação de criação de aplicativo e tenta resolver um caminho, se houver uma propriedade redirectTarget disponível como parte do modelo de aplicativo e o valor do redirectTarget for definido como relativo. Quando o processo de criação do aplicativo encontra um valor relativo para o redirectTarget no modelo do aplicativo, o valor é anexado ao local resolvido de onde o aplicativo foi criado.

Por exemplo, se um modelo de aplicativo definir uma variável redirectTarget com um valor de "language-masters/en" e o aplicativo foi criado em "/content/mobileapps/fooApp", o valor final para redirectTarget após a criação do aplicativo será "/content/mobileapps/fooApp/language-masters/br".

Criação de modelos de conteúdo

Cada tipo de entidade tem dois templates prontos para uso. São eles:

  • Modelos padrão: usado para criação de conteúdo com propriedades/estrutura padrão aplicáveis
  • Modelos importados: usado para importar conteúdo do AEM Mobile com propriedades/estrutura padrão aplicáveis

Modelos de artigo

O Unlimited Article é um modelo de amostra representando um layout de artigo típico do AEM Mobile On-Demand.

  1. Clique em + in Gerenciar artigos para criar um novo artigo. Você pode escolher um Artigo Unlimited ou um Artigo de rich text. A imagem abaixo mostra a opção que permite escolher qualquer um desses dois modelos de artigo.

  2. Clique em Próxima para definir metadados de artigo, como Nome/Título do artigo, Descrição, Autor, Resumo, Departamento, Imagem em miniatura, Acesso ao artigo e assim por diante.

  3. Clique em Próxima para preencher as Propriedades do anúncio.

  4. Clique em Próxima para inserir a imagem do artigo ou a imagem da rede social

  5. Clique em Próxima para escolher uma coleção, vincule este novo artigo.

  6. Clique em Próxima para inserir os detalhes para compartilhamento em redes sociais.

  7. Clique em Criar para concluir o processo de criação de um artigo usando a amostra. Clique em Concluído ou Editar artigo para editar as propriedades deste artigo.

chlimage_1-71

Adição de componentes ao artigo

Depois de criado, um autor pode editar o conteúdo de um artigo adicionando componentes como texto e imagens. Os artigos são uma extensão dos modelos de página do AEM.

Selecione um artigo que deseja editar e clique em Editar para adicionar componentes ao artigo.

chlimage_1-72 chlimage_1-73

Escolha o '+' no painel esquerdo para adicionar componentes ao seu artigo.

chlimage_1-74

Criação de modelos prontos para uso

Geometrixx Unlimited Não há Modelos de artigo prontos para uso. No entanto, há um modelo padrão que os modelos personalizados devem estender. Consulte o Amostra de modelo de artigo.

As propriedades principais além das propriedades obrigatórias do modelo AEM normal incluem;

dps-resourceType="dps:Article"

Essa propriedade garante que a página do AEM seja reconhecida como uma página de artigo direcionada da AEM Mobile.

De acordo com os modelos do AEM, é possível adicionar propriedades padrão ou nós secundários ao jcr:content.

ATENÇÃO

Os banners e coleções não têm conteúdo, portanto, sua criação não é compatível com modelos personalizados.

Criação e adição de componentes

Os componentes usam e permitem acesso a Widgets e são usados para renderizar o Conteúdo.

Um componente simples é incluído no repositório de código, cuja origem pode ser encontrada no AEM. Posteriormente, também pode ser aberto localmente no CRXDE Lite.

OBSERVAÇÃO

No momento, não há componentes prontos para uso fornecidos para o AEM Mobile.

Você pode adicionar componentes à sua página. Qualquer componente pode ser usado em um aplicativo AEM Mobile, mas quando aplicado, pode não ser renderizado corretamente.

No entanto, os componentes personalizados podem não ser exportados e carregados corretamente no AEM Mobile On-demand Services sem um manipulador de sincronização de conteúdo de exportação personalizado que seja renderizado no AEM.

Depois que o componente já tiver sido incluído em uma página AEM, juntamente com alguns outros componentes do bloco de construção, você poderá adicionar outro componente à página ou editar um existente.

Para adicionar outro componente à página:

  1. Escolha essa página e verifique se você está no modo de Edição, por meio da lista suspensa na parte superior direita do cabeçalho do Editor
  2. Alterne o painel lateral usando o ícone mais à esquerda no cabeçalho do editor
  3. Selecione o Componentes guia
  4. Arraste e solte um dos componentes disponíveis na página

chlimage_1-75

Para editar um componente existente:

  1. Escolha essa página e verifique se você está em Editar e selecione o componente
  2. Toque no ícone de chave inglesa para configurar o componente
OBSERVAÇÃO

É possível criar um componente no AEM e personalizar o mesmo usando Desenvolvimento com o CRXDE Lite. Depois de personalizar o componente existente como suas necessidades, você poderá adicioná-lo na página usando o Editar opção em Gerenciar artigos conforme mostrado na figura acima.

Próximas etapas

Nesta página