Com o AEM 5.6 Adobe introduziu uma nova interface habilitada para toque com design responsivo para o ambiente do autor. Isso difere consideravelmente 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 do usuário habilitada para toque é a interface padrão para AEM, embora a interface clássica ainda seja suportada.
A interface habilitada para toque inclui:
O cabeçalho do conjunto que:
O painel esquerdo (exibido 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 portada para a interface habilitada para toque. No entanto, em alguns casos limitados, a funcionalidade reverterá para a interface clássica. Consulte Touch UI Feature Status para obter mais informações.
A interface do usuário habilitada para toque foi projetada pela Adobe para fornecer consistência na experiência do usuário em vários produtos. Baseia-se em:
Os princípios básicos da interface habilitada para toque são:
Para obter mais uma visão geral da estrutura da interface habilitada para toque, consulte o artigo Estrutura da interface habilitada para toque AEM.
AEM usa a plataforma Granite como base e a plataforma Granite inclui, entre outras coisas, o repositório de conteúdo Java.
Granite é uma pilha de componentes Open Web que oferece:
Granite é executado como um projeto de desenvolvimento aberto dentro do Adobe: as contribuições para o código, discussões e questões são feitas em toda a empresa.
No entanto, Granite é e não um projeto de código aberto. Ele é fortemente baseado em vários projetos de código aberto (Apache Sling, Felix, Jackrabbit e Lucene em particular), mas o Adobe traça uma linha clara entre o que é público e o que é interno.
A plataforma de engenharia Granite também fornece uma estrutura de interface de usuário básica. Os principais objetivos são:
Eles atendem aos requisitos:
A interface do usuário do Granite:
Componentes básicos da interface do usuário Granite
Essa biblioteca de componentes da base pode ser usada ou estendida por outras bibliotecas.
Componentes de administração da interface do usuário Granite
A comunicação cliente-servidor na interface de usuário Granite consiste em hipertexto, não objetos, portanto não há necessidade de o cliente entender a lógica comercial
Isso usa uma extensão do vocabulário HTML, desde que o autor possa expressar sua intenção de criar um aplicativo Web interativo. Esta é uma abordagem semelhante para WAI-ARIA e microformatos.
Consiste principalmente em uma coleção de padrões de interação (por exemplo, enviar um formulário de forma assíncrona) interpretados por códigos JS e CSS, executados no cliente. O papel do cliente é aprimorar a marcação (dada como o preço da hipermídia pelo servidor) para a interatividade.
O 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 entregues como parte do pacote de conteúdo:
granite.ui.content
Isso é formado por uma coleção de componentes de sling que permitem ao autor compor um aplicativo da Web rapidamente. O desenvolvedor desenvolve componentes, o autor monta os componentes para serem um aplicativo da Web. A função do servidor é fornecer o preço da hipermídia (marcação) ao cliente.
Atualmente, os componentes estão localizados no repositório 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 usuário do Granite e o ExtJS (usado para a interface clássica) também são de interesse:
ExtJS | Interface do usuário Granite |
Chamada de procedimento remoto |
Transmissões estaduais |
Objetos de transferência de dados | Hipermídia |
O cliente conhece os componentes internos do servidor | O cliente não sabe internamente |
"Cliente Gordo" | "Thin client" |
Bibliotecas especializadas de clientes | Bibliotecas de clientes universais |
Os componentes básicos da interface do usuário Granite fornecem os blocos básicos necessários para a construção de qualquer interface do usuário. Incluem, entre outros:
Os componentes básicos podem ser encontrados em:
/libs/granite/ui/components/foundation
Esta biblioteca contém um componente de interface do usuário Granite para cada elemento Coral. Um componente é controlado por conteúdo, com sua configuração residindo no repositório. Isso possibilita a composição de um aplicativo de interface de usuário Granite sem gravar marcação HTML à mão.
Propósito:
Implementação:
Essa biblioteca de componentes da base pode ser usada ou estendida por outras bibliotecas.
Ao atualizar o código ExtJS para usar a interface do usuário Granite, a lista a seguir fornece uma visão geral conveniente dos tipos xtypes e nós ExtJS com seus tipos de recursos equivalentes da interface do usuário 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 |
Os componentes de administração da interface de usuário Granite baseiam-se nos componentes básicos para fornecer blocos componentes genéricos que qualquer aplicativo de administração pode implementar. Estes incluem, entre outros:
Propósito:
Implementação:
A interface do usuário Coral (UI) é uma implementação de estilo visual CUI habilitado para toque para a interface do usuário, que foi projetada 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.
A interface do usuário Coral é uma biblioteca da interface do usuário disponibilizada para clientes AEM para criar aplicativos e interfaces da Web dentro dos limites do uso licenciado do produto.
O uso da interface do coral é permitido apenas:
A utilização da interface do coral deve ser evitada em:
A interface do usuário do Coral é uma coleção de elementos básicos para o desenvolvimento de aplicativos da Web.
Projetado para ser modular a partir do start, cada módulo forma uma camada distinta com base em sua função primária. Embora as camadas tenham sido projetadas para oferecer suporte umas às outras, elas também podem ser usadas independentemente, se necessário. Isso permite implementar a experiência do usuário do Coral em qualquer ambiente compatível com HTML.
Com a interface do usuário Coral, não é obrigatório usar um modelo e/ou plataforma de desenvolvimento específico. O objetivo principal do 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 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, painel, entre outros).
No nível mais básico, um elemento HTML é uma tag HTML com um nome de classe dedicado. 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 facilitar a personalização da aparência (por exemplo, no caso da marca), os valores de estilo reais são declarados como variáveis que são expandidas pelo pré-processador LESS 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 uma questão 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 (o seguinte extrato foi encurtado por questões de brevidade):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
Muitos dos elementos HTML precisarão exibir algum tipo de comportamento dinâmico, como abrir e fechar menus pop-up. Essa é a função dos plug-ins do elemento, que fazem essas tarefas manipulando o DOM usando o JavaScript.
Um plug-in é:
DIV class=dialog
DIV
ou LI
O comportamento do plug-in pode ser personalizado com parâmetros, por meio de:
data-*
ligados à marcação HTMLEmbora o desenvolvedor possa selecionar a melhor abordagem para qualquer plug-in, a regra é usar:
data-*
para opções relacionadas ao layout HTML. Por exemplo, para especificar o número de colunasO mesmo conceito é usado para implementar a validação do formulário. Para um elemento que você deseja validar, especifique o formulário de entrada necessário como um atributo data-*
personalizado. Esse atributo é usado como uma opção para um plug-in de validação.
A validação de formulário nativo HTML5 deve ser usada sempre que possível e/ou ampliada.
Propósito:
Implementação:
data-*
para personalizar o comportamentoUm extrato de 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 mostrará como:
O plug-in cardLayout
apresenta os elementos UL
delimitados com base em suas respectivas alturas e também leva em consideração a largura do pai.
Um widget combina um ou mais elementos básicos com um plug-in javascript para formar elementos de UI de "nível superior". Eles podem implementar um comportamento mais complexo e também uma aparência mais complexa do que um único elemento poderia oferecer. Exemplos bons são o seletor de tags ou os widgets de trilho.
Um widget pode acionar e ouvir eventos personalizados para cooperar com outros widgets na página. Alguns widgets são na verdade widgets nativos do jQuery que usam os elementos HTML Coral.
Propósito:
Implementação:
Exemplo de marcação é:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
A chamada para o plug-in jQuery (com opções):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
O plug-in emite marcação HTML (esta 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 mostrará como:
Esta biblioteca é uma coleção de plug-ins auxiliares javascript e/ou funções que são:
Eles incluem o manuseio XSS e o barramento do evento.
Embora os plug-ins e os 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 dos elementos nem dos próprios widgets.
Propósito:
Implementação: