contents · 2020-02-24 · in the node type creation pop-up window, you can enter the following...

2

Contents

1. Architecture Overview

2. Module Development Overview• What is a module?• Content of a module• Creating a module

3. Content object definitions

4. Module Deployment

5. Mixins

6. Rendering Scripts

7. Internationalization

8. Choicelists

9. URL Handling

10. Fragments Handling

11. The Caching System

3

ARCHITECTURE OVERVIEW1

4

Everything is Content

• Working with Jahia mainly means manipulating content and presenting it in a particular context.

• Each element stored into the Jahia content repository (text, images, PDF documents…) is considered as a content item with standard properties

• Content items are organized in a tree (in the JCR) but are independent from each other, and can be moved freely.

5

What is Jahia?

• Jahia can be many things to many people. Most projects will use it as a Web Content Management (WCM) solution, or whatever the moniker is at the time of reading, while others will use it as a portal server, a web integration platform, or even a full-fledged content integration solution.

• What Jahia really is, is software listening to HTTP requests with the ability to produce responses using HTML, any markup or even binary data that users might need. In its core, it uses a content repository to store and retrieve content, as well as multiple ways of deploying custom logic to operate on the content or to interface with third party systems. That’s the million-mile view of Jahia, and should give you a good idea of the flexibility of the system.

6

What is Jahia?

• A servlet container (Apache Tomcat, JBoss or IBM WebSphere)

• A set of filters and servlets that form the “outer layer” of Jahia

• A set of Spring beans that make up the main architecture of Jahia

• A set of modules that extend the basic functionality

• A JCR implementation for storage of content (Apache Jackrabbit 2.x)

• A portal container (Apache Pluto 2.x)

• A scheduler (Quartz)

• A workflow engine (jBPM)

• A rules engine (Drools)

7

Technology Overview

• Jahia is written in Java and is JDK 1.7 compliant

• Jahia is JDK 1.8 compliant

• Jahia is executed on an application server (Tomcat, JBoss, WebSphere)

• Data is stored in a JCR (Apache Jackrabbit)• The JCR uses two workspaces (default / live)• The JCR is stored as binaries in a DB

• Jahia requires an http server, as all input/output operations use the http protocol.

8

Core Services and Frameworks

• Apache Lucene as the indexing/search engine

• Apache Camel as an enterprise integration engine

• Spring Framework as the dependency injection and bean configuration technology

(as well as much more)

• Google Web Toolkit with Sencha GXT extensions for the UI in Edit mode and Studio

mode

• JQuery and extensions for the contribute and live modes

• JBoss Drools as a rule engine

• JBoss BPM as a workflow engine

9

Frameworks

10

Technical architecture

11

JCR Data Storage

Jahia stores all of its data in a Java Content Repository (JCR) (Apache Jackrabbit 2.x):

• Two workspaces are used in the JCR, one for the staging content (called “default”) and one for the live content (called “live”)

• JCR content is stored in an SQL database (MySQL, PostgreSQL, Oracle, MSSQL, and more). Node data is stored in serialized form for performance reasons.

12

The JCR Repository

13

JCR Data Storage

Contribute

Data repository (JCR)

Default workspace Live workspacePublicationWorkflow

DevelopersWebmasters

Authors Visitors

Templates management

Content Management

User Generated

Content

Content browsing

Studio Edit Render

14

MODULE DEVELOPMENT OVERVIEW2

15

What is a module?

• Conceptually, a module is equivalent to a plug-in

• Technically it is an OSGi Bundle (zip compression classic Java JAR file in Jahia-installation-folder/digital-factory-data/modules folder)

• Modules are like small programs taking advantage of Jahia’s infrastructure and services:• Tiny modules allow to declare new types of content (article, news, ports)• Modules can be used to add features on sites (tagcloud, google analytics)• More complex modules can add low level features (OpenSocial, LDAP for

example)• Template sets are also modules

16

What is a module?

• The key advantages of modules are:• Portability and reusability: the modules are independent from each other and

reusable across projects. • Easy to maintain: all elements needed by the module are packaged into a single

directory. A module update can be performed independently from the rest of the platform.

• Reliability: a defective module does not cause a general error on a page or site.• Team work: for large projects, it is easier to divide the work between developers,

each being responsible for a set of modules.

