Client Libraries

Client Libraries

In today’s modern Web development it is very dificult to work with JavaScript libraries, in conjunction with HTML and CSS, are responsible for some very exciting front end user experience. iManaging these client-side assets can become quite cumbersome, especially since Adobe AEM allows authors to select components and templates at their own convenience. Another challenge is that many components and templates require client-assets.

Client- or HTML Libraries

Client Libraries are “folders” (nodes of node-type cq:ClientLibraryFolder) that contain the client-side assets, CSS and JS files and required resources, e.g. images or fonts.
There can be unlimited client library folders. The folder content can be loaded individually and at any given time.

Naming conventions
You can put your clientlibs in two places

• under /etc/clientlibs or
• within the component folder

the clientlibs folder is a type of node with node type “cq:ClientLibraryFolder”

Properties of clientlibs folder
1.primaryType should be  a type of “cq:ClientLibraryFolder”
2.categories : it is a type String array (String[]) to identify the client library
3.dependencies : list of dependant client libraries
4.embed: list of clientlibraries that will be included.

Now we are moving to learn creation of clientlibraries

First approach [under /etc, global]

Steps
>In CRXDE create a new folder in /etc/clientlibs. Usually the folder has the same name as the project in /apps.
>In the project folder (e.g. /etc/clientlibs/clientlibsdemo) create a new node, name it “author” and select node-type cq:ClientLibraryFolder.

>Add the property “categories” as String array. This defines a reference to the client library we will use later. As value enter “demo.edit” and then click “Save”.

>Next we add a CSS file to the author client library

>In /etc/clientlibs/clientlibsdemo/demo create a new folder “styles”

>In that folder create a new file sampleEdit.css
Enter style as

>We repeat above steps to create two simple JavaScript files. In /In /etc/ clientlibs/training/author create a new folder “scripts”

>Create css.txt and js.txt to enter file names of css and js to find them.

To include them into an HTML page use the JSP Tag <cq:includeClientLib/>, you could use code.
Eg. <cq:includeClientLIb categories=”demo.edit”/>
Now check your page for changes.
Second approach [underComponent it self]
Steps
>In CRXDE create a new folder under your component as  /apps/training/components/aemgrid/clientlibs of type cq:ClientLIbraryFolder.

>Add the property “categories” as String array. This defines a reference to the client library we will use later. As value enter “training.edit” and then click “Save”.

>Next we add a CSS file to the client library in /apps/training/components/aemgrid/clientlibs create a new folder “css”

In that folder create a new file demo.css
Enter style as

>We repeat above steps to create two simple JavaScript files. In apps/training/components/aemgrid/clientlibs create a new folder “js” .
>Create css.txt and js.txt to enter file names of css and js to find them.

>To include them into an HTML page use the JSP Tag <cq:includeClientLib/>, you could use code.
Eg. <cq:includeClientLIb categories=”demo.edit”/>

Now review your changes on the page in which you have included this clientlibrary.

Tip: Adobe CQ has a tool that lists all the defined client libraries: http://localhost:4502/libs/cq/ui/content/dumplibs.html.

Dumplibs lists all the defined client libraries and the properties.

Thanks

Techroomweb