Chuyển đến nội dung chính

[WIDGET] Multifield with custom xtype

When started working with CQ, one of the cool feature was the list component which allow to add new paths with the plus “+” sign. Based on my experience, it is one of the mandatory requirement to provide such flexibility, then setting a fixed number of text fields.
To achieve the same, please refer to the steps below:
Within your app project, define a folder called “clientlib”. Create a text files called “js.txt” and specify the name of the js file which holds the custom xtype definition.
Example:
#base=js
CustomPathField.js
Define your js file which extends CQ.form.CompositeField and specify attributes required for the custom type. Here is an example for the same:
/**
* @class MyClientLib.CustomPathFieldWidget
* @extends CQ.form.CompositeField
* This is a custom path field with link text and target
* @param {Object} config the config object
*/
/**
* @class Ejst.CustomWidget
* @extends CQ.form.CompositeField This is a custom widget based on
*          {@link CQ.form.CompositeField}.
* @constructor Creates a new CustomWidget.
* @param {Object}
*            config The config object
*/
MyClientLib.CustomPathFieldWidget = CQ.Ext.extend(CQ.form.CompositeField, {
   /**
    * @private
    * @type CQ.Ext.form.TextField
    */
   hiddenField: null,
   /**
    * @private
    * @type CQ.Ext.form.TextField
    */
   linkText: null,
   /**
    * @private
    * @type CQ.Ext.form.TextField
    */
   linkURL: null,
   /**
    * @private
    * @type CQ.Ext.form.CheckBox
    */
   openInNewWindow: null,
   /**
    * @private
    * @type CQ.Ext.form.FormPanel
    */
   formPanel: null,
   constructor: function(config) {
       config = config || {};
       var defaults = {“
           border”: true,
           “labelWidth”: 75,
           “layout”: “form”
               // ”columns”:6
       };
       config = CQ.Util.applyDefaults(config, defaults);
       MyClientLib.CustomPathFieldWidget.superclass.constructor.call(this, config);
   },
   // overriding CQ.Ext.Component#initComponent
   initComponent: function() {
       MyClientLib.CustomPathFieldWidget.superclass.initComponent.call(this);
       // Hidden field
       this.hiddenField = new CQ.Ext.form.Hidden({
           name: this.name
       });
       this.add(this.hiddenField);
       // Link text
       this.add(new CQ.Ext.form.Label({
           cls: “customwidget - label”,
           text: “Link Text”
       }));
       this.linkText = new CQ.Ext.form.TextField({
           cls: “customwidget - 1″,
           fieldLabel: “Link Text: “,
           maxLength: 80,
           maxLengthText: “A maximum of 80 characters is allowed
           for the Link Text.”,
           allowBlank: true,
           listeners: {
               change: {
                   scope: this,
                   fn: this.updateHidden
               }
           }
       });
       this.add(this.linkText);
       // Link URL
       this.add(new CQ.Ext.form.Label({
           cls: “customwidget - label”,
           text: “Link URL”
       }));
       this.linkURL = new CQ.form.PathField({
           cls: “customwidget - 2″,
           fieldLabel: “Link URL: “,
           allowBlank: false,
           width: 225,
           listeners: {
               change: {
                   scope: this,
                   fn: this.updateHidden
               },
               dialogclose: {
                   scope: this,
                   fn: this.updateHidden
               }
           }
       });
       this.add(this.linkURL);
       // Link openInNewWindow
       this.openInNewWindow = new CQ.Ext.form.Checkbox({
           cls: “customwidget - 3″,
           boxLabel: “New window”,
           listeners: {
               change: {
                   scope: this,
                   fn: this.updateHidden
               },
               check: {
                   scope: this,
                   fn: this.updateHidden
               }
           }
       });
       this.add(this.openInNewWindow);
   },
   processInit: function(path, record) {
       this.linkText.processInit(path, record);
       this.linkURL.processInit(path, record);
       this.openInNewWindow.processInit(path, record);
   },
   setValue: function(value) {
       var link = JSON.parse(value);
       this.linkText.setValue(link.text);
       this.linkURL.setValue(link.url);
       this.openInNewWindow.setValue(link.openInNewWindow);
       this.hiddenField.setValue(value);
   },
   getValue: function() {
       return this.getRawValue();
   },
   getRawValue: function() {
       var link = {“
           url”: this.linkURL.getValue(),
           “text”: this.linkText.getValue(),
           “openInNewWindow”: this.openInNewWindow.getValue()
       };
       return JSON.stringify(link);
   },
   updateHidden: function() {
       this.hiddenField.setValue(this.getValue());
   }
});
CQ.Ext.reg(‘mypathfield’, MyClientLib.CustomPathFieldWidget);
So, once we have defined that, its time to use in your component Here is snippet from dialog.xml from component:
<linkspanel
jcr:primaryType="cq:Panel"
border="false"
height=""
title="Links"
width="">
<items jcr:primaryType="cq:WidgetCollection">
<links
jcr:primaryType="cq:Widget"
fieldDescription="Press + to add more links"
fieldLabel="Links"
hideLabel="true"
name="./links"
width="1000"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="mypathfield"/>
<listeners
jcr:primaryType="nt:unstructured" />
</links>
</items>
</linkspanel>
And this is how it appear !

