Conceitos da interface de usuário habilitada para toque AEM

Com AEM 5.6 o 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 habilitada para toque inclui:

• O cabeçalho do conjunto que:

  • Mostra o logotipo
  • Fornece um link para a Navegação global
  • Fornece um link para outras ações genéricas; como Pesquisa, Ajuda, Soluções de Marketing Cloud, Notificações e Configurações do usuário.

• O painel esquerdo (exibido quando necessário e oculto), que pode mostrar:

  • Linha do tempo
  • Referências
  • Filtros

• O cabeçalho de navegação, que é novamente sensível ao contexto e pode mostrar:

  • Indica qual console você está usando no momento e/ou seu local dentro desse console
  • Seleção do painel esquerdo
  • Navegações estruturais
  • Acesso às ações Criar apropriadas
  • Seleções de Visualização

• A área de conteúdo que:

  • Lista os itens de conteúdo (sejam páginas, ativos, postagens do fórum etc.)
  • Pode ser formatado como solicitado, por exemplo, coluna, cartão ou lista
  • Usa um design responsivo (a tela é redimensionada automaticamente de acordo com o dispositivo e/ou o tamanho da janela)
  • Usa rolagem infinita (não há mais paginação, todos os itens são listados em uma janela)

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:

• UI Coral (CUI) uma implementação do estilo visual do Adobe para a interface habilitada para toque. A interface do usuário do Coral fornece tudo o que seu produto / projeto / aplicativo da Web precisa para adotar o estilo visual da interface do usuário.
• Os componentes da interface do usuário Granite são criados com a interface do usuário Coral.

Os princípios básicos da interface habilitada para toque são:

• Primeiro móvel (com desktop em mente)
• Design responsivo
• Exibição relevante ao contexto
• Reutilizável
• Incluir documentação de referência incorporada
• Incluir testes incorporados
• Design inferior para garantir que esses princípios sejam aplicados a todos os elementos e componentes

Para obter mais uma visão geral da estrutura da interface habilitada para toque, consulte o artigo Estrutura da interface habilitada para toque AEM.

Pilha de tecnologia AEM

AEM usa a plataforma Granite como base e a plataforma Granite inclui, entre outras coisas, o repositório de conteúdo Java.

Granite

Granite é uma pilha de componentes Open Web que oferece:

• Um iniciador de aplicativo
• Uma estrutura OSGi na qual tudo é implantado
• Vários serviços de compêndio OSGi para apoiar a criação de aplicativos
• Uma estrutura de registro abrangente que fornece várias APIs de registro
• Implementação do repositório CRX da especificação da API JCR
• Apache Sling Web Framework
• Partes adicionais do produto CRX atual

Interface do usuário Granite

A plataforma de engenharia Granite também fornece uma estrutura de interface de usuário básica. Os principais objetivos são:

• Fornecer widgets de interface granular
• Implemente os conceitos da interface do usuário e ilustre as práticas recomendadas (renderização de listas longas, filtragem de listas, CRUD de objetos, assistentes CUD…)
• Fornecer uma interface de usuário de administração extensível e baseada em plug-in

Eles atendem aos requisitos:

• Respeite "celular primeiro"
• Seja extensível
• Seja fácil de substituir

A interface do usuário do Granite:

• Usa a arquitetura RESTful da Sling
• Implementa bibliotecas de componentes destinadas à criação de aplicativos da Web centrados em conteúdo
• Fornece widgets de interface granular
• Fornece uma interface padrão e padronizada
• É extensível
• Foi projetado para dispositivos móveis e de desktop (primeiro para dispositivos móveis)
• Pode ser usado em qualquer plataforma/produto/projeto baseado em Granite; eg AEM

• 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

Lado do cliente vs lado do servidor

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

• O servidor enriquece o HTML com dados semânticos
• O cliente enriquece o hipertexto com a hipermídia (interação)

Client-Side

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 à WAI-ARIA e aos 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 entregues como clientlibs Granite na categoria:

