Day 11: Client Libraries in Action

AEM Developer Series

• Day 00: AEM Developer Series
• Day 01: Introduction to AEM
• Day 02: AEM Architecture
• Day 03: Setting up AEM Development Environment
• Day 04: Developing First OSGi Bundle
• Day 05: Working with Sling Servlets in AEM
• Day 06: Playing with Sling Post Servlet
• Day 07: Creating your first component in AEM
• Day 08: Dueling with JavaScript Use API
• Day 09: Dueling with Java User API
• Day 10: Getting to know Sling Models
• Day 11: Client Libraries in Action
• Day 12: Creating your custom OSGi Configuration
• Day 13: Schedulers in AEM
• Day 14: Eventing in AEM
• Day 15: Custom Workflows in AEM
• Day 16: Creating JMX Beans in AEM
• Day 17: Working with QueryBuilder API
• Day 18: Working with Granite Datasources in AEM
• Day 19: Replication API in Action
• Day 20: Working with Users and Groups in AEM

Let us say you want to create a new website for your Teddy Bear product. You want this side to be attractive and beautiful along with cool features. Most likely, to achieve this you will have to write lots of CSS and JavaScript in your code.

With the complexity of your website, your code complexity will also increase. With this, it becomes more and more difficult to maintain your JavaScript and CSS code. A website made on top of AEM also faces this issue. To combat this, AEM provides a cool feature called Client Libraries.

Client Libraries in AEM

Client libraries allow us to manage our client-side code including JS and CSS and provide options to debug, minify, merge and gzip the client-side code.

• Go to your project folder in CRXDE and create a node called clientlibs of type cq:ClientLibraryFolder

Create a clientlib

• Now we need to add the categories for the clientlib. Categories is the identifier used to directly include this clientlib from a content page or to embed it in other clientlibs. We can categorize our clientlibs using this property to manage files easily and only load whatever we need. The categories property, being multi-valued, allows a library folder to be the part of more than one category. Add the categories property to the clientlibs node.

                                                Name: Categories     

                                                Type: String[]    

                                                Value: cq.authoring.dialog

• Create the following structure in clientlibs folder

JS and CSS libs

As you can see, we have created js and css folders (all JS files will go under js folder and all CSS files will go under css folder) along with two text files js.txt and css.txt.

• Create a new component in your project folder as below

Create a component

• Create a new node under your component cq:dialog of type nt:unstructured. Now create its children nodes as per the below configuration.
This component has one fileupload widget and one textfield. Our goal is to put validation on the Alt text field. We want the Alt Text field should be required only if we author the Image in the fileupload widget.
• For the validation, we have to write some JS code. Therefore, create a new file named validation.js in the js folder and paste the following code in it.
This code searches the required class and if the class is found, then the validation passes and the edit dialog will be saved, otherwise, it won't.
• Now open the js.txt file and paste the following code in it. 

                                                    #base=js

                                                    validation.js

• The first line determines the path of the JS files relative to the js.txt.
• The second line determines the JS file be included in the client library. Each JS file we want to include has to be written in a new line.
• Now open the dialog and try to save it after authoring image but the Alt Text field is empty. The dialog will not save and show validation error.

Validation error

• Thus, our client libraries are including. Similarly, we can write CSS and include it in the css.txt.

Other properties in clientlibs

Apart from the few properties discussed in the above section, we have a few other important properties.

dependencies

Let's say clientlibA depends on clientlibB which depends on clientlibC, then on the page which is referring clientlibC, all clientlibA, clientlibB and clientlibC will be included. Thus, dependency property signifies if a one clientlib file depends on others.

embed

For the minifying purpose, AEM will merge all the clienlibs in the current one. If clientlibA embeds clientlibB which further embeds clientlibC, then clientlibA will be loaded by embedding clientlibB's code and clientlibC will not be embedded.

Clientlib configuration

If you navigate to http://<host>:<port>/system/console/configMgr and search for Adobe Granite HTML Library Manager and open it then you will see it has configurations for Minify, Debug and GZip. 

Adobe Granite HTML Library Manager

Apart from these basic configurations, we are also provided many other configurations to make clientlibs better. 

Conclusion

Congratulations!! 🙋 today we have worked with Clientlibs and their basic structures and properties. I hope you enjoyed this post.

You can find the complete code of this project on my GitHub in this commit. Feel free to fork or open issues, if any.

I would love to hear your thoughts on this and would like have suggestions from you to make it better. 

Feel free to befriend me on Facebook, Twitter or Linked In or say Hi by email.

Happy Coding 😊