I've a component with a dialog that has multiple tabs. Some of the tabs are widget of xtype="html5smartimage" to accept image and other tabs are meant to accept different image parameter.
I've split the dialog in two parts to make tab system available for reuse by other component. Here it goes:
imageComponent
==============
tab_image_information.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:TabPanel"
activeTab="0"
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
<imageTab1 jcr:primaryType="cq:Widget"
itemId="imageTab1"
cropParameter="./image1/imageCrop"
ddGroups="[media]"
fileNameParameter="./image1/fileName"
fileReferenceParameter="./image1/fileReference"
blankText="An image is required"
name="./image1/file"
requestSuffix="/image1.img.png"
rotateParameter="./image1/imageRotate"
sizeLimit="100"
height="250"
title="Desktop Image"
uploadUrl="/tmp/upload/*"
xtype="html5smartimage" />
<imageTab2 jcr:primaryType="cq:Widget"
itemId="imageTab2"
cropParameter="./image2/imageCrop"
ddGroups="[media]"
fileNameParameter="./image2/fileName"
fileReferenceParameter="./image2/fileReference"
blankText="An image is required"
name="./image2/file"
requestSuffix="/image2.img.png"
rotateParameter="./image2/imageRotate"
sizeLimit="100"
height="250"
title="Tablet Image"
uploadUrl="/tmp/upload/*"
xtype="html5smartimage" />
<imageDetails jcr:primaryType="cq:Widget"
title="Image Details"
height="250"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<displayWidth jcr:primaryType="cq:Widget"
fieldDescription="Set display width for the image."
fieldLabel="Display Width"
name="./displayWidth"
xtype="textfield"/>
<displayHeight jcr:primaryType="cq:Widget"
fieldDescription="Set display height for the image."
fieldLabel="Display Height"
name="./displayHeight"
xtype="textfield"/>
<image1ResType jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./image1/sling:resourceType"
value="foundation/components/image"
xtype="hidden" />
<image2ResType jcr:primaryType="cq:Widget"
ignoreData="{Boolean}true"
name="./image2/sling:resourceType"
value="foundation/components/image"
xtype="hidden" />
</items>
</imageDetails>
</items>
</jcr:root>
and in dialog.xml I did:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="Image Selection"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<imageSelection jcr:primaryType="cq:Widget"
path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
xtype="cqinclude"/>
</items>
</jcr:root>
This component itself is working great.
Now I need to write another component (myComponent) whose dialog will have two tabs - one for basic information and the other tab will
have functionality of the imageCompnent. So I'm trying to include tab_image_information using infinity.json. Here goes myComponent:
myComponent
===========
tab_basic_information.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Panel"
title="Component Information"
width="500">
<items jcr:primaryType="cq:WidgetCollection">
<text1 jcr:primaryType="cq:Widget"
fieldLabel="Headline"
name="./text1"
xtype="textfield"
maxlength="42"/>
<text2 jcr:primaryType="cq:Widget"
fieldLabel="Sub head"
name="./text2"
xtype="textfield"
maxlength="42"/>
</items>
</jcr:root>
and the dialog.xml is like:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="My Component"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<tabs jcr:primaryType="cq:TabPanel">
<items jcr:primaryType="cq:WidgetCollection">
<componentInformation
jcr:primaryType="cq:Widget"
path="/apps/myproject/components/content/myComponent/tab_basic_information.infinity.json"
xtype="cqinclude"/>
<componentImageSelection
jcr:primaryType="cq:Widget"
title="Component Image Selection"
xtype="panel"
width="500">
<items jcr:primaryType="cq:WidgetCollection">
<imageSelection
jcr:primaryType="cq:Widget"
path="/apps/myproject/components/content/imageComponent/tab_image_information.infinity.json"
xtype="cqinclude"/>
</items>
</componentImageSelection>
</items>
</tabs>
</items>
</jcr:root>
Inclusion of tab_image_information within myComponent dialog is happening, but it not laying out properly, not it is saving the information of that tab(componentImageSelection).
Any suggestion is highly appreciated.