granite.ui.foundation and granite.ui.foundation.admin

Eles são entregues como parte do pacote de conteúdo:

granite.ui.content

Servidor

Isso é formado por uma coleção de componentes de sling que permitem que o autor componha rapidamente um aplicativo da Web. 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

Diferenças com a interface clássica

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"	"Cliente fino"
Bibliotecas especializadas de clientes	Bibliotecas de clientes universais

Componentes básicos da interface do usuário Granite

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:

• Botão
• Hiperlink
• Avatar do usuário

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:

• Modelo de componente para elementos HTML
• Composição do componente
• Teste automático de unidade e funcionalidade

Implementação:

• Composição e configuração baseadas em repositório
• Aproveitamento das instalações de teste fornecidas pela plataforma Granite
• Modelos JSP

Essa biblioteca de componentes da base pode ser usada ou estendida por outras bibliotecas.

Componentes do ExtJS e da interface do usuário Granite correspondente

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

Componentes de administração da interface do usuário Granite

Os componentes de administração da interface do usuário Granite são desenvolvidos nos componentes básicos para fornecer blocos componentes genéricos que qualquer aplicativo administrativo pode implementar. Estes incluem, entre outros:

• Barra de navegação global
• Painel (esqueleto)
• Painel de pesquisa

Propósito:

• Aparência unificada para aplicativos de administração
• RAD para aplicativos administrativos

Implementação:

• Componentes predefinidos usando os componentes básicos
• Os componentes podem ser personalizados

Interface do usuário do Coral

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

Elementos HTML - A camada de marcação

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 MENOS durante o tempo de execução.

Propósito:

• Fornecer elementos básicos da interface com aparência e comportamento comuns
• Fornecer o sistema de grade padrão

Implementação:

• Tags HTML com estilos inspirados pelo bootstrap
• As classes são definidas em arquivos MENOS
• Os ícones são definidos como sprites de fonte

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;

Plug-ins de elemento

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

• Projetado para operar em um elemento DOM específico. Por exemplo, um plug-in de diálogo espera encontrar DIV class=dialog
• Genérico na natureza. Por exemplo, um gerenciador de layout fornece layout para qualquer lista de DIV elementos ou LI

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

• Passar os parâmetros por meio de uma chamada javascript
• Uso de atributos dedicados data-* vinculados à marcação HTML

Embora 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 colunas
• Opções/classes da API para funcionalidade relacionada aos dados. Por exemplo, construir a lista de itens a serem exibidos

O mesmo conceito é usado para implementar a validação do formulário. Para um elemento que você deseja validar, você deve especificar o formulário de entrada necessário como um data-* atributo personalizado. Esse atributo é usado como uma opção para um plug-in de validação.

Propósito:

• Fornecer comportamento dinâmico para elementos HTML
• Fornecer layouts personalizados não possíveis com CSS puro
• Executar validação de formulário
• Executar manipulação avançada de DOM

Implementação:

• Plug-in jQuery, vinculado a elementos DOM específicos
• Usar data-* atributos para personalizar o comportamento

Um 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 cardLayout plug-in apresenta os UL elementos delimitados com base em suas respectivas alturas e também considerando a largura do pai.

Widgets de elementos HTML

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:

• Implemente elementos de interface de usuário de nível superior que exibem comportamento complexo
• Acionamento e manipulação de eventos

Implementação:

• Plug-in jQuery + marcação HTML
• Pode utilizar modelos do cliente/servidor

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:

Biblioteca de utilitários

Esta biblioteca é uma coleção de plug-ins auxiliares javascript e/ou funções que são:

• Independente da interface
• No entanto, é fundamental para a criação de aplicativos da Web completos

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:

• Fornecer funcionalidade comum
• Implementação do barramento do Evento
• Modelos do cliente
• XSS

Implementação:

• Plug-ins jQuery ou módulos JavaScript compatíveis com AMD