Estrutura da interface habilitada para toque AEM

A interface do usuário habilitada para toque AEM tem vários princípios subjacentes e é composta de vários elementos chave:

Consoles

Layout básico e redimensionamento

A interface do usuário atende a dispositivos móveis e de desktop, mas, em vez de criar dois estilos, o Adobe decidiu usar um estilo que funciona para todas as telas e dispositivos.

Todos os módulos usam o mesmo layout básico, AEM isso pode ser visto como:

chlimage_1-142

O layout segue um estilo de design responsivo e acomodará-se ao tamanho do dispositivo/janela que você está usando.

Por exemplo, quando a resolução for inferior a 1024px (como em um dispositivo móvel), a tela será ajustada de acordo:

chlimage_1-143

Barra do cabeçalho

chlimage_1-144

A barra de cabeçalho mostra elementos globais incluindo:

  • o logotipo e o produto/solução específicos que você está usando no momento; para AEM isso também forma um link para a Navegação global
  • Pesquisar
  • ícone para acessar os recursos de ajuda
  • ícone para acessar outras soluções
  • um indicador de (e acesso a) quaisquer alertas ou itens da Caixa de entrada que estejam esperando por você
  • o ícone do usuário, juntamente com um link para o gerenciamento de perfis

Barra de ferramentas

Isso é contextual à sua localização e às ferramentas de superfície relevantes para controlar a visualização ou os ativos na página abaixo. A barra de ferramentas é específica do produto, mas há alguma compatibilidade com os elementos.

Em qualquer local, a barra de ferramentas mostra as ações disponíveis no momento:

chlimage_1-145

Também depende se um recurso está selecionado no momento:

chlimage_1-146

Painel esquerdo

O painel esquerdo pode ser aberto/oculto, conforme necessário, para mostrar:

  • Linha do tempo
  • Referências
  • Filtro

O padrão é Somente ​conteúdo (painel oculto).

chlimage_1-147

Criação de página

Ao criar páginas, as áreas estruturais são as seguintes.

Quadro de conteúdo

O conteúdo da página é renderizado no quadro de conteúdo. O quadro de conteúdo é completamente independente do editor - para garantir que não haja conflitos devido a CSS ou javascript.

O quadro de conteúdo está na seção à direita da janela, abaixo da barra de ferramentas.

chlimage_1-148

Quadro do editor

O quadro do editor detecta os recursos de edição.

O quadro do editor é um container (abstrato) para todos os elementos de criação da página. Ele fica sobre o quadro de conteúdo e inclui:

  • a barra de ferramentas superior
  • painel lateral
  • todas as sobreposições
  • qualquer outro elemento de criação de página; por exemplo, a barra de ferramentas do componente

chlimage_1-149

Painel lateral

Ele contém duas guias padrão para permitir que você selecione ativos e componentes; eles podem ser arrastados daqui e soltos até a página.

O painel lateral está oculto por padrão. Quando selecionado, será mostrado no lado esquerdo ou deslizará para cobrir toda a janela (quando o tamanho da janela estiver abaixo de uma largura de 1024px; como, por exemplo, em um dispositivo móvel).

chlimage_1-150

Painel lateral - Ativos

Na guia Ativos, é possível selecionar na faixa de ativos. Você também pode filtrar um termo específico ou selecionar um grupo.

chlimage_1-151

Painel lateral - Grupos de ativos

Na guia Ativo, há uma lista suspensa que você pode usar para selecionar os grupos de ativos específicos.

chlimage_1-152

Painel lateral - Componentes

Na guia Componentes, é possível selecionar a partir do intervalo de componentes. Você também pode filtrar um termo específico ou selecionar um grupo.

chlimage_1-153

Sobreposições

Elas sobrepõem o quadro de conteúdo e são usadas pelas camadas para perceber os mecanismos de como você pode interagir (de forma totalmente transparente) com os componentes e seu conteúdo.

As sobreposições vivem no quadro do editor (com todos os outros elementos de criação de página), embora na verdade sobreponham os componentes apropriados no quadro de conteúdo.

chlimage_1-154

Camada

Uma camada é um conjunto independente de funcionalidades que pode ser ativado para:

  • fornecer uma visualização diferente da página
  • permite manipular e/ou interagir com uma página

As camadas fornecem funcionalidade sofisticada para a página inteira, em vez de ações específicas em um componente individual.

AEM vem com várias camadas já implementadas para a criação de páginas; incluindo, por exemplo, editar, pré-visualização e anotar.

Observação

As camadas são um conceito poderoso que afeta a visualização do usuário e a interação com o conteúdo da página. Ao desenvolver suas próprias camadas, é necessário garantir que a camada seja limpa quando ela for fechada.

Comutador de camada

O alternador de camadas permite que você escolha a camada que deseja usar. Quando fechada, indica a camada que está sendo usada no momento.

O alternador de camadas está disponível como uma lista suspensa na barra de ferramentas (na parte superior da janela, no quadro do editor).

chlimage_1-155

Component Toolbar

Cada instância de um componente revelará sua barra de ferramentas quando clicada (uma vez ou com um clique em duplo lento). A barra de ferramentas contém as ações específicas (por exemplo, copiar, colar, editor aberto) que estão disponíveis para a instância do componente (editável) na página.

Dependendo do espaço disponível, as barras de ferramentas do componente são posicionadas no canto superior ou inferior direito do componente apropriado.

chlimage_1-156

Informações adicionais

Para obter mais detalhes sobre os conceitos em torno da interface de usuário habilitada para toque, continue com o artigo Conceitos da interface de usuáriohabilitada para toque AEM.

Para obter mais informações técnicas, consulte a documentação JS definida para o editor de página habilitado para toque.

Nesta página