Introduction to Content Rendering

– Nodes and Properties

AEM is built on top of a database called JCR. This database has hierarchical with two types of items – nodes and properties

  1. NODES:
    • Node provides structure in JCR and can have a parent and child nodes and are represented and accessed by paths
    • Nodes  have a type
    • Type sets the rule about what kind of properties or child nodes a node can or must have. for e.g. anytime we see a cq:Page node, it must have a child node with name jcr content, and that node must be of type cq:Pagecontent
    • Nodes can also have zero or many mixen types. A mixen is an add-on type, and it specifies additional properties in child nodes a node can and must have
  2. PROPERTIES:
    • A single node can have any number of properties for storing information
    • Properties in JCR store the data and they have name and value
    • Properties can be single or multi-valued
    • A multi-value property is noded and behaves much like an array
    • When looking at properties of nodes, you will notice many namespaces. A namespace is delimited by a colon. for e.g. cq:Page where cq is a namespace
    • Namespaces:
      • jcr: basic data storage
      • nt: foundation node type. Some of the common ones are
        • nt:file represents a file in file system
        • nt:folder represents a folder in file system,
        • nt:unstructured allows any number of combination of child nodes and allows any number of combination of properties; also supports client orderable child nodes and it used to store unstructured content.
      • rep: repository internals
      • mix: standard mixen node type
      • sling: added by sling framework
      • cq: added by aem framework. Some of the common ones are:
        • cq:Page stores content and properties for a page in a website
          cq:Template which defines a template used to create pages
          cq:ClientLibraryFolder define libraries of client-side javascript and css
          cq:Dialog define touch-enabled dialog box
          cq:EditConfig which define editing a configuration for a component including drag and drop and in-place editing
          cq:InplaceEditConfig define in-place editing configuration for a component, always seen as a child of the cq:Edit config

– JCR Folder Structure

When creating a project in AEM, it is a good practice to setup a specific folder structure that clearly define and organizes various elements of the site. These can be templates and components as well as static files and OSGI bindles. Let us take a look at folder structure in AEM. Three primary folders in AEM CRXDE are:
– Apps
– Content
– Libs

Libs: Stores library and definition that below to AEM, This includes out of the box components, templates and other AEM features such as search or replication and is also referred to as the foundation components. We should avoid making change to files in this folder. When we get a patch or upgrade from Adobe, it ends up in this folder.

Apps: Used to extend AEM. Use a feature known as Sling Resource Merger, which we will used to overwrite something in libs, well we can do that directly in apps. For instance, if I wanted to change the way AEM handles 404s, by default under libs we have sling -> servlet -> errorhandler -> 404.jsp. I can recreate this node structure in apps and AEM will use my 404.jsp instead of available in libs folder. Apps folder also stores all of our custom templates, components and any other definitions related to our site. When we inherit from those foundation components, it inherits from the libs folder. So remember, always copy components from the libs folder to the apps folder and then modify it in the apps folder. By doing this no code will be lost when we upgrade AEM, or when we patch it.

Content: Its where all of the conteent of our websites are stored. When an author creates a web page, or modifies the content of a web page, well, all of that is happening under here in the content folder.

Conf: Contains all of the configurations for the site. This folder is used to store the dynamic templates and policies of our site.

Etc: Contains resources related to utilities and tools.

Home: Contains all information related to users and groups.

Tmp: Servs as temporary working area

Var: Contains files that change and are updated by the system, such as audit logs, statistics and event handling.

oak:index: Its housed for unstructured data. This is a node that contains jackrabbit oak index information. Each node specifies the details of a single index. Standard indexes for AEM application are visible and additional custom indexes can be created.

– Setup Project Folder Structure

Create a project folder in apps folder and then create a components folder and two sub folder to differentatiate content components that are used by content authors and page-rendering components folder called structure that have components that are mainly used for layouting the site. And then create a templates folder that will have templates that will be used by authors to create new page. The folder structure in crxde will look like this for our website called “training”:

/
– apps
—- training
——– components
———— content
———— structure
——– templates

– Page rendering components

Components are modular, reusable units that implement specific functionality or logic to render the content of your website. A component is a collection of scripts which can be jsp files, htl files, java servlets. All of these completely realize a specific function. Every component in AEM has a default script file identical to the name of the component. If needed, we can remove this script and create our own. Nodes use the sling:resourceType property to point to a component, and in turn it’s rendering script.

Let’s create our first page rendering component. We are going to create page component. Create this under structure folder.
Create -> Create Component
Enter label, title, description, super type = wcm/foundation/components/page and leave group as blank
Click Next
No advance setting change

This will create a contentpage node in structure folder. It has a contentpage.jsp as default script with same name as component. We can change it to html file instead of jsp by remaining the file.

Edit the page with simple HTML code for hello world. This create a component in AEM. Now we need to have a content for this component.

Create a node in content folder. Enter name=hello-world and keep type = nt:unstructured.

Now we need to link page rendering component with content. This is done by invoking a page rendering script we created to render content. We do that by adding a sling:resourceType property to this node. Before I do that, I’m going to come back up to our component and highlight. This gives path and copy this path in content node and add a new property sling:resourceType = path of page component i.e. training/components/structure/contentpage

Now open new browser and type http://localhost:4502/content/hello-world.html

– Sling resolution process

Understanding sling resolution process:

– Sling is resource-oriented, URLs point to these resources
– Resources are maintained in the form of a virtual tree
– Resources are typically mapped to usually mapped to a jcr node but can also be mapped to a file system or a database

Resources share three common properties:
– Path: To help locate it
– Name: To identify it
– ResourceType: Which points us to resource’s renderer

Basic steps of processing requests:
– Each content item in the jcr is exposed as http resource
– Once content is determined then servlet to handle request is determined
– This is done by properties on the content item itself, the HTTP method being used to make the request, as well as simple naming conventions within the URL.

Steps involved are:
– Decompose the URL
– Search for servlet or vanity URL redirect
– If no vanity URL/ servlet/ redirect is associated then it will search for node indicated by URL of request
– Resolve resource
– Resolve the rendering script/ servlet
– Create rendering chain
– Invoke rendering chain and produce output for browser

  • Content path is in JCR.
  • Selectors might be there before the extension and after the content path. Selectors are used for alternate methods of rendering content.
  • Extension is content format.
  • Suffix can specify additional information.
  • Parameters are required for dynamic content

Resolving requests to resources: e.g. http://myhost/tools/spy.html
1. Check for redirection rule or servlet
2. Search for tools/ spy node
3. Find node’s sling:resourceType
4. If no node is found, return 404

Sling locating the rendering scripts:
1. When resource is identified from URL, its resourcesType property is located in the value extracted
2. This value is either an absolute or relative path that points to the location of the script to be used for rendering the content
3. All scripts are stored in either apps or libs folder, and are searched in same order
4. If no matching script is found in either of the folders then default script is rendered
5. If our component had three scripts, Get.html, contentpage.html, contentpage.blue.html then if /content/hello-world/test.blue.html and theat resource had a resourceType of our contentpage component, the scripts would have been found in the following order. First would have been contentpage.blue.html, the second being contentpage.html and third GET.html. Its based on best match

Reference

PluralSight Adobe Learning Course