How to create a new xtype containing html5smartimage

[Sai_ratna]

HI,

I am trying to create a new xtype that contains a html5smartimage. I have used following code in new xtype clientlib inside initComponent method.

    this.slide = new CQ.html5.form.SmartImage({
            title:"Image",
            ddGroups: ["media"],
            ddAccept: ["image/.*"],
            border: true,
            height: 250,
            disableZoom: true,
            allowUpload: false,
            fileNameParameter:"./fileName",
            fileReferenceParameter:"./fileReference",
            cropParameter:"./imageCrop",
            mapParameter:"./imageMap",
            requestSuffix:".img.png",
            rotateParameter:"./imageRotate",
            uploadUrl:"/tmp/upload/*",
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });

this.add(this.slide);

Once I open the dialog box I am able to see Image place holder. But I am not able add or drag and drop any images from content finder. Please refer to below screenshot.

[img]Capture.PNG[/img]

How to fix this issue?

Thanks,

Sai

[Sam205505050]

Please check this :

http://helpx.adobe.com/experience-manager/kb/creating-cq-widget-supports-image.html

[Sai_ratna]

Hi Sam,

The link you have given in your post is for how to add a html5smart image (as a separate tab) in a components dialog box. This link is trying to create a component using existing xtypes.

This approach don't solve my problem. Here I am trying to create a new XTYPE. And that xtype should contain html5smart image as a field.

Thanks,

Sai

[Sham_HC]

Hi Sai Ratna Pattnaik, 

To create a new xtype you need to extend & register. I am not seeing that in your code. Refer [1] for building custom xtypes. 

[1]  http://dev.day.com/docs/en/cq/current/developing/widgets.html#Custom%20Widgets

Thanks,
Sham

[Sai_ratna]

Hi Sham,

I am already doing that. It just that I have posted only image initialization part. I have used following code for xtype creation.

/**
 * @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
 */
var Ejst = {};
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {

    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    hiddenField: null,
    /**
     * @private
     * @type CQ.html5.form.SmartImage
     */
    slide: null,
    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    alt: null,
    /**
     * @private
     * @type CQ.Ext.form.TextField
     */
    preHeader: null,
    
    constructor: function(config) {
        config = config || { };
        var defaults = {
            "border": true,
            //"labelWidth": 75
            "layout": "form"
        };
        config = CQ.Util.applyDefaults(config, defaults);
        Ejst.CustomWidget.superclass.constructor.call(this, config);
    },

    // overriding CQ.Ext.Component#initComponent
    initComponent: function() {
        Ejst.CustomWidget.superclass.initComponent.call(this);

        this.hiddenField = new CQ.Ext.form.Hidden({
            name: this.name
        });
        this.add(this.hiddenField);

        this.slide = new CQ.html5.form.SmartImage({
            title:"Image",
            ddGroups: ["media"],
            ddAccept: ["image/.*"],
            border: true,
            disableZoom: true,
            allowUpload: false,
            fileNameParameter:"./fileName",
            fileReferenceParameter:"./fileReference",
            cropParameter:"./imageCrop",
            mapParameter:"./imageMap",
            requestSuffix:".img.png",
            rotateParameter:"./imageRotate",
            uploadUrl:"/tmp/upload/*",
            width: 500,
            height: 300,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                },
                afterlayout: function () {
                    this.updateView();
                }
            }
        });
        this.add(this.slide);
        
        this.alt = new CQ.Ext.form.TextField({
            fieldLabel: "Alt Text",
            width: 500,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.alt);
        
        this.preHeader = new CQ.Ext.form.TextField({
            fieldLabel: "Pre Header",
            width: 500,
            listeners: {
                change: {
                    scope:this,
                    fn:this.updateHidden
                }
            }
        });
        this.add(this.preHeader);
        
    },

    // overriding CQ.form.CompositeField#processPath
    processPath: function(path) {
        console.log("CustomWidget#processPath", path);
        this.slide.processPath(path);
    },

    // overriding CQ.form.CompositeField#processRecord
    processRecord: function(record, path) {
        console.log("CustomWidget#processRecord", path, record);
        this.slide.processRecord(record, path);
    },

    // overriding CQ.form.CompositeField#setValue
    setValue: function(value) {
        var values = JSON.parse(value);
        this.slide.setValue(values.slide);
        this.alt.setValue(values.alt);
        this.preHeader.setValue(values.preHeader);
    },

    // overriding CQ.form.CompositeField#getValue
    getValue: function() {
        return this.getRawValue();
    },

    // overriding CQ.form.CompositeField#getRawValue
    getRawValue: function() {
        var values = {
            "slide": this.slide.getValue(),
            "alt": this.alt.getValue(),
            "preHeader": this.preHeader.getValue(),
        }
        return JSON.stringify(values);
    },

    // private
    updateHidden: function() {
        this.hiddenField.setValue(this.getValue());
    }

});

// register xtype
CQ.Ext.reg('heroCarousel', Ejst.CustomWidget);

[Sham_HC]

Hi Sai Ratna Pattnaik, 

add panel with form layout. refer http://forums.adobe.com/thread/1149090

Thanks,

Sham

[Sai_ratna]

Hi Sham,

With the approach you have suggested, I will not able to crate html5smartImage inside composite field. The above post works fine if its not a composite field.

Thanks,

Sai

[smacdonald2008 · Accepted solution]

See this new community article - it covers all of this:

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

It covers topics like:

• how to work with rich text plugins
• how to develop and register a custom xtype
• how to work with multifield component
• how to control the behaviour of the component using a cq:EditConfig node
• how to style the component (for example, add a strike through style)
• how to use drag and drop functionality