Uso e extensão de widgets (interface de usuário clássica) using-and-extending-widgets-classic-ui

para incluir o código javascript e as folhas de estilos:

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

em que <category-nameX> é o nome da biblioteca do lado do cliente.

para incluir somente o código javascript:

<ui:includeClientLib js="<category-name>"/>

a caixa de diálogo Completo ( full node): ela exibe uma janela com 3 guias, cada guia com 2 campos de texto.

a caixa de diálogo Painel único( singlepanel node): ela exibe uma janela com 1 guia que tem 2 campos de texto.

a caixa de diálogo Multicpainel( 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): ela exibe uma janela com 2 guias. A primeira guia tem um campo de texto, um menu suspenso e uma área de texto que pode ser recolhida. A segunda guia tem um conjunto de campos com 4 campos de texto e um conjunto de campos que pode ser recolhido com 2 campos de texto.

É definido por um nó: tipo de nó = cq:Dialog, xtype = dialog.

Exibe 3 guias (tipo de nó = cq:Panel).

Cada guia tem dois campos de texto (tipo de nó = cq:Widget, xtype = textfield).

É definido pelo nó :

/apps/extjstraining/components/dialogbasics/full

É renderizado no formato JSON solicitando:

http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

Exibe 1 guia (tipo de nó = cq:Dialog, xtype = panel)

A guia tem dois campos de texto (tipo de nó = cq:Widget, xtype = textfield)

É definido pelo nó :

/apps/extjstraining/components/dialogbasics/singlepanel

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

Uma vantagem sobre Caixa de diálogo cheia é que é necessária menos configuração.

Utilização recomendada: para caixas de diálogo simples que exibem informações ou têm apenas alguns campos.

É definido por um nó (tipo de nó = cq:Dialog, xtype = tabpanel).

Exibe 3 guias (tipo de nó = cq:Panel).

Cada guia tem dois campos de texto (tipo de nó = cq:Widget, xtype = textfield).

É definido pelo nó :

/apps/extjstraining/components/dialogbasics/multipanel

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json

Uma vantagem sobre Caixa de diálogo cheia é que tem uma estrutura simplificada.

Utilização recomendada: para caixas de diálogo de várias guias.

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 2 guias (tipo de nó = cq:Panel).

A primeira guia tem um dialogfieldset widget com um textfield e selection widget com 3 opções e um dispositivo que pode ser recolhido dialogfieldset com um textarea widget.

A segunda guia tem um dialogfieldset widget com 4 textfield widgets e um redutível dialogfieldset com 2 textfield widgets.

É definido pelo nó :

/apps/extjstraining/components/dialogbasics/rich

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 2 guias (tipo de nó = cq:Panel): 1 guia selection , a segunda guia depende da seleção na primeira guia (3 opções).

Possui 3 guias opcionais (tipo de nó = cq:Panel), cada um tem 2 campos de texto (tipo de nó = cq:Widget, xtype = textfield). Somente uma guia opcional é exibida de cada vez.

É definido pela variável switchtabs nó em:

/apps/extjstraining/components/dynamicdialogs/switchtabs

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

O nó da caixa de diálogo tem um " beforeshow" 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 o painel de guias que contém o painel de seleção e os 3 painéis opcionais.

O Ejst.x2 é definido na variável exercises.js arquivo em:

/apps/extjstraining/clientlib/js/exercises.js

No Ejst.x2.manageTabs() , como o valor de index for -1, todas as guias opcionais estarão ocultas (vai de 1 a 3).