Example of custom xtype

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

[PERFORMANCE] Adobe WEM/CQ performance tuning

Adobe WEM/CQ performance tuning Contents Caching-related configurations CRX Bundle cache CRX Search index handler (Lucene) cache Tar PM index cache Scalability Maintenance Optimizing Tar Files (for Tar Persistence Manager) Data Store Garbage Collection Main documentation you should consult first: http://dev.day.com/docs/en/cq/current/deploying/performance.html http://dev.day.com/content/kb/home/cq5/CQ5Troubleshooting/performancetuningtips.html Caching-related configurations CRX Bundle cache CRX caches bundles, consisting of a node with all its properties. This is used by all bundle-based Persistence Managers. The default size of BundleCache is 8 MB. If this is too small it can cause an excessive number of read-accesses to the underlying persistence layer. Set the bundleCacheSize to something larger than the default. See more here: http://dev.day.com/docs/en/cq/current/deploying/performance.html#CRX%20Bundle%20Cache CRX Search index handler (Lucene...
Đăng nhận xét
Đọc thêm

[Query Builder] Advanced Search

Using the Advanced Search When using a list, select from the 'Build list using' options 'Advanced Search.' This will open a new tab in the list window with one text box labeled: 'Querybuilder Predicate Notation.' This is asking for a few lines of code to define search parameters. Example Code - With Explanations of Results Searching for Pages type=cq:Page property=jcr:content/jcr:title property.value=Places 'type' defines what sort of object you'll be searching for (it's usually a page). 'property' defines what property of the object you'll be filtering by; in this case, its by the title. 'property.value' defines your search term. So this search would be searching all PAGES with the TITLE of PLACES. So it would find every page titled Places. *IMPORTANT* Searches by title ARE case-sensitive, so 'Places' is not the same as 'places'. type=cq:Page path=/cq/sandbox property=jcr:cont...
Đăng nhận xét
Đọc thêm

How to add a new supported language in CQ / WEM (Translator in CQ)

Use case:  You want to add new language to CQ Change display language options in translator grid Change language name and default countries  Solution: You can access translator UI in CQ with following URL http://<HOST>:<PORT>/libs/cq/i18n/translator.html Create new language location for Dictionary Go to CRXDE lite (or your favorite JCR browser) and add this structure (assuming /apps/myapp/i18n as a typical location for custom apps): /apps/myapp/i18n [sling:Folder]     - de [nt:unstructured]         + jcr:mixinTypes = [mix:language]         + jcr:language = de     - fr [nt:unstructured]         + jcr:mixinTypes = [mix:language]         + jcr:language = fr Then reload the translator and the path /apps/ myapp /i18n should show up in the drop-down at the top. Note: the translator will only s...
Đăng nhận xét
Đọc thêm