April 2, 2020
Estimated Post Reading Time ~

How to Develop a custom CQ selector

An important feature of CQ5 is the ability to natively use as many selectors as you want in a URL.

This means the following URLs will work:
http://www.adobe.com/products/flash/tech-specs.selectors.are.real.fun.html
http://www.day.com/day/en/products.adobe.cq5.is.fun.html

The following code helps to create custom selectors that return an image layer instance to the incoming request.

@Component(immediate = true, metatype = false)
@Service(value = javax.servlet.Servlet.class)
@Properties({@Property(name = Constants.SERVICE_DESCRIPTION, value = "Custom Image Selector"),
@Property(name = Constants.SERVICE_VENDOR, value = OsgiServiceProperties.SERVICE_VENDOR),
@Property(name = "sling.servlet.resourceTypes",
value = {"foundation/components/parbase", "cq:Page", "myproject/components/custom-rich-content" }),
@Property(name = "sling.servlet.selectors", value = {"invokeSelector1", "invokeSelector2" }),
@Property(name = "sling.servlet.extensions", value = {"jpg", "jpeg", "png", "gif", "bmp" }) })
public class CustomImageSelector extends AbstractImageServlet {
@Override
protected Layer createLayer(ImageContext ctx) throws RepositoryException {
// this will returns the custom image layer object to the incoming request
// A sample implementation of a custom image selector can be found at /libs/foundation/components/page/navimage_png.java in CQ5
//
String selectors = ctx.request.getRequestPathInfo().getSelectorString();
Layer layer = null;
if (selectors.contains("invokeSelector1")) {
} else {
}
.....
....
.
}


The property “sling.servlet.resourceTypes” defines the incoming resource types of the sling servlet request. It can be CQ and custom resource types like “cq:Page”, “cq:Component” etc.

The property “sling.servlet.selectors” defines the name of the selectors that are defined on this servlet. And the request selectors can be retrieved in the code for processing them individually.

The property “sling.servlet.extensions” defines the extensions that are supported on this selector.

So the image request URL for this selector can be as follows:
The above URL can be resolved as follows:
HOST: final-website.com

Displaying Page location: /content/site-1/en_GB/homePageImage

Selectors used in the above URL: invokeSelector1, helloworld, 1350657093639

Selector extension: png

Finally the developed image selector can be used for following URLs:
<a href="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.helloworld.13506570283793639.png"><img src="https://i0.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.helloworld.13506570283793639.png" style="max-width:100%;" width="16" height="16" srcset="https://i0.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.helloworld.13506570283793639.png?zoom=2 2x" scale="2"></a>

<a href="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.blueworld.1350657093620239.jpeg"><img src="https://i2.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.blueworld.1350657093620239.jpeg" style="max-width:100%;" width="16" height="16" srcset="https://i2.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.blueworld.1350657093620239.jpeg?zoom=2 2x" scale="2"></a>

<a href="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.jpg"><img src="https://i1.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.jpg" style="max-width:100%;" width="16" height="16" srcset="https://i1.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.jpg?zoom=2 2x" scale="2"></a>

<a href="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.highworld.1357823657093233639.gif"><img src="https://i0.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.highworld.1357823657093233639.gif" style="max-width:100%;" width="16" height="16" srcset="https://i0.wp.com/final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.highworld.1357823657093233639.gif?zoom=2 2x" scale="2"></a>

http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.poloworld.135065709323263339.bmp

But cannot be used in the following URLs:
http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.helloworld.13506570283793639.php

http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector2.blueworld.1350657093620239.aspx

<object data="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.pdf" type="application/pdf" width="100%" height="800">
<p><a href="http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.pdf">http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.myworld.135065703093639.pdf</a></p>
</object>

http://final-website.com/content/site-1/en_GB/homePageImage.invokeSelector1.ukworld.135065703093639.<b>htm</b>


As the above URLs selectors, extensions do not match with the desired/expected extensions.


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.