4/16/2023 0 Comments External jsp file secureUse the categories property of the node to identify the library categories to which it belongs. Creating Client Library FoldersĬreate a cq:ClientLibraryFolder node to define JavaScript and Cascading Style Sheet libraries and make them available to HTML pages. should be used instead as detailed above. , which in the past was commonly used to include client libraries, has been deprecated since AEM 5.6. The generated HTML page contains the following code: įor complete information, including attributes for filtering JS, CSS, or theme libraries, see ui:includeClientLib. The following code in a JSP file references the libraries: įor example, the /etc/clientlibs/foundation/jquery node is of type cq:ClientLibraryFolder with a categories property of value cq.jquery. To reference the libraries, you use the value of the categories property of the ui:includeClientLib node. Using JSPĪdd a ui:includeClientLib tag to your JSP code to add a link to client libraries in the generated HTML page. That option can be either an array of string values, or a string containing a comma separated values list.įor further details and exmple of usage, see the document Getting Started with the HTML Template Language. all - Loads all the files of the referenced client libraries (both CSS and JavaScript).Įach helper template expects a categories option for referencing the desired client libraries.js - Loads only the JavaScript files of the referenced client libraries.css - Loads only the CSS files of the referenced client libraries.Three templates are available in this file, which can be called through data-sly-call: In HTL, client libraries are loaded through a helper template provided by AEM, which can be accessed through data-sly-use. However it is also possible to do so using JSP. See Locating a Client Library Folder and Using the Proxy Client Libraries Servlet below.īecause HTL is the preferred technology for developing AEM sites, HTL should be used to include client-side libraries in AEM. If node F embeds nodes G and H, the resulting HTML will be a concetration of content from nodes G and H.ĪllowProxy: If a client library is located under /apps, this property allows acces to it via proxy servlet. For example, given two cq:ClientLibraryFolder nodes F and G, if a file in F requires another file in G in order to function properly, then at least one of the categories of G should be among the dependencies of F.Įmbed: Used to embed code from other libraries. The categories property, being multi-valued, allows a library folder to be part of more than one category (see below for how this may be useful).ĭependencies: This is a list of other client library categories on which this library folder depends. The properties of the cq:ClientLibraryFolder are configured as follows:Ĭategories: Identifies the categories into which the set of JS and/or CSS files within this cq:ClientLibraryFolder fall. It’s definition in CND notation is > sling:Folderīy default, cq:ClientLibraryFolder nodes can be placed anywhere within the /apps, /libs and /etc subtrees of the repository (these defaults, and other settings can be controlled through the Adobe Granite HTML Library Manager panel of the System Console).Įach cq:ClientLibraryFolder is populated with a set of JS and/or CSS files, along with a few supporting files (see below). To avoid this and to allow logical organization of client-side libraries AEM uses client-side library folders.Ī client-side library folder is a repository node of type cq:ClientLibraryFolder. In such cases there is the danger that multiple copies of the same JS library may be included in the final HTML output. While this approach works in AEM, it can lead to problems when pages and their constituent components become complex. The standard way to include a client-side library (that is, a JS or CSS file) in the HTML of a page is simply to include a or tag in the JSP for that page, containing the path to the file in question. The client-side library system then takes care of producing the correct links in your final webpage to load the correct code. To help deal with this issue, AEM provides Client-side Library Folders, which allow you to store your client-side code in the repository, organize it into categories, and define when and how each category of code is to be served to the client. Organizing and optimizing the serving of this code can be a complicated issue. Modern websites rely heavily on client-side processing driven by complex JavaScript and CSS code.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |