CQ5 Clientlib explained by example

Content moved to: http://experiencedelivers.adobe.com/cemblog/en/experiencedelivers/2012/12/clientlibs-explained-by-example.html

VN:F [1.9.22_1171]
Was this helpful? Please rate the content.
Rating: 8.8/10 (15 votes cast)
CQ5 Clientlib explained by example, 8.8 out of 10 based on 15 ratings

About Feike Visser

Feike Visser (@heervisscher) is an experienced consultant working in the EMEA-region. Feike has done live implementations at large enterprises like NATO, BBC, Philips, Deutsche Bank, HMRC, HSBC.
This entry was posted in Experience Services and tagged , . Bookmark the permalink.

17 Responses to CQ5 Clientlib explained by example

  1. Linda Juffermans says:

    Great examples!

    I’ve noticed some cq:ClientLibraryFolder nodes have a channels (String[]) property; I can’t find any documentation about these, any idea what they do?
    /etc/designs/geometrixx/clientlibs/ie6/themes/default: channels=”[ie6]”
    /etc/clientlibs/foundation/swfobject: channels=”[!touch]”

    Suppose my “project.main” clientlib embeds “project.components” and similarly the “projects.components” clientlibs have a dependency for “project.main”. That way, the code can either include “project.main” (embedding all component JS in the one file) or include “project.main.components” (automatically including “project.main”). Does this make sense or will this cause conflicts/duplicates?

    Linda

  2. Joep says:

    Great examples indeed!

    I have been doing some research also on Clientlibs lately and I think they work great for making your components more modular as you can include JavaScript and maybe some generic required CSS with the component instead of with the full design of the app.

    @Linda: The Channels allow you to have conditional CSS and JavaScript includes…

    This one will only be included if the user visits the page using Internet Explorer 6:
    /etc/designs/geometrixx/clientlibs/ie6/themes/default: channels=”[ie6]”

    This one will NOT be included if the user visits the page using a mobile phone:
    /etc/clientlibs/foundation/swfobject: channels=”[!touch]”

    Although I haven’t implemented the Channels myself yet, I probably will be soon… and I would really appreciate an addition to this article with a more elaborate overview of the possibilities of the Channels…

  3. Conrad says:

    Hi Feike,
    very nice write-up! :)
    Cheers,
    (c)

  4. Stephen Pfaff says:

    Nice article, I came to this document from a search relating to clientlib channels. I am also trying to implement channels into clientlibs instead of needing a separate call for each IE condition. I have copied geometrixx format for lib channels with no luck. Perhaps if anyone has any insight on getting these to work they could share it with everyone. Likewise if I find anything out while tinkering with it I will share it here.

    • The channels are defined in CQ5.5 at /etc/clientlibs/foundation/librarymanager/DefaultChannelDetector.js. There are only three defined by default (ie6, iphone, ipad). The channel detector uses the user agent string looking for matches that are defined in the above mentioned script. You can easily add your own to support additional channels.

  5. Peter says:

    Thanks for the article

    There must be a defect in CQ55 that the ClientLib css and js are cashed such that changes to those files do not actually take effect in the rendered website pages. Even when removing/modifying the generated files under /var/clientlibs (as suggested under the FAQ above), the rendered pages still depict the old styles

  6. Sunil Kamat says:

    Thanks for the article. Helped me understand clientlib usage better.

  7. Mohamed Homaid says:

    Thanks a lot for this great article. Do you have any more in depth articles about CQ5? Are you planning to write more articles like this in the near future?

  8. Alan Allison says:

    We are working on implementing this and have a few additional requirements:

    – CSS/JS component includes need to be added dynamically. Every component added to a page/template needs to register their CSS/JS files.
    – The combined CSS and JS files should be named according to their includes inorder to maximize cache-ability.

    For instance adding the following tags in 2 components:
    Component 1: cq:includeClientLib css=”site.component1″
    Component 2: cq:includeClientLib css=”site.component2″

    Would generate the following unique CSS file in the document head:

    link rel=”stylesheet” href=”/etc/designs/site/clientlib-00e7d87f4435ed282e413d9e41395f61.css”

    Currently when we use the cq:includeClientLib tag every component on the page generates a clientlib.css file, rather than concatenating everything into one clientlib.css file.

    Has anyone worked on extending clientlib to make dynamic files that include only the CSS/JS code necessary to render a given page?

  9. Dave says:

    Admins, looks like the images for this post have recently disappeared. Can you please recover them?

  10. Koteswar Rao says:

    Very nice article. Even novice can easily understand this after reading. Indeed this is one of the very important topic which we need to through light in modern web application, where everything is JS and CSS.

    Thanks Feike Visser..

  11. Jaleel says:

    Permission Denied errror for clientlibs.
    This clientlibs contain jquery-1.4.2 -min.js and it seems page doesnot have acces to this file

  12. Florian says:

    Please fix the link. It was a nice resource and the link appears to be broken.

  13. ievgen says:

    Can’t see the article, the link is broken :(

  14. Doug says:

    The redirect link no longer goes to a valid page.