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:
-
O cabeçalho do conjunto que:
- Mostra o logotipo
- Fornece um link para a Navegação global
- Fornece link para outras ações genéricas, como Pesquisa, Ajuda, Soluções Experience 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, sua localização ou ambos dentro desse console
- Seleção para o painel esquerdo
- Navegações estruturais
- Acesso a Criar ações apropriadas
- Exibir seleções
-
A área de conteúdo que:
- Lista os itens de conteúdo (sejam páginas, ativos, publicações de fórum e assim por diante)
- Pode ser formatado conforme solicitado, por exemplo, coluna, cartão ou lista
- Usa um design responsivo (a tela é redimensionada automaticamente de acordo com o tamanho do dispositivo e/ou da janela)
- Usa rolagem infinita (sem mais paginação, todos os itens são listados em uma janela)
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:
- Interface do usuário do Coral (CUI) uma implementação do estilo visual de Adobe para a interface do usuário habilitada para toque. A interface Coral fornece tudo o que seu produto/projeto/aplicativo Web precisa para adotar o estilo visual da interface.
- Os componentes da interface do Granite são criados com a interface do Coral.
Os princípios básicos da interface habilitada para toque são:
- Mobilidade em primeiro lugar (com o desktop em mente)
- Design responsivo
- Exibição relevante ao contexto
- Reutilizável
- Incluir documentação de referência incorporada
- Incluir testes incorporados
- Design ascendente 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 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:
- Um inicializador de aplicativos
- Uma estrutura OSGi na qual tudo é implantado
- Vários serviços de compêndio OSGi para suportar a criação de aplicativos
- Uma estrutura de log abrangente que fornece várias APIs de log
- A implementação do Repositório do CRX da especificação da API JCR
- A estrutura da Web do Apache Sling
- Partes adicionais do produto CRX atual
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:
- Fornecer widgets granulares da interface do usuário
- Implementar os conceitos da interface do usuário e ilustrar as práticas recomendadas (renderização de listas longas, filtragem de listas, CRUD de objetos, assistentes de CUD…)
- Fornecer uma interface de administração extensível e baseada em plug-in
Eles atendem aos requisitos:
- Respeite "móvel primeiro"
- Ser extensível
- Ser fácil de substituir
GraniteUI.pdf
Obter arquivo
A interface do Granite:
- Usa a arquitetura RESTful do Sling
- Implementa bibliotecas de componentes destinadas à criação de aplicativos da Web centrados em conteúdo
- Fornece widgets granulares da interface do usuário
- Fornece uma interface padrão e padronizada
- É extensível
- É projetado para dispositivos móveis e desktop (respeita dispositivos móveis primeiro)
- Pode ser usado em qualquer plataforma/produto/projeto baseado no Granite; por exemplo, AEM
- Componentes de base da interface do Granite
Essa biblioteca de componentes de base pode ser usada ou estendida por outras bibliotecas. - Componentes de administração da interface de usuário 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
- O servidor enriquece o HTML com dados semânticos
- O cliente enriquece o hipertexto com a função hypermedia (interação)
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:
- Botão
- Hiperlink
- Avatar do usuário
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:
- Modelo de componente para elementos de HTML
- Composição do componente
- Teste automático de unidade e funcionalidade
Implementação:
- Composição e configuração baseadas no repositório
- Uso das instalações de teste fornecidas pela plataforma Granite
- Modelos JSP
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.
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
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 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:
- Barra de navegação global
- Trilho (esqueleto)
- Painel de pesquisa
Finalidade:
- Aparência unificada para aplicativos de administração
- RAD para aplicativos de administração
Implementação:
- Componentes predefinidos usando os componentes de base
- Os componentes podem ser personalizados
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.
- Quando tiver sido enviado e empacotado com AEM.
- Para uso ao estender a interface do usuário existente do ambiente de criação.
- material de apoio, anúncios e apresentações da Adobe Corporate.
- A interface do usuário dos aplicativos da marca Adobe (a fonte não deve estar prontamente disponível para outros usos).
- Com pequenas personalizações.
- Documentos e outros itens não relacionados ao Adobe.
- Ambientes de criação de conteúdo (em que os itens anteriores possam ser gerados por outros).
- Aplicativos/componentes/páginas da Web que não estão claramente conectados ao Adobe.
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:
- Fornecer elementos básicos da interface do usuário com aparência comum
- Fornecer o sistema de grade padrão
Implementação:
- Marcas HTML com estilos inspirados em Bootstrap
- As classes são definidas em arquivos LESS
- 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 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:
- Projetado para operar em um elemento DOM específico. Por exemplo, um plug-in de diálogo espera encontrar
DIV class=dialog
- Natureza genérica. Por exemplo, um gerenciador de layout fornece layout para qualquer lista de
DIV
ouLI
elementos
O comportamento do plug-in pode ser personalizado com parâmetros, através:
- Passagem dos parâmetros com 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 geral é usar:
data-*
atributos para opções relacionadas ao layout HTML. Por exemplo, para especificar o número de colunas- Opções/classes de API para funcionalidade relacionada aos dados. Por exemplo, criar a lista de itens para exibir
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:
- Fornecer comportamento dinâmico para elementos de HTML
- Não é possível fornecer layouts personalizados com CSS puro
- Executar validação
- Executar manipulação de DOM avançada
Implementação:
- Plug-in jQuery, vinculado a elementos DOM específicos
- Usando atributos de
data-*
para personalizar o comportamento
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:
- Implementar elementos de interface do usuário de nível superior que exibam comportamento complexo
- Acionamento e manuseio de eventos
Implementação:
- Plug-in jQuery + marcação HTML
- Pode usar modelos do lado 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 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:
- Independente da interface
- No entanto, é fundamental para a criação de aplicativos web completos
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:
- Fornecer funcionalidade comum
- Implementação do barramento de evento
- Modelos do lado do cliente
- XSS
Implementação:
- Plug-ins do jQuery ou módulos JavaScript compatíveis com AMD