Esta página descreve o uso de widgets na interface clássica, que foi descontinuada no AEM 6.4.
O Adobe recomenda que você aproveite a interface de usuário moderna e habilitada para toque com base em IU Coral e IU Granite.
A interface baseada na Web da Adobe Experience Manager usa AJAX e outras tecnologias modernas de navegador para permitir a edição e formatação WYSIWYG de conteúdo pelos autores diretamente na página da Web.
A Adobe Experience Manager (AEM) usa a biblioteca de widgets ExtJS, que fornece os elementos altamente refinados da interface do usuário que funcionam em todos os navegadores mais importantes e permitem a criação de experiências de interface de nível de desktop.
Esses widgets são incluídos no AEM e, além de serem usados pelo próprio AEM, podem ser usados por qualquer site criado usando AEM.
Para obter uma referência completa de todos os widgets disponíveis no AEM, consulte a documentação da API do widget ou a lista de xtypes existentes. Além disso, muitos exemplos que mostram como usar a estrutura ExtJS estão disponíveis no site Sencha, o proprietário da estrutura.
Esta página fornece algumas informações sobre como usar e estender widgets. Primeiro, descreve como incluir o código do lado do cliente em uma página. Em seguida, ele descreve alguns componentes de amostra que foram criados para ilustrar algumas extensões e usos básicos. Esses componentes estão disponíveis no pacote Usando widgets ExtJS em 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 de cliente:
Crie um nó abaixo de /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 de clientlib
crie as pastas css
e js
(nt:folder).
Abaixo de clientlib
crie os arquivos css.txt
e js.txt
(nt:files). Esses arquivos .txt listas os arquivos que estão incluídos na biblioteca.
Editar js.txt
: é necessário start 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
: é necessário start 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 da pasta js
, posicione os arquivos javascript que pertencem à biblioteca.
Abaixo da pasta css
, posicione os arquivos .css
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 código javascript e folhas de estilo:
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
em que
<category-nameX>
é o nome da biblioteca do lado do cliente.
para incluir somente código javascript:
<ui:includeClientLib js="<category-name>"/>
Para obter mais detalhes, consulte a descrição da tag <ui:includeClientLib>.
Em alguns casos, uma biblioteca de cliente deve estar disponível somente no modo de autor 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 desta página, instale o pacote chamado Usando widgets ExtJS em uma instância de AEM local e crie uma página de amostra na qual os componentes serão incluídos. Para isso:
extjstraining
abaixo de /apps
no repositório./apps/geometrixx/components/page/headlibs.jsp
e adicione a categoria cq.extjstraining
à tag <ui:includeClientLib>
existente da seguinte forma:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
e chame-a de Usando widgets ExtJS.Os exemplos nesta página são baseados no conteúdo de amostra do Geometrixx, que não é mais enviado com AEM, tendo sido substituído por We.Retail. Consulte o documento Implementação de referência We.Retail para obter mais informações sobre como baixar e instalar o Geometrixx.
Normalmente, as caixas de diálogo são usadas para editar conteúdo, mas também podem exibir informações. Uma maneira fácil de visualização uma caixa de diálogo completa é acessar sua representação em formato json. Para fazer isso, aponte o navegador para:
https://localhost:4502/<path-to-dialog>.-1.json
O primeiro componente do grupo Usando widgets ExtJS no Sidekick é chamado de 1. Conceitos básicos da caixa de diálogo e inclui quatro diálogos básicos que são criados com widgets prontos e sem lógica javascript personalizada. As caixas de diálogo são armazenadas abaixo de /apps/extjstraining/components/dialogbasics
. Os diálogos básicos são:
full
nó): exibe uma janela com 3 guias, cada uma com 2 campos de texto.singlepanel
): exibe uma janela com 1 guia que tem 2 campos de texto.multipanel
): sua exibição é igual à caixa de diálogo Completo, mas é criada de forma diferente.design
): ela exibe uma janela com 2 guias. A primeira guia tem um campo de texto, um menu suspenso e uma área de texto flexível. 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 1. Componente Informações básicas da caixa de diálogo na página de amostra:
O componente é exibido da seguinte maneira:
A caixa de diálogo Completo exibe uma janela com três guias, cada uma com dois campos de texto. É a caixa de diálogo padrão do componente Noções básicas da caixa de diálogo. 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:
A caixa de diálogo 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
.A caixa de diálogo Multi Panel tem a mesma exibição que a caixa de diálogo Full, mas foi criada 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:
A caixa de diálogo Rico exibe uma janela com duas guias. A primeira guia tem um campo de texto, um menu suspenso e uma área de texto flexível. 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 um [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
widget com 3 opções, e um [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
redutível 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 dialogfieldset
redutível 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 a caixa de diálogo Rich:
O segundo componente do grupo Usando widgets ExtJS no Sidekick é chamado de 2. Diálogos dinâmicos e inclui três diálogos dinâmicos que são criados com widgets predefinidos e com lógica javascript personalizada. As caixas de diálogo são armazenadas abaixo de /apps/extjstraining/components/dynamicdialogs
. As caixas de diálogo dinâmicas são:
switchtabs
): ela exibe uma janela com duas guias. A primeira guia tem uma seleção de rádio 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
nó): 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
nó): exibe uma janela com uma guia. A guia tem uma caixa de seleção: quando estiver marcado, um conjunto de campos com dois campos de texto será exibido.Para incluir 2. Componente Diálogos dinâmicos na página de amostra:
O componente é exibido da seguinte maneira:
A caixa de diálogo Alternar guias exibe uma janela com duas guias. A primeira guia tem uma seleção de rádio 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 de seleção, a segunda guia depende da seleção na primeira guia (3 opções).cq:Panel
), cada uma 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 por vez.switchtabs
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 evento e código javascript da seguinte maneira:
O nó de diálogo tem um listener " beforeshow
" que oculta todas as guias opcionais antes que a caixa de diálogo seja mostrada:
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 três painéis opcionais.
O objeto Ejst.x2
é definido no arquivo exercises.js
em:
/apps/extjstraining/clientlib/js/exercises.js
No método Ejst.x2.manageTabs()
, como o valor de index
é -1, todas as guias opcionais estão ocultas (i vai de 1 a 3).
A guia de seleção tem dois ouvintes: uma que mostra a guia selecionada quando a caixa de diálogo é carregada (“evento loadcontent
”) e outra que mostra a guia selecionada quando a seleção é alterada (" evento selectionchanged
"):
loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
No método Ejst.x2.showTab()
:
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 no evento " render
":
render="function(tab){Ejst.x2.hideTab(tab);}"
No método Ejst.x2.hideTab()
:
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:
Muitas vezes, uma caixa de diálogo exibe o conteúdo do componente subjacente. A caixa de diálogo descrita aqui, chamada de caixa de diálogo Arbitrário, extrai o conteúdo de um componente diferente.
A caixa de diálogo Arbitrary exibe uma janela com uma guia. A guia tem dois campos: um para soltar ou carregar um ativo e outro que exibe algumas informações sobre a página que o contém e sobre o ativo, se houver uma referência.
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 de desenho próprio (tipo de nó = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
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 evento e código javascript da seguinte maneira:
O widget ownerdraw tem um listener " loadcontent
" 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
é definida com o caminho de conteúdo do componente (por exemplo: /content/geometrixx/br/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)
O objeto Ejst.x2
é definido no arquivo exercises.js
em:
/apps/extjstraining/clientlib/js/exercises.js
No método Ejst.x2.showInfo()
:
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 em formato json
ownerdraw.getEl().update(html);
exibe o html criado na caixa de diálogo
Para usar a caixa de diálogo Arbitrário:
A caixa de diálogo Alternar campos exibe uma janela com uma guia. A guia tem uma caixa de seleção: quando estiver marcado, um conjunto de campos com dois campos de texto será 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
, 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 de conjunto de diálogo flexível (tipo de nó = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) que está oculto por padrão, com 2 widgets de campo de texto (tipo de nó = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
) …togglefields
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 evento e código javascript da seguinte maneira:
a guia de seleção tem dois ouvintes: um que mostra o conjunto de diálogo quando o conteúdo é carregado (“evento loadcontent
”) e outro que mostra o conjunto de diálogo quando a seleção é alterada (“evento selectionchanged
”):
loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
O objeto Ejst.x2
é definido no arquivo exercises.js
em:
/apps/extjstraining/clientlib/js/exercises.js
No método Ejst.x2.toggleFieldSet()
:
box
é o objeto de seleção
panel
é o painel que contém a seleção e os widgets dialogfieldset
fieldSet
é o objeto dialogfieldset
show
é o valor da seleção (true ou false) com base em ' show
', o conjunto de diálogo é exibido ou não
Para usar a caixa de diálogo Alternar campos:
Os widgets prontos fornecidos com 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 ajudá-lo a começar a usar essa personalização, o pacote Usando widgets ExtJS inclui três caixas de diálogo que usam três widgets personalizados diferentes:
multifield
nó) 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 no widget multifield
predefinido (que tem apenas um campo de texto), ele tem todos os recursos do multifield
widget.treebrowse
nó) exibe uma janela com uma guia que contém um widget de navegação em 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 é então adicionado ao campo de caminho e persiste quando a caixa de diálogo é fechada.rteplugin
nó) que adiciona um botão personalizado ao Editor de Rich Text para inserir algum texto personalizado ao texto principal. Ele consiste em um richtext
widget (RTE) e de um recurso personalizado que é adicionado por meio do mecanismo de plug-in do RTE.Os widgets personalizados e o plug-in são incluídos no componente chamado 3. Widgets personalizados do pacote Usando widgets ExtJS. Para incluir esse componente na página de amostra:
A caixa de diálogo baseada no widget Multicampo personalizado exibe uma janela com uma guia. A guia tem um widget de vários campos 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 caixa de diálogo Multicampo Personalizado baseada no 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
(tipo de nó = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
).multifield
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 objeto [CQ.form.MultiField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
.
' optionsProvider
' é uma configuração do widget ejstcustom
. É definido com o método Ejst.x3.provideOptions
definido em exercises.js
em:
/apps/extjstraining/clientlib/js/exercises.js
e retorna 2 opções.
multifield
em:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
O widget multicampo personalizado (xtype = ejstcustom
):
Ejst.CustomWidget
.CustomWidget.js
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)
.hiddenField
(Campo de texto), allowField
(ComboBox) e otherField
(Campo de texto)CQ.Ext.Component#initComponent
para adicionar os 3 campos:
allowField
é um objeto CQ.form. Selectionobject 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 objeto CQ.Ext.form. TextFieldsetValue
, 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);
A caixa de diálogo baseada no widget Multicampo personalizado é exibida da seguinte maneira:
A caixa de diálogo personalizada com base no widget Treebrowse exibe uma janela com uma guia contendo um widget de navegação de caminho personalizado: quando você clica na seta, uma janela é aberta na qual você pode navegar por uma hierarquia e selecionar um item. O caminho do item é então adicionado ao campo de caminho e persiste quando a caixa de diálogo é fechada.
A caixa de diálogo personalizada de navegação por árvore:
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)
).cq:Widget
, xtype = ejstbrowse
)treebrowse
em:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
O widget personalizado de navegadores terrestres (xtype = ejstbrowse
):
Ejst.CustomWidget
.CustomBrowseField.js
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
( [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
.ejstbrowse
’:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para usar a caixa de diálogo baseada no widget Custom Treebrowse:
A caixa de diálogo baseada no plug-in Editor de Rich Text (RTE) é uma caixa de diálogo baseada no Editor de Rich Text que tem um botão personalizado para inserir algum 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 algum texto definido no caminho especificado:
A caixa de diálogo ERT plugin baseada em:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
tem um nó filho inserttext
(tipo de nó = nt:unstructured
) nomeado após o plug-in. Ela 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
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)
. [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 disponibilizados pelo plug-in.initializeUI()
adiciona o novo botão à barra de ferramentas RTE.notifyPluginConfig()
exibe o título e o texto quando o botão é posicionado com o cursor do mouse.execute()
é chamado quando o botão é clicado e executa a ação do plug-in: exibe uma janela que é usada para definir o texto a ser incluído.insertText()
insere um texto usando o objeto de diálogo correspondente Ejst.InsertTextPlugin.Dialog
(consulte a seguir).executeInsertText()
é chamado pelo apply()
método da caixa de diálogo, que é acionado quando o botão OK é clicado.inserttext
’:CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
define a caixa de diálogo que é aberta quando o botão do plug-in é clicado. 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 a caixa de diálogo baseada no plug-in Editor de Rich Text (RTE):
A caixa de diálogo baseada no plug-in Editor de Rich Text (RTE) é exibida da seguinte maneira:
Este exemplo mostra apenas como implementar a parte do lado do cliente da lógica: os espaços reservados ([text]) devem então ser analisados explicitamente no lado do servidor (por exemplo, no JSP do componente).
O objeto predefinido [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)
oferece uma representação em árvore da interface do usuário de dados estruturados em árvore. O componente Visão geral da árvore incluído no pacote Usando widgets ExtJS mostra como usar o objeto TreePanel
para exibir uma árvore JCR abaixo de um determinado caminho. A janela em si pode ser encaixada/desencaixada. Neste exemplo, a lógica da janela é incorporada no componente jsp entre as tags <script></script>.
Para incluir o componente Visão geral da árvore na página de amostra:
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) será criado:
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
verifica se o nó clicado está carregado.root
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)
) é definido com base no predefinido 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. É composto pelos seguintes elementos:
O componente Visão geral da grade incluído no pacote Usando widgets ExtJS mostra como exibir dados em um formato tabular:
Para incluir o componente Visão geral da grade à página de amostra:
O componente é exibido da seguinte maneira:
Em sua versão predefinida, o componente Visão geral da grade exibe uma janela com dados estáticos em um formato tabular. Neste exemplo, a lógica é incorporada no componente jsp de duas maneiras:
O componente Visão geral da grade:
/apps/extjstraining/components/gridoverview
O componente jsp:
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.
Refere o 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 código javascript entre tags javascript que definem o objeto Window que usa 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 de janela da página:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
não existir, um objeto CQ.Ext.grid.GridPanel ( gridPanel
) será definido chamando o método getGridPanel()
(veja abaixo). Este 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á existir, ele será exibido com base nas propriedades de largura, altura e ancoragem recuperadas do repositório.O arquivo javascript ( defaultgrid.js
) referenciado no componente jsp define o método getGridPanel()
que é chamado pelo script incorporado no JSP e retorna um objeto [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 formatados 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 das colunas são sempre redistribuídas:
forceFit: true
somente uma linha por vez pode ser selecionada:
singleSelect:true
Quando você instala o pacote, o content.jsp
do componente Visão geral da grade 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.Conforme explicado na seção anterior, o objeto window obtém seu objeto [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 método getGridPanel()
definido no arquivo defaultgrid.js
em /apps/extjstraining/components/gridoverview/defaultgrid.js
. O componente Grid Overview fornece uma implementação diferente para o método getGridPanel()
, definido no arquivo referencesearch.js
em /apps/extjstraining/components/gridoverview/referencesearch.js
. Ao alternar o arquivo .js mencionado 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 o arquivo defaultgrid.js
, para que ele tenha a seguinte aparência:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
, para que ele 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 método getGridPanel()
chamado a partir do componente jsp e retorna um objeto [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 uma base para o GridPanel:
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
, definido antecipadamentegridPanel
é 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:
é baseado no store
predefinido 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 listener afteredit
verifica se após uma célula na coluna "Test" foi editada:
test
' do nó no caminho definido pela coluna "jcr:path" está definida no repositório com o valor da célulastore
; caso contrário, será rejeitado