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:
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:
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:
A barra de cabeçalho mostra elementos globais incluindo:
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:
Também depende de um recurso estar selecionado no momento:
O painel esquerdo pode ser aberto/oculto, conforme necessário, para mostrar:
O padrão é Somente conteúdo (painel oculto).
Ao criar páginas, as áreas estruturais são as seguintes.
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.
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:
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).
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.
Na guia Ativo, há uma lista suspensa que pode ser usada para selecionar os grupos de ativos específicos.
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.
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.
Uma camada é um conjunto de funcionalidades independente que pode ser ativado para:
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.
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.
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).
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.
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.