Client Libraries

• 1. Open CRXDE Lite in a web browser (http://:/crx/de).
• 2. Select the folder where you want to locate the client library folder and click Create > Create Node.
• 3. Enter a name for the library file, and in the Type list select cq:ClientLibraryFolder. Click OK and then click Save All.
• 4. To specify the category or categories that the library belongs to, select the cq:ClientLibraryFolder node, add the following property, and then click Save All:
  • Name: categories
  • Type: String
  • Value: The category name
  • Multi: Select
• 5. Add source files to the library folder by any means.
• 6. Select the client library folder and click Create > Create file.
• 7. In the file name box, type one of the following file names and click OK:
  • js.txt: Use this file name to generate a JavaScript file.
  • css.txt: Use this file name to generate a Cascading Style Sheet.
• 8. Open the file and type the following text to identify the root of the path of the source files:
       #base=[root]
• 9. On the lines below #base=[root], type the paths of the source files relative to the root. Place each file name on a separate line.
• 10. Click Save All.

categories – This is the identifier into which categories a clientlib belongs. A clientlib can have one or more categories.

dependencies - This defines the other categories that the current clientlib depends upon. The dependencies will be included in the page along with the dependent clientlib.
This property is transitive – if Clientlib A depends on Clientlib B which depends on Clientlib C, then all clientlibs will be included in the page.

embed - This defines the categories which will be combined to the current clientlib. AEM will merge all clientlibs into the current clientlib. This is usually used for minimizing requests and for accessing clientlibs which are not supposed to be exposed to public.
Take note that the embed property is NOT transitive – If Clientlib A embeds Clientlib B which embeds Clientlib C, then only Clientlib A and B will be included in the page. Clientlib A and B will be combined into one CSS and JS files as well. In order to include Clientlib C, it must be added to the embed property of Clientlib A as well.

allowProxy - In order for the client libraries under /apps to be accessible, a proxy servelt is used. The ACLs are still enforced on the client library folder, but the servlet allows for the content to be read via /etc.clientlibs/ if the allowProxy property is set to true.

1. In JSP
      <cq:includeClientLib categories="yourcategoies"/>

2. In Sightly
     The best example is from the new foundation page component, this is located at
          /libs/wcm/foundation/components/page/head.html.
     There, you see the following thing:
          data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
      This declares a “clientlib” object, which is implemented as a template.
     After that, you see statements like following one:
          data-sly-call="${clientlib.all @ categories='cq.jquery'}"
     This will output <script> and a <style> includes to all CSS and JS contained in the parameter “categories”.
     You can also call “clientlib.css” and “clientlib.js” if you only want to output the CSS or JS:
           data-sly-call="${clientlib.js @ categories='clientlib1,clientlib2'}"
           data-sly-call="${clientlib.css @ categories='clientlib1,clientlib2'}"
     Notice that the “categories” option can be a comma-separated string, or a list of category names.

They are in /var/clientlibs

Yes, look at this page http://server/libs/cq/ui/content/dumplibs.html

Yes, ?debugClientLibs=true writes out single files
                    or
Yes, ?debugClientLibs=true and CTRL+SHIFT+U gives you timing info

Yes, via url: /libs/granite/ui/content/dumplibs.rebuild.html, we can invalidate or rebuild the clientlibs.

• Go to <host>:<port>/system/console/configMgr
• Click on Adobe Granite HTML Library Manager below pop up will show up.

Minify - AEM handle minify automatically in non-development environments by checking the “Minify” checkbox.

debug - Developers, check the “debug” option on your local instance. This will prevent the CQ clientlib files from being combined into one file, and makes troubleshooting javascript and css issues significantly easier.

Gzip - gzip is a file format and a software application used for file compression and decompression. To deliver a better performance you can enable “Gzip” option for the “Adobe Granite HTML Library Manager”.

restrict - List of paths that you are allowed to create CQ client libraries under. (htmllibmanager.path.list). By this way we can restrict clientlib creation.

Add a query parameter to the URL called debugClientLibs with the value true.

It will contain the paths to all the JavaScript files that will be included in the client library.

Via mod_expires / mod_deflate and the use of cache-busting you can cache the css/js files on the browser to increase overall performance of your pages. All of this will happen in combination with the dispatcher.

It is used to add some additional functionality for different channels. For example : if you want to perform some JS functionality only for ie6 not for other browsers, or you want to add some CSS or JS for only touch UI. here you can use channels property .