Managing Client Library - ranjanui/AEM GitHub Wiki

  • Adobe CQ vs Adobe AEM

  • Author friendly

  • Separation of content from layout and functionality

  • A folder containing JS/CSS files(or Fragments). -> plus js.text/css.txt files defining which file to load

  • Folder is a repository node "cq:ClientLibraryFolder"

  • Multiple properties to defined the library's behavior

  • Enable "Minify" and "gzip" in osgi console "felix"

  • Tag library to upload folder content

  • Sample Client Library folder properties

  1. categories: names eg: cq.jquery
  2. dependency: load it first
  3. embed
  4. channels: mobile group the client library interested for
  5. purpose: name the client library
  • Use multiple names for same client library folder
  • Use same category name in different client library
  • recommended to use name spaces eg: ocgroup.main
embed
  • Embed the code of other libraries
  • Reduce amount of requests
  • code is embedded before the original code
dependencies
  • client library depends on other library
  • eg: Widget functionality requires jquery library
  • dependencies loaded before client library
Channel
  • define which mobile group will use the client library
  • Ideal for same categories but different channel
  • Values are: "default", "touch", "!touch"

Declare the js/css files

  • first create the .css and or .js files within the folder
  • then creaate a css.txt and /js.txt file, defining the files to load.
clientlib-test
  |-- css
       |-- sample.css
       css.txt

Load client library

  • Using link tag
<link rel="stylesheet" href="/apps/ocrgrps/components/text3/clientlib-test.css" type="text/css">
  • Using Tag library
<cq:includeClinetLib categories="ocq.textthree" /
  • Using HTML Library manager
ClientLibraryManager.include(out, 'ocq.textthree');