Conceitos da interface do usuário habilitada para toque do Adobe Experience Manager concepts-of-the-aem-touch-enabled-ui

O Adobe Experience Manager (AEM) apresenta uma interface habilitada para toque com design responsivo para o ambiente de criação projetado para operar em dispositivos de toque e desktop.

A interface habilitada para toque inclui:

A interface habilitada para toque foi projetada pelo Adobe para fornecer consistência na 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 mais uma visão geral da estrutura da interface habilitada para toque, consulte Estrutura da interface habilitada para toque por AEM.

Pilha de tecnologia AEM aem-technology-stack

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

Granite granite

O Granite é uma pilha da Web aberta do Adobe, que fornece vários componentes, incluindo:

Interface do Granite granite-ui

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

Eles atendem aos requisitos:

GraniteUI.pdf

Obter arquivo
A interface do Granite:

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

A comunicação cliente-servidor na interface do Granite consiste em hipertexto, não em objetos, portanto, não há necessidade de o cliente entender a lógica de negócios

Lado do cliente client-side

Isso usa uma extensão do vocabulário HTML, fornecida para 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, envio assíncrono de um formulário) que são 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 o custo de hipermídia pelo servidor) para 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 entregues 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

Lado do servidor server-side

Isso é formado por uma coleção de componentes do sling que permitem que o autor componha um aplicativo da web rapidamente. O desenvolvedor desenvolve componentes, o autor monta os componentes para ser um aplicativo da Web. A função do lado do servidor é oferecer o preço acessível da hipermídia (marcação) ao cliente.

Atualmente, os componentes estão 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 de base da interface de usuário do Granite granite-ui-foundation-components

Os componentes de base da interface do Granite fornecem os blocos de construção básicos necessários para a compilação de qualquer interface do usuário. Incluem, entre outros:

Os componentes de base podem ser encontrados em:

/libs/granite/ui/components/foundation

Esta biblioteca contém um componente de interface do usuário do Granite para cada elemento Coral. Um componente é orientado por conteúdo e sua configuração fica no repositório. Isso permite compor um aplicativo de interface do usuário do Granite sem gravar a marcação HTML manualmente.

Finalidade:

Implementação:

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

ExtJS e componentes correspondentes da interface do Granite 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 tipos de nó e xtypes ExtJS com seus tipos de recursos equivalentes da interface do Granite.

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

Os componentes de administração da interface do Granite são compilados nos componentes de base para fornecer blocos de construção genéricos que qualquer aplicativo de administração pode implementar. Estes incluem, entre outros:

Finalidade:

Implementação:

Coral UI coral-ui

CoralUI.pdf

Obter arquivo
A CUI (Coral UI) é uma implementação do estilo visual Adobe para a interface habilitada para toque 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 é necessário para adotar o estilo visual usado no ambiente de criação.

A interface do Coral é uma coleção de blocos fundamentais para o desenvolvimento de aplicativos web.

Projetado para ser modular desde o início, cada módulo forma uma camada distinta com base em sua função principal. Embora as camadas tenham sido projetadas para suportar 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 com capacidade para HTML.

Com a interface do Coral, não é obrigatório usar um modelo e/ou plataforma de desenvolvimento específico. O objetivo principal do Coral é fornecer marcação de HTML5 unificada e limpa, independentemente do método real usado para emitir essa marcação. Isso pode ser usado para renderização do lado do cliente ou do servidor, templates, JSP, PHP ou até mesmo aplicativos RIA de Flash de Adobe - para citar apenas alguns.

Elementos de HTML - A Camada de Marcação html-elements-the-markup-layer

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

Finalidade:

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 MENOS, vinculado 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 LESS (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 elementos element-plugins

Muitos dos elementos de HTML precisam exibir algum tipo de comportamento dinâmico, como menus pop-up de abertura e fechamento. Essa é a função dos plug-ins de elementos, que realizam essas tarefas manipulando o DOM usando o JavaScript.

Um plug-in pode ser:

O comportamento do plug-in pode ser personalizado com parâmetros, através:

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

O mesmo conceito é usado para implementar a validação de formulários. 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.

Finalidade:

Implementação:

Uma extração de marcação de exemplo (observe as opções especificadas como atributos de dados-*):

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

O plug-in cardLayout apresenta os elementos UL incluídos com base em suas respectivas alturas e também levando em consideração a largura do pai.

Widgets de elementos do HTML html-elements-widgets

Um widget combina um ou mais elementos básicos com um plug-in do 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 pode oferecer. Bons exemplos são o seletor de tags ou os widgets do painel.

Um widget pode acionar e ouvir eventos personalizados para cooperar com outros widgets na página. Alguns widgets são widgets nativos do jQuery que usam os elementos HTML Coral.

Finalidade:

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 a marcação HTML (essa marcação usa elementos básicos, que podem usar outros plug-ins internamente):

<span>Pisa</code>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></code>

<span id="myTag_1" class="myTag"><span>Rome</code>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></code>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

Isso é exibido como:

Biblioteca do utilitário utility-library

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

Isso inclui a manipulação de XSS e o barramento de evento.

Embora os plug-ins e widgets do elemento HTML possam depender da funcionalidade fornecida pela biblioteca de utilitários, esta não pode ter nenhuma dependência rígida em relação aos elementos nem aos próprios widgets.

Finalidade:

Implementação: