Esta página descreve o uso de widgets na interface clássica do, que foi descontinuada no AEM 6.4.
A Adobe recomenda usar o moderno, interface habilitada para toque baseado em Coral UI e Interface do Granite.
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:
A interface clássica do Adobe Experience Manager é criada em ExtJS 3.4.0.
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:
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 o css
e js
pastas (nt:folder).
Abaixo clientlib
criar o css.txt
e js.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:
#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:
#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
).
O manuseio das folhas de estilos descritas anteriormente é opcional.
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"/><%
}
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:
extjstraining
abaixo /apps
no repositório./apps/geometrixx/components/page/headlibs.jsp
e adicione o cq.extjstraining
categoria ao existente <ui:includeClientLib>
da seguinte forma:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
e chame-o Utilização de widgets ExtJS.Os exemplos desta página são baseados no conteúdo de amostra do Geometrixx, que não é mais enviado com AEM, tendo sido substituído pelo We.Retail. Consulte a Implementação de referência do We.Retail para saber como baixar e instalar o Geometrixx.
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:
full
node): exibe uma janela com três guias, cada uma com dois campos de texto.singlepanel
node): exibe uma janela com uma guia que tem dois campos de texto.multipanel
node): sua exibição é a mesma da caixa de diálogo Completa, mas é criada de forma diferente.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:
O componente é exibido da seguinte maneira:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
.cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/full
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
A caixa de diálogo é exibida da seguinte maneira:
A variável Painel único exibe uma janela com uma guia que tem dois campos de texto. Suas características são:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)/apps/extjstraining/components/dialogbasics/singlepanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
Para usar a caixa de diálogo Painel único:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
e renomeá-la 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:
cq:Dialog
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
).cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/multipanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
Para usar a caixa de diálogo Vários painéis:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
). [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget com um [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
e uma [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
widget com três opções e um recolhível [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
com um [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
widget. [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget com quatro [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widgets, e um dialogfieldset
com dois [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widgets./apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Para usar o Rico diálogo:
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:
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.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.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:
O componente é exibido da seguinte maneira:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): uma guia de seleção, a segunda guia depende da seleção na primeira guia (três opções).cq:Panel
), cada um tem dois campos de texto (tipo de nó = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
). Somente uma guia opcional é exibida por vez.switchtabs
nó em:/apps/extjstraining/components/dynamicdialogs/switchtabs
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:
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 o tabpanel
que contém o painel de seleção e os três painéis opcionais.Ejst.x2
o objeto é definido na variável exercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.manageTabs()
como o valor de index
é -1, todas as guias opcionais ficam ocultas (vai de 1 a 3).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);}"
Ejst.x2.showTab()
método,field.findParentByType('tabpanel')
obtém o tabpanel
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.render
Evento ":render="function(tab){Ejst.x2.hideTab(tab);}"
Ejst.x2.hideTab()
método,tabPanel
é a tabpanel
que contém todas as guiasindex
é o índice da guia opcionaltabPanel.hideTabStripItem(index)
o oculta o guiaEla é exibida da seguinte maneira:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nó = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) com um painel (tipo de nó = cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
) e um widget ownerdraw (tipo de nó = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
nó em:/apps/extjstraining/components/dynamicdialogs/arbitrary
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:
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 o ownerdraw
objetopath
é definido com o caminho do conteúdo do componente (por exemplo, /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs
)Ejst.x2
o objeto é definido na variável exercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
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álogoPara usar o Arbitrário diálogo:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (nó tipo = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
) com um painel (nó tipo = cq:Panel
).cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, tipo = [checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
) e um widget dialogfieldset dobrável (nó tipo = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/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/developing/components/classic-ui-components/xtypes.md#textfield)
).togglefields
nó em:/apps/extjstraining/components/dynamicdialogs/togglefields
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:
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);}"
Ejst.x2
o objeto é definido na variável exercises.js
arquivo em:/apps/extjstraining/clientlib/js/exercises.js
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ãoPara usar o Alternar campos , faça o seguinte:
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:
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 recursos multifield
(que tem apenas um campo de texto), ele tem todos os recursos do multifield
widget.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.rteplugin
nó) que adiciona um botão personalizado ao Editor de Rich Text para inserir texto personalizado no texto principal. Consiste em uma richtext
(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:
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:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nó = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contendo um painel (tipo de nó = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).multifield
widget (tipo de nó = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
).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 de 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 duas opções.
multifield
nó em:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
O personalizado multifield
widget (xtype = ejstcustom
):
Ejst.CustomWidget
CustomWidget.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField)
widget.hiddenField
(Textfield), allowField
(ComboBox) e otherField
(Campo de texto)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 objetosetValue
e getValue
getRawValue
o CQ.form.CompositeField para definir e recuperar o valor de CustomWidget com o formato:<allowField value>/<otherField value>, for example: 'Bla1/hello'
.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:
Treebrowse
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
:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nó = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contendo um painel (tipo de nó = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = ejstbrowse
)treebrowse
nó em:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
O widget personalizado de navegação na árvore (xtype = ejstbrowse
):
Ejst.CustomWidget
CustomBrowseField.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [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./bin/wcm/siteadmin/tree.json
.apps/extjstraining
".window
objeto ( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
):
show
evento.ejstbrowse
’ xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para usar o Treebrowse Personalizado caixa de diálogo baseada em widget:
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:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
o nó tem um nó filho inserttext
(tipo de nó = nt:unstructured
) que tem o nome do plug-in. Ele tem uma propriedade chamada features
que define quais dos recursos de plug-in estão disponíveis para o RTE.O plug-in RTE:
Ejst.InsertTextPlugin
InsertTextPlugin.js
Arquivo JavaScript em:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
[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. [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 correspondente Ejst.InsertTextPlugin.Dialog
(veja depois).executeInsertText()
é chamado pelo apply()
método da caixa de diálogo, que é acionado quando o OK é clicado.inserttext
Plugin ':CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
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:
A caixa de diálogo com base em plug-in da editor Rich Text (RTE) é exibida da seguinte maneira:
Este exemplo mostra apenas como implementar o lado do cliente parte da lógica: os espaços reservados ([texto]) devem então ser analisados no lado do servidor explicitamente (por exemplo, no JSP do componente).
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:
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:
apps/extjstraining/components/treeoverview/content.jsp
O código JavaScript incorporado no componente jsp:
tree
tentando recuperar uma janela de árvore da página.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
beforeload
o listener verifica se o nó selecionado está carregado.root
objeto define o caminho apps/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ão treePanel
, e é exibido com:tree.show();
A caixa de diálogo do componente:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = [sizefield](/docs/experience-manager-65/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/developing/components/classic-ui-components/xtypes.md#selection)
, tipo = radio
) com duas opções (true/false)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Um Painel de grade representa dados em um formato tabular de linhas e colunas. Ele é composto pelo seguinte:
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:
Para incluir o componente Visão geral da grade na página de exemplo:
O componente é exibido da seguinte maneira:
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:
O componente de Visão geral da grade:
/apps/extjstraining/components/gridoverview
O jsp do componente:
<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.apps/extjstraining/components/gridoverview/content.jsp
O código JavaScript incorporado no componente jsp:
grid
tentando recuperar o componente de janela da página:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
não existir, uma CQ.Ext.grid.GridPanel objeto ( gridPanel
) é definido ao chamar o getGridPanel()
(veja abaixo). Este método é definido em defaultgrid.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();
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
é um CQ.Ext.data.Store
objeto que consome myData
.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 consome store
:
as larguras das colunas são sempre reproporcionadas:
forceFit: true
somente uma linha por vez pode ser selecionada:
singleSelect:true
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:
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:
content.jsp
do componente, comente a linha que inclui a variável defaultgrid.js
para que tenha a seguinte aparência:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
para que tenha a seguinte aparência:<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
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.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)({})
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:
/bin/querybuilder.json
" com alguns parâmetros usados para filtrar a queryreader
, definido com antecedênciagridPanel
é 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 coluna cm
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:
test
' do nó no caminho definido pelo "jcr:path"A coluna é definida no repositório com o valor da célulastore
objeto, caso contrário, será rejeitado