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.
Com o AEM 5.6, o Adobe introduziu uma nova interface habilitada para toque com design responsivo para o ambiente do autor. Isso é consideravelmente diferente da interface clássica original, pois foi projetada para operar em dispositivos de toque e desktop.
Essa interface habilitada para toque agora é a interface padrão para AEM, substituindo a interface clássica.
A interface de usuário habilitada para toque é a interface de usuário padrão para AEM, embora a interface de usuário clássica ainda seja compatível.
A interface habilitada para toque inclui:
O cabeçalho do conjunto que:
O painel esquerdo (mostrado quando necessário e oculto), que pode mostrar:
O cabeçalho de navegação, que é novamente sensível ao contexto e pode mostrar:
A área de conteúdo que:
Quase toda a funcionalidade AEM foi transferida para a interface habilitada para toque. No entanto, em alguns casos limitados, a funcionalidade reverterá para a interface clássica. Consulte Status do recurso da interface de toque para obter mais informações.
A interface habilitada para toque foi projetada pelo Adobe para fornecer consistência à experiência do usuário em vários produtos. Tem por base:
Os princípios básicos da interface habilitada para toque são:
Para obter uma visão geral da estrutura da interface habilitada para toque, consulte o artigo Estrutura da interface de usuário habilitada para toque do AEM.
AEM usa a plataforma Granite como base e a plataforma Granite inclui, entre outras coisas, o Java Content Repository.
O Granite é uma pilha de Web Open, fornecendo vários componentes incluindo:
O Granite é executado como um projeto de desenvolvimento aberto no Adobe: as contribuições para o código, discussões e questões são feitas em toda a empresa.
No entanto, o Granite é not um projeto de código aberto. É altamente baseado em vários projetos de código aberto (Apache Sling, Felix, Jackrabbit e Lucene em particular), mas o Adobe desenha uma linha clara entre o que é público e o que é interno.
A plataforma de engenharia do Granite também fornece uma estrutura básica da interface do usuário. Os principais objetivos são:
Eles atendem aos requisitos:
A interface do usuário do Granite:
Componentes básicos da interface do usuário do Granite
Essa biblioteca de componentes fundamentais pode ser usada ou estendida por outras bibliotecas.
Componentes de administração da interface do usuário do Granite
A comunicação cliente-servidor na interface de usuário do Granite consiste em hipertexto, não objetos, portanto, não há necessidade do cliente entender a lógica de negócios
Isso usa uma extensão do vocabulário do HTML, desde que o autor possa expressar sua intenção de criar um aplicativo Web interativo. Esta é uma abordagem semelhante à WAI-ARIA e microformatos.
Consiste principalmente em uma coleção de padrões de interação (por exemplo, envio assíncrono de um formulário) interpretados por códigos JS e CSS, executados no lado do cliente. A função do lado do cliente é aprimorar a marcação (fornecida como a concessão de hipermídia pelo servidor) para a interatividade.
O lado do cliente é independente de qualquer tecnologia de servidor. Desde que o servidor forneça a marcação apropriada, o lado do cliente pode cumprir sua função.
Atualmente, os códigos JS e CSS são fornecidos como Granite clientlibs Na categoria :
granite.ui.foundation and granite.ui.foundation.admin
Eles são fornecidos como parte do pacote de conteúdo:
granite.ui.content
Ele é formado por uma coleção de componentes do sling que permitem ao autor compor um aplicativo web rápido. O desenvolvedor desenvolve componentes, o autor monta os componentes para serem um aplicativo web. A função do lado do servidor é fornecer o preço da hipermídia (marcação) ao cliente.
Atualmente, os componentes estão localizados no repositório do Granite em:
/libs/granite/ui/components/foundation
Isso é fornecido como parte do pacote de conteúdo:
granite.ui.content
As diferenças entre a interface do Granite e a ExtJS (usada para a interface clássica) também são de interesse:
ExtJS | Interface do usuário do Granite |
Chamada de procedimento remoto |
Transições de Estado |
Objetos de transferência de dados | Hipermídia |
O cliente sabe internamente no servidor | O cliente não sabe internar |
"Fat client" | "Cliente fino" |
Bibliotecas especializadas de clientes | Bibliotecas de clientes universais |
O Componentes básicos da interface do usuário do Granite forneça os elementos básicos necessários para criar qualquer interface do usuário. Incluem, entre outros:
Os componentes fundamentais podem ser encontrados em:
/libs/granite/ui/components/foundation
Esta biblioteca contém um componente da interface do usuário do Granite para cada elemento do Coral. Um componente é controlado por conteúdo, e sua configuração reside no repositório. Isso possibilita compor um aplicativo de interface de usuário do Granite sem gravar a marcação de HTML manualmente.
Propósito:
Implementação:
Essa biblioteca de componentes fundamentais pode ser usada ou estendida por outras bibliotecas.
Ao atualizar o código ExtJS para usar a interface do Granite, a lista a seguir fornece uma visão geral conveniente dos xtypes e tipos de nó ExtJS com seus tipos de recursos equivalentes da interface do Granite.
ExtJS xtype | Tipo de recurso da interface de usuário do Granite |
---|---|
button |
granite/ui/components/foundation/form/button |
checkbox |
granite/ui/components/foundation/form/checkbox |
componentstyles |
cq/gui/components/authoring/dialog/componentstyles |
cqinclude |
granite/ui/components/foundation/include |
datetime |
granite/ui/components/foundation/form/datepicker |
dialogfieldset |
granite/ui/components/foundation/form/fieldset |
hidden |
granite/ui/components/foundation/form/hidden |
html5smartfile, html5smartimage |
granite/ui/components/foundation/form/fileupload |
multifield |
granite/ui/components/foundation/form/multifield |
numberfield |
granite/ui/components/foundation/form/numberfield |
pathfield, paragraphreference |
granite/ui/components/foundation/form/pathbrowser |
selection |
granite/ui/components/foundation/form/select |
sizefield |
cq/gui/components/authoring/dialog/sizefield |
tags |
granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags |
textarea |
granite/ui/components/foundation/form/textarea |
textfield |
granite/ui/components/foundation/form/textfield |
Tipo de nó | Tipo de recurso da interface de usuário do Granite |
---|---|
cq:WidgetCollection |
granite/ui/components/foundation/container |
cq:TabPanel |
granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs |
cq:panel |
granite/ui/components/foundation/container |
O Componentes de administração da interface do usuário do Granite crie nos componentes fundamentais para fornecer blocos de construção genéricos que qualquer aplicativo de administração pode implementar. Entre outros, incluem-se:
Propósito:
Implementação:
A interface do usuário do Coral (Coral UI) é uma implementação do estilo visual do Adobe para a interface do usuário habilitada para toque, que foi criada para fornecer consistência na experiência do usuário em vários produtos. A interface do usuário do Coral fornece tudo o que você precisa para adotar o estilo visual usado no ambiente de criação.
Coral UI é uma biblioteca de interface do usuário disponível para AEM clientes para criar aplicativos e interfaces da Web dentro dos limites do uso licenciado do produto.
O uso da interface do Coral é permitido somente:
A utilização da interface do Coral deve ser evitada em:
A interface do usuário do Coral é uma coleção de blocos de construção para o desenvolvimento de aplicações Web.
Projetado para ser modular desde o início, cada módulo forma uma camada distinta com base em sua função primária. Embora as camadas tenham sido projetadas para se apoiarem, elas também podem ser usadas independentemente, se necessário. Isso possibilita implementar a experiência do usuário do Coral em qualquer ambiente compatível com o HTML.
Com a interface do usuário do Coral, não é obrigatório usar um modelo e/ou plataforma de desenvolvimento específico. O objetivo principal da Coral é fornecer marcação HTML5 unificada e limpa, independentemente do método real usado para emitir essa marcação. Isso pode ser usado para renderização do cliente ou do servidor, modelos, JSP, PHP ou até mesmo aplicativos RIA do Flash do Adobe - para nomear apenas alguns.
Os elementos de HTML fornecem uma aparência comum para todos os elementos básicos da interface do usuário (incluindo barra de navegação, botão, menu, trilho, entre outros).
No nível mais básico, um elemento HTML é uma tag HTML com um nome de classe dedicado. Os elementos mais complexos podem ser compostos de várias tags, aninhadas entre si (de uma maneira específica).
O CSS é usado para fornecer a aparência real. Para possibilitar a personalização fácil da aparência (por exemplo, no caso de marca), os valores de estilo reais são declarados como variáveis expandidas pela variável MENOS pré-processador durante o tempo de execução.
Propósito:
Implementação:
Por exemplo, a marcação:
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
É exibido como:
A aparência é definida em LESS, vinculada a um elemento por nome de classe dedicado (o seguinte extrato foi encurtado por motivos de brevidade):
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
Os valores reais são definidos em um arquivo de variável MENOS (a seguinte extração foi encurtada por motivos de brevidade):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
Muitos dos elementos de HTML precisarão exibir algum tipo de comportamento dinâmico, como abrir e fechar menus pop-up. Essa é a função dos plug-ins de elemento, que realizam essas tarefas manipulando o DOM usando JavaScript.
Um plug-in é:
DIV class=dialog
DIV
ou LI
elementosO comportamento do plug-in pode ser personalizado com parâmetros por meio de:
data-*
atributos vinculados à marcação HTMLEmbora o desenvolvedor possa selecionar a melhor abordagem para qualquer plug-in, a regra principal é usar:
data-*
atributos para opções relacionadas ao layout de HTML. Por exemplo, para especificar o número de colunasO mesmo conceito é usado para implementar a validação de formulário. Para um elemento que você deseja validar, você deve especificar o formulário de entrada necessário como personalizado data-*
atributo. Esse atributo é então usado como uma opção para um plug-in de validação.
A validação de formulário HTML5-nativo deve ser usada sempre que possível e/ou expandida.
Propósito:
Implementação:
data-*
atributos para personalizar o comportamentoUma marcação de exemplo (observe as opções especificadas como data-* atributos):
<ul data-column-width="220" data-layout="card" class="cards">
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
<li class="item">
<div class="thumbnail">
<img href="/a.html" src="/a.thumb.319.319..png">
<div class="caption">
<h4>Toolbar</h4>
<p><small>toolbar</small><br></p>
</div>
</div>
</li>
A chamada para o plug-in jQuery:
$(‘.cards’).cardlayout ();
Isso será exibido como:
O cardLayout
o plug-in apresenta o segmento delimitado UL
elementos com base em suas respectivas alturas e também considerando a largura do pai.
Um widget combina um ou mais elementos básicos com um plug-in javascript para formar elementos de interface do usuário de "nível superior". Eles podem implementar comportamentos mais complexos e também uma aparência mais complexa do que um único elemento poderia oferecer. Bons exemplos são o seletor de tags ou os widgets de painel.
Um widget pode acionar e ouvir eventos personalizados para cooperar com outros widgets da página. Alguns widgets são, na verdade, widgets nativos do jQuery que usam os elementos do HTML Coral.
Propósito:
Implementação:
Exemplo de marcação é:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
A chamada para o plugin jQuery (com opções):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
O plug-in emite a marcação HTML (essa marcação usa elementos básicos, que podem usar outros plug-ins internamente):
<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
id="myRemover_0" class="myTagRemover" href="#">x</a></span>
<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
id="myRemover_1" class="myTagRemover" href="#">x</a></span>
<input type="text" data-original-title="" class="input-medium tagManager"
placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
autocomplete="off">
Isso será exibido como:
Esta biblioteca é uma coleção de plug-ins e/ou funções de ajuda do javascript que são:
Isso inclui manipulação de XSS e barramento de evento.
Embora os plugins e widgets do elemento HTML possam depender da funcionalidade fornecida pela biblioteca de utilitários, a biblioteca de utilitários não pode ter nenhuma dependência forte dos elementos nem dos próprios widgets.
Propósito:
Implementação: