Esta página descreve o uso de widgets na interface de usuário clássica, que foi descontinuada no AEM 6.4.
Adobe recomenda aproveitar o moderno, interface habilitada para toque baseado em Interface do usuário do Coral e Interface do usuário do Granite.
A interface baseada na Web do Adobe Experience Manager usa AJAX e outras tecnologias modernas de navegador para permitir a edição e formatação WYSIWYG do conteúdo por autores diretamente na página da Web.
O Adobe Experience Manager (AEM) usa a variável ExtJS biblioteca de widgets, que fornece os elementos da interface do usuário altamente sofisticados que funcionam em todos os navegadores mais importantes e permitem a criação de experiências de interface do usuário no nível 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 usando o AEM.
Para obter uma referência completa de todos os widgets disponíveis no AEM você pode consultar o documentação da API do widget ou à lista de xtypes existentes. Além disso, muitos exemplos mostrando como usar a estrutura ExtJS estão disponíveis no Sencha site, 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 alguns usos e extensões básicos. Esses componentes estão disponíveis na variável Uso de widgets ExtJS pacote em Compartilhamento de pacotes.
O pacote inclui exemplos de:
A interface clássica do Adobe Experience Manager é baseada 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 (e.g. "cq.extjstraining") and is used to include the library on the page.
Abaixo clientlib
crie a css
e js
pastas (nt:folder).
Abaixo clientlib
crie a css.txt
e js.txt
arquivos (nt:files). Esses arquivos .txt listam os arquivos incluídos na biblioteca.
Editar js.txt
: precisa começar com ' #base=js
' seguido pela lista dos arquivos que serã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
: precisa começar com ' #base=css
' seguido pela lista dos arquivos que serã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
coloque .css
arquivos e os recursos usados pelos arquivos css (por exemplo, my_icon.png
).
A manipulação das folhas de estilos descritas anteriormente é opcional.
Para incluir a biblioteca do cliente no componente de página jsp:
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>"/>
Para obter mais detalhes, consulte a descrição da variável <ui:includeclientlib> .
Em alguns casos, uma biblioteca do cliente deve estar disponível somente no modo de criação e deve ser excluída no modo de publicação. Pode ser obtido da seguinte forma:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Para seguir os tutoriais nesta página, instale o pacote chamado Uso de widgets ExtJS em uma instância de AEM local e crie uma página de exemplo na qual os componentes serão incluídos. Para fazer isso:
extjstraining
below /apps
no repositório./apps/geometrixx/components/page/headlibs.jsp
e adicione o cq.extjstraining
à categoria existente <ui:includeClientLib>
da seguinte maneira:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
e Uso de widgets ExtJS.Os exemplos nesta página são baseados no conteúdo de amostra do Geometrixx, que não é mais enviado com o AEM, tendo sido substituído por We.Retail. Consulte o documento Implementação de referência 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 apenas 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 o navegador para:
https://localhost:4502/<path-to-dialog>.-1.json
O primeiro componente do Uso de widgets ExtJS no Sidekick é chamado 1. Noções básicas da caixa de diálogo e inclui quatro caixas de diálogo básicas criadas com widgets prontos para uso e sem lógica personalizada de javascript. As caixas de diálogo são armazenadas abaixo /apps/extjstraining/components/dialogbasics
. Os diálogos básicos são:
full
node): ela exibe uma janela com 3 guias, cada guia com 2 campos de texto.singlepanel
node): ela exibe uma janela com 1 guia que tem 2 campos de texto.multipanel
node): sua exibição é a mesma da caixa de diálogo Completa, mas é criada de forma diferente.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.Inclua a 1. Noções básicas da caixa de diálogo na página de exemplo:
O componente é exibido da seguinte maneira:
O Total exibe uma janela com três guias, 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. As 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:
O Painel único exibe uma janela com uma guia que tem dois campos de texto. As 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 renomeie-o dialog
.O Vários painéis tem a mesma exibição da caixa de diálogo Total , mas é construído de forma diferente. As 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:
O Rico exibe uma janela com duas 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 quatro campos de texto e um conjunto de campos que pode ser recolhido com dois campos de texto. As 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 [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
widget com 3 opções e um dispositivo que pode ser recolhido [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 4 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widgets e um redutível dialogfieldset
com 2 [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 caixa de diálogo:
O segundo componente do Uso de widgets ExtJS 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 dispositivos prontos para uso e com lógica personalizada do javascript. As caixas de diálogo são armazenadas abaixo /apps/extjstraining/components/dynamicdialogs
. As caixas de diálogo dinâmicas são:
switchtabs
node): ela 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): ela 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 referência a ele.togglefield
node): ela exibe uma janela com uma guia. A guia tem uma caixa de seleção: quando essa opção é marcada, um conjunto de campos com dois campos de texto é exibido.Para incluir a 2. Caixas de diálogo dinâmicas na página de exemplo:
O componente é exibido da seguinte maneira:
O Guias de troca 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.
As suas principais características são:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): 1 guia selection , a segunda guia depende da seleção na primeira guia (3 opções).cq:Panel
), cada um tem 2 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 de cada 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 código javascript da seguinte maneira:
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
Ele é exibido da seguinte maneira:
Frequentemente, uma caixa de diálogo exibe o conteúdo do componente subjacente. O diálogo descrito aqui, chamado Arbitrário , puxa o conteúdo de um componente diferente.
O Arbitrário exibe uma janela com uma guia. A guia tem dois campos: uma para soltar ou fazer upload de um ativo e outra que exibe algumas informações sobre a página que contém o ativo e sobre ele, se houver referência a ele.
As suas principais características são:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) com 1 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 código javascript da seguinte maneira:
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
Para usar o Arbitrário caixa de diálogo:
O Alternar campos exibe uma janela com uma guia. A guia tem uma caixa de seleção: quando essa opção é marcada, um conjunto de campos com dois campos de texto é exibido.
As suas principais características são:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
) com 1 painel (tipo de nó = cq:Panel
).cq:Widget
[selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
[checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
cq:Widget
[dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
cq:Widget
[textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
togglefields
/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 código javascript da seguinte maneira:
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) com base em ' show
" o conjunto de diálogo é exibido ou não
Para usar o Alternar campos caixa de diálogo:
Os widgets prontos fornecidos com o AEM devem abranger a maioria dos casos de uso. No entanto, às vezes pode ser necessário criar um widget personalizado para cobrir um requisito específico do projeto. É possível criar widgets personalizados estendendo os existentes. Para ajudar você a começar a usar essa personalização, o Uso de widgets ExtJS 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 é baseado na solução pronta para uso multifield
widget (que tem apenas um campo de texto), ele tem todos os recursos do multifield
widget.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.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.Os widgets personalizados e o plug-in estão incluídos no componente chamado 3. Widgets personalizados do Uso de widgets ExtJS pacote. Para incluir esse componente na página de exemplo:
O Multifield personalizado a caixa de diálogo baseada em widget exibe uma janela com uma guia. A guia tem um widget de vários campos personalizado que, diferente do padrão, que tem um campo, tem dois campos: um menu suspenso com duas opções e um campo de texto.
O Multifield personalizado caixa de diálogo baseada em widget:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).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 se baseia no xtype personalizado ' ejstcustom
':
' fieldconfig
' é uma opção de configuração do [CQ.form.MultiField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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.
multifield
nó em:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
O widget de vários campos personalizado (xtype = ejstcustom
):
Ejst.CustomWidget
.CustomWidget.js
arquivo javascript em:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.CompositeField)
widget.hiddenField
(Campo de texto), allowField
(ComboBox) e otherField
(Campo de texto)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álogootherField
é um CQ.Ext.form.TextField objetosetValue
, 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'
.ejstcustom
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
O Treebrowse a caixa de diálogo baseada em widget exibe uma janela com uma guia contendo um widget de navegação de caminho personalizado: 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.
The custom treebrowse dialog:
cq:Dialog
[dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
cq:Widget
[tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
cq:Widget
[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 de navegação em árvore personalizado (xtype = ejstbrowse
):
Ejst.CustomWidget
.CustomBrowseField.js
arquivo javascript em:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/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://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
):
show
evento.ejstbrowse
’ xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para usar o Navegação de árvore personalizada caixa de diálogo baseada em widget:
O Plug-in do Editor de Rich Text (RTE) a caixa de diálogo baseada é uma caixa de diálogo baseada no Editor de Rich Text que tem um botão personalizado para inserir texto personalizado entre colchetes. O texto personalizado pode ser analisado por alguma lógica do lado do servidor (não implementada neste exemplo), por exemplo, para adicionar texto definido no caminho especificado:
O Plug-in do RTE caixa de diálogo baseada:
/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 é 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.O plug-in do RTE:
Ejst.InsertTextPlugin
.InsertTextPlugin.js
arquivo javascript em:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
[CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
objeto. [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/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 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.inserttext
Plug-in ':CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
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).Para usar o Plug-in do Editor de Rich Text (RTE) caixa de diálogo baseada:
O Plug-in do Editor de Rich Text (RTE) a caixa de diálogo baseada é exibida da seguinte maneira:
[]
[CQ.Ext.tree.TreePanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
TreePanel
A janela propriamente dita pode ser encaixada/desencaixada. Neste exemplo, a lógica da janela é incorporada no componente jsp entre <script></script> tags.
Para incluir a Visão geral da árvore componente para a página de exemplo:
O componente é exibido da seguinte maneira:
O componente Visão geral da árvore :
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).
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 ouvinte garante que o nó clicado seja carregado.root
objeto define o caminho apps/extjstraining
como a raiz da árvore.tree
( [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
) é definida com base em 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 2 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 Visão geral da grade incluído na Uso de widgets ExtJS pacote mostra como exibir dados em um formato tabular:
Para incluir o componente Visão geral da grade na página de exemplo:
O componente é exibido da seguinte maneira:
Em sua versão inicial, a variável Visão geral da grade componente exibe uma janela com dados estáticos em um formato tabular. Neste exemplo, a lógica é incorporada no componente jsp de duas maneiras:
The Grid Overview component:
/apps/extjstraining/components/gridoverview
O componente jsp:
Recupera a largura, a altura e as propriedades ancoradas do repositório.
Displays some text as introduction to the grid overview data format.
References javascript code that defines the GridPanel object:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
Incorpora código javascript entre tags javascript que define o objeto Window consumindo o objeto GridPanel.
Está definido em:
apps/extjstraining/components/gridoverview/content.jsp
O código javascript incorporado no componente jsp:
grid
tentando recuperar o componente da janela da página:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
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.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
objeto, com base no GridPanel predefinido e é exibido: grid.show();
grid
já existe, ele é exibido com base na largura, altura e propriedades ancoradas recuperadas do repositório.O arquivo javascript ( defaultgrid.js
) referenciado no componente jsp define o getGridPanel()
método chamado pelo script incorporado no JSP e retorna um [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
, com base em dados estáticos. A lógica é a seguinte:
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](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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
Ao instalar o pacote, a variável content.jsp
do Visão geral da grade componente exibe uma grade 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 da janela recebe suas [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
chamando o getGridPanel()
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 variável referencesearch.js
arquivo em /apps/extjstraining/components/gridoverview/referencesearch.js
. Ao alternar o arquivo .js referenciado no componente jsp, a grade será baseada nos dados recuperados do repositório.
Alterne o arquivo .js mencionado no componente jsp:
content.jsp
do componente, comente a linha que inclui a defaultgrid.js
para ter a seguinte aparência:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
para ter 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 a variável getGridPanel()
método chamado do componente jsp e retorna um [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
, com base em dados recuperados dinamicamente do repositório. A lógica em referencesearch.js
define alguns dados dinâmicos como base para o Painel de grade:
reader
é um [CQ.Ext.data.JsonReader](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
objeto que lê a resposta do servlet no formato json para 3 colunas.cm
é um [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
objeto para 3 colunas.editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
é um [CQ.Ext.data.GroupingStore](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
objeto:
/bin/querybuilder.json
" com alguns parâmetros usados para filtrar o queryreader
, previamente definidogridPanel
é um [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
o afteredit
o ouvinte garante que, depois de uma célula no "Teste" foi editada:
test
' do nó no caminho definido pelo "jcr:path" é definida no repositório com o valor da célulastore
objeto, caso contrário, será rejeitado