• Working on modules is usually the major part of a Jahia developer’s work:• By modifying / adapting modules provided out-of-the-box• By deploying new modules from the Jahia AppStore (http://store.jahia.com)• By creating new modules from scratch

17

Content of a module

• The standard structure of a Jahia module is generated with a Maven archetype. The Felix Maven Bundle plugin then generates an OSGi bundle out of the maven project.

• A module can contain :

– Definitions– Scripts (jsp, JSR 283, php)– Static resources (text, images, css,

js…)– Properties

files and resource bundles– Java classes and collections of

classes (JAR)– Filters

– Permissions– Rules– jBPM files– Tags– Spring configuration

files– Data files (XML)

• Nothing is mandatory (an empty module will do nothing)

18

Create a Module – Maven

Use Apache Maven to create your own module:

• From the console

mvn archetype:generate -DarchetypeCatalog=https://devtools.jahia.com/nexus/content/repositories/jahia-releases/arch

etype-catalog.xml

Choose archetype number 3 : jahia-module-archetype

Enter an artifactId (technical name), the jahiaVersion (7.1.0.0) and the moduleName

19

Create a Module - Eclipse

• From Eclipse

In Eclipse, click on File > New > Other ... > Maven > Maven Project > Next.

Declare http://maven.jahia.org/maven2 as remote catalog and select it

Enter an artifactId (technical name), the jahiaVersion (7.1.0.0) and the moduleName

Choose the archetype : jahia-module-archetype

http://maven.jahia.org/maven2

20

Create a Module - Studio

• Create a module from the studio

• The created module will have the version of your Jahia instance.

• Jahia is Integrated with Maven

21

Create a Module – Studio

• Create a new module in Studio

22

Example

23

For this training, we will create a module called

Acme Company.

• Create a New Module in Studio

• Module type should be “module”

• Module name should be “acmeCompany”

Exercise – Create a module

24

CONTENT OBJECT DEFINITIONS3

25

Content object model

• Each content item matches a specific NodeType

• A NodeType defines properties in order to form an abstract structure

• A property is a data field

News item 1Property Value

title Jahia adds HTML5 Support

body Next-generation CMS in…

date 2011-03-22

breakingNews 1

NodeType : NewsItemPropertyName PropertyType

title text

body text

date date

breakingNews Boolean


title New partner program…

body Beta program for Jahia…

date 2011-04-14

breakingNews 0


title Jahia 6.5 Service Pack..

body After the launch of…

date 2011-09-28

breakingNews 1

26

Definitions

• The node types of a module are defined in a CND file named definitions.cnd, which is located in the META-INF folder of the module structure.

•The Jahia 7 Studio features a CND editor called the Modeler. The Modeler allows you to create node types and declare their properties.

• Open the src/main/resources/META-INF folder in the left panel, and right click the definitions.cnd file for options

• The contextual menu will allow you to create a new namespace or content definition

•

•

27

Create a namespace

• Right click on the definitions.cnd file for your module

• Choose “New node type namespace”

28

Create a namespace

• Enter the prefix for your namespace

• Enter the URI

29

Create a primary node type

• Right click the definitions.cnd file and choose "New node type definition" in the contextual menu

• A pop-up window allows you to select either mixin or primary node type

• Select "Primary node type" (mixins are for abstract types)

30

Definitions : syntax

• A node type should be declared with a namespace, in order to avoid conflicts (by default, all Jahia standard node types use the jnt namespace)

• All nodes which need to share standard properties like metadata, ACL, versions… must inherit from jnt:content.

• All nodes which need to be drag & droppable from the left panel must be attached to a content category.

• The inheritance mechanism allows to retrieve all properties of the parent. Only a single parent type is allowed.

31

Node type creation

In the node type creation pop-up window, you can enter the following information:

• The namespace of the node type (default is "jnt")

• The technical name of the node type (i.e. "myComponent")

• The title (user friendly name) of the node type (i.e. "My First Component")

• The super type (all node types should at least inherit from jnt:content)

• A list of mixins (i.e. jmix:basicContent)

32

Example

33

Definitions : syntax

• When the new type is declared, we can add properties defined by a name and a type

• « Simple » properties can be of type :

– string– long– Double– boolean– Weakreference : reference to a node in the JCR

• In the "Properties" tab of the node type creation pop-up window, you can use the add button to add properties. In the following example, we will add a new property of type String.

34

Example

35

Property options

Jahia uses definitions to build the Edit and Contribute user interfaces. The forms are constructed based on the property type, but the form GUI can be tweaked by adding a Selector. The standard syntax is:

property_name (type, selector [options])

Examples:- field-name (string) Displays a simple text field (input text)

- field-name (string, richtext) Displays a WYSIWYG HTML editor

- field-name (string, choicelist) Displays a drop down list

- field-name (long) Displays a number text field

- field-name (boolean) Displays a checkbox

- field-name (weakreference, picker [type = 'image'])

Displays a node picker which only allows selection of an image file

- field-name (date, datepicker) Displays a calendar without hour in day

36

Setting property options in Studio

• In Studio, a property of type Date could be added, with a Selector type of DatePicker.

37

Setting property options in Studio

• Another example of adding a property with selector options.

38

MODULE DEPLOYMENT4

39

Where are my sources ?

• The path for the modules sources is defined at module creation (by

default in Jahia-installation-folder/digital-factory-data/sources)

• If the module has been created outside of the Studio:

• When executing the “mvn install” goal, a parameter containing the local path

to the project is added to the MANIFEST

• In the Studio, when you want to view the sources of a module, Jahia will

check that the source files are indeed present in the path specified in the

MANIFEST

• If Jahia can’t find the sources, it will offer to download them (if possible)

40

Enable a Module

To make your module available to editors you must enable your

module on a site. Go to Mode\Administration from the menu,

then to the System Components\Modules panel. Under the

“Usage in sites” area click to Enable your module on the desired

site.

41

Module deployment - other

• In your Maven settings.xml file, add a profile to declare the installation path of your Jahia application:

• You can now deploy your module:

<profile> <id>jahia-server</id> <properties> <jahia.deploy.targetServerType>tomcat</jahia.deploy.targetServerType> <jahia.deploy.targetServerVersion>7</jahia.deploy.targetServerVersion> <jahia.deploy.targetServerDirectory>Path-to-your-tomcat-installation</jahia.deploy.targetServerDirectory> </properties></profile>

mvn clean install jahia:deploy -P jahia-server

42

Example

Switching to Edit Mode, the new

node type now appears in the left

panel, in the "Components" tab.

Drag and drop the component to an

area on a page, fill the title in the

form, and an error message

appears:no render set for node : my-first-component

for types : [mynt:myComponent]

43

Exercise – Create a component

Create the definition associated to an employee of Acme Company.

• Use your own namespace

• Your component should be handled as standard Jahia content (ACL, metadata, …)

• Your component should contain the following properties:• First Name

• Last Name

• Your component should be made available in the category “Content: structured”

• Create a website and enable your component on this site.

• In Edit Mode, create an Employee content item.

• You should see the message “No render set for node : employee

for types : [mynt:employee]” …..”

44

MIXINS5

45

Mixins (abstract types)

Mixins are abstract data types that provide a set of properties.

A mixin can also define no property at all, it can just serve as a flag to be applied on some content types.

Mixin declaration[jmix:mixin-name] mixin- properties+ child

Use of mixins in a definition[jnt:content-type] > jnt:content, mixin1, mixin2

The inheritance mechanism allows for retrieving all properties of the parent.

Only a single parent node type is allowed, but several parent mixins can be set.

46

From node type to component

To make the node type available for editors, you need to apply a specific mixin from the following list:

• jmix:basicContent

• jmix:structuredContent

• jmix:multimediaContent

• jmix:listContent

• jmix:formContent

• jmix:queryContent

• jmix:siteComponent

• jmix:socialComponent

• jmix:layoutComponentContent

By applying one of theses mixins, your node type will appear in the components list, and editors will be able to drag and

drop the component on the page . You can even add you own component category:

[mymix:myContent] > jmix:droppableContent mixin

47

Example using mixin

/src/main/resources/META-INF/definitions.cnd

<jnt = 'http://www.jahia.org/jahia/nt/1.0'><jmix = 'http://www.jahia.org/jahia/mix/1.0'><acme = 'http://www.acme.com/jahia/nt/1.0'><acmemix = 'http://www.acme.com/jahia/mix/1.0'>

[acmemix:acmeComponent] > jmix:droppableContent mixin

[acme:newsItem] > jnt:content, acme:acmeComponent - title (string)- body (string)- date (date)- breakingNews (boolean)

48

Create a Mixin node type

• Right click the definitions.cnd file and choose "New node type definition" in the contextual menu

• A pop-up window allows you to select either mixin or primary node type

• Select ”Mixin node type”

49

Example

50

mix:title

You can use the predefined mixin “mix:title” to define a standardized title, on which the system name is synchronized

You can use the mixin on any content type.

This content type has 2 properties: one is “jcr:title”, and the other one is “text”.

[mix:title] mixin - jcr:title (string) i18n boost=2.0

[mynt:myComponent] > jnt:content, mynt:myCategory, mix:title - text (string, richtext)

51

mix:title

If the inherited property configuration does not fit, then you

can override it:

This content type has only one “jcr:title” property, which is

not internationalized. (We have overridden the inherited

“jcr:title” property).

[mynt:myComponent] > jnt:content, mynt:myCategory, mix:title - jcr:title (string) primary - text (string, richtext) i18n

52

• Extend the employee component definition with a property named “Badge number” of type string. The system name should be synchronized on this property.

• Add a property to the employee component called “biography”.

• Create a custom component category to handle any components created in your Acme Company module.

• Move your Employee component from the category “Content: structured” to this custom component category.

Exercise – Create a component category

53

RENDERING SCRIPTS6

54

Display content objects

The rendering of a node is controlled by its type:

• For a node of type jnt:news Jahia will look for a folder named jnt_news

• If the page is being rendered using HTML, Jahia will search for a subfolder

named html inside the jnt_news folder

• Finally, Jahia will search for a default view named news.jsp inside the html

folder

So the path of the default HTML view for jnt:news will be

/jnt_news/html/news.jsp

55

Display content objects

• Each node type is associated to one or more rendering scripts called "views”:

• The default view is named “type.jsp”. In our case news.jsp

• Additional views are named “type.key.jsp”. For example, news.details.jsp

• By default, scripts provided by Jahia are written in JSP, mainly leveraging the

Jahia and JSTL TagLibs

• It is possible to use other scripting languages such as:

• The languages covered by the JSR283 standard: Velocity, Freemarker, Groovy …

56

Views of a content object

• A view is a series of instructions responsible for managing the logical rendering of a node type.

• A single node type can have multiple views.

• Views are stored as a script file on disk, and are usually written in JSP.

• Having multiple views permits you to use the same node type for different needs:• Use different properties of a single node

• Apply specific handling

• Insert the values of properties in different patterns of presentation

• Provide different output formats (HTML, CSV, RSS, VCF ...)

57

Display the propertiesof the content objectIn Studio, the GUI will allow you to create your views in the right location, by right clicking the node type under the definition.cnd in the module structure, and selecting the "Add view mynt:myComponent" option.

This will open the built-in JSP editor (called the Composer) which allows you to start implementing the view. The idea is to display one of the content object properties.

58

Displaying Properties

In order to display the properties of a node, it is first necessary to access the node object itself.

A view always applies to a node type, and is executed to render one content of this type. In this view, we want to render the current content, and so we need to access its properties.

The currentNode variable, which is always available in the scope of any view, allows for accessing all data of the currently viewed or edited node.

The properties of the node can be accessed by using their names as defined in the CND file.

59

Displaying Properties

Displaying the properties of a node in a view is usually performed through one of the following methods:

• Use an EL expression like this:

or

• Use the Jahia TagLibs in order to display a property value or store it inside a variable.

${currentNode.properties.propertyName.format}

${currentNode.properties['propertyName'].format}

<%@ taglib prefix="jcr" uri="http://www.jahia.org/tags/jcr" %> <jcr:nodeProperty node="${currentNode}" name="propertyName" var="varName"/>${varName.format}

60

Displaying Properties – Output Format

For each type of property, a different output format should be used:

• Text: ${currentNode.properties.textProperty.string}

• Integer: ${currentNode.properties.integerProperty.long}

• Decimal: ${currentNode.properties.decimalProperty.double}

• Boolean: ${currentNode.properties.booleanProperty.boolean}

61

<jcr:nodeProperty/>

Display or store the property of a node

Parametersnode node on which to read the propertyname property nameinherited (boolean) search the property in the parent node if it is not in the current nodescope scope of the property (page, request...)var store the property in a variable

Examples<jcr:nodeProperty node="${user}" name="j:birthDate" var="birthDate"/>

<jcr:nodeProperty node="${renderContext.mainResource.node}" name="jcr:createdBy" var="createdBy"/>

<jcr:nodeProperty node="${currentNode}" name="j:url" var="linkurl"/>

62

JSTL : introduction

In addition to the Jahia Taglibs, the JSTL taglibs are also available.Reference : http://download.oracle.com/javaee/5/tutorial/doc/bnake.html

Main libraries:

Core: Main JSTL library<%@ taglib prefix="c"

uri="http://java.sun.com/jsp/jstl/core" %>

Functions: functions library <%@ taglib prefix="fn"

uri="http://java.sun.com/jsp/jstl/functions” %>

Languages: i18n library<%@ taglib prefix="fmt"

uri="http://java.sun.com/jsp/jstl/fmt" %>

All JSTL tags can save the tag result in a “var” parameter.

63

JSTL : core – variables

Library:<%@ taglib prefix="c"


Examples:1. Define a variable

<c:set var="myVar" value="myValue/>

2. Add a map property<c:set target="myTarget" property="prop”

value="val"/>

3. Delete a variable <c:remove var="myVar"/>

4. Use a variable${myVar}

5. Display a variable${fn:escapeXml(myVar)}

64

JSTL : core – tests



Examples:1. Perform simple tests :

<c:if test="${myTest}”></c:if>

2. Test with multiple values :<c:choose>

<c:when test="${myTest}">

</c:when><c:otherwise>

</c:otherwise></c:choose>

65

JSTL : core – loops



Examples:${items} is a collection of objects

<c:forEach items="${items}" var="item"> ${item}</c:forEach>

<c:forTokens items="a,b,c,d" delims="," var="item"> ${item}</c:forTokens>

Parameters:varStatus contain information on the current loopBegin index of the beginning of the loopEnd index of the current loop endStep step between two iterations

66

JSTL : functions

Library:<%@ taglib prefix="fn”uri="http://java.sun.com/jsp/jstl/functions" %>

Functions are mainly used for string manipulation

Syntax: ${fn:func(arg1,arg2)}

Example: ${fn:trim(text)} returns the text without the spaces at the beginning and the end.

Available functions:toUpperCase, toLowerCase,substring, substringAfter, substringBefore, trim, replace, indexOf, startsWith, endsWith, contains, containsIgnoreCase,split, join, escapeXml

67

moduleMap

Map of properties that allows for sharing variables between different modules.

To add or modify a variable :

<c:set target="${moduleMap}" property="var" value="myValue"/>

To read a variable :

${moduleMap.var}

68

For the following definition of jnt:text

[jnt:text] > jnt:content, jmix:basicContent, jmix:editorialContent - text (string) i18n

The property text is displayed with:

<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>${fn:escapeXml(currentNode.properties.text.string)}

Examples

For the following definition of jnt:bigText

[jnt:bigText] > jnt:content, jmix:basicContent, jmix:editorialContent - text (string, richtext) i18n primary

The property text is displayed with:

${currentNode.properties.text.string}

69

Displaying Properties - Date

• If your property is of type date, use the getTime() method from

the JCRValueWrapper interface:

${currentNode.properties.dateProperty.time}

• You will get a java.util.Date object, which you can then manipulate as

required. To display the date in HTML in your view, the most convenient way

is to use the JSTL i18n library:

<fmt:formatDate pattern=”MM/dd/yyyy"

value="${currentNode.properties.dateProperty.time}" />

70

Displaying Properties – Weak Reference

• If your property is of type weak reference, use the getNode() method from the

JCRNodeWrapper interface:

${currentNode.properties.referencePropertyName.node}

• You will get another node, and you can then access its properties the same way as for the

current node.

71

Empty properties

• Remember that an author will not always fill in all the fields for a content item.

• It is best practice to first check for an empty property if the property is not a mandatory property.

<c:set var="textProp" value="${currentNode.properties.text}" /> <c:if test="${not empty textProp}"> <div>${textProp.string}</div></c:if>

72

Example

To create a default view for the basic myComponent definition declared

earlier, we add the following line to the new JSP file in order to display

the title of the component:

You can also use the Code Snippets in the menu, by selecting "Properties"

for the snippet type, "Display property title" in the code template

drop-down menu, and clicking the "Add" button.

<h2>${currentNode.properties.title.string}</h2>

73

Example

74

Example

Once finished editing the JSP file, click

the "Save" button, and a pop-up

window will allow you to confirm the

node type for the view, set the output

type (default is HTML) and eventually

give a custom name to the view.

75

Example

Once the view is saved, we can switch back to Edit Mode, and reload the workspace.

The former error “No render set for node of type mynt:myComponent” should be replaced with the display of the view you just implemented

We are now able to create a new content type and display it !

76

Exercise – Create a view

• Create a default view for your Employee component.

• Your view should display all the properties for the employee.

• Verify, in Edit mode, that you have correctly rendered your component.

77

INTERNATIONALIZATION7

78

i18n : Internationalization

Jahia uses a standard resource bundle mechanism to manage “on the fly” translation of labels in the edit mode UI, as well as any static values used in script files.

Keys and translations are placed in properties files, one for each language required.

79

i18n : Internationalization

Make your properties available in all languages by checking the International option in the Properties tab.

80

Resource Bundles

For a node, the resource bundle key is linked to the Title field.

Entering a value here will automatically create the key in the resource bundle files.

81

Resource Bundles

For node properties, the resource bundle key is linked to the Title field on the Properties tab.

Entering a value here will automatically create the key in the resource bundle files.

82

Resource Bundles

• The resource bundle file my-first-module_en.properties now contains the following values:

• The JSTL taglib can be used to handle internationalized text.

<%@ taglib prefix="fmt” uri="http://java.sun.com/jsp/jstl/fmt" %>

In your JSP file you can use the following format:

<fmt:message key="resourceKey"/>

Example: <fmt:message key="label.enterName"/>

83

The Resource Bundle Editor

Right click on the resource bundle file and choose Edit to open the resource bundle editor.

84


85


Add new keys, and their translations, in the Resource Bundle Editor.

Add new languages by

clicking

86

• Make the biography field internationalized.

• Using the Resource Bundle Editor, enter the values for your properties in several languages.

Exercise – Internationalization

87

CHOICE LISTS8

88

Choice list initializers

• ChoiceList initializers allow you to set the way a dropdown list (or combobox) is populated for the end users when editing or creating content in the Edit Mode.

• Jahia allows you to define, in your definitions, that a property must use a choicelist (will be rendered by a dropdown list) to specify its value.

• The syntax is as follows:

field-name (type, choicelist[initializer])

89

Simple Example

• The simplest example is to use a choicelist for the selector type and to list the allowed values in the constraint of the definition :

- contract (string, choicelist) < contract1, contract2, contract3

• To define this property in Studio, set the property definition selector type to be Choicelist and enter the value constraints.

90

Simple Example

The results will be presented in Edit Mode as follows:

91

Resource Bundle initializer

• To provide more explanatory values to the end user, use the resource bundles to modify the rendering of your dropdown list :

- contract (string, choicelist[resourceBundle]) < contract1, contract2, contract3

• In the resource bundle files, add the key values:jnt_job.contract.contract1 = Fixed-term contractjnt_job.contract.contract2 = Indefinite durationjnt_job.contract.contract3 = Short Mission / Temp work

• This will render the values from the resource bundles in the drop-list in Edit Mode.

92

Resource Bundle Initializer

• To define this property in Studio, enter resourceBundle as a selector option in the property definition.

93

Resource Bundle Initializer

The results will be presented in Edit Mode as follows:

94

Node initializer

• The node initializer allows you to bind a dropdown list to the content of a node in the JCR by defining the root path to the node and specifying the type of child nodes you want to list.

• Use a weakreference for the property required type.

Example:- firstLevelCategory(weakreference, choicelist[nodes='/sites/systemsite/categories;jnt:category'])

• This will populate the drop down list with objects of type jnt:category located under the node /sites/systemsite/categories

95

Node Initializer – Example

• In Studio set the property’s required type to WeakReference and use a Choicelist selector type.

• Enter the path to node and what type of child nodes to list

• This will populate the drop down list with objects of type jnt:category located under the node /sites/systemsite/categories

96

Node Initializer – Example

• The results will be presented in Edit Mode as follows:

97

Node Initializer – currentSite

• Use the currentSite keyword to dynamically generate the current site path and populate the dropdown list with nodes of a certain type.

Example:contactPerson(weakreference, choicelist[nodes='$currentSite//*;jnt:contact'])

• This will populate the dropdown list with all nodes of type jnt:contact found under the current site.

98

Node type validation

• The weakreference properties allow for node type validation. Use the “<” to define the type of node that can be chosen.

- myProperty(weakreference) < mynt:myComponent

• In this example, only a content of type mynt:myComponent can be selected for the myProperty field.

• In Edit mode, the author will be presented with a content picker and will only be able to select nodes of type mynt:myComponent

99

Node Validation – Example

• In Studio set the property’s required type to WeakReference and use the generic Picker selector type.

• Enter the node type in the Value constraints field.

100

Other initializers

• Other initializers provided are the country and country/flag

initializers

Example

- nationality(string, choicelist[country])

• This will initialize the drop down list with a standard list of official countries

Example

- nationality(string, choicelist[country,flag])

• In this example, the national flag is shown next to the country name in the drop

down list.

101

Choice list renderers

• When loading the value of a property based on a choicelist, you will load the raw value stored.

• In your views, you may want to replace this raw value by some pretty rendering.

• The jcr:nodePropertyRenderer tag is used to perform an operation on a property before displaying it. Use this tag to specify a renderer for your property.

<%@ taglib prefix="jcr" uri="http://www.jahia.org/tags/jcr" %><jcr:nodePropertyRenderer node="${currentNode}"

name="propertyName" renderer="rendererName"/>

102

Choice list renderers

Jahia provides several default renderers:

• resourceBundle

Displays the values found in the resource bundle files.

[jnt:myComponent] > jnt:content, jmix:structuredContent - myField(string, choicelist[resourceBundle]) = 'val1' < 'val1', 'val2'

<jcr:nodePropertyRenderer node="${currentNode}" name=”myField" renderer="resourceBundle"/>

103

Choice List Renderers

• country

Displays the name of the country

• flagcountry

Displays the name of the country and the national flag of the country

[jnt:myComponent] > jnt:content, jmix:structuredContent - nationality(string, choicelist[country])

<jcr:nodePropertyRenderer node="${currentNode}" name=”nationality" renderer=”country"/>

[jnt:myComponent] > jnt:content, jmix:structuredContent - nationality(string, choicelist[country])

<jcr:nodePropertyRenderer node="${currentNode}" name=”nationality" renderer=”flagcountry"/>

104

• Add the following properties to your Employee component:• A main photo

• Job title (use a choicelist and resource bundle initializer)

• Nationality (use a choicelist and relevant initializer)

• Birthdate

• Supervisor (use a reference, as the supervisor is also an employee of Acme Company)

Exercise – Add properties

105

URL HANDLING9

106

Working with URLs

All nodes have a url property :

<c:url value=${pageNode.url}" /><c:url value=${fileNode.url}" /><c:url value=${contentNode.url}" />

Rewriting at the Tomcat level will only work for URLs constructed with <c:url />

• According to the Servlet specification, the rewriting mechanisms plug on HttpServletResponse.encodeURL()• <c:url /> calls this method

As for any JSTL tag, it is possible to assign a variable to store the output: <c:url value="${node.url}" var="myUrl" />

Generate a URL for a web content item:

<c:url value="${fileNode.url}"/>

107

Working with URLs

Generate a URL for a web content item:

A URL is delivered through the combination of elements through the <c:url /> tag${url.base} returns the base URL (servlet/workspace/language)${node.path} returns the path of the node to be displayed.view specifies the view to be applied (optional).html specifies the output type to be used

<c:url value="${url.base}${node.path}.aView.html" /><c:url value="${url.base}${node.path}.xml" />

The url property of a content node will generate the URL of the default view in html output type, keeping the same language and mode.

The following 2 pieces of code will generate the same URL:<c:url value="${contentNode.url}" /><c:url value="${url.base}${node.path}.html" />

• The first syntax is easier to use and most of the time will be enough• The second syntax will allow you specify a different rendering mode, an alternative view, or an alternative output type.

108

URLs for different rendering modes

Base URL${url.baseLive} Base URL to the live mode${url.baseEdit} Base URL to the edition mode${url.basePreview} Base URL to the preview mode${url.baseContribute} Base URL to the contribute mode${url.files} Base URL for the files

Mode switching (keeping same main resource, same language, and same output type)${url.live} Full URL to switch to the live mode${url.edit} Full URL to switch to the edit mode${url.preview} Full URL to switch to the preview mode${url.contribute} Full URL to switch to the contribute mode${url.studio} Full URL to switch to the studio mode${url.logout} Logout URL

From relative URL to absolute URL${url.server} Prefix your relative URL with this string to make it absolute

109

JSTL : core – URLs



Examples:The JSTL handles URL generation <c:url value="/images/image.png” context="${url.currentModule}"/>

It is necessary to use this URL building syntax to leverage the URL rewriting features provided by Jahia in render/live modes.

110

Exercise – Detail View

Create a detail view for your Employee.

• This detail view should display all fields for the Employee.

• Create a content template in the studio for your Employee.

• This content template should use the detail view of the employee component.• This content template should include a back button.

• You should modify the default view of the Employee component to include a link showing the employee name, which gives access to the content template.

111

FRAGMENTS HANDLING10

112

Delegating rendering

• When implementing a view, you should focus on the currentNode

• If you need to render another node, delegate it to its component using <template:module />

• If you need to reuse some code, package this code in an additional view, and include it when using other views with <template:include />

• If a view should never be directly used by an author, make it hidden

113

<template:module/>

This tag displays modules

The module to display is specified by one of these 3 parameters :path="${node.path}" the JCR path to the node to be displayednode="${node}" the instance of the node object to be displayed (JCRNodeWrapperImpl)nodeName="node" the name of the node variable instance

Other parameters are :view display the moduleeditable if false, then the content displayed is not editable in edit modevar store the module rendering value in a variablenodeTypes list the node types displayed and authorized in edit modetemplateType rendering type for the module (html, etc ..) - by default inherited from parent or html.

ExampleDisplay sub nodes from the current node with their rendering :

<c:forEach items="${currentNode.nodes}" var="child"> <template:module node="${child}" view="myView"/></c:forEach>

if path="*" we create a placeholder in edit mode (mandatory in order to create sub-nodes)<template:module path="*" nodeTypes=“mynt:myComponent” />

114

<template:include/>

Display the current node with another view or another rendering format

Example in modules/news/jnt_news/html/news.jsp<template:include view="short" templateType="csv"/>

Will include the output of the view jnt_news/csv/news.short.jsp

115

Example

definitions.cnd

mynt_employee/html/employee.jsp

This code does not use the flexibility provided by Jahia, and will lead to cache issues !

[mynt:company] > jnt:content, mymix:myCategory, mix:title

[mynt:employee] > jnt:content, mymix:myCategory, mix:title

- company (weakreference,choicelist[nodes='$currentSite//*:mynt:company']) mandatory

<h2>${currentNode.properties['jcr:title'].string}</h2>

<h3>Company</h3>

${currentNode.properties.company.node.properties['jcr:title'].string}

116

Delegating rendering

mynt_employee/html/employee.jsp

• This code delegates the rendering of a company content to the company component

mynt_company/html/company.hidden.name.jsp

<h2>${currentNode.properties['jcr:title'].string}</h2>

<h3>Company</h3>

<template:module node="${currentNode.properties.company.node}" view="hidden.name" />

${currentNode.properties['jcr:title'].string}

117

Splitting the code

mynt_company/html/company.jsp

• You can split your code into several views, so that some generic views can be reused

mynt_company/html/company.hidden.name.jsp

<h2>Company name: <template:include view="hidden.name" /></h2>

${currentNode.properties['jcr:title'].string}

118

Sub-nodes

A node type definition may include the types of sub-nodes allowed.

Syntaxtype …+ name-subnode(type)

Example 1news …+ imageNews (jnt:file)

Each news item will accept only one child of type file

Example 2news+ * (jnt:file)

The news item will accept several children of type file

Children are not created by default when the parent is created, only when they are explicitly created.

119

Rendering sub-nodes

• mynt:employee is not a droppable component and can only be created inside a company, not in an area

• When you render a company, you have to:• Generate a button to allow the authors to create some employees as sub

nodes of the company

• Iterate over the employees to render them

[mynt:employee] > jnt:content, mix:title


+ * (mynt:employee)

120

Rendering sub-nodes

To generate the placeholder to create the sub-nodes:


+ * (mynt:employee)

<c:if test="${renderContext.editMode}">

<template:module path="*" />

</c:if>


+ ceo (mynt:employee)

<template:module path="ceo" />

121

Rendering sub-nodes

Use one of the following 2 methods to render the sub-nodes:

OR

<c:forEach items="${jcr:getChildrenOfType(currentNode, 'mynt:employee')}" var="employee">

<template:module node="${employee}" view="default" />

</c:forEach>

<c:forEach items="${currentNode.nodes}" var="employee"> <c:if test="${jcr:isNodeType(employee,'mynt:employee')}"> <template:module node="${employee}" view="default" /> </c:if></c:forEach>

122

Exercise – Working with subnodes

Create a component called Company Division• This component should have a name and an address as properties.• It can contain one or several employees

• It displays the name of each employee in the division and a link to access the detail of the employee

• It is a Acme Company component

• When you render a company division, you have to:• Generate a button to allow the authors to create some employees as sub

nodes of the company

• Iterate over the employees to render them

123

THE CACHING SYSTEM11

124

Caching

Front-end cache in Jahia 7 is implemented as a rendering filter and uses EHCache as the backend framework. The default filter is the AggregateCacheFilter.

This filter will cache each component’s output separately and then aggregate all cache fragments on rendering time to deliver the full page to the client.

This means that:• A particular component’s output can be set to bypass the cache without deactivating cache on the whole

page.

• When a cache fragment is outdated, only a minimal portion of the page has to be recalculated.

125

Caching

Take, for an example, a "last news” component that displays the latest 5 news of a site.

• The AggregateCacheFilter will ask for the component “last news” in order to render each individual news.

• Those 5 news will be cached separately and the “last news” component will contain the references to those news.

• When subsequent rendering is needed, the “last news” component will search for the expected news in the cache. If they are found it aggregates the content in the output, otherwise it asks for the missing news.

126

Caching

Invalidation or expiration ?

• Jahia is using both modes for its caches, by default a fragment will have its expiration set to 30 minutes. If the fragment is accessed before the 30 minutes, the cache expiration is reset to 30 minutes.

• If, during this time, the element is updated or deleted or a child node is added/removed the element will be invalidated from the cache on the fly.

127

Cache dependencies

The cache, because of its rendering model, manages dependencies and invalidations transparently.

• If an object is modified then its cache fragment is invalidated, and the fragment is re-processed at the next request.

• Parent/child relationships are handled automatically, if one changes both caches are invalidated.

• An html parsing filter runs to find any links to other nodes and cache dependencies will be handled automatically.

128

Manual Dependencies

Sometimes objects are not related in any way to each other, but the invalidation of one calls for the invalidation of the other.

In such cases, you can manually add a dependency by using the template:addCacheDependency tag in your jsp file.

<template:addCacheDependency node="${anotherNode}"/>

This tag allows triggering an automatic flush of the cache for the current fragment not only when the "currentNode" in the scope of this jsp is modified (native Jahia behavior), but also when anotherNode is modified.

129

Manual Dependencies

You can specify the manual dependency in two ways:

• Use the node parameter to set a cache dependency on a specific node, where node is the name of the dependent node.

<template:addCacheDependency node="${comments}"/>

• Use the path parameter to set a cache dependency on a specific node, where path is the path of the dependent node.

<template:addCacheDependency path="${currentNode.path}/comments"/>

130

Custom cache settings

You can set custom cache settings on a “per view” basis by using a properties file.

The properties file for a view will be named the same as the view but with .properties as the extension.

For example, to set the cache expiration of the component named jnt_banner to 30 seconds, the file named jnt_banner/html/banner.properties will contain the following:

cache.expiration = 30

131

Cache setting in Studio

• Custom cache settings for a view can be easily set in Studio by Editing the view and clicking the properties tab for the view.

• For example, to set cache expiration enter the value (in seconds) in the field cache.expiration.

132

Custom cache settings

• For content items, custom cache properties can be set from the Options tab in Edit Mode.

133

Examples

• A component that displays stock quotes should refresh every 30 seconds. Use the following cache setting to accomplish this:

cache.expiration = 30

• Display “Welcome username” on the page after the user has logged in. Use the following cache setting to accomplish this:

cache.perUser = true

• In Studio you use a component called pageTitle on a content template in order to show the title of the page. As this will always remain the same for each rendering of the page use the following cache setting.

cache.mainResource = true

134

Caching Configuration

• Correct cache configurations are critical for the performance of a site.

• Reduce the cache expiration for content which can change with time.

• Never set cache.expiration=0 for content with heavy processing (queries for example).

135

Caching in Live Mode

• The AggregateCacheFilter is configured to only work for the live workspace in live mode.

• The EDIT and PREVIEW modes will never be cached as they require up-to-date content.

• If you set custom cache configurations you must publish your content and check the results in live mode.

136

Basic Developer Training

contents · 2020-02-24 · in the node type creation pop-up window, you can enter the following...

Documents