Show Menu
TÓPICOS×

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

A Adobe recomenda usar o Editor SPA para projetos que exigem renderização do lado do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). 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 exemplo ao criar um novo aplicativo fornece um painel rico em recursos do AEM Mobile.
Para gerenciar o conteúdo do aplicativo e do aplicativo móvel no Centro de controle de aplicativos do AEM Mobile, consulte o Painel do aplicativo 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 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 do 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 de gerenciamento de conteúdo.
Como alternativa, você também pode selecionar um modelo de aplicativo de amostra, por exemplo, We.Unlimited app, disponibilizado para você por um desenvolvedor do 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.
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 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.

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 dos modelos de página do AEM.
Selecione um artigo que deseja editar e clique em Editar para adicionar componentes ao artigo.
Escolha ' + ' no painel esquerdo para adicionar componentes ao artigo.

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 Exemplo de modelo de artigo do aplicativo ilimitado Geometrixx.
As principais propriedades além das propriedades normais do modelo AEM necessárias incluem:
dps-resourceType="dps:Article"
Essa propriedade garante que a página do AEM seja reconhecida como uma página de artigo direcionada ao AEM Mobile.
Conforme os modelos de AEM, você pode adicionar quaisquer propriedades padrão ou nós filhos ao jcr:content do modelo.

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ódigo, cuja fonte pode ser encontrada no AEM. Posteriormente, também pode ser aberto localmente no CRXDE Lite.
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 do AEM Mobile, mas quando aplicado, pode não ser renderizado corretamente.
No entanto, os componentes personalizados podem não exportar e fazer upload para o AEM Mobile On-Demand Services corretamente 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 do AEM, juntamente com alguns outros componentes de blocos componentes, 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
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
Você pode criar um componente no AEM e personalizar o mesmo usando Desenvolver 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.
Consulte Práticas recomendadas para desenvolvimento de modelos e componentes no AEM Mobile.