Adobe cq 5.5 具有拖放图像功能的对话框答案

【问题标题】：Adobe cq 5.5 Dialog box with drag & drop images functionalityAdobe cq 5.5 具有拖放图像功能的对话框
【发布时间】：2013-04-17 12:39:17
【问题描述】：

我一直致力于 Adobe CQ5.5 自定义组件的开发。这我面临的问题是在一个要映射到 jcr 内容的对话框。

【问题讨论】：

标签： jsp adobe aem

【解决方案1】：

听起来您正试图在一个组件对话框中拥有两个图像选项卡。最简单的方法是使用 CRXDE lite 将图像节点从 /libs/foundation/components/page/dialog/items/tabs/items/image 复制到您的对话框中。

但是有一个问题。如果您尝试将两张图像放在一个组件对话框中，您会注意到对话框没有正确显示其中一张图像（可能是任何未命名为“图像”的图像）。除了默认图像之外，我还遇到了添加页面缩略图图像的问题。

这种不当行为有两个原因。首先，第二张图片的 requestSuffix 属性必须与第一张不同。您会认为这足以解决问题，而且应该如此，但由于某种原因，CQ 不会在（这些特定的）图像内容节点上创建 sling:resourceType 属性，因此请求仍然无法正确解决在对话框中。在名为“image”的节点的情况下，它似乎被正确推断，但在任何其他情况下都没有。这意味着您必须手动添加此属性：

sling:resourceType=foundation/components/image

到第二张图片的内容节点。同样，您还需要将图像对话框属性中的 requestSuffix 属性的值更改为其他值，例如：“/thumbnail.img.png”。缩略图开头的斜线也是必需的。（默认值是“.img.png”——默认图像组件似乎得到了特殊处理，所以这不是一个明显的修复）

【讨论】：

【解决方案2】：

使用以下代码在图像组件（/libs/foundation/components/image）中扩展dialog.xml，以正确显示编辑对话框中的第二张图像：

    <image
        jcr:primaryType="cq:Widget"
        cropParameter="./imageCrop"
        ddGroups="[media]"
        fileNameParameter="./fileName"
        fileReferenceParameter="./fileReference"
        mapParameter="./imageMap"
        name="./file"
        requestSuffix=".img.png"
        rotateParameter="./imageRotate"
        title="Thumbnail"
        xtype="html5smartimage"/>
    <thumb
        jcr:primaryType="cq:Widget"
        cropParameter="./thumbImageCrop"
        ddGroups="[media]"
        fileNameParameter="./thumbFileName"
        fileReferenceParameter="./thumbFileReference"
        mapParameter="./thumbImageMap"
        name="./thumb"
        requestSuffix="/thumb.img.png"
        rotateParameter="./thumbImageRotate"
        title="Image"
        xtype="html5smartimage"/>

【讨论】：

但是我怎样才能在jsp中得到这个图像。我试过了，但仍然只显示一张图片。能否提供jsp代码