Uso e extensão de widgets (interface de usuário clássica) using-and-extending-widgets-classic-ui
A interface baseada na Web do Adobe Experience Manager (AEM) usa o AJAX e outras tecnologias modernas de navegador para permitir a edição e a formatação WYSIWYG de conteúdo por autores diretamente na página da Web.
O AEM usa o ExtJS biblioteca de widgets, que fornece os elementos de interface de usuário altamente sofisticados que funcionam em todos os navegadores mais importantes e permitem a criação de experiências de interface de usuário de desktop.
Esses widgets estão incluídos no AEM e, além de serem usados pelo próprio AEM, podem ser usados por qualquer site criado com o uso do AEM.
Para obter uma referência completa de todos os widgets disponíveis no AEM, consulte documentação da API do widget ou o lista de xtypes existentes. Além disso, muitos exemplos mostrando como usar a estrutura ExtJS estão disponíveis no Sencha local, o proprietário da estrutura.
Esta página fornece alguns insights sobre como usar e estender widgets. Primeiro, descreve como incluir código do lado do cliente em uma página. Em seguida, descreve alguns componentes de amostra que foram criados para ilustrar algum uso e extensão básicos. Esses componentes estão disponíveis no Utilização de widgets ExtJS pacote ativado Compartilhamento de pacotes.
O pacote inclui exemplos de:
- Caixas de diálogo básicas criado com widgets prontos para uso.
- Caixas de diálogo dinâmicas criado com widgets prontos para uso e lógica JavaScript personalizada.
- Caixas de diálogo baseadas em widgets personalizados.
- A painel em árvore exibindo uma árvore JCR abaixo de um determinado caminho.
- A painel de grade exibição de dados em formato tabular.
Inclusão do código do lado do cliente em uma página including-the-client-sided-code-in-a-page
O JavaScript do lado do cliente e o código da folha de estilos devem ser colocados em uma biblioteca do cliente.
Para criar uma biblioteca do cliente:
-
Criar um nó abaixo
/apps/<project>
com as seguintes propriedades:- name="clientlib"
- jcr:mixinTypes="[mix:bloqueável]"
- jcr:primaryType="cq:ClientLibraryFolder"
- sling:resourceType="widgets/clientlib"
- categories="[<category-name>]"
- dependencies="[cq.widgets]"
Note: <category-name> is the name of the custom library (for example, "cq.extjstraining") and is used to include the library on the page.
-
Abaixo
clientlib
criar ocss
ejs
pastas (nt:folder). -
Abaixo
clientlib
criar ocss.txt
ejs.txt
arquivos (nt:files). Esses arquivos .txt listam os arquivos incluídos na biblioteca. -
Editar
js.txt
: deve começar com '#base=js
" seguido pela lista dos arquivos que são agregados pelo serviço de biblioteca do cliente CQ, por exemplo:code language-none #base=js components.js exercises.js CustomWidget.js CustomBrowseField.js InsertTextPlugin.js
-
Editar
css.txt
: deve começar com '#base=css
" seguido pela lista dos arquivos que são agregados pelo serviço de biblioteca do cliente CQ, por exemplo:code language-none #base=css components.css
-
Abaixo do
js
, coloque os arquivos JavaScript que pertencem à biblioteca. -
Abaixo do
css
pasta, coloque o.css
e os recursos usados pelos arquivos css (por exemplo,my_icon.png
).
Para incluir a biblioteca do cliente no componente página jsp:
-
para incluir código JavaScript e folhas de estilos:
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
onde<category-nameX>
é o nome da biblioteca do lado do cliente. -
para incluir apenas o código JavaScript:
<ui:includeClientLib js="<category-name>"/>
Para obter mais detalhes, consulte a descrição do <ui:includeClientLib> tag.</ui:includeClientLib>
Às vezes, uma biblioteca do cliente só deve estar disponível no modo autor e deve ser excluída publicar modo. Ele pode ser alcançado da seguinte maneira:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Introdução com as amostras getting-started-with-the-samples
Para seguir os tutoriais nesta página, instale o pacote Utilização de widgets ExtJS em uma instância de AEM local e crie uma página de exemplo na qual os componentes sejam incluídos. Para fazer isso, faça o seguinte:
- Na instância do AEM, baixe o pacote chamado Utilização de widgets ExtJS (v01) em Compartilhamento de pacotes e instale o pacote. Ele cria o projeto
extjstraining
abaixo/apps
no repositório. - Inclua a biblioteca do cliente que contém os scripts (js) e a folha de estilos (css) na tag head da jsp da página do Geometrixx. Você incluirá os componentes de amostra em uma nova página do Geometrixx ramificação: em CRXDE Lite abra o arquivo
/apps/geometrixx/components/page/headlibs.jsp
e adicione ocq.extjstraining
categoria ao existente<ui:includeClientLib>
da seguinte forma:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
- Crie uma página no Geometrixx ramificação abaixo
/content/geometrixx/en/products
e chame-o Utilização de widgets ExtJS. - Vá para o modo de design e adicione todos os componentes do grupo chamados Utilização de widgets ExtJS ao design do Geometrixx
- Voltar para o modo de edição: os componentes do grupo Utilização de widgets ExtJS estão disponíveis no Sidekick.
Caixas de diálogo básicas basic-dialogs
As caixas de diálogo normalmente são usadas para editar conteúdo, mas também podem exibir informações. Uma maneira fácil de visualizar uma caixa de diálogo completa é acessar sua representação no formato json. Para fazer isso, aponte seu navegador para:
https://localhost:4502/<path-to-dialog>.-1.json
O primeiro componente do Utilização de widgets ExtJS o grupo no Sidekick é chamado 1. Noções básicas da caixa de diálogo O e o incluem quatro caixas de diálogo básicas que são criadas com widgets prontos para uso e sem lógica JavaScript personalizada. Os diálogos são armazenados abaixo /apps/extjstraining/components/dialogbasics
. As caixas de diálogo básicas são:
- a caixa de diálogo Completa (
full
node): exibe uma janela com três guias, cada uma com dois campos de texto. - a caixa de diálogo Painel único (
singlepanel
node): exibe uma janela com uma guia que tem dois campos de texto. - a caixa de diálogo Vários painéis (
multipanel
node): sua exibição é a mesma da caixa de diálogo Completa, mas é criada de forma diferente. - a caixa de diálogo Design(
design
node): exibe uma janela com duas guias. A primeira guia tem um campo de texto, um menu suspenso e uma área de texto recolhível. A segunda guia tem um campo definido com quatro campos de texto e um campo recolhível definido com dois campos de texto.
Inclua o 1. Noções básicas da caixa de diálogo componente na página de exemplo:
- Adicione o 1. Noções básicas da caixa de diálogo componente para a página de exemplo da Utilização de widgets ExtJS na guia Sidekick.
- O componente exibe um título, algum texto e um PROPRIEDADES link. Selecionar o link exibe as propriedades do parágrafo armazenadas no repositório. Selecione o link novamente para ocultar as propriedades.
O componente é exibido da seguinte maneira:
Exemplo 1: caixa de diálogo completa example-full-dialog
A variável Completo exibe uma janela com três abas, cada uma com dois campos de texto. É a caixa de diálogo padrão do Noções básicas da caixa de diálogo componente. Suas características são:
- É definido por um nó: tipo de nó =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
. - Exibe três guias (tipo de nó =
cq:Panel
). - Cada guia tem dois campos de texto (tipo de nó =
cq:Widget
, xtype =[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
). - É definido pelo nó:
/apps/extjstraining/components/dialogbasics/full
- É renderizado no formato JSON, solicitando:
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
A caixa de diálogo é exibida da seguinte maneira:
Exemplo 2: caixa de diálogo Painel único example-single-panel-dialog
A variável Painel único exibe uma janela com uma guia que tem dois campos de texto. Suas características são:
- Exibe uma guia (tipo de nó =
cq:Dialog
, xtype =[panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel)
) - A guia tem dois campos de texto (tipo de nó =
cq:Widget
, xtype =[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
) - É definido pelo nó:
/apps/extjstraining/components/dialogbasics/singlepanel
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
- Uma vantagem sobre a Caixa de diálogo completa é que menos configuração é necessária.
- Uso recomendado: para caixas de diálogo simples que exibem informações ou têm apenas alguns campos.
Para usar a caixa de diálogo Painel único:
-
Substituir a caixa de diálogo do Noções básicas da caixa de diálogo componente com o Painel único diálogo:
- Entrada CRXDE Lite, exclua o nó:
/apps/extjstraining/components/dialogbasics/dialog
- Clique em Salvar tudo para salvar as alterações.
- Copie o nó:
/apps/extjstraining/components/dialogbasics/singlepanel
- Cole o nó copiado abaixo:
/apps/extjstraining/components/dialogbasics
- Selecione o nó:
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
e renomeá-ladialog
.
- Entrada CRXDE Lite, exclua o nó:
-
Edite o componente: a caixa de diálogo é exibida da seguinte maneira:
Exemplo 3: caixa de diálogo Vários painéis example-multi-panel-dialog
A variável Vários painéis tem a mesma exibição que a caixa de diálogo Completo caixa de diálogo, mas é criada de forma diferente. Suas características são:
- É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel)
). - Exibe três guias (nó tipo =
cq:Panel
). - Cada guia tem dois campos de texto (nó tipo =
cq:Widget
, xtype =[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
). - É definido pelo nó:
/apps/extjstraining/components/dialogbasics/multipanel
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
- Uma vantagem sobre a Caixa de diálogo completa é que ele tem uma estrutura simplificada.
- Uso recomendado: para caixas de diálogo de várias guias.
Para usar a caixa de diálogo Vários painéis:
- Substituir a caixa de diálogo do Noções básicas da caixa de diálogo componente com o Vários painéis caixa de diálogo: siga as etapas descritas para o Exemplo 2: caixa de diálogo Painel único
- Edite o componente: a caixa de diálogo é exibida da seguinte maneira:
Exemplo 4: caixa de diálogo rica example-rich-dialog
A variável Rico exibe uma janela com duas guias. A primeira guia tem um campo de texto, um menu suspenso e uma área de texto recolhível. A segunda guia tem um campo definido com quatro campos de texto e um campo recolhível definido com dois campos de texto. Suas características são:
- É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). - Exibe duas guias (tipo de nó =
cq:Panel
). - A primeira guia tem um
[dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget com um[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
e uma[selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection)
widget com três opções e um recolhível[dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
com um[textarea](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textarea)
widget. - A segunda guia tem uma
[dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget com quatro[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
widgets, e umdialogfieldset
com dois[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
widgets. - É definido pelo nó:
/apps/extjstraining/components/dialogbasics/rich
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Para usar o Rico diálogo:
- Substituir a caixa de diálogo do Noções básicas da caixa de diálogo componente com o Rico caixa de diálogo: siga as etapas descritas para o Exemplo 2: caixa de diálogo Painel único
- Edite o componente: a caixa de diálogo é exibida da seguinte maneira:
Caixas de diálogo dinâmicas dynamic-dialogs
O segundo componente do Utilização de widgets ExtJS o grupo no Sidekick é chamado 2. Caixas de diálogo dinâmicas e inclui três caixas de diálogo dinâmicas que são criadas com widgets prontos para uso e com lógica personalizada do JavaScript. Os diálogos são armazenados abaixo /apps/extjstraining/components/dynamicdialogs
. As caixas de diálogo dinâmicas são:
- a caixa de diálogo Alternar guias (
switchtabs
node): exibe uma janela com duas guias. A primeira guia tem uma seleção de opção com três opções: quando uma opção é selecionada, uma guia relacionada à opção é exibida. A segunda guia tem dois campos de texto. - a caixa de diálogo Arbitrário (
arbitrary
node): exibe uma janela com uma guia. A guia tem um campo para soltar ou fazer upload de um ativo e um campo que exibe algumas informações sobre a página que o contém e sobre o ativo, se houver uma referência a ele. - a caixa de diálogo Alternar campos (
togglefield
node): exibe uma janela com uma guia. A guia tem uma caixa de seleção: quando marcada, um campo definido com dois campos de texto é exibido.
Para incluir a variável 2. Caixas de diálogo dinâmicas componente na página de exemplo:
- Adicione o 2. Caixas de diálogo dinâmicas componente para a página de exemplo da Utilização de widgets ExtJS na guia Sidekick.
- O componente exibe um título, algum texto e um PROPRIEDADES link. Selecionar o link exibe as propriedades do parágrafo armazenadas no repositório. Selecione o link novamente para ocultar as propriedades.
O componente é exibido da seguinte maneira:
Exemplo 1: Caixa de diálogo Alternar guias example-switch-tabs-dialog
A variável Alternar Guias exibe uma janela com duas guias. A primeira guia tem uma seleção de opção com três opções: quando uma opção é selecionada, uma guia relacionada à opção é exibida. A segunda guia tem dois campos de texto.
Suas principais características são:
- É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). - Exibe duas guias (tipo de nó =
cq:Panel
): uma guia de seleção, a segunda guia depende da seleção na primeira guia (três opções). - Tem três guias opcionais (tipo de nó =
cq:Panel
), cada um tem dois campos de texto (tipo de nó =cq:Widget
, xtype =[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
). Somente uma guia opcional é exibida por vez. - É definido pelo
switchtabs
nó em:/apps/extjstraining/components/dynamicdialogs/switchtabs
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
A lógica é implementada por meio de ouvintes de eventos e do código JavaScript, da seguinte maneira:
- O nó da caixa de diálogo tem um "
beforeshow
"ouvinte que oculta todas as guias opcionais antes que a caixa de diálogo seja exibida:beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"
dialog.items.get(0)
obtém otabpanel
que contém o painel de seleção e os três painéis opcionais. - A variável
Ejst.x2
o objeto é definido na variávelexercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
- No
Ejst.x2.manageTabs()
como o valor deindex
é -1, todas as guias opcionais ficam ocultas (vai de 1 a 3). - A guia de seleção tem dois ouvintes: um que mostra a guia selecionada quando a caixa de diálogo é carregada ("
loadcontent
") e uma que mostre a guia selecionada quando a seleção for alterada ("selectionchanged
" evento):loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
- Para o
Ejst.x2.showTab()
método,field.findParentByType('tabpanel')
obtém otabpanel
que contém todas as guias (field
representa o widget de seleção)field.getValue()
obtém o valor da seleção, por exemplo, tab2Ejst.x2.manageTabs()
exibe a guia selecionada. - Cada guia opcional tem um ouvinte que oculta a guia em "
render
Evento ":render="function(tab){Ejst.x2.hideTab(tab);}"
- Para o
Ejst.x2.hideTab()
método,tabPanel
é atabpanel
que contém todas as guiasindex
é o índice da guia opcionaltabPanel.hideTabStripItem(index)
o oculta o guia
Ela é exibida da seguinte maneira:
Exemplo 2: caixa de diálogo arbitrária example-arbitrary-dialog
Geralmente, uma caixa de diálogo exibe o conteúdo do componente subjacente. O diálogo descrito aqui, chamado Arbitrário , extrai o conteúdo de um componente diferente.
A variável Arbitrário exibe uma janela com uma guia. A guia tem dois campos: um para soltar ou fazer upload de um ativo e outro que exibe algumas informações sobre a página que o contém e sobre o ativo, se algum tiver sido referenciado.
Suas principais características são:
- É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). - Exibe um
tabpanel
widget (tipo de nó =cq:Widget
, xtype =[tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel)
) com um painel (tipo de nó =cq:Panel
) - O painel tem um widget smartfile (tipo de nó =
cq:Widget
, xtype =[smartfile](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#smartfile)
) e um widget ownerdraw (tipo de nó =cq:Widget
, xtype =[ownerdraw](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#ownerdraw)
) - É definido pelo
arbitrary
nó em:/apps/extjstraining/components/dynamicdialogs/arbitrary
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
A lógica é implementada por meio de ouvintes de eventos e do código JavaScript, da seguinte maneira:
- A variável
ownerdraw
O widget tem um "loadcontent
"que mostra informações sobre a página que contém o componente. Ou seja, o ativo referenciado pelo widget smartfile quando o conteúdo é carregado:loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
é definido com oownerdraw
objetopath
é definido com o caminho do conteúdo do componente (por exemplo,/content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs
) - A variável
Ejst.x2
o objeto é definido na variávelexercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
- Para o
Ejst.x2.showInfo()
método,pagePath
é o caminho da página que contém o componente;pageInfo
representa as propriedades da página no formato json;reference
é o caminho do ativo referenciado;metadata
representa os metadados do ativo no formato json;ownerdraw.getEl().update(html);
exibe o html criado no diálogo
Para usar o Arbitrário diálogo:
- Substituir caixa de diálogo do componente diálogo dinâmico com a caixa de diálogo Arbitrária :
seguir as etapas descritas para o exemplo 2: caixa de diálogo de painel único - Editar o componente: a caixa de diálogo é exibida da seguinte maneira:
Exemplo 3: caixa de diálogo Alternar campos example-toggle-fields-dialog
A variável Alternar campos exibe uma janela com uma guia. O guia tem uma caixa de seleção: quando é marcado, um campo definido com dois campos de texto é exibido.
Suas principais características são:
- É definido por uma nó (nó tipo =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). - Exibe um
tabpanel
widget (nó tipo =cq:Widget
, xtype =[tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textpanel)
) com um painel (nó tipo =cq:Panel
). - O painel possui um widget de seleção/caixa de seleção (nó tipo =
cq:Widget
, xtype =[selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection)
, tipo =[checkbox](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#checkbox)
) e um widget dialogfieldset dobrável (nó tipo =cq:Widget
, xtype =[dialogfieldset](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) que é oculto por padrão, com dois widgets de campo de texto (nó tipo =cq:Widget
, xtype =[textfield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#textfield)
). - É definido pelo
togglefields
nó em:/apps/extjstraining/components/dynamicdialogs/togglefields
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
A lógica é implementada por meio de ouvintes de eventos e do código JavaScript, da seguinte maneira:
- a guia de seleção tem dois ouvintes: um que mostra o dialogfieldset quando o conteúdo é carregado ("
loadcontent
" event) e um que mostre o dialogfieldset quando a seleção for alterada ("selectionchanged
" evento):loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
- A variável
Ejst.x2
o objeto é definido na variávelexercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
- Para o
Ejst.x2.toggleFieldSet()
método,box
é o objeto de seleção;panel
é o painel que contém os widgets selection e dialogfieldset;fieldSet
é o objeto dialogfieldset;show
é o valor da seleção (verdadeiro ou falso); com base em 'show
' o dialogfieldset é exibido ou não
Para usar o Alternar campos , faça o seguinte:
- Substituir a caixa de diálogo do Caixa de diálogo dinâmica componente com o Alternar campos caixa de diálogo: siga as etapas descritas para o Exemplo 2: caixa de diálogo Painel único
- Edite o componente: a caixa de diálogo é exibida da seguinte maneira:
Widgets personalizados custom-widgets
Os widgets prontos para uso enviados com AEM devem abranger a maioria dos casos de uso. No entanto, às vezes pode ser necessário criar um widget personalizado para atender a um requisito específico do projeto. Widgets personalizados podem ser criados estendendo os existentes. Para ajudar você a começar com essa personalização, a variável Using ExtJS Widgets
O pacote inclui três caixas de diálogo que usam três widgets personalizados diferentes:
- a caixa de diálogo Vários campos (
multifield
) exibe uma janela com uma guia. A guia tem um widget de vários campos personalizado que tem dois campos: um menu suspenso com duas opções e um campo de texto. Como se baseia nos recursosmultifield
(que tem apenas um campo de texto), ele tem todos os recursos domultifield
widget. - a caixa de diálogo Procurar na árvore (
treebrowse
node) exibe uma janela com uma guia contendo um widget de navegação por caminho: quando você clica na seta, uma janela é aberta, na qual você pode navegar por uma hierarquia e selecionar um item. O caminho do item é adicionado ao campo de caminho e é mantido quando a caixa de diálogo é fechada. - uma caixa de diálogo baseada em Plug-in do Editor de Rich Text (
rteplugin
nó) que adiciona um botão personalizado ao Editor de Rich Text para inserir texto personalizado no texto principal. Consiste em umarichtext
(RTE) e de um recurso personalizado adicionado por meio do mecanismo de plug-in RTE.
Os widgets personalizados e o plug-in são incluídos no componente chamado 3. Widgets personalizados do pacote Usar widgets ExtJS. Para incluir esse componente na página de amostra:
- Adicione o 3. Componente de Widgets personalizados para o página de amostra dos Widgets ExtJS guia no Sidekick.
- O componente exibe um título, um texto e, ao clicar na link PROPRIEDADES , as propriedades do parágrafo armazenadas no repositório. Clicar novamente oculta as propriedades.
O componente é exibido da seguinte maneira:
Exemplo 1: Widget de vários campos personalizado example-custom-multifield-widget
A variável Vários campos personalizados a caixa de diálogo baseada em widget exibe uma janela com uma guia. A guia tem um widget multicampo personalizado que, ao contrário do widget padrão que tem um campo, tem dois campos: um menu suspenso com duas opções e um campo de texto.
A variável Vários campos personalizados caixa de diálogo baseada em widget:
-
É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). -
Exibe um
tabpanel
widget (tipo de nó =cq:Widget
, xtype =[tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contendo um painel (tipo de nó =cq:Widget
, xtype =[panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel)
). -
O painel tem uma
multifield
widget (tipo de nó =cq:Widget
, xtype =[multifield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#multifield)
). -
A variável
multifield
o widget tem um fieldconfig (tipo de nó =nt:unstructured
, xtype =ejstcustom
, optionsProvider =Ejst.x3.provideOptions
) que é baseado no xtype personalizado 'ejstcustom
':-
'
fieldconfig
' é uma opção de configuração de[CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField)
objeto. -
'
optionsProvider
' é uma configuração deejstcustom
widget. É definido com a variávelEjst.x3.provideOptions
método definido emexercises.js
em:/apps/extjstraining/clientlib/js/exercises.js
e retorna duas opções.
-
-
É definido pelo
multifield
nó em:/apps/extjstraining/components/customwidgets/multifield
-
É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
O personalizado multifield
widget (xtype = ejstcustom
):
-
É um objeto JavaScript chamado
Ejst.CustomWidget
-
É definido na variável
CustomWidget.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/CustomWidget.js
-
Estende o
[CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField)
widget. -
Tem três campos:
hiddenField
(Textfield),allowField
(ComboBox) eotherField
(Campo de texto) -
Substituições
CQ.Ext.Component#initComponent
para adicionar os três campos:allowField
é um CQ.form.Selection objeto do tipo 'select'. optionsProvider é uma configuração do objeto Selection que é instanciada com a configuração optionsProvider do CustomWidget definido na caixa de diálogootherField
é um CQ.Ext.form.TextField objeto
-
Substitui os métodos
setValue
egetValue
getRawValue
o CQ.form.CompositeField para definir e recuperar o valor de CustomWidget com o formato:<allowField value>/<otherField value>, for example: 'Bla1/hello'
. -
Registra a si mesmo como '
ejstcustom
' xtype:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
A variável Vários campos personalizados a caixa de diálogo baseada em widget é exibida da seguinte maneira:
Exemplo 2: Dispositivo personalizado Treebrowse
example-custom-treebrowse-widget
A caixa de diálogo com base em widgets personalizados Treebrowse
exibe uma janela com uma guia contendo um widget de navegação por caminho personalizado. Quando você seleciona a seta, abre-se uma janela na qual você pode navegar em uma hierarquia e selecionar um item. O caminho do item é então adicionado ao campo de caminho e é persistente quando a caixa de diálogo é fechada.
A caixa de diálogo personalizada treebrowse
:
- É definido por uma nó (nó tipo =
cq:Dialog
, xtype =[dialog](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#dialog)
). - Exibe um
tabpanel
widget (tipo de nó =cq:Widget
, xtype =[tabpanel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contendo um painel (tipo de nó =cq:Widget
, xtype =[panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel)
). - O painel tem um widget personalizado (tipo de nó =
cq:Widget
, xtype =ejstbrowse
) - É definido pelo
treebrowse
nó em:/apps/extjstraining/components/customwidgets/treebrowse
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
O widget personalizado de navegação na árvore (xtype = ejstbrowse
):
-
É um objeto JavaScript chamado
Ejst.CustomWidget
-
É definido na variável
CustomBrowseField.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/CustomBrowseField.js
-
Estende
[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
. -
Define uma janela de navegação chamada
browseWindow
. -
Substituições
[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
para mostrar a janela de navegação quando a seta é clicada. -
Define um CQ.Ext.tree.TreePanel objeto:
- Ele obtém seus dados chamando o servlet registrado em
/bin/wcm/siteadmin/tree.json
. - Sua raiz é "
apps/extjstraining
".
- Ele obtém seus dados chamando o servlet registrado em
-
Define um
window
objeto ([CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
):- Com base no painel predefinido.
- Tem um OK botão que define o valor do caminho selecionado e oculta o painel.
-
A janela está ancorada abaixo do Caminho campo.
-
O caminho selecionado é passado do campo de procura para a janela em
show
evento. -
Registra a si mesmo como '
ejstbrowse
' xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para usar o Treebrowse Personalizado caixa de diálogo baseada em widget:
- Substituir a caixa de diálogo do Widgets personalizados componente com o Treebrowse Personalizado caixa de diálogo: siga as etapas descritas para o Exemplo 2: caixa de diálogo Painel único
- Edite o componente: a caixa de diálogo é exibida da seguinte maneira:
Exemplo 3: plug-in de editor de rich text (RTE) example-rich-text-editor-rte-plug-in
A caixa de diálogo com base na editor editor Rich Text (RTE) é uma caixa de diálogo baseada em Editor Rich Text que possui uma botão personalizada para inserir algum texto personalizado dentro de colchetes. O texto personalizado pode ser analisado por alguma lógica lado do servidor (não implementada neste exemplo), por exemplo, para adicionar algum texto que seja definido em um determinado caminho:
A caixa de diálogo baseada no plug-in RTE:
- É definido pelo nó replugin em:
/apps/extjstraining/components/customwidgets/rteplugin
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
- A variável
rtePlugins
o nó tem um nó filhoinserttext
(tipo de nó =nt:unstructured
) que tem o nome do plug-in. Ele tem uma propriedade chamadafeatures
que define quais dos recursos de plug-in estão disponíveis para o RTE.
O plug-in RTE:
-
É um objeto JavaScript chamado
Ejst.InsertTextPlugin
-
É definido na variável
InsertTextPlugin.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
-
Estende o
[CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
objeto. -
Os métodos a seguir definem o
[CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
e são substituídos no plug-in de implementação:getFeatures()
retorna uma matriz de todos os recursos que o plug-in disponibiliza.initializeUI()
adiciona o novo botão à barra de ferramentas do RTE.notifyPluginConfig()
exibe o título e o texto quando o botão é focalizado.execute()
é chamado quando o botão é clicado e executa a ação do plug-in: exibe uma janela usada para definir o texto a ser incluído.
-
insertText()
insere um texto usando o objeto de diálogo correspondenteEjst.InsertTextPlugin.Dialog
(veja depois). -
executeInsertText()
é chamado peloapply()
método da caixa de diálogo, que é acionado quando o OK é clicado. -
Registra a si mesmo como '
inserttext
Plugin ':CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
-
o
Ejst.InsertTextPlugin.Dialog
O objeto define a caixa de diálogo que é aberta quando o botão de plug-in é clicado. O diálogo consiste em um painel, um formulário, um campo de texto e dois botões (OK e Cancelar).
Para usar o Plug-in do Editor de Rich Text (RTE) caixa de diálogo baseada em:
- Substituir a caixa de diálogo do Widgets personalizados componente com o Plug-in do Editor de Rich Text (RTE) caixa de diálogo baseada em: siga as etapas descritas para o Exemplo 2: caixa de diálogo Painel único
- Edite o componente.
- Clique no último ícone à direita (aquele com quatro setas). Insira um caminho e clique em OK: O caminho é exibido entre colchetes ([ ]).
- Clique em OK então você fecha o Editor de Rich Text.
A caixa de diálogo com base em plug-in da editor Rich Text (RTE) é exibida da seguinte maneira:
Visão geral da árvore tree-overview
O pacote pronto para uso [CQ.Ext.tree.TreePanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
O objeto do fornece representação de dados estruturados em árvore na interface do usuário. O componente Visão geral da árvore incluído no pacote Usar widgets ExtJS mostra como usar o TreePanel
objeto para exibir uma árvore JCR abaixo de um determinado caminho. A janela em si pode ser ancorada/não ancorada. Neste exemplo, a lógica de janela está incorporada no jsp de componentes entre <script> tags.
Para incluir o componente Visão geral da árvore ao página de amostra:
-
Adicione o 4. Componente de Visão geral da árvore para o página de amostra usando widgets ExtJS guia no Sidekick.
-
O componente é exibido:
- um título, com algum texto
- a PROPRIEDADES link: clique em para exibir as propriedades do parágrafo armazenadas no repositório. Clique novamente para ocultar as propriedades.
- uma janela flutuante com uma representação em árvore do repositório que pode ser expandida.
O componente é exibido da seguinte maneira:
O componente de Visão geral da árvore:
-
É definido em:
/apps/extjstraining/components/treeoverview
-
A caixa de diálogo permite definir o tamanho da janela e encaixar ou desencaixar a janela (consulte os detalhes abaixo).
O componente jsp:
- Recupera a largura, a altura e as propriedades encaixadas do repositório.
- Exibe algum texto sobre o formato de dados da visão geral em árvore.
- Incorpora a lógica da janela na jsp do componente entre tags JavaScript.
- É definido em:
apps/extjstraining/components/treeoverview/content.jsp
O código JavaScript incorporado no componente jsp:
-
Define um
tree
tentando recuperar uma janela de árvore da página. -
Se a janela que exibe a árvore não existir,
treePanel
(CQ.Ext.tree.TreePanel) é criada:-
treePanel
contém os dados usados para criar a janela. -
Os dados são recuperados chamando o servlet registrado em:
/bin/wcm/siteadmin/tree.json
-
-
A variável
beforeload
o listener verifica se o nó selecionado está carregado. -
A variável
root
objeto define o caminhoapps/extjstraining
como a raiz da árvore. -
tree
([CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
) é definido com base no padrãotreePanel
, e é exibido com:tree.show();
-
Se a janela existir, ela será exibida com base na largura, altura e propriedades encaixadas recuperadas do repositório.
A caixa de diálogo do componente:
- Exibe uma guia com dois campos para definir o tamanho (largura e altura) da janela de visão geral da árvore e um campo para encaixar/desencaixar a janela
- É definido por um nó (tipo de nó =
cq:Dialog
, xtype =[panel](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#panel)
). - O painel tem um widget sizefield (tipo de nó =
cq:Widget
, xtype =[sizefield](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#sizefield)
) e um widget de seleção (tipo de nó =cq:Widget
, xtype =[selection](/docs/experience-manager-65/content/implementing/developing/components/classic-ui-components/xtypes.md#selection)
, tipo =radio
) com duas opções (true/false) - É definido pelo nó da caixa de diálogo em:
/apps/extjstraining/components/treeoverview/dialog
- É renderizado no formato json, solicitando:
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
- É exibido da seguinte forma:
Visão geral da grade grid-overview
Um Painel de grade representa dados em um formato tabular de linhas e colunas. Ele é composto pelo seguinte:
- Armazenamento : o modelo que contém os registros de dados (linhas).
- Modelo da coluna : a composição da coluna.
- Exibição : encapsula a interface do usuário.
- Modelo de seleção : o comportamento da seleção.
O componente de Visão geral da grade incluído na Utilização de widgets ExtJS O pacote de mostra como exibir dados em formato tabular:
- O exemplo 1 usa dados estáticos.
- O exemplo 2 usa dados recuperados do repositório.
Para incluir o componente Visão geral da grade na página de exemplo:
-
Adicione o 5. Visão geral da grade componente para a página de exemplo da Utilização de widgets ExtJS na guia Sidekick.
-
O componente exibe:
- um título com algum texto
- a PROPRIEDADES link: clique em para exibir as propriedades do parágrafo armazenadas no repositório. Clique novamente para ocultar as propriedades.
- uma janela flutuante contendo dados em formato tabular.
O componente é exibido da seguinte maneira:
Exemplo 1: Grade Padrão example-default-grid
Na versão inicial, o componente Visão geral de grade exibe uma janela com dados estáticos em um formato tabular. Neste exemplo, a lógica é incorporada no jsp do componente de duas maneiras:
- a lógica genérica é definida entre <script> tags
- a lógica específica está disponível em um arquivo .js separado e está vinculada no jsp. Essa configuração permite alternar entre as duas lógicas (estática/dinâmica) ao comentar a variável <script> específicos.
O componente de Visão geral da grade:
- É definido em:
/apps/extjstraining/components/gridoverview
- A caixa de diálogo permite definir o tamanho da janela e ancorar ou cancelar a âncora da janela.
O jsp do componente:
- Recupera a largura, a altura e as propriedades ancoradas do repositório.
- Exibe texto como introdução ao formato de dados de visão geral da grade.
- Faz referência ao código JavaScript que define o objeto GridPanel:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
define alguns dados estáticos como uma base para o objeto GridPanel. - Incorpora o código JavaScript entre tags JavaScript que define o objeto Window consumindo o objeto GridPanel.
- É definido em:
apps/extjstraining/components/gridoverview/content.jsp
O código JavaScript incorporado no componente jsp:
- Define o
grid
tentando recuperar o componente de janela da página:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
- Se
grid
não existir, uma CQ.Ext.grid.GridPanel objeto (gridPanel
) é definido ao chamar ogetGridPanel()
(veja abaixo). Este método é definido emdefaultgrid.js
. grid
é um[CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
com base no GridPanel predefinido, e é exibido:grid.show();
- Se
grid
existir, será exibido com base na largura, altura e propriedades encaixadas recuperadas do repositório.
O arquivo JavaScript ( defaultgrid.js
) referenciada no componente jsp define o getGridPanel()
método chamado pelo script incorporado no JSP e retorna um [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
objeto, com base em dados estáticos. A lógica é a seguinte:
-
myData
é uma matriz de dados estáticos formatados como uma tabela de cinco colunas e quatro linhas. -
store
é umCQ.Ext.data.Store
objeto que consomemyData
. -
store
é carregado na memória:store.load();
-
gridPanel
é um[CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
objeto que consomestore
:-
as larguras das colunas são sempre reproporcionadas:
forceFit: true
-
somente uma linha por vez pode ser selecionada:
singleSelect:true
-
Exemplo 2: Grade de Pesquisa de Referência example-reference-search-grid
Ao instalar o pacote, a variável content.jsp
do Visão geral da grade componente exibe uma grade que é baseada em dados estáticos. É possível modificar o componente para exibir uma grade com as seguintes características:
- Tem três colunas.
- É baseado em dados recuperados do repositório ao chamar um servlet.
- As células da última coluna podem ser editadas. O valor é mantido em um
test
abaixo do nó definido pelo caminho exibido na primeira coluna.
Como explicado na seção anterior, o objeto de janela recebe [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
ao chamar o getGridPanel()
método definido na variável defaultgrid.js
arquivo em /apps/extjstraining/components/gridoverview/defaultgrid.js
. O componente Visão geral da grade fornece uma implementação diferente para o getGridPanel()
, definido na referencesearch.js
arquivo em /apps/extjstraining/components/gridoverview/referencesearch.js
. Ao alternar o arquivo .js referenciado no componente jsp, a grade é baseada nos dados recuperados do repositório.
Troque o arquivo .js referenciado no componente jsp:
- Entrada CRXDE Lite, no
content.jsp
do componente, comente a linha que inclui a variáveldefaultgrid.js
para que tenha a seguinte aparência:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
- Remova o comentário da linha que inclui o
referencesearch.js
para que tenha a seguinte aparência:<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
- Salve as alterações.
- Atualize a página de exemplo.
O componente é exibido da seguinte maneira:
O código JavaScript referenciado no componente jsp ( referencesearch.js
) define o getGridPanel()
chamado do componente jsp e retorna um [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
objeto, com base nos dados recuperados dinamicamente do repositório. A lógica em referencesearch.js
define alguns dados dinâmicos como uma base para o GridPanel:
-
reader
é um[CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
objeto que lê a resposta do servlet no formato json para três colunas. -
cm
é um[CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
para três colunas.
As células da coluna "Test" podem ser editadas conforme são definidas com um editor:editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
-
as colunas são classificáveis:
cm.defaultSortable = true;
-
store
é um[CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
objeto:- ele obtém os dados chamando o servlet registrado em "
/bin/querybuilder.json
" com alguns parâmetros usados para filtrar a query - se baseia em
reader
, definido com antecedência - a tabela é classificada de acordo com a variável jcr:path Coluna ' em ordem crescente
- ele obtém os dados chamando o servlet registrado em "
-
gridPanel
é um[CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
objeto que pode ser editado:-
baseia-se na variável predefinida
store
e no modelo de colunacm
-
somente uma linha por vez pode ser selecionada:
sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
-
o
afteredit
o ouvinte garante que, após uma célula na variável "Teste A coluna " foi editada:- a propriedade '
test
' do nó no caminho definido pelo "jcr:path"A coluna é definida no repositório com o valor da célula - se o POST for bem-sucedido, o valor será adicionado à variável
store
objeto, caso contrário, será rejeitado
- a propriedade '
-