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

NOTE

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

O AEM Mobile On-Demand oferece 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 este modelo de exemplo ao criar um novo aplicativo fornece um painel rico em recursos da AEM Mobile.

chlimage_1-70

NOTE

Para gerenciar o conteúdo do aplicativo e do aplicativo móvel no AEM Mobile Apps Control Center, consulte o Painel do aplicativoAEM 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 a base de um aplicativo. O modelo exclui algumas propriedades fundamentais para liderar o aplicativo da maneira apropriada. Em geral, um cliente não criaria muitos aplicativos no total.

Os modelos de aplicativos fornecem uma maneira fácil de aproveitar os designs existentes criados pelos 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 tenha um representante de ponto de partida 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 AEM Mobile: <server-url>/aem/apps.html/content/mobileapps
  2. Selecione Criar —> Aplicativo como mostrado abaixo

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

NOTE

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

CAUTION

Configuração da propriedade redirectTarget

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

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

Por exemplo, se um modelo de aplicativo define um redirecionamentoTarget com um valor de "lanugage-masters/en" e o aplicativo foi criado em "/content/mobileapps/fooApp", o valor final do redirecionamentoTarget após a criação do aplicativo será "/content/mobileapps/fooApp/language-masters/en".

Criação de modelos de conteúdo

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

  • Modelos padrão: usado para a 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 Artigo ilimitado é um modelo de amostra que representa um layout de artigo AEM Mobile On-Demand típico.

  1. Clique em + em Gerenciar artigos para criar um novo artigo. Você pode escolher um Artigo ​ilimitado ou um Artigo ​Rich Text. A imagem abaixo mostra a opção que permite escolher entre qualquer um desses dois modelos de artigo.

  2. Clique em Avançar para definir os metadados do 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 Avançar para preencher as Propriedades do anúncio.

  4. Clique em Avançar para inserir a imagem do artigo ou a imagem da mídia social

  5. Clique em Avançar para escolher um link de coleção para este novo artigo.

  6. Clique em Avançar para inserir os detalhes do 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 em Editar artigo para editar as propriedades deste artigo.

chlimage_1-71

Adicionar 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 AEM modelos de página.

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

chlimage_1-72 chlimage_1-73

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

chlimage_1-74

Criação de modelos prontos para uso

Não há modelos de artigo predefinidos, no entanto, há um modelo padrão que os modelos personalizados devem estender, consulte a amostra de modelo deartigo do aplicativo Geometrixx Unlimited.

As principais propriedades além do modelo normal AEM propriedades exigidas incluem:

dps-resourceType="dps:Article"

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

Conforme os modelos de AEM, você pode adicionar quaisquer propriedades padrão ou nós filhos ao jcr:content do modelo.

CAUTION

Os banners e as coleções não têm conteúdo, portanto, sua criação não oferece suporte a modelos personalizados.

Criação e adição de componentes

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

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

NOTE

Atualmente, não há componentes prontos para uso fornecidos para 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 exportar e carregar corretamente para o AEM Mobile On-demand Services sem um manipulador de sincronização de conteúdo de exportação personalizado que é renderizado no AEM.

Depois que o componente já tiver sido incluído em uma página AEM, juntamente com alguns outros componentes de blocos 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 Editar, por meio da lista suspensa na parte superior direita do cabeçalho do Editor
  2. Alternar o painel lateral usando o ícone na extremidade esquerda no cabeçalho do Editor
  3. Select the Components tab
  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á no modo Editar e selecione o componente
  2. Toque no ícone da chave inglesa para configurar o componente
NOTE

Você pode criar um componente no AEM e personalizar o mesmo usando Desenvolvimento com o CRXDE Lite. Depois que você tiver personalizado o componente existente como suas necessidades, poderá adicioná-lo à sua página usando a opção Editar em Gerenciar artigos , conforme mostrado na figura acima.

NOTE

Consulte Práticas recomendadas para o desenvolvimento de modelos e componentes no AEM Mobile.

Próximas etapas

Nesta página