A guia de seleção tem 2 ouvintes: uma que mostra a guia selecionada quando a caixa de diálogo é carregada (" loadcontent" e uma que mostra a guia selecionada quando a seleção é alterada (" selectionchanged"event):

loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

No Ejst.x2.showTab() método :

field.findParentByType('tabpanel') obtém o painel de guias que contém todas as guias ( field representa o widget de seleção)

field.getValue() obtém o valor da seleção, por exemplo: tab2

Ejst.x2.manageTabs() exibe a guia selecionada.

Cada guia opcional tem um ouvinte que oculta a guia em " render"event:

render="function(tab){Ejst.x2.hideTab(tab);}"

No Ejst.x2.hideTab() método :

tabPanel é o painel de guias que contém todas as guias

index é o índice da guia opcional

tabPanel.hideTabStripItem(index) oculta a guia

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 1 widget do painel de guias (tipo de nó = cq:Widget, xtype = tabpanel) com 1 painel (tipo de nó = cq:Panel)

O painel tem um widget smartfile (tipo de nó = cq:Widget, xtype = smartfile) e um widget ownerdraw (tipo de nó = cq:Widget, xtype = ownerdraw)

É definido pela variável arbitrary nó em:

/apps/extjstraining/components/dynamicdialogs/arbitrary

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

O widget ownerdraw tem um " loadcontent" listener que mostra informações sobre a página que contém o componente e 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 o objeto ownerdraw

path é definido com o caminho do conteúdo do componente (por exemplo: /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialog)

O Ejst.x2 é definido na variável exercises.js arquivo em:

/apps/extjstraining/clientlib/js/exercises.js

No 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 na caixa de diálogo

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 1 widget do painel de guias (tipo de nó = cq:Widget, xtype = tabpanel) com 1 painel (tipo de nó = cq:Panel).

O painel tem um widget de seleção/caixa de seleção (tipo de nó = cq:Widget, xtype = selection, tipo = checkbox) e um widget de conjunto de diálogo que pode ser recolhido (tipo de nó = cq:Widget, xtype = dialogfieldset) que está oculta por padrão, com 2 widgets de campo de texto (tipo de nó = cq:Widget, xtype = textfield).

É definido pela variável togglefields nó em:

/apps/extjstraining/components/dynamicdialogs/togglefields

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

a guia de seleção tem 2 ouvintes: um que mostra o conjunto de campos de diálogo quando o conteúdo é carregado (" loadcontent"event) e um que mostre o conjunto de campos de diálogo quando a seleção é alterada (" selectionchanged"event):

loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

O Ejst.x2 é definido na variável exercises.js arquivo em:

/apps/extjstraining/clientlib/js/exercises.js

No Ejst.x2.toggleFieldSet() método :

• box é o objeto de seleção
• panel é o painel que contém a seleção e os widgets de conjunto de caixas de diálogo
• fieldSet é o objeto dialog field
• show é o valor da seleção (true ou false)
• baseado em ' show" o conjunto de diálogo é exibido ou não

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 é baseado na solução pronta para uso multifield widget (que tem apenas um campo de texto), ele tem todos os recursos do multifield widget.

a caixa de diálogo Navegação em árvore ( treebrowse nó ) exibe uma janela com uma guia contendo um widget de navegação de caminho: ao clicar na seta, uma janela é aberta e você pode navegar por uma hierarquia e selecionar um item. O caminho do item é então adicionado ao campo de caminho e é mantido quando a caixa de diálogo é fechada.

uma caixa de diálogo baseada no Plug-in do Editor de Rich Text ( rteplugin nó ) que adiciona um botão personalizado ao Editor de Rich Text para inserir um texto personalizado no texto principal. Consiste em um richtext widget (RTE) e de um recurso personalizado adicionado por meio do mecanismo de plug-in do RTE.

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 1 widget do painel de guias (tipo de nó = cq:Widget, xtype = tabpanel) contendo um painel (tipo de nó = cq:Widget, xtype = panel).

O painel tem um multifield widget (tipo de nó = cq:Widget, xtype = multifield).

O multifield o widget tem um fieldconfig (tipo de nó = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) que se baseia no xtype personalizado ' ejstcustom':

• ' fieldconfig' é uma opção de configuração do CQ.form.MultiField objeto.

• ' optionsProvider' é uma configuração do ejstcustom widget. É definido com a variável Ejst.x3.provideOptions método definido em exercises.js em:

  /apps/extjstraining/clientlib/js/exercises.js

  e retorna 2 opções.

É definido pela variável multifield nó em:

/apps/extjstraining/components/customwidgets/multifield

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

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

Possui 3 campos: hiddenField (Campo de texto), allowField (ComboBox) e otherField (Campo de texto)

Substituições CQ.Ext.Component#initComponent para adicionar os 3 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álogo
• otherField é um CQ.Ext.form.TextField objeto

Substitui os métodos setValue, getValue e getRawValue de CQ.form.CompositeField para definir e recuperar o valor de CustomWidget com o formato:

<allowField value>/<otherField value>, e.g.: 'Bla1/hello'.

Registra-se como ' ejstcustom' xtype:

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

É definido por um nó (tipo de nó = cq:Dialog, xtype = dialog).

Exibe 1 widget do painel de guias (tipo de nó = cq:Widget, xtype = tabpanel) contendo um painel (tipo de nó = cq:Widget, xtype = panel).

O painel tem um widget personalizado (tipo de nó = cq:Widget, xtype = ejstbrowse)

É definido pela variável treebrowse nó em:

/apps/extjstraining/components/customwidgets/treebrowse

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

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

Define uma janela de navegação chamada browseWindow.

Substituições CQ.Ext.form.TriggerField para mostrar a janela de navegação quando a seta é clicada.

Define um CQ.Ext.tree.TreePanel objeto:

• Ele obtém seus dados ao chamar o servlet registrado em /bin/wcm/siteadmin/tree.json.
• Sua raiz é " apps/extjstraining".

Define um window objeto (CQ.Ext.Window):

• Baseado no painel predefinido.
• Possui um OK botão que define o valor do caminho selecionado e oculta o painel.

A janela está ancorada abaixo da Caminho campo.

O caminho selecionado é passado do campo de navegação para a janela em show evento.

Registra-se como ' ejstbrowse' xtype:

CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

É definido pelo nó do reteplugin em:

/apps/extjstraining/components/customwidgets/rteplugin

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

O rtePlugins o nó tem um nó filho inserttext (tipo de nó = nt:unstructured) que é nomeado após o plug-in. Ela tem uma propriedade chamada features, que define qual dos recursos do plug-in está disponível para o 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 objeto.

Os métodos a seguir definem a variável 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 título e texto quando o botão é posicionado com o mouse.
• execute() é chamado quando o botão é clicado e executa a ação do plug-in: ela exibe uma janela usada para definir o texto a ser incluído.

insertText() insere um texto usando o objeto de diálogo correspondente Ejst.InsertTextPlugin.Dialog (consulte posteriormente).

executeInsertText() é chamado pelo apply() método da caixa de diálogo, que é acionado quando a função OK é clicado.

Registra-se como ' inserttextPlug-in ':

CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

o Ejst.InsertTextPlugin.Dialog O objeto define a caixa de diálogo que é aberta ao clicar no botão do plug-in. A caixa de diálogo consiste em um painel, um formulário, um campo de texto e dois botões (OK e Cancelar).

Está definido em:

/apps/extjstraining/components/treeoverview

Sua caixa de diálogo permite definir o tamanho da janela e ancorar/desancorar a janela (veja os detalhes abaixo).

Recupera a largura, a altura e as propriedades ancoradas do repositório.

Exibe algum texto sobre o formato de dados da visão geral da árvore.

Incorpora a lógica de janela no componente jsp entre tags javascript.

Está definido em:

apps/extjstraining/components/treeoverview/content.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

O beforeload o ouvinte garante que o nó clicado seja carregado.

O root objeto define o caminho apps/extjstraining como a raiz da árvore.

tree (CQ.Ext.Window) é definida com base em treePanele é exibido com:

tree.show();

Se a janela já existir, ela será exibida com base na largura, altura e propriedades ancoradas recuperadas do repositório.

Exibe 1 guia com 2 campos para definir o tamanho (largura e altura) da janela de visão geral da árvore e 1 campo para ancorar/cancelar a âncora da janela

É definido por um nó (tipo de nó = cq:Dialog, xtype = panel).

O painel tem um widget sizefield (tipo de nó = cq:Widget, xtype = sizefield) e um widget de seleção (tipo de nó = cq:Widget, xtype = selection, tipo = radio) com 2 opções (true/false)

É definido pelo nó de diálogo em:

/apps/extjstraining/components/treeoverview/dialog

É renderizado no formato json solicitando:

http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

É exibido da seguinte maneira:

Está definido em:

/apps/extjstraining/components/gridoverview

Sua caixa de diálogo permite definir o tamanho da janela e ancorar/desancorar a janela.

Recupera a largura, a altura e as propriedades ancoradas do repositório.

Exibe algum texto como introdução ao formato de dados de visão geral da grade.

References javascript code that defines the GridPanel object:

<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

defaultgrid.js

Embeds javascript code between javascript tags that defines the Window object consuming the GridPanel object.

Is defined at:

apps/extjstraining/components/gridoverview/content.jsp

Define o grid tentando recuperar o componente da janela da página:

var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

If grid não existe, um CQ.Ext.grid.GridPanel objeto ( gridPanel) é definido ao chamar a função getGridPanel() método (veja abaixo). Esse método é definido em defaultgrid.js.

grid é um CQ.Ext.Windowobjeto, com base no GridPanel predefinido e é exibido: grid.show();

If grid já existe, ele é exibido com base na largura, altura e propriedades ancoradas recuperadas do repositório.

myData é uma matriz de dados estáticos formatada como uma tabela de 5 colunas e 4 linhas.

store é um CQ.Ext.data.Store objeto que consome myData.

store é carregado na memória:

store.load();

gridPanel é um CQ.Ext.grid.GridPanel objeto que consome store:

• as larguras de coluna são sempre reproporcionais:

  forceFit: true

• somente uma linha por vez pode ser selecionada:

  singleSelect:true

reader é um CQ.Ext.data.JsonReader objeto que lê a resposta do servlet no formato json para 3 colunas.

cm é um CQ.Ext.grid.ColumnModel objeto para 3 colunas.

As células da coluna "Test" podem ser editadas conforme são definidas com um editor:

editor: new CQ.Ext.form.TextField({})

as colunas são classificáveis:

cm.defaultSortable = true;

store é um CQ.Ext.data.GroupingStore objeto:

• ele obtém seus dados ao chamar o servlet registrado em " /bin/querybuilder.json" com alguns parâmetros usados para filtrar o query
• se baseia em reader, previamente definido
• a tabela é classificada de acordo com o jcr:path" em ordem crescente

gridPanel é um CQ.Ext.grid.EditorGridPanel objeto que pode ser editado:

• é baseada no store e no modelo de coluna cm

• somente uma linha por vez pode ser selecionada:

  sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

• o afteredit o ouvinte garante que, depois de uma célula no "Teste" foi editada:

  • a propriedade ' test' do nó no caminho definido pelo "jcr:path" é definida no repositório com o valor da célula
  • se o POST for bem-sucedido, o valor será adicionado ao store objeto, caso contrário, será rejeitado