understanding current location of current resources

Question

I'm going through training for Adobe CQ5 developer and I'm trying to understand the location of the current resources in a Component. For instance, when creating a widget for an image component: The Properties are:

And then with a complex component:

The Properties are:

Why is this? I'm just not seeing the relation to the current resource and the jsp file for reference. Why can't the complex component just have ./value rather than ./image/value?

Answer 1

The primary reason is that the attributes are related to each other to define how to draw the image and there are other parts of the application that expect that arrangement. When the author configures the image, AEM will create an image node under the jcr:content node of your page.

/content/mysite/mypage/jcr:content/image/<attributes>

The foundation Image class as well as the AbstractImageServlet expect certain attributes to appear on the image node.

For instance, notice these two URLs display the same image.

 1. http://localhost:4502/content/geometrixx/en/events/dsc.img.png
 2. http://localhost:4502/content/dam/geometrixx/banners/dsc.jpg

The first URL is pointing to the cq:page node and adds an img selector. This selector invokes a servlet that pulls the information from the first image node it finds under the page's jcr:content node. That image node has a fileReference attribute pointing to the actual DAM image, which is the second URL. The servlet then renders the URL specified in the fileReference attribute.

In your first example--the Logo component--the attributes are relative to the component. If you had a parsys on the page at the path par, then if you added the logo component to the page, you would have the following path under your cq:page node.

/content/mysite/mypage/jcr:content/par/logo/<attributes>

Now when you use the img selector to invoke the image servlet, it will take the logo's attributes into account.

http://localhost:4502/content/mysite/mypage/jcr:content/par/logo.img.png

For the second example--the complex component--you are organizing the image attributes under an image node to isolate those attributes from the other settings.