Drop Target Issue | 易学教程

问题

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.

Any ideas?

回答1:

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

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.

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.

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" }
  - 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" }
  - 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.

来源：https://stackoverflow.com/questions/17812201/drop-target-issue

标签

aem