放下目标问题 [英] Drop Target Issue

问题描述

我刚刚开始使用Adobe CQ5，并且正在努力开发我的第一个自定义组件...我发现了一个我不知道的错误，希望有人可以对此有所了解.

I've just started using Adobe CQ5 and am working my way through getting my first custom components rolled... I've found a bug that I can't figure out and was hoping someone could shed some light on it.

基本上，我已经定义了一个自定义图像和关联的放置区域，但无法弄清楚如何制作一个占位符图像.所以我这样做了:

Basically, I've defined a custom image and associated drop area, but couldn't figure out how to do a placeholder image. So I did this:

<%
    if (leftImage != null && leftImage.hasContent()) { leftImage.draw(out); }
    else { leftImage.setSelector(".img"); out.print("<img class=\"" + DropTarget.CSS_CLASS_PREFIX + "panelLeftImage" + "\" src=\"http://placehold.it/300x300\" />"); }
%>

进入组件编辑对话框并单击确定"后，它似乎可以正常工作，但是当您尝试在页面加载时拖放图像而没有进入对话框时，资源无法解析，您获得损坏的图像图形.放置目标已正确突出显示.

It seems to work properly once you've gone into the component edit dialog and clicked "OK", but when you try to drop an image at page load without having gone into the dialog, the resource doesn't resolve and you get a broken image graphic. The drop target is correctly highlighted though.

有什么想法吗?

推荐答案

对于下一个任性的旅行者...我终于可以解决此问题.

For the next wayward traveler... I was able to fix this - eventually.

我的JSP现在看起来像这样:

My JSP looks more like this now:

<%
    Image leftImage = new Image(resource, "panelLeftImage");
    leftImage.addCssClass(DropTarget.CSS_CLASS_PREFIX + "panelLeftImage");
    leftImage.setSelector(".img");
    leftImage.setDoctype(Doctype.fromRequest(request));

    if (leftImage != null && leftImage.hasContent()) { leftImage.draw(out); }
    else { out.print("<img class=\"" + DropTarget.CSS_CLASS_PREFIX + "panelLeftImage" + "\" src=\"http://placehold.it/460x200\" />"); }
%>

为在对话框中制作的每个图像面板冲洗并重复使用不同的名称.

Rinse and repeat with different names for each image panel you make in the dialog.

在cq:dropTargets CRXDE Lite节点中，您需要每个图像都有一个主节点，一个子参数节点，然后是组件中所有可用图像的子节点.

In the cq:dropTargets CRXDE Lite node, you need to have a master for each image, a child parameter node and then children of that for all available images in the component.

因此，例如，如果您有一个leftImage和rightImage，它将看起来像这样(将JSON解释为一个小属性映射):

So for example, if you had a leftImage and rightImage, it would look like this (interpret the JSON as a little property map):

• cq:dropTargets

• leftImage { "accept": "image.*", "groups": "media", "jcr:primaryType": "cq:DropTargetConfig", "propertyName": "./leftImage/fileReference" }

• 参数 { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "pathToYourComponent" }
  • leftImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
  • rightImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
  • parameters { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "pathToYourComponent" }
    • leftImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
    • rightImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }

    rightImage { "accept": "image.*", "groups": "media", "jcr:primaryType": "cq:DropTargetConfig", "propertyName": "./rightImage/fileReference" }

    • 参数 { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "pathToYourComponent" }
      • leftImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
      • rightImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
      • parameters { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "pathToYourComponent" }
        • leftImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }
        • rightImage { "jcr:primaryType" : "nt:unstructured", "sling:resourceType": "foundation/components/image" }

        不要问我为什么会起作用，它会起作用.

        Don't ask me why it works, it just does.

        这篇关于放下目标问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！