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

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 habilitada para toque inclui:

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.

Pilha de tecnologia AEM aem-technology-stack

AEM usa a plataforma Granite como base e a plataforma Granite inclui, entre outras coisas, o Java Content Repository.

Granite granite

O Granite é uma pilha de Web Open, fornecendo vários componentes incluindo:

Interface do usuário do Granite granite-ui

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:

Lado do cliente vs Lado do servidor client-side-vs-server-side

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

Lado do cliente client-side

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

Lado do servidor server-side

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

Diferenças com a interface clássica differences-with-the-classic-ui

As diferenças entre a interface do Granite e a ExtJS (usada para a interface clássica) também são de interesse:

Componentes básicos da interface do usuário do Granite granite-ui-foundation-components

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.

Componentes do ExtJS e da interface de usuário do Granite correspondente extjs-and-corresponding-granite-ui-components

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.

Componentes de administração da interface do usuário do Granite granite-ui-administration-components

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:

Interface do usuário do Coral coral-ui

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.

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.

Elementos de HTML - A camada de marcação html-elements-the-markup-layer

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;

Plug-ins de elemento element-plugins

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 é:

O comportamento do plug-in pode ser personalizado com parâmetros por meio de:

Embora o desenvolvedor possa selecionar a melhor abordagem para qualquer plug-in, a regra principal é usar:

O 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.

Propósito:

Implementação:

Uma 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.

Widgets de elementos de HTML html-elements-widgets

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:

Biblioteca de utilitários utility-library

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: