Estrutura da interface de usuário habilitada para toque do AEM structure-of-the-aem-touch-enabled-ui

CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

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

Consoles consoles

Layout básico e redimensionamento basic-layout-and-resizing

A interface do usuário abrange 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 adere a um estilo de design responsivo e se acomodará ao tamanho do dispositivo/janela usado.

Por exemplo, quando a resolução fica abaixo de 1024px (como em um dispositivo móvel), a exibição será ajustada adequadamente:

chlimage_1-143

Barra do cabeçalho header-bar

chlimage_1-144

A barra de cabeçalho mostra elementos globais incluindo:

  • o logotipo e o produto/solução específico que você está usando atualmente; 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 estão aguardando você
  • o ícone do usuário, juntamente com um link para o gerenciamento de perfis

Barra de ferramentas toolbar

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

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

chlimage_1-145

Também depende de um recurso estar selecionado no momento:

chlimage_1-146

Painel esquerdo left-rail

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 page-authoring

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

Quadro de conteúdo content-frame

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 editor-frame

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

O quadro do editor é um contêiner (abstrato) para todos os elementos de criação de página. Ela 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 side-panel

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

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

chlimage_1-150

Painel lateral - Ativos side-panel-assets

Na guia Ativos , é possível selecionar entre a faixa de ativos. Também é possível filtrar por um termo específico ou selecionar um grupo.

chlimage_1-151

Painel lateral - Grupos de ativos side-panel-asset-groups

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

chlimage_1-152

Painel lateral - Componentes side-panel-components

Na guia Componentes , é possível selecionar entre as várias opções de componentes. Também é possível filtrar por um termo específico ou selecionar um grupo.

chlimage_1-153

Sobreposições overlays

Eles sobrepõem o quadro de conteúdo e são usados pela variável camadas para compreender 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 elas realmente sobreponham os componentes apropriados no quadro de conteúdo.

chlimage_1-154

Camada layer

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

  • fornecer uma exibição diferente da página
  • permitir 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 criação de página; incluindo, por exemplo, editar, visualizar e anotar.

NOTE
Camadas são um conceito poderoso que afeta a exibiçã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 ao sair.

Seletor de camada layer-switcher

O alternador de camadas permite escolher a camada que deseja usar. Quando fechado, indica a camada em uso no momento.

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

chlimage_1-155

Component Toolbar component-toolbar

Cada instância de um componente revelará a barra de ferramentas ao clicar (uma vez ou com um clique duplo lento). A barra de ferramentas contém as ações específicas (por exemplo, copiar, colar, abrir o editor) 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 adequado.

chlimage_1-156

Informações adicionais further-information

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

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

recommendation-more-help
2315f3f5-cb4a-4530-9999-30c8319c520e