Day Excercises PDF

• Day
Technical Training
Exercise Guide
CQ 5.9 l1eveloper fraillillg
World Standard Software to Unify Your Business 1
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwwclav:cQm

• Day
CQ 5.3 Developer Training
V 1.5
Pu blished September 20 10
Copyright © 2010 Day Management AG, Swi tzerl and. All rights reserved.
No part of th is publication (hardcopy or electronic form) may be reproduced or transmitted, in any form or by any means, electronic,
mechanical, photocopying, recording, or otherwise, without the prior wr itten consent of the publisher. Information in this manual is
furnished under license by Day Software, Inc. and may only be used in accordance with the terms of the software license.
Day, the Day logo, Commun iqu~ and CRX are registered trademarks and service marks, or are trademarks and service marks of Day
Management AG, Switzerland , in various countries around the world. AU other product names and company logos mentioned in the
informatioo, documents or other items provided or available herein may be the trademarks of their respective owners.
We grant you limited license to use materials solely for eduction purposes, You acknowledge that all right.
title and interest (i ncluding IP rights) in and to the materials remains in Day.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.dav.CQm
• Day 1 6
EXERCISE - Install & Start an Author Instance 6
EXERCISE - Browse Related ApplicationlServer Interfaces 9
EXERCISE - Create an ApplicationlProject 14
EXERCISE - Create a Template 19
EXERCISE - Create a "Page" Component 23
EXERCISE - Create Pages & Web Site Structure 26
EXERCISE - Install & Start CRXDE 30
EXERCISE - Utilize CRXDE 32
EXERCISE - Include the "global.jsp" in the Page Component 34
EXERCISE - Display Basic Page Content 37
Day 2 40
EXERCISE - Create Multiple ScriptslRenderers for the" Page"

Component 40
EXERCISE - BreakoutIModularize the" Page" Component 48
EXERCISE - Initialize the WCM 51
EXERCISE - Extend the Foundation" Page" Component 53
EXERCISE - Extend the Script Structure of the" Page"

Component 58
EXERCISE - Create and Assign a New Design 62
EXERCISE - Create a Text-based Navigation Component 69
EXERCISE - Add a Log Message 74
EXERCISE - Enable the Debugger 78

World Standard SOftware to Unify Your Business 3
Copyright 2010. Day Software AG, Switzerland Rev 1.5 20100907 wwwdav.com
• EXERCISE - Create an Image-based Navigation Component 83
EXERCISE - Create a Title Component 87
Extra Credit EXERCISE - Create a List Children Component 94
Day 3 96
EXERCISE - Create a Logo Component 96
EXERCISE - Include the Foundation Breadcrumb Componentl05
Extra Credit EXERCISE - Modify the Foundation Breadcrumb

component 108
Extra Credit EXERCISE - Modify your logo component 109
Extra Credit EXERCISE - Modify your topnav component 110
EXERCISE - Include the Foundation Paragraph System

Component 111
EXERCISE - Content Finder Drag-and-Drop 116
EXERCISE - Create a Complex Component 121
EXERCISE - Include Multiple Foundation Components 135
EXERCISE - Create a Search Component 138
EXERCISE - Apply 118n to a Component 144
EXERCISE - Create & Register a Widget 149
Day 4 157
EXERCISE - Create and Consume an OSGi Bundle 157
EXERCISE - Examine the Workflow Console 166
EXERCISE - Create a Workflow Implementation Step 173
EXERCISE - Create & Download a CO Package 181

Copyrigh1 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 Www.dav.cpm

• EXERCISE· Find Slow Responses 187
EXERCISE· Change Default Passwords 198
Appendix A 209
Exercise· Upgrading CO 5.3 to a CRX 2.1 Repository 209
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwwday.cpm
•
Day 1
EXERCISE - Install & Start an Author Instance
Goal
The fo llowing instructions explain how to install and start an Author instance.
T his is important because you will use t hi s Auth or instance throug hout th is
training to perform typical development tasks. To successfully complete and
understand th ese instructions, you will need:
• A CQS quickstart JAR

• A vali d CQS license key
• AJDK > ~ 1.5
• Approximately 800 MBs of free space
• App roximately 1 GB of RAM
What is an Author instance?

An Author instance is t he CQS ·installation content authors wi ll login to and
manage pages . This includes: 1) creating, 2) edit ing, 3) deleting, 4) moving, 5)
etc. In ad dition , it is the instal lation you will be developing against as you can
easil y observe both Author and Publish views.
1. Create a folder structure on your file system where you will store, install, and
start CQ5 (e.g. C / day/ cq5 / author).
WARNING
MS Windows users, please do not use spaces in your newly created folder structure (e.g . C: / this
is bad / cq5 / author). This will cause CQS to error.
2 . Copy the CQ5 quick start JAR and license.properties fi le from < USB> /
distri bu tion / cq5_wcm into the newly created folder structure.
Copyright 2010. Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day.com

• - l P:\day\cq5\aut hor
Name
dnd Folder Tds.ks d cq-5 . 3-quickstart . Jar
--1 license ,properties
P'.J sl" tt- I~ fl) del t., H';6
el
'-~, ~ "i) - f -1,-1.;:.·, .
r/' . .... - '~ .... -.
- . , ....... ...... <• • • , ' '-,.... . .......
". ..... .. .......
CQ5 author install folder structure
3. Rename the CQS quickstart JAR to cq-author-4502.jar.
• cq = t he ap plication
• author == t he WCM mod e it will run in (e.g. author or publish)
• 4502 = the port it will run in (e. g. any available port is acceptable)
NOTE
If no port number is provided in t he f il e name, CQS will se lect t he first avai lable port from the
fo ll owing li st: 1) 4502, 2) 8080, 3) 808 1, 4) 8082, 5) 8083, 6) 8084 , 7) 8085, 8) 8888, 9) 9362,
10) rand o m.
4. Double-click the cq-au t hor-4 S02.jar fi le.
• Installation will take appro x imately 5- 7 minutes, depending on your systems

capabilities
• A d ialog w ill pop-up similar to the one below
CQS ' :1\1 . . . ....

Setting UI) COSE WebalJPS and files...
ignored :il'>: e,'re pro vi ong lIo Ou!ckst.n-speelfie variant
...
p-'dalCq3"awthor1c.rx.quCkstarl\s""'~ ill~
-' JII"
CQS install/startup dialog

Copyright 2010, Day SoftwareAG. Switzerland Rev 1.5 20100907 www.4ay.com

•
5. Enter the default adm in istrator "Username" (admin) and "Password" (admin)
in t he CQ5 log in screen after your favorite Web browser pops- up - then select
OK .
• CQ5
, """
Pas.:: rd •••• -1
CQ5 login dialog
Co"gratulatio"s! You have s uccessfu lly installed and started CQ5 . To start CQ5 in
the future , double-click t he renamed CQ5 quic kstart JAR fi le (e.g . cq-
author-4502 .jar).
NOTE
You can also insta ll / start CQ5 from the com mand line whi le increasing th e Java heap size,
w hich wi ll improve performance. Please see image below.
CQ5 command line start
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.tlay.coro

•
EXERCISE - Browse Related Application/Server
Interfaces
Goal
The followin g instructions explain how to browse the application / server
interfaces associated wi t h a CQ5 installation . T his will enable you to use their
ad mi nistrati ve / con figu ration capa bili ti es. To success f ully complete an d
understand these instructions, you will need :
• A running CQS Author instance
What interfaces exist?

A t ypical CQ5 installation cons i sts of a Java servlet engine (CQ5E), a Java
Content Repository (CRX) , and a Launchpad (Feli x / Sling) application. They each
have their own We b interface allowi ng you to pe rform ex pected administrati ve/
confi guration tasks .
How to browse t he CQS£ Interface:
1. Enter the URL http: // localhost:4502 / admin in your favori t e Web browser' s
add ress bar.
2 . Enter t he default ad ministrator "User name" (ad min) and "Passwo rd " (ad m in)
in the dialog - t hen select OK.
http;lIlocaho~:<tS02/aOOw;
A usemame and password are belOQ reqJested by http://locah;:&: ofS02. The sle says: "D<Iy
~r'kt Engine AdlnlntstTatlOO-
USer NaJne.: adffiln
Password : •••••1
,_ _
01
1
-,,_1 , ,:""~ 1
CQSE login dialog
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wWW:da Y-com
•
...
'B " .."R¥' .....,·P? --""'-.J - J I
--""'-.J ~ • I
~ ---""-.J • I
~ -.
,-----"
-
Co~gratuJ atio~s! You have successfully logged into th e CQSE Java servlet engine.
Typi cally, task s avail able t hrough this interface will be handled by the system
administrator.
How t o browse t he CItX I ~terfa.e:
1. Enter the URL http:// localhost:4S02 / crx in your favorit e Web browser' s
address bar - t hen sel ect Log In after the CRX interface appears.
2 . Enter t he defa u lt ad ministrator "User" (admin) and "Password" (admin) in the

CRX login screen , while continuing to use the crx .defau lt "Work space" - then
se lect Sublttit Query.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.day.com

• Use r-10: anonymous I W o rkspace: crx .d e faul t I I (t«tJ..!!.
cr :~ . .j€ f.;ult v
I Submit Que l':5.J

"
" "'-""
CRX login screen
3. Select Co"te"t Explorer in the Main Console - a new Web browser window will
pop-up .
4. Navigate to the fol der /co ntent/ geometrixx/ en/ company to view a portion of
the Geometrixx Web site structure.
t.1
.J •• -. ,-
-
CQ;P.aQe
I
-
.J ""
.J "'
..J CCW"ll:ef'lI
.J _
.J ....
to
lO:o;r e"'~
ltI:(te.!led3y
",:(ONet'!(
.J _ oave...eo ..
.J 00d
"''''
C<l' P~
cq:P...,..
CQ: P/IO)'!'
j
,J
,J
...J ~'u
to 10'
.J ~
«'f'(ffl.
t. 10 ' _«"-
f
r'
-" - I
_~H
•I
CRX content explorer viewing node !contentfgeometrixx/en/company
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav;cQro

•
Co"gratulatio"s! You have successfully logged into the CRX ap plication and have
browsed a portio n of th e node (Web s ite) structure. To be a successfu l
developer in CQ5 , you need to be able to eas il y explore / edit nodes and
properties at the CRX level.
How t o browse the Felix I"tertace:
1. Enter the URL http ://localhost:4502 / system / console in your favorite Web
browser' s address bar.
2. En ter t he defa ult ad ministrator "User name" (admin) and "Password" (admin)
in the d ialog - t he n se lect OK.
hUp:fllocahost:'1502/systemjeonsoie
~--.--
A~lh •.ntiF~!i2L>~R!>.g~lr.d -----.._ -
~
A U$efnatne and pass'HOId ore being requested by httP:/~ocalhost: 4 502. The site says: MOSGi
Man3Qement C~~
password: •••••1
"" I, c.",~
Felix login dialog
3. Select ~ece"treq u ests - then select Clear to remove recent requests from the
dis played list .
Copyright 2010. Oay Software AG, Switzerland Rev 1.5 20100907 Www dav.com
• A.. _ 1'1'
!F"k •• ,,,,,,,,, ..
It i,
I .. ~
I
U .. ,'1"
"'
.h
(h'"r I_
(",FT t.l"'H-On.nfl - F" _, , r '\t
·F " .' I',
'.~.r t·_,., I .;!!.,~ .... ..._~- bQ: .1- 'n
.' '"'
,t.
Feli x recent requests
Co"gratulatio"s! You have successfully logged into the Fe lix application and have
removed recen t requ es ts from t he d isplayed list. You can use this request
information to investigate the internal workings of CQ5.
Copyright 2010 , Day SottwareAG. Switzerland Rev 1.5 20100907 www:daY-com

•
EXERCISE - Create an Application/Project
Goal
The following instructions explain how create an application / project in CQ5
using CRXDE Lite. This will provide an area for you to build CQ5 elements
(Templates, Component, etc.) To successfully com plete and understand these
instructions, you will need :
• A running CQ5 Author instance
What is CRXDE Lite?

CRXDE Li te is em bedded into CQ5 / CRX and enables you to pe rfo rm standard
develo pment tasks in a Web browser. With CRXDE Lite , you can create and edit
f iles (e.g. JSP, Java, HTML, etc.), folders, Tem plates, Co m ponents, Dialog s,
nodes, properties, and bundles ; al l while logg ing and integrating with SVN .
CRXDE Lite is recommended when you do not have direct access to the CQ5 /
CRX server, wh en you develop an application by extend ing or modifying t he
ou t- of- t he-box Components and Java bu nd les, or whe n yo u do not need a
dedicated debugger, code completion and syntax hig hlighting.
How to use CItXVEUte:
1. Enter the URL http : // localhost:4502 / crxde in your favorite Web browser's
address bar.
2. Select Logi" - t he n enter the defaul t administrator "Name" (admin) and

"Password" (admin) in the dialog, while continuing to use the crx. default
"Workspace" - then sel ect OK.
logged in to cr x de-fault 'W' as anonymous ...
CRXDE Lite login selection
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.daY-com

•
logIn
Enter usernafrle and paSS\A/Ord and select the \t'·/orkspace to login.
~Iame : admin
Pas5v\"ord: ·····1
Workspace : cr)(.default
:an.::el
CRXDE Lite login dialog
3. Navigate to the fo lder / apps/geo merrixx/componenrs to view t he custom

co m ponents create d for t he Geome tri xx We b site / project.
,----- - - - -- -- -- - - -- - . ...
Home ,
=l .. I
.±l ~ tep:policy .;
zl iii jer :systern <:
zl ......:sr
~ .Jr.bs
!:l etc
=l apps
.::l geometrixx
..:J... components ,J1,..
..±J 0.# aS5etedit or ·u
.±I .,J assetshare
~ .I blog
, .. ..... .
C RXDE Lite geometrixx component display

Copyright 20 10, Day Software AG, Switzerland Rev 1.5 20100907 www.day.com
•
CO"Qratulatio"s! You have successfu lly logged into CRXDE Lite and have browsed
the custom compo nents created for the Geometrixx Web site/ project. Again,
CRXDE Lite is embedded into CQS / CRX and enables you to perform standard
development t asks in a Web browser.
What is an application/project?
An appl ication / project is where you will sto re CQS elements suc h as Templates,
Com po nents , OSGi bundl es, and static files. In order to start a new application /
project, it is neces sary to def ine a location f or t hese elements . Typically, they
are defined as a subfolder of th e / apps fol der. Day recommends that you create
the following st ructure for your application / proj ect :
Structure Description
l apps! < application name > The application container
l apps l < application name > I The Components container
components
I
l apps l < application name > I The MPage n Components container
components / page
I apps l < application name > I The ~Co nt ent" Components container
components / content
l apps / <application name > / templates The Templates contai ner
/ apps /< application name >/ src The aSCi bundles container
l apps l < application name > / install The compiled aSCi bundles container
lap ps ! < appl ication name >/ global T he static and other global files container
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www:dav.com

•
How to create a project using CI1.XVE Lite:
1. Rig ht - c lick the folder un d er w h ich you want to create the new fo lder - then
select Create .... Create Folder ...
3~ 1
.tI ~ rep:poItcy
.11 ... )Cr:system
'>
~ (,,:at~ Node ...
""'r...'" '--. ....,.. •

~ " -4"'-j
Ren3fl'te ..
CRXDE Lite create folder selection
2. Enter the fo ld er "N ame" (training) you wish to create in the d ia log - then
select OK.
Create r older
Please enter folder name aOO utle.
r«ne:
I"
CRXDE Lite create folder dialog
Copyrigh12010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wwwday.cQm

•
3. Re peat this process until you have created Day's recommended ap plication /
project structure - then cl ick Save All.
oj:!. I
.. :!. ,..,,,ohcy
.!t ,f, }Crsyrtem
.!:I \J var
.. cJ It"
.!:I t) e-.c
.;;I U aPll5
'" cJ found"tion
j;j 4J qeomctnlOC
.::::J Jtr.un ng
.;;I \J components
1:1 ....J conte"!:
.. ..J ....,
j;j..) global
.:tI \.J Irtsta 1
1:1 U 'ire
:=I ~ teMp ales
.:tI LJ conten:
.!:I t.J tm:l
.. 1..---
CRXDE Lite completed appl ication structure
Save All · Cr ec
tJ
....
CRXDE Lite save all
Co"grat ulatio"s! You have successfu ll y created an application / project and related
structure in CQ5. It is not uncommon to add additional structure to the
components folder, as t here can be many types of custom Com ponents (e.g.
nav, header, footer, etc.).
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWW.da Y. com
•
EXERCISE - Create a Template
Goal
The followin g instructions explain how to create a Template using CRXDE Lite.
By creating a custom Template, you wi ll be able to create Pages based off of
that Te mplate, enforcing a consistent loo k and feel. To successfu lly complete
and understand t he se instructions , you will need:
• A running CQS Au thor instance

• Ba sic familiarity with CRXDE lite
• An appli cation / project structure where you will create the Template
What is a Template?
A Temp late is used to create a Page and defines which components can be used
within t he selecte d scope. A Temp late is a hierarchy of nodes that has the same
structure as the page to be created , bu t w ithout any actual content. Each
Templ ate wi ll present you w ith a selection of components avai lable for use.
Templates are built up of Co m ponents . Co m ponents use, and allow access to,
Widgets, wh ich are used to au t hor/ rend er content.
A T em plate is the basis of a Page. To create a Page, the Template's content

mu st be copi ed (l ap ps / < application name > / templates / < template name» to
t he corresponding pos ition in the site-tree (this occurs automatically if page is
created us ing CQs).
This copy action also gives the Page its initial content and the property
sl ing :resourceType , the path to the "Page" Component that is used to render
the page .
How to cr.at. a r... plat.:
1. Rig ht- click / apps/<a pplication namo/ templates - t hen select Cr••te...• Create
re..plate ...
2 . Enter the des ired Template "Label", "Ti tle", "Description", "Resource Type",
and "Ranking" in t he d ialog - t hen select Next.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.da v . CQm
• • Label = t he name of the Template / nod e t hat will be created
• content pag e
• Titl e (property j cr :title) =- th e titl e t hat wil l be assi g ned to the Temp late
• Training Contentpag e
• Description (property jcr:des cription) = the description that will be assigned to
the Tem plate
• NA
• Resource Type (property sling:resourceType) = the Component's path t hat wil l
be assigned to the Template and copied to implementing pages
• training /components / page / contentpage
NOTE
The property sling:resourceType wil l be created on the Template's jcr:content node. In
addition , the Compone nt may not yet exist. Th is is because you have not yet created it .
• Ran k ing (property ranking) = th e ord er (ascend ing) in wh ich th is Temp late will
appear in relation to other Templates. Setting the Rank to ' . will ensure that our
Te mp late appears first in t he list.
• 1
(reate Template x
Please enter reqLired template Information .
label: contentpage
Title: Trar'"dng Contentpage
Description: N.c".
Resource Type : tr a.....ngfcomponents{page{content page!

A
Rankng: 100 V
Ccrn:el
CRXDE Lite create template dialog
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.claIGCQID
•
3. Select Next for "Allowed Paths". Allowed Paths will define paths where this
template may be used to create pages.
[reate Template
Allowed Paths
+
"
, ..... ........... '-~ .
t ....' . ..' oJ' .
",...
,...,.
CRXDE Lile creale template allowed palhs
4. You will need to add an Allowed Path. Click on the plus sign and enter the
foll owing value : leonlenl(/' *)7
NOTE
If you forget to enter aliowedPaths before clicking on Fini sh. Create the following
property on your te m plate node :
• Name : allowed Paths

• Type : Str ing[] (Str ing Array)
• Value : / content(/ .*)?
S. Click Next for "Allowed Parents" - then select OK on "Allowed Children".
Create Template f
il.llow ed Children
+
...•
• ~ ' '''' ' _ .• ,. ',.'. . ~ ..
l" - , " . "
CRXDE Lite create template allowed children

World Standard Software to UnIfy Your Business 21
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www·da v.com
•
NOTE
Don 't forget to click Save All to persist your changes in the repository.
Co"gratulatio"s! You have succes sfu lly created a Te mplate in CQS. To make you
more aware of the structure associated with CQS objects, it is a good idea to
view the nodes and propert ies t hat were created in the repository (CRX). Please
see the image below.
=J tJl
±I rep :policy
±I jJ )Cr. system
.±J ~ var
±I LJ I,bs
±I ..J etc
=1 .) ao:>s
±I V foundation
j:J ~ georne--lIixx
=l ...J train ng
±I t.J components
±I ;..J g lobal
±I tJ insta I
±I LJ ;cc
=J L.l teMP ales
.::tI cor.tcmpage
.±l \..J content
+1 11 '1 tm n
CRXDE lite view of template
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.dav.com

•
EXERCISE - Create a "Page" Component
Goal
The following instructions explain how to create a "Page" Component us ing
CRXDE Lite. The Template you created in a previous exe rci se wi ll use this
Component's resources (scripts, d ialogs, etc.) to aid in rende ring Pages based
off of that Te mplate . To successfully complete an d understand the se
• A ru nn ing CQS Author instance

• Ba sic familiarity wit h CRXDE Lite
• An applicati on / proj ect stru ctu re where you wi ll create th e Component
What is a "Page " Component?

Com ponents are modular, re-usable units that implement specific
fu nctionality !logic to re nder the co ntent of your Web site. They have no hidden
configuration files, can incl ude other Compone nts, and can run anywhere with in
CQ5 or in isolation (e.g. portal). A Com po nent cou ld be described as a
collection of scripts (e .g. J5Ps, Java se rv lets , et c.) that co m plete ly rea lize a
specifi c function . More specific, a "Page" Component is typically referenced by a
Template.
How to create a 'Page' COlMpo~ e~t usi ~g CItXP£ Lite:
1. Righ t-click /ap ps/<application name>/ components/page - then select

Creat..... Create COlMpo"e"t ...
2. Enter t he desired Component "Labe l", "Title", and "Description" in the dialog-
then select Next.
• Label = th e name of the Component / node that will be created

• co ntentpage
• Tit le (p ro pe rty jcr:title) = the titl e th at will be assigned to th e Component
• T raining Contentpage
• Description (prope rty j cr:descripti on) = the description th at will be ass igned to
the Com po nent
• NA
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.dav. com
•Create Component x
Please enter required component Information,
Label: contentpage
Title: Training Contentpage
Descnptlon: NA
Super Type :
Group:
Ne ·t ~ ":aned
CRXDE Lite create component dialog
3. Select Next f o r "Ad vanced Compone nt Settings" and "Allowed Parents" -

t he n select OK o n "Allowed Children".
Creat e Componenl
,
Advanced Component Settings
Is Container : .,
fo,J o Decor atian : c "
.'
Cell ~Jame:
Dialog Path :
~
..-
.... ... . .- .... ..... ...... ... .. . ,./ "-"'-' .
- - ,, ~ ..
.r
CRXDE Lite create component advanced settings
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW;daY-com

•
A Co m ponent coul d be descr ibed as a collection of scripts (e .g . JSPs, Java
servlets, etc.) t hat com plete ly rea li ze a specific f unct io n. In o rder to rea lize this
specific functionality, it is your responsibility to create any necessary scri pts
t hat w ill do so. Typically, a Component ("Page" or otherwise) will have at least
one defau lt script, identical to t he name of the Component (e .g.
contentpage.j sp). Notice th at the creation of the component resu lts in the
creation of t he defau lt co"te"tpage.jsp scri pt .
4 . Open t he script by dou ble-clicking the script o bject in the left pane . The
script contains some sample code that may have to be adjusted or deleted,
depending on what the com ponent wil l do.
S. Enter some HTML code , similar to be low - then select Save All.
cont entpage .jsp

<html >
<head>
<title>Hel ! o Wor ld !!! </ti tle >
</ head>
<body>
<hl>Hello World ! !!< /h l>
<h2>Welco me to a new Oay < / h2 >
< / body>
</ html>
NOTE
Don 't forget to dick Save All to persist your changes in the re pository .
Co"gratulatio"s! You have successfully created a "Page" Component in CQS . You

can now create a scri pt t hat will re nder content based on your requ irements . In
addi t ion , you will pe rform a simi lar process when creating "Content"
Components in the future .
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day. cQro
•
EXERCISE - Create Pages & Web Site Structure
Goal
T he fo llowi ng instructions explain how to create Pages and Web site structure
in CQS. These Pages are what / w here author's will manage content. To
successfully com plete and understand these instructions , you will need :

• A completed "Page" Component
What is a Page?
A Page is w here content authors will create and edit content that will most likely
be pu bl is hed and viewed by site visitors. It is an exact copy of the Temp late
from which it was created.
How to create a Page:
1. Select "Websites" in the CQS Siteadmin tool - then select New .. " New Page ...
• CQS WCM • At' .....

'.
... .i? .:J New...· Copy Delete
=.! ..-.J Websites ' "," p

~ I..,ew .age... ~ Name
.:1l ..-J Campaigns campaigns
( ~ r~ew Site ...
±l ~ CIIgital Assets
.!J --!:... Geometrlxx Demo Site
2 .;.J
.1 New lIVe Copy .. . dam
.±.I ---1 User Generated (or.tent 3 ( geometrixx
.:t! ....J wikJ Content
..J tJew Fie ...
4 I
New Folder ...
S \ ............ _.,.. '"
'.
..... ,.. f')
CQ5 siteadmin new page selection
Copyright 2010 , Day Software AG, Switzerland Rev 1.5 20100907 wwwclay.com
•
2. Enter a nd se lect the desired Page "Title", "Name" and Template on wh ich to
base this Page on - t hen click Create.
• Title (p ro perty jcr:title) = the title that will be assigned to the Page
• Name ::: the nam e of the Page / node that will be created
Create Page x
T;tJe Tram ng Site
tra ,n ngSite
Trllining Content POlgc:

my ~ trmp/i1te
Form Templ.te
A.!kMS ~ ere.]:",: CL'Sb'n pJ.m fc!nns for ed:f!f19 resoom5.
CII~"dar
Ctm:f' a -:a!e-rddr Pifl.ie
..
"'..'" II c"""
CQS siteadmin new page dialog
3. Open the newly create d Training Site page by double-clickin g it in the right
pane - then view its output to ensure it meets your expectations.
Copyright 2010, Day SoftwareAG . Switzerland Rev 1.5 20100907 www dav.com
•
Hello \Vorld I!! #,
('
"
'VeJcome to a new Day

.' "
CQ5 page view (e.g . /content/trainingSite)
4. Repeat this process until yo u have created a Web site structure similar to the
image be low.
• CQ5 WCM
~ -.J Web5I~
;!J _ caMpaig ns
;!J Dtglt)l Assets
.tI ;.J Gcomctnxx Demo Site
~ User GcncratCO Center'll
;!J ., Wrlo Content
~ i!) Tra nll'lg S,le
.:;I !) Engl.sh
!l Com:loa"Y
" £.l '£l
""""'"
Lawn Sprinkler
!l Clay PLant Corr..l ~'W
;i) Cust~
~ Espa'KII
CQS si teadm in web site structure
NOTE
Since all Pages wi ll be created using the same Template (Le. Training (ontentpage) and
implement the same rendering script. every Page wi ll look identical - for now.
World Standard Software to Unify Your BUSiness 28
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav·com

•
Co"gratulatio"s! You have successfully created Pages and Web site structure in
CQS. This is the type of behavior you can expect from content authors w hen
building out their Web site structure.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wWW; day.com
•
EXERCISE - Install & Start CRXOE
Goal
T he foll owing instructions ex plain how to install and start CRXDE, Day's Eclipse
based IDE application. To successfully complete and understand these

• A CRXDE package (ZIP file)
What is CRXDE?
CRXDE is a pre - packaged stand - alone Eclipse application. CRXDE i s custom -
built specifically for CQ and CRX and thus enables you to efficientl y develop
your project. CRXDE gives you a broad set of tools t o easi ly create and manage
fil es, fo lders , Tem plates , Com po nents , Dialogs, nodes , pro perties , scri pts and
OSCi bund les wh ile logging, debug g in g and integrating with SVN . CRXDE is
built on the Ecl ipse Rich Client Platform (RCP), leveraging t he Eclipse File System
(EFS) API.
How to i.stall a.d start CItXPE:
1. Create /i den tify a f older structure on your fi le system where you will store,
instal l, and start CRXDE (e.g. C: / day / cq5).
2 . Copy the approp riate CRXDE package from < USB> / distribution / crxde into
the f older structure .
3. Extract t he pac kage.
4. Double-cl ick the executable in t he CRXDE f older.
5. Enter the "URL" (http: // local host:4502), default administrator "User

Name" (admin) and "Password" Cadmin) in the dialog - then click OK.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 Wwwday.com

•
Repository Login
Please enter your connectikdata .
URL: i1ijJJ, . ;. ,:'{·'I:<' J

User Name: admlr.
Password : •••••
,--_O_K _ -,11 _C_an_,c_el---,

L
CRXDE login dialog
Co"gratulatio",! You have successfully installed an d started CRXDE, Here you will
be able to create and modify CQ5 elements such as Tem plates, Components,
scripts, etc. In add ition, traditional ID E tools such as cod e complet ion and
debugg ing will now be avai lable to you , Be low is a vi ew of what CRXDE looks
like after start ing ,
File Edit Navigate Search Run Server Debug View Help
'"
"
- Navigator ;
+ ~ apps
+ -£f .:.~~._.... ..................•
"" lR ,~!b$...... .
. .- .. .
,,~
,',
...... •• A. _~ '__........_ ·, .., - ..... .,,-,
,
CRXDE interface view
Copyright 2010, Day SottwareAG , Switzerland Rev 1.5 20100907 www·daV·com

•
EXERCISE - Utilize CRXDE
Goal
The following instructions explain how to use CRXDE to perform basic
development task s. To success fully comp lete and understand these
instructions, you w ill need :
• A running CQS Aut ho r instance

• A running CRXDE instance
• A completed "Page" Component (e.g. Training Contentpage)
What are the benefits of using CRXDE vs. CRXDE Lite?

As stated earlie r, CRXDE Lite is recommend ed when you do not have direct
access to th e CQ5 /CRX server, wh en you deve lop an application by extend ing
or modifying the out-of-the-box Components and Java bundles, or w hen you
do not need a dedicated debugger, code completion and syntax highlighting .
CRXDE is recommend ed w hen you are devel oping compl ex applications by
creating new components and Java bu nd les. Again, CRXDE hides some of t he
compl ex ity of th e devel op ment process by allowing you to work directly with
th e repository without the need to synchronize the repository with the file
system.
How to use CRXP£:
1. Navigate to and open , by double- clicking, the contentpage.jsp script you

created earl ier for t he T raining Contentpage "Page" Compo nent (e.g. l appsl
trai ni ng I co m po ne nts I page I co ntentpage).
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·clay'cQm

•
- ,/.t~
.... """"
~.IIP
I ! . . ~"~ . ; J •. :.,_·... 4 U ...., ..,.1H 4_ .•T~ .....

"t
-~
~~
' ....
~
.e". ' ~~. _ ~l,, _ :l"'M
(
<_ott
.-..t<II
,--~.~tlI..l.
He l l O World'"
Hello I'orld '"

loIe l co...e to .. nell tray
#
(
)
(
. ~ ..
." ..:<
" (
'.. ,--. ,-_...___ . . I'-'~ '" . _. . . ._ .;1'-._..•.. .../ -- ..-...... -' ' ../'"--", -.... -_. __ .... ,;.."\./ / '
CRXDE view of contentpage.jsp
2 . Edit the script to your liking - then click File. Save.
NOTE
Traditional keyboard s hortcuts will work in CRXDE (e.g. Ctrl - S to save, Ctrl - C to co py, etc.).
3. In the CQ5 5iteadm in tool, navigate to and open any page that is based off of
this "Page·' Component to view your changes.
Hello " rodd !!!

\Velcome to ,1 new Day
Look at lRt . I am using CR.XDE
CQ5 page view
Co"gratulatio"s! You have successfully modified a script using CRXDE. For the rest
of t his training, you will use CRXDE to accomplish more comple x development
tasks.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.day:com

•
EXERCISE - Include the "global.jsp" in the Page
Component
Goal
The following instructions ex plain how to include an existing CQ5 "power"
script. This wil l give you access to numerous development objects, at
compil ation time . T o successfully complete and und erstand these instructions,
you wil l need:
• A runni ng CQ5 Author instance

• A compl eted "Page" Component (e.g . T raining Contentpage)
Why include the global.jsp script?

When you develop the j 5P script of a CQ5 component, it is recommended to
incl ude the foll owing code at t he top of the script:
<%@include file = "/ libs / foundation/global.jsp"%>
The Day provided g/oba/.jsp declares the Sling, CQ and jSTL taglibs and
exposes the regular ly used scripting objects defined by the
<cq : defineObjects /> tag.
This sho rtens and simplifies the j SP code of your component.
The < cq:defineObj ects > tag exposes the following , regularly used, scripting
objects w hich can be referenced by the developer. It also exposes the objects
defi ned by th e < sli ng :defineObjects > t ag .
• componentContext
• th e current component conte xt obj ect of the request
(com .day.cq.wc m,api. components,Com ponentConte xt interface).
• component
• th e current CQS component obj ec t of the current resource
(com .day.cq.wcm.api.components.Component interface).
Copyright 2010 , Day Software AG, Switzerland Rev 1.5 20100907 www.dav.cQm
•• currentDesign
• t he current design object of t he current page
(com. day. cq. wcm.api .des i9 ner. Des ign inte rface).
• currentPage
• t he current CQ WCM page object (com.day.cq.wcm.apLPage interface).
• currentNode
• t he current JCR node object (j avax .jcr.Node interface) .
• currentStyle
• t he current style object of the current ce ll
(com.day.cq.wcm.api.designer.Style interface).
• designe r
• t he desig ner object used to access design information
(com .day .c q. wcm .api .desig ner. Des i9 ner interface) .
• edi tCo ntext
• t he ed it context object of the CQS compo nent
(com.day.cq.wcm.api.components .Edi tCo ntext interface).
• pageManager
• the page manager object for page level operations
(com .day .cq. wcm. api. Page Manage r interface).
• pag e Pro perties
• t he page properties object o f the current page
(0 rg .apache.sl i ng.api. resou rce. Val ueMap).
• properties
• t he properties obj ect o f t he current resource
(org . apache. sli ng .api. resou rce. Val ueM ap).
• resource
• the current Sling resource object (org.apache.s ling.apLresource.Resource
in terface).
• resourceDesign
• the design object of the resource page
(com.day.cQ .wcm.api .designer.Design interface).
• resource Pag e
• the resource page obj ect (com.day.cq.wcm.apLPage interface).
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWW;day.com

•
1. Open th e co.te.tpage.jsp script by double-cl icking it.
2. Enter th e include statement in your JS P. similar to below - then Save.
contentpage.jsp
<'@include file- M/libs/foundat ion/global.jsp "\ >
<html >
<he ad>
<title>Hello World !!!< / title>
</head>
<body>
<hl>Hello World ll! </hl>
<h2>Welcome to a new Day</h2>
<h3>Look at me, I am using CRXDE<!h3>
< / body>
</html>
4 . Test your script by requesting a Pag e in CQ5 Siteadmin that implements this
"Page" Component.
• If successful, you should not notice any difference in th e way th e Page is

rend ered
Co.gratulatio.s! You have successfully included the global.jsp. allowing you

access to numerous Sling. CQ. and Java o bjects to aid you in your development
efforts.
Copyright 2010, Day SoftwareAG. Switzerland Rev 1.5 20100907 www·dav.cQm

•
EXERCISE - Display Basic Page Content
Goal
The following instructions explain how to dynamically display basic Page
content such as Page t itle , name, and pat h. This is an introduct ion of how to
ren der content that lives in the repository, which is a similar concept to
querying an d di splaying data from a data base. To successfully com plete and
understand these instructions, you will need:

• A completed "Page" Component (e.g. Training Contentpage) w ith appropriate
includes
How can I display basic Page content?

After inclusion of t he glo bal.jsp in whatever script you are working on, there are
generally three ways to access content in CQS:
• Via the properties object

• The properties object is an in stance of t he Value Map (see Sling API) class
and contains all properties of the current resource. For example:
String pageTitle properties.get( "jcr:title", "NO

TITLE") ;
• Via th e currentPage object

• T he current Page o bject is an in stance of the Page (see CQS API) class,
which provides some methods to access content. For example:
String pageTitle currentPage.getTitle();
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.dav.com
• • Via current Node object
• The current Node o bj ect is an in stance of the Node (see JCR API) clas s,
which provi des acc ess to content via the getPropertyO method. For
exa mpl e:
String pageTitle = currentNode.getProperty

( " jc r:title ") .getString();
NOTE
Day does not recommend using t heJCR API directly in CQS unless nece ssary. Si nce CQ5 is a
Sling application. you should dea l w ith resources and not JCR nod es.
How to dYMa",ically display basic Page con teMt iMyour TraiMiMg 'Page- Co",poMeMt:
1. Ope n t he conte ntpage.j sp scri pt.
2 . Enter someJ SP and HTML code, simi lar to below - then Save.
contcntpage.jsp
<%@include file::"/libs/foundat i on/global.jsp"\>
< html>
<head>
<title>< %z currentPage . getTitle() : : null? currentPage.getName()
currentPage.getTitle() %></title>
</head>
<body>
<h2>properties</h2>
Title: <%- p r operties. get("jcr:title") %><br />
<h2>currentpage</h2>
Title: < %- cur rentpage.getTitle() %><br />
Name: <%: currentPage . getNarne() %><br />
Path: <%- currentPage.getPath() %><br />
Depth: <%- currentPage.getDepth() %><br / >
<h2>currentNode</h2>
Title: <%- currentNode .getProperty( "jcr :title") .getString () %><br />
Narne: <%- currentNode.getName() \><br />
Path: <%= currentNode . getPath() %>< br />
Depth: <%z currentNode.getDepth() %><br />
</body>
</html>
•
3. Test your script by requesting a Page in CQ5 Sitead min that implements this
"Page" Com ponent.
• If success fu l, you shou ld now see content related to the reque ste d Page being
displayed dynami cally, similar to th e image below.
Company +
properties
Tit le: Company
currentPage
Title: Company
:-<ame: company
Path: lcontcntitraining/cnicompany
Depth: 4
currentNode
Title: Compan y
~ame: jcr:contcnt
Path: Icontcntitraining/cnicompany/jcr:coIltcnt
Depth: 5
Page basic content output
Co~gratulatio~s! You have successfu lly d is played co ntent related to a Page

dynamically. This is a monumental step as this is a large portion of what you do
as a developer - display content.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WWW.daY.CQro
•
Day 2
EXERCISE - Create Multiple ScriptslRenderers for the
"Page" Component
Goal
The fo llowing instructions ex plain how to create and use multiple scripts /
rend ers for a sing le Component. This will all ow fo r multip le views of th e same
content, w hich is a huge proponent for us ing Sling. To successfully com plete
and understand th ese instructions, you will need:
• A runni ng CQ5 Auth or instance

• A ru nning CRXDE instance
• A com pleted "Page" Component (e.g. Training Contentpage)
What is Sling and why have multiple scripts/renderers for a

Component?
CQ5 is bui lt usi ng Sling, a Web appli cation f ra mewo rk based on REST princip les
t hat pro vides easy development of content-oriented applications. Sling uses a
JCR repos itory, such as Apache Jackrabbit or Day's CRX, as its data store .
Sl ing started as an internal project of Day Management AG and is included in

t he install ati on of CQ5. Sl ing has since bee n contributed t o the Apache Software
Foundation - further information can be f ound at Apache (http)/
sl ing .apache .com).
Using Sling, t he type of content to be rend ered is not t he first processing

consid eratio n. Instead the main considerat ion is wh ether the URL resolves to a
content object for which a scri pt can then be found to pe rform the rendering.
This provides excellent suppo rt for We b content authors to build Pages which
are easil y customized to t heir requirements.
T he advantages of t his fl exibility are apparent in applications with a wide range

of d ifferent co ntent elements , or w hen you need Pages that can be easi ly
customized / vi ewed d iffe rentl y. Th e fo llowi ng d iagram expl ai ns t he Sl ing script
resolution. It shows how to get f rom HTTP request to content node, from
•
content node to resource type, from resource type to script and what scripting
vari a bles are ava ilab le .
understanding ( Apache Sling Jscript resoilition

o IITTP Requ .. t ~
GET
llN kfcetor
~
"'....,
-----
lwi.k i.lS li ng .~ d it. lU!nl / richte xt?sirr Ie_true HTIP/l.l
/ l'< ikVSli ng
/ Nodi hu proplrilu
U1~ '!ii. tog ~f!~ou"Ct TYPh I I I/buk' ~1 1 "1i: c<l~o ... r(\1~ ... pe~T '"~
"1~I /!)Gge
tel Resource Type --.r-
.
"mi. "
1\
lut 'rr'p~-'%~)-,)':>e
b,~ 'c.fn rtIQrt. n-.: f \ \ e
\
Script location.
Script Nom ••
Ent'"lo~
~
htllll.eso
Wort T... . ••."
~ . tSp
).\It~
o
Script
Include Option,
S .1 "(;11Hl<!(
•
Sling cheat sheet - side I "
The following diagram explains all t he hidden , but powerful request parameters
you can use when deali ng with the Sling PostServlet, the default handler for all
POST requests t hat gives you endless opt ions for creating , modifying, deleting,
copyin g and moving nodes in the repository.
Copyright 2010, Day SottwareAG. Switzerland Rev 1.5 20100907 wwWday·coro

• Usi.,g the SIi.,gPostServiet
<f;,~- oell,,,,.. ihls is the default halldler tor your
~Lnll~ t t we-
<text''"ell r_"",.,.. post request!. It call do lleartv <\nll~t t,PI>
<, f,,·-. al\'(lhlllg. <lnll..lt tYI>C_
Ctutur Ir,IUII /lapGI' . Mttir'ulld ~y kt ,L____~::::!..:::::..::------- <l::~ type.

I INtMooIW .lld ke~ ~fM.tlully I "" .~
.. f,) ..... ,,~.:l .... "'&0 ....

<,rtlrot
oct ,on- -?'t
"1"II~l t".,.,. t~
"''10.;1 t\-.,.....
value_ <fu- ...;H_
<.~~ ~y«
~(lI ... ~-
." fllI\It,. type_
,,(ll .. ~ _
.""lI"· t~Pl _
<lnp;.at r.ewe_ ~. ~:""" t t)'IIC .

,"lye_
tyl).... '."lIl"",. ,. <:~"" t C)'"c·
<! form>- ~. -
<,ro"t tylX'>-
.:u'¢!u: t)~
• ~ -
<''''''ot
.,g-,,_ H'P"," val ...... " ..... '" typ" •
n"-,,.
"f '-- .
•
Sling cheat sheet - side 2
In Sling, and therefo re also CQS , p roce ssing is driven by t he URL of t he HTTP
request. Th is defi ne s t he content t o be displayed by the appropri ate scri pts . To
do th is, information is extracted fro m the URl.
If we analyze the follow ing URL:
htt p :// myho st / too ls / sp y .p rin t .a 4 .h t ml / a / b?x ~ 12
We can break it down into its com po site parts :
protocol I~ : olltellt
ath telector extentlon
I-
suffix
I-
param(tl I
i
http://myhost/toolslspy .print.a4 .html I alb , x=12
Sling request decomposi ti on table
Copyright 2010, Day Software AG , Switzertand Rev 1.5 20100907 www·da y.com
•
When the appropriate resource (content node) is located , t he re source type is
extracted. This is a pat h, w hich locates the script to be used for rende ring the
co nten t . The pat h speci f ied by the sli ng :resourceTy pe property can be either
absolute or relative to a configuration parameter. Relative path s are
recommended by Day as t hey increase portab ility.
All Sling scripts are sto re d in subfol ders of either l apps or /li bs, which will be
searched in this ord er. The fo llowing d iagram ill ustrates how a scri pt re so lution
is resolved .
..Jcontent/corporateljobsldeveloper.html {RequesO
- .-
(Repository)
"\
••
- /apps
ill,
--.,
.-
/jobs
••
•
/POST.jsp
/jobs .Jsp
/pdf.j sp
.-J
Iprint.jsp
~
•
T
•
"/content
Icorporate
•
•
t
••
/jobs
•• Ideveloper
•
•• }cr:conttnl:
slllll;ltlOurcrType = l'11l'j obs -,
• J
--. ....... - ---'
Sling request decompositi o n
Wi t h Sling , you specify w hich script ren ders a certain entity (by se tting the
sling :resou rceType property in t he j cr :co nte nt node). This mechanism offers
more free dom than one in which the script acce ss es the data entities (as an SQL
statement in a PH P scri pt would do) as a resource can have seve ral renditions .
Copyright 2010, Day Software AG , Switzerland Rev 1.5 201 00907 WWWda\l:CQm
•
If multiple scripts apply for a given request, the script with the best match is
selected. The more specific a matc h is, the better it is; in other word s, the more
se lector matches the better, regardless of any request extension or method
name match.
Pack"gt: uplorer = EJ
" ilPPS
.. geO'Tle lrnu:
~ h'
... Jobs
pru'" Int folderl
"'l- a4 '1'
b html.jsp
"-=' a4 . •1tm . S",
,}4 .JSp
'- C[T.jSP
_ Jobs .Jsp
htr'll .j sp
pnr:t .htm l JSP
,. etc - .
Fo r example, consider a request to access the resource /content/corporate/

jobs/developer.print. a4.html of type sling :resourceType ="hr /jo bs". Assuming
we have th e following list of scri pts in the locations shown, then the order of
preference would be as shown :
1. / apps / hr /jobs / print/ a4.html.jsp

2. / apps / hr /jobs / print / a4 / html.jsp
3. / apps / hr /jobs / print / a4.jsp
4. / apps / hr /jobs / print.html.jsp
5. / apps / hr/jobs / print.jsp
6. / apps / hr /j obs / html.jsp
7. / apps / hr /jobs /jobs.jsp
8. / apps / hr /jobs / GET.js p
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.da Y. com
•
From this it can be seen that:
Folders (i.e. nodes of type nt :folder) take precedence over jsp file names
when resolving using selectors.
Only one selector in a file name has any effect - any files w ith names
containing two selectors don't ever get selected, but names of folde rs can
be used to match the selectors in the re quest.
Scripts wit h HTTP method names (e .g .,GET.jsp) is selected as a last
resort, (after the default script: jobs.jsp, in this case).
Scripts with names that include HTTP methods in addition to another
selector or extension in a .jsp file name are NEVER selected.
How to create lIIultiple scripts/reKderers:
1. Right-cli ck / apps / < application name > / components / pag e / contentpage --

then select New, JSP.
How to create lIIultiple scriptslreKderers:
_.
1, Ri g ht-click / apps / < application name > / components / page / contentpage - -
t hen se lect New, JSP.
.
....
~"
"
"'"c=::: .. $ .,
CRXDE new j sp selection
2 . Enter the d esire d fi le "Fi le name" (html.j sp) in the dialog - th en select FiKish.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·da v.com
•JavaServer Page
Creatlt a rot¥! Jwa~ Pac;Je
~rt.e:- or ~t the POtent folder ,

c<t5lWebCont«tJapps{tJ.....-.w~s/~jcont<'f1t~
- _ ~ dJlP<!nt, f~deo l
9"O"'etrio.( rot ;f olderI

- . t,,,.-.qrt. :foJde.rj
t"l'fIP(Coent~( nt;foidet }
content[nt ;folde! 1
•
- ~- ~nt :f~ l
"- tonteol~tq; C~l
'-.-- onst~ot ;f~ l
"" Tl1JI.!!P: wi
t(mi .
1Ad¥.-.c:t'd » I
CRXDE new jsp dialog
NOTE
The newly created script wi ll pop- up in the right pane.
3. Enter some HTML code , similar to below - then Save.
html.jsp
<html>
<head>
<tit!e>Hello World !!!< / title>
</head>
<body>
<hl>This is the HTML script/renderer <fhI>
< / body>
< / html>
4. Repeat these processes for a script / renderer named m .html.jsp. Change the
text in the m .html.jsp script to read
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WWW.day'CQro
• < hl > This is the MOB ILE HTMl script / renderer </ hl >
Re member to Save.
5. Test your multiple scripts / renderers by requesting a Page in CQS Siteadmin

t hat im pleme nts this "Page" Component.
• /content / training Site / en / company.html

,,~~
Mo,
Moll Visited - Com".."."

* '
Co.ltent Repository
h\tO /ll oca,lhOSt:4502 / cl" , comem! I,amlngSlt@/e 1. hlml
Sy5lemConsolll! cas ' Site Admin CaS.] WrJc.

hn p;flloalholit:.. ..lnlrtgSIt@ferLhtml +
This is the HTML scripUrenderer
Page html.jsp script/renderer
• / content / training Site I en I com pany. m. html
Mozilt. F
\ A ( hUp "/llocillhoSI ~ 502 ret# / c:ol'ltem / lr.lln lngSlte / en,m.ntm l
MO$l Vilolled - Company Content llt!poSr'~,,;"

.;.......;S;,;
';;;
llemCon1.OIe CQS I Sill! Admin cas.) WdcOIM:
hltp:/ IIou.l hest: '"95,tt/ .. .,.",,) u ml +
This is the MOBILE HTML scripUrenderer
Page m.html.j sp script/renderer
Congratulations! You have successfully created multiple scripts / re nderers,

potentially allowing you to display the same content in two d ifferent vi ews.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·daV.com

•
EXERCISE - BreakoutIModularize the" Page"
Component
Goal
T he f o ll owing instructions expla in how to modularize a Compo nent into
mU lt iple scripts and incl ud e them at runtime, promoting Com po nent / script
reuse. To successfully complete and understand t hese instruct ions, you will
need:
• A running CQ5 Aut hor instance

• A running CRX DE in stance
• A completed "Page" Componen t (e.g. T raining ( o ntent page) with appropriate
in cl udes
What's the difference between a JSP, CQ, and Sling inclnde?

The <%@ include file = "myScript.js p" %> di rective inf orms t he JSP compiler to
incl ud e a complete f ile into th e current file - at com pilation time . It is as if the
contents of the includ ed fil e we re pasted d irectl y into the orig inal file. The
< cq :include scri pt = "myScript.jsp" /> directive is d ifferent in t hat it includes t he
f ile at runti me .
Often t he q uestion is as ked : "Should I use <cq :include> or < sling :include > ?"
When developing CQ5 components , Day recommend s that you use
< cq :incl ud e / > tag . This allows you to directly include script f i les by their name
wh en using t he scri pt attri b ute. This takes com ponent and resource type
in heritance into account, and is often simpl er than stri ct ad herence to Sling 's
scri pt resolution using selectors and extensi ons.
How to include a script at runtiolle using (cq:include h in your "contentpage" COlllponent :
1. Remove (or rename) t he scripts hrmf.jsp and m . hrm f.jsp from your "Page"
Component by rig ht - click ing them - th en select Velete.
2. Create a new JSP f ile named body.jsp in your "contentpage " Component.
Copyright 2010. Day SoftwareAG. Switzerland Rev 1.5 20100907 www.dav.com

•
3. Cut the body code from contentpage.jsp and paste it in to body.jsp - then
Save.
body.jsp
< %@include file:"/libs / foundation / global.jsp" ' >
<body>
<h2>properties< / h2>
Title: <1 = properties.get( Mjcr:title M ) %><br />
<h2>currentpage</h2>
Title: <I : currentpage.getTitle() %><br / >
Name: <%= currentPage.getName() %>< br />
Path: <%= currentpage.getPath() %><br />
Depth: <%= currentPage.getDepth() %><br />
<h2>currentNode</h2>
Title: < %::: currentNode.getProperty("jcr:title").getString() %><br / >
Name: <%= currentNode.getName() %><br />
Path: <%= currentNode.getPath() %><br />
Depth: <%= currentNode.getDepth() %><br />
</body>
NOTE
Not ice the fact the g/obal.jsp file has been incl uded at t he top of th is script. Si nce t his script
wi ll be included at runti me. it will be unaware of any previous includes of t he g loba l.jsp.
3 . Open the f ile contentpage.jsp, and enter some JSP and HTML code, similar to
below, replaci ng t he < body> section - t hen Save.
contcntpagc.jsp
<'@include file"''' llibs/ foundation / global. j sp" %>
<html>
<head>
<title><' z currentpage.getTitle() null? currentPage.getName{)
currentPage.getTitle() '></title>
<I head>
<cq: include scrlpt-'·body.jsp " I>
</html>
4. Test your script by requesting a Page in CQS Siteadmin that implements this
"Page" Component.
Copyright 2010, Day Software AG . Switzerland Rev 1.5 20100907 www:dar-com

• • If successful, you should see no difference between what is displayed now, and
what was displayed before.
Congratulations! You have successfully broken out a portion of your "Page"

Component, and have incl uded a script at runtime. Again, this type of
technique will allow you to reuse scripts for d iffere nt Components in the future.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·ciay.CQro

•
EXERCISE - Initialize the WCM
Goal
The following instructions explain how to initialize CQ5 WCM, enabling use of
t he Sidekic k and othe r content management tools. These tools will al low
content authors to work more efficiently. To successfully complete and
understand these instructions, you will need:
• A running CQS Au t hor instance

• A running CRXDE in stance
• A completed "Page" Component (e.g . Training (ontentpage) with appropriate
includes
Why initialize the WCM?

The WCM initiali zation script performs all necessary steps to provide the whole
WCM functionality on a page, including : Dialogs, Widgets, WCM CSS & JS,
Sidekick, etc. Some WCM functio nality such as th e Page properties (no Dialog
defi ned yet) may not work when only t he initialization script is included. There
are steps missing which we perform in a later exercise.
1. Open t he file co"te"tpage.jsp, and enter some JSP code, similar to below,
add ing to t he < head > section an include of the initialization script - then Save.
contentpage.jsp
<%@include file:.:" Ilibs/foundation / global. jsp" %>
<html>
<head>
<title>< %c currentPage.getTitle() ;: null? currentPage.getName()
currentpage . getTitle() %></t itle>
<cq:lncluc1e scrlpt-"/libs!wcm!core/components/init/init.jsp"/>
</ head>
<cq:include script="body.jsp" / >
</html>
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwwdaY-com
•
2. Test your scri pt by requesting a Page in CQS Siteadmin that implements this
"Page" Compo nent.
• If successful, you should now see the Sidekick appear, which wi ll give authors
the abili ty to manage content.
,"-'y +
properties
Title: Conpany
currentPage
Title: Conpany
Name: conpany
Path: /content/tralntngSiteJen/C041panv
Depth: 4
currentNode
Title: Conpany
Name: Jo :c.ontent
Path: !content/trainlngSitelen/conpany/)Cf:content
Depth , S
Page view with WCM initialization
NOTE
For developers of previous CQS versions, you will notice that the location of the init.jsp has
moved from / fibs/wcm/init/inir.jsp to its current location.
Co"gratulat io"s! You have successfull y initialized t he WCM, and all of its related
tool s. Again, this initialization is critical in enabling numerous CQS tools,
allowi ng content authors to work more efficiently.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.day.cQm

•
EXERCISE - Extend the Foundation" Page"
Component
Goal
The following instructions explain how to extend an eXisting foundat io n
component, a Day recommended best approach, inheriting its resources thus
allowi ng for script / Dialog reuse. To successfully complete and understand
these instructions, you will need :
• A running CQS Aut hor instance

• A com pleted "Page " Component (e.g. Training Content page) with appropriate
includes
Why extend custom/foundation Components?

Co m ponents can be given a hi_e rarchical structure to imp le ment the inheritance
of included script fil es, Dialogs , etc. Therefore it is possible for a specific "Page"
Component (or any Component) to inherit from a "base" Com ponent. For
example, allowi ng inheritance of a script file for a specific part of the page (e.g.
t he < head > section).
Components within CQ5 are su bject to 3 different hierarchies :
• Resource Type Hierarchy

• This is used to extend components usi ng the property
sling :resourceSu perType. This enables t he Component to inherit from a
"base" Component. Fo r example. a text Component will inherit various
attributes from the foundation text component, includ ing:
• scripts (resol ved by Sl ing)
• Dialogs
• descriptions (including t humbnail images , icons, etc.)
• Important to note is t he fact that a local copy/ instance of a Component
element (e.g. body.jsp) will ta ke precedence over an inherited element.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwwdav,cow
•
, - - - - -- - - --
to: apDS
+ geometllx'I(
..•
"- page
+ 1jlI
,-,_.
_cQ_nfoProviders
\... training + dialog
components s.google.)Sp
I'•
~ cor~,coe~n~t~~~~~~~~~~~~~~~~~ ~~~~
body. JSP
0·9' 0 .01 t.l'P •
,•,
__
L CQ:C head. lsp
body. ISO ' Img .png.,a¥a
-~rm;;:pa;;;ge.l'p r' naVlmaQe.pnQ .)aVa
t
;I'
inStall J page .)Sp
' •• . • J' _._~ .... . . ere
.......... _" ,...J
.,. - ."~' ft....... J
.. . . portlet. html .lsP /'
redirect ,J$p ,
...
scaffoktlng.JsP
stats.jsp I
'.
Non-inheritance of local copy
• Co ntainer Hierarchy
• This is used to populate co nfig uration sett ing s to the child com pon ent
and is most commo nly used in a paragraph system scenario. For
examp le, configuration settings for t he edit bar button s, contro l set
layout (ed itbars, roll ove r, etc.), Dialog layout On li ne, fl oating, etc.) can be
defined on the parent Component and propagated to t he children
Components.
• Configuration se ttings (related to edit functionality) in cq:ed itCo nfig and
cq :childEditConfig are propagated.
• Include Hierarchy
• This is imposed at runtim e by t he sequence of incl udes.
• This h ierarchy is typically used by the DeSigner, whi ch in turn act s as the
base fo r various design as pect s of t he rendering ; including layout
information , CSS informatio n, t he available compone nts in a paragraph
system, et c.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 WWWday'CQm

•
1. Right- clic k the Training conte nt page co mponent - then select New. Property.
--'"
- -F. apps
.. geometrb(x
Pac~ EYPiof el
l,... hamlOg
components
content
Node
Ctr!+c t
Template-
~c
': omponeot
T t emp lat f'~
Ie Delete Delete Dialog
, ~E. ~.... . .A!"'" -- " - --" """ " '_ •• ,M»v.e-:::'· '\ .,.1" '" .
t t' Ibs 0.. . . ....... I"?
CRXDE new property selection
2. Enter the property "Name" (sling:resourceSuperType) . "Type" (String), and

"Value" (foundatio n/ components/ page) in the dialog - then click Finish.
.:...kill.2.
!
Create new property
Enter riol'll'lOtion about tt-.e new Pl'operty
Type: strllQ
v&lue: fOll"l&i:IOI')/componerotsfpaoel
CRXDE new property dialog
Copyright 2010, Day Software AG . Switzerland Rev 1.5 20100907 w ww.dav.cQm

•
NOTE
You can view this property, and others direct ly related to the Training "Page" Component, by
simply selecting and refreshing the "Properties " tab located at the bottom of CRX DE.
Problems ~ Console
,_
P1"op~ti~s
IrIo
N_
-cq:isContarlef
jc:r:cl eated
,.....
...
2OO9·12-02T10:58:2'1 .390-05:00
BooiO~-
0.<.
ae.xl .
-'. . ---r
Auto
true "
St•.., tnJec
"""'' on "r:createdBy
j(r:desotptlOn "*""
N' "'.... fal~
true I
JCf :plW'l\ar'y T)lpe
j(t:tltie
CQ:Coroponent
lr~ Contentp&ge ""'"
"'....
St• ..,
false ,/
sIing : '~CU"e5upe:T Type fOU'ldatIon'(om~nts'~ f~l~
,. ... ......
~~
. /~ "
-",. . ...,.. J ' . 1
CRXDE properties view
3. Ope n t he fil e eontentpage.jsp, and enter some JSP code , similar to below,
removing the < head > section and including the head .jsp script that we
in herited f ro m t he foundation "Page" Component - then Save.
contentpage.jsp
<%@ include file"""/ l ibs/foundation/global . jsp "'>
<html>
<cq : include script- " head.jsp " />
<cq :include script="body . jsp" />

</html>
4 . Test yo ur script by req uesting a Page in CQ5 Si teadmin that im plements th is

Training "Page" Co mponent.
• If succe ssful . you sho uld see no d ifference between what is dis played now, and
wh at was d ispl aye d before.
• You can also see that the "Page Prope rt ies" funct ionali ty is now availabl e in your
Sidekick, since we in herited the Dialog from the foundati o n "Page" Compo nent.
Copyright 201 0, Day Software AG, Switzerland Rev 1.5 20100907 Www day.CQm
•• CQS eM
v ..
Page Properties . . ,
Delete Page
Activate Page
Lock Page
Show References . . ,
Sidekick page properties selection
Co~gnitulatioKs! You have successfully extended an existing component,

promoting reuse in your deve lo pment efforts . Again, this type of technique will
allow you to easily reuse scripts, Dialogs, etc. from Components that you may
develop in the future .
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day.com

•
EXERCISE - Extend the Script Structure of the "Page"
Component
Goal
The fo llowing instructions explain how to add additional structure to the
existing Trai ning "Page" Component, again allowing for resource reuse . This is
merely an extension of a previous exercise w here you added t he < body>
section of the "Pag e" Com ponent to a new scri pt (body.jsp), and then included
th at script. To successfully complete and understand these instructions, you
will need :

n
• A com pl eted "Pag e Component (e.g . Training Content page) with appropriate
includes
Why add additional structure?

Again, t his exercise is merely an extension of a previous exercise whe re you
added the <body> section of th e "Page" Component to a new script (bod y.js p),
and th en included that scri pt. Day feels it is important you become well versed
in this capability, as it will allow you to more easil y re use Compo nents in the
future . In add ition , you are attempting to reflect th e Geometrixx structure of its
Contentpage Component, so that you may recreate the Web site in its entirety.
1. Create 3 new JSPs (/eft.jsp, center.jsp, r;ght.jsp) in the Training

Contentpage "Page" Component.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.da~CQm
•C Navigator
R apDs I
.. L="" geometrixx
- C tr01nmg
componerts
i.
content
j
page
- i", e ..1..·]l(.g.· .f
body. )Sp
".!.:Ok..
.•
center, lSP
(ontentpage .j5p
left .J:;p
.•,
nght .Jsp J
irr~ aI
' .. . ...
~ ~
" ... ., ~"" ~,,.."" .......... r'-'
CRXDE newly created JSPs (ieft.jsp, center.jsp, right.jsp)
2. Open the file left.jsp, and enter some HTML an d JSP code, simi lar to below-
then Save.
Mt.jsp
<\ @include filez" / libs / foundation / global.jsp "%>
<div c l ass= "left">
<div>logo< / div>
<di v>newslist< / div>
<div>search</div >
</ d iv>
3. Open the file center.j s p, and enter so me HTML and JSP code, similar to below
- then Save.
cell ter.j sp
<Uinclude f ile=" I !ibs / foundation / global. j sp "%>
<div class="center">
<div>trail< / div>
<d iv>t itle</div>
<d iv>par</div>
</ div>
Copyright 2010. Day Software AG , Switzerland Rev 1.5 20100907 wwwdaY-CQm

•
4 . Open the file ri g ht.jsp, and enter some HTML and JSP code, similar to below -
t hen Save.
r ightjsp
<%@include fil e"" "i h bs/founda tion/global .jsp" %>
<d i v class="right ">
<div>rightpar</div>
< / div>
5. Open the file body.jsp, and enter some HTML and JSP code, sim ilar to below -
then Save.
hody.jsp
<%@include file = "/libs/foundat ion/globa l. jsp" ' >
<body>
<d i v class: "topnav ">topnav< / div>
<d i v class "''' content">
<cq:includ e script= "l ef t . jsp" / >
<c q: include script= "c e nter. jsp " />
<cq :include script= "r ight . jsp" / >
< / di v >
<div class = "foo t e r">
<di v c l ass= "toolbar "> t oolbar< / div >
<di v c l ass",ndiscla imer ">d isc l aimer < / div>
< / d iv>
</body>
6. Te st your script by requesting a Page in CQS Siteadmin that im plements this

Training "Page" Component.
• If succe ss ful , you should se e a simple text out put (which we will fi x soon) of
wo rd s and the Sidekick, simi lar to the image below.

Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 W ww. daY.CQro
• Co np ... nv +
lopnav
logo • CQ5 e-M . .,
ne\\'slisl
search
lrai l
Ii t Ie
par
rig htpar
too lbar
disclaimer
Page view of additional structure
Co~ gratulatio"s!
You have add ed add itional stru cture to an existing Component,
promoting reuse in your develo pment efforts. Again, Day feels it is impo rtant
you become we ll ve rsed in t his capability / techn iq ue, as it wi ll allow you to more
easily reuse Components in the fu ture. Now let's make the output more
attractive by introducing you to Designer functionality.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wwwday.cQm

•
EXERCISE - Create and Assign a New Design
Goal
The fo llowing instructions explain how to create and assign a Design(er) to a
Web si te structure, allowing you to separate content and design, wh ile
promoting a consistent look and feel across many Pages. In the interest of time,
we wi ll create a new Design(er) f or Trai ni ng , bu t copy th e exis t ing static. ess f ile
from the Geometrixx Design(er) . To successfully complete and understand
these instructions , you witl need :
• A runni ng CQS Author instance

• Pages in which to assign the design
What is a Design(er) and why do I need it?

By creating and ass igning a Design(e r) in CQ5, it allows you to enforce a
consistent look and feel across your Web site, as well as share glo bal content.
T he many Pages that use t he same Design(er), wi ll have access t o common C55
f iles , defin ing the f ormats of speci f ic areas / Components , and images th at you
use fo r features , such as background s and buttons.
CQS has been deve loped to maximize com pliance with the Web Accessibi lity
Guid eline s. Web accessi bility mean s t hat peo ple wit h d isabilities can percei ve,
understand, navigate, and interact with th e Web, and t hat they can contri bute to
th e Web.
Thi s can include measures such as provid ing textual alternatives to images (or
any non - text item). T hese can then be used to hel p people with sight
im pairment by outputting the text on a Brai lle keypad, or th roug h a voice
synthes izer. Suc h measures can also benefit people with slow internet
connections , or any internet user - whe n t he measures offer t he use r more
information .
Such mechanisms mu st be carefully p lanned and des igned to ensure that t hey
provide t he information requ ired f or th e user to successfu lly understand and

•
use the content . Certain aspects a re integral to CQ5, whereas other a s pects
must be rea lized d uring your project develo pment.
How to create a Pesig~(e rl for your Web site. usl~g CQ~ S iteadllli ~:
1. Nav igate to t he 'Tools" section of CQ5.
• URL: http ://localhost:4 502 / miscad min
Too l s
".l':llrt3!r' a"1d c>jnflgure

r \..-I)r s. -:en".
CQ5 welcome page tools selection
,-------- - -- -- - -- - -- - - - - - .,
••
CQ5 WCM
J -1
<b ~ -..
New...· Copy
"
.<
Deletf..
"
....... ~
"
CQS siteadmin tools selection
Copyright 2010, Day Sofiware AG , Switzerland Rev 1.5 20100907 wwwda\l: com
•
2 . Se lect th e "Designs" f ol der - then se lect New.... New Page ...
• CQSWCM
~
•
~ New ... • Copy Dele
'.
.=. --' Tools !J ew~ge ... Name

..:tJ Blueprints
default
.=l Designs -.l New File ...
2 (
.±.I ~ Blog
New Folder ".
±.I.~ Calendar
!J Default Design
3
4
L....':f
Calendar
blog
,.;•
.±J'!:.J Geometrixx O.:mo Site
';!) CustofTl Documentation
~_ M
.,.
.... ,._.'.'{( \ Jb . ..... ~'-··\. /.
.. .... . ,"·..-.,.,r
_.. . , . . ,..~ .
~'"
~ . - .~ ........
Tools new page (design) selection
3 . Enter the Design(er) "Titl e" (Traini ng Design) and "Name" (training Desig n) in
the dialog - then select Create.
Title Tram'ng Design

Name traln'ngDeslgn
•
•
Tools create page (design)
Copyright 2010, Day SottwareAG , Switzerland Rev 1.5 20100907 www.daf.com

•
NOTE
If you believe your implementation will have more than one Oesign(er), which is quite common,
it is recommended you create a design structure that wi l l all ow multiple Design(er}s to be
as sociated with the one project.
• /e tc / desig ns/ training Desig n

• I etc I d es ig ns I t rai ni n9 Des ig n f d efau It
• I etc! desig ns I t rai ni n9 Des i9 n I prod ucts
4 . Se lect the "Geometrixx" Des ig n(er), afterward selectin g the static.css and the
images fo lder- t hen select Copy.
J -... 'l
=t l oo1s
T'" ,..!
~
~
_ 6kJeD"nt~
DeSiQns
I """" m{
jJ Blog st"tlc:.css static:.r
~ !... Calend!r to"';
:.J Dd d [ ·eSlQO ~ ...r'
1 GeomebI)JI' Demo Site
.!.l_ ~
I\
....J st~It. (SS :;;..
, , '-.,.. __ .tr" . 'q-~..-,~~~ ", ·./lA...·." • • F' ... . _ .. J""... ........,.._/· - ,·.,·..... _ ./~
Tools copy static .ess and images folder
5. Select the Training Des ign(er) - then select Pas t e.
••
- --
CQ5WCM ., w
......
- .....
" - ' Tools
::J B1..e::r-n:.
J
.
_
~
"!.l ~
!.l Od:1At Deog~
.>1~ Go!or1ct:'.q. ~'I'III Siu:
~'!J ~!:leoq.
Tools paste static.ess
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.da v.cQm
•
Co~gratulatio~ s!
You have successfully created a Trai ning Design(er). You can
easily modify the static.css f ile by usi ng CRX DE and going to / etc / desig ns /
training. Now t hat we have a Des ig n(e r), the next task is to assign that Design
(er) to our exist ing Training Web site structure.
1. Navi gate to th e "Websit e, " section of CQ5.
• URL: http ://1 ocalhost:4502 / siteadmin
W eb s ites
Cr-=:ate: a d r(\Qnaq~
mult pIe wet-sites
CQ5 welcome page websites selection
• CQS WCM •
~ New ... y Copy !"
.'
..
- ... . ' - -,. . ....-

" ~. - - ',
\'
.,
...... ..
/ '- .
. ".- . . • .
,, -~ ~ ', ' '-"'"
. ... . ... 6
/'
CQ5 tools siteadmin selecti on
2. Open the root Training Page Ucontent/tra iningSite).
3. Se lect "Page Propertie," in the Side kick - a dialog will pop-up.
Copyright 2010, Oay Software AG , Switzerland Rev 1.5 20100907 wwwdav.CQm

•• CQ5 'iVCM • •
.
Pq Propetbes, ..
Delete Page
Activ ate PaQe
Locl. Po1l~
Show Refel ern:es ...
Sidekick page properties selection
4. Select the "Adva.ced" tab - t hen select the "Vesig." option.
F=q PrcoertL o':tl"lti:'l'lT:jQel7"etr l~ x
Ad ... anr ~d
01 Cancel I
Page properties dialog - design selection
Copyright 2010. Day Software AG, Switzerland Rev 1.5 20100907 www·da v•CQm
•
5. Select t he newly created Trai"i"gPesig" Des ign(er) - then se lect OK. OK.
~ ...J/e'-C.'d(,ggm
J:I_, OIog
;1:1 - ' c"k:nd.tr
WOef.uit 0cs09~
OK II "-'
Design selection dialog
Co"gratulatio"s! You have successfully assigned a Training Design(er) to your

Tra ining Web si t e. You sh ou ld now be able to view the "enhanced" Page, which
ough t to look simi lar to t he image bel ow. You wi ll al so notice t he Sid ekick no
longer displays Components. As a Designer , you have not yet declared what
Compo nents can be used with this Design(er). Ag ain, you can easily modify the
staticcss f ile by using CRXDE and going to / etc / designs / training.
------ .-
•
~ .; ~ w:
,
,
,
)
.-,)
"'4' ('"
__ .J-,._ '."' ........ _..... f-'" " . . .. __ r'-- "or -'.-_,r·~,. r -- ...... r ..· '\.1",)
•
EXERCISE - Create a Text-based Navigation
Component
Goal
The following instructions explain how to create a dynamic text-based
navigation Compon ent, allowi ng for Web site structure to be easily mod ified
and represented / navig ated in real-time. To success fully com plete and
understan d the se instructions, you will need :

• A completed "Page" Component (e.g. Training (ontentpage) with appropriat e
incl udes
• Pages and Web site structure at least 4 levels deep (e.g . / content / trai ni ngS ite /
en / co m pany)
How do I neate dynamic navigation?

Provid ing dynamic navigation capabilities, allowing for the easy addition and
removal of Pages, is one o f t he most important (and sometimes difficu lt) things
you can do as a d eveloper i n CQ5 . Consi d er the following image , whi ch
represents a simple We b site structure :
1
traiOlng
3
dientes company products customers
Training web site structure
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwwdaltcom

•
If you want to create a dynamic navigation Component that displays all the
val id, chi ldren Pages of a language Page (e.g. "e n"), you would need to identify
the following :
• What Page is being requested?

• Is it under the "en " section or the "es" section, as you will want to display
t he appropri ate chi ldren of th e language the visitor is browsing?
• At what leve l does the req uested Page exist?
• This is im portant because if yo u wi sh to displ ay th e chil dren of a
language, then a req uest to a level 1 Pag e (i.e. "training") would break the
assumption requests would only be made to level 2 (e.g. "en ") or level 3
(e.g. "company") Pages.
• Is the requested Page valid?
• In CQS, it is possi ble to confi gure a Page to not display in any dynamic
navigation script, as well as define a specific "On Time" and "Off Time",
After t he se questions have been answered , it is rel atively easy to collect t he ti t le

of the Page, which will be displayed, and the path of the Page , which will be
used to provide navigation functionality. Important Java classes / interfaces you
wi ll be using inc lude:
• com.day.cq .wcm.api.Pag e
• com.day.cq.wcm.api.Page Filter
1. Right-click / apps/< application name >/ components / content - then select

New. COlllpo"e"t.
2. Enter t he desired Component "Label", "Title", "Description" - then click Fi"ish.
• Label = the name of the Component / node that will be created

• T itle (prope rty jcr:title) = th e titl e that wil l be assigned to the Component
• Description (pro perty j cr: description) = the descripti on that will be assigned to
the Component
• Super Resou rce Type (property sling:resourceSuperType) = t he parent
Component in wh ich this Component wil l inherit f ro m
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 Www·tlaY-com

• • Group (property componentGroup) = the group in which this Component will be
associ ated wit h w hen displayed in the Sidekick
Credte new component

Ent~ inf",~ fOf the (~nt
labet: topoa..
Title:
t:fert > : I Ensn II (.~rxel
CRXDE create component dialog
NOTE
This Is a si m ilar proce ss to the "PageR Component we created earlier using CRXOE Lite.
3. Open t he file topnav.jsp, and enter some HTML and JSP code, similar to
below - t hen Save.
topn3v.jsp
<%@include file"'"/libs/f oundation/globaI.jsp"%>
<\@ page i mport"'''java.ut il.Iterator,
com.day.cq.wcm.api.pageFilter" %>
<i
II get navigation root page
Page navRaotPage ~ currentPage . getAbsoluteParent(2);
/1 check to make sure the page exists

if (navRootPage =; nUll) {
navRootPage = currentPagej
if (navRootPage != nUll) {
II create an iterator object of all nav root's child pages
Iterator<Page> children = navRootPage .listChildren (new pageFilter());
Copyright 2010, Day Software AG , SWitzerland Rev 1.5 20100907 www.day.com

• while (children.hasNext(» {
1/ get next child page
Page child:::: children.next();
II display the link in an <A HREF ...
%><a href="< %= child.getpath() %> . html">< %=child .getTitl e ( ) %>< /
a><br / >< %
}
.>
4. Open the file body.jsp in th e Training Contentpage Component and replace
th e "topnav" < div> section with a < cq :include > of the navigati on Component
you just created , simil ar to below - then Save.
• path
• The path to the resource obj ect to be included in the current request
processing. If this path is rel ative, it is appended to the path of the
current resource whose script is including the given resource.
• resourceType
• T he reso urce type of th e resource to be incl uded . If the resource type is
set, the pat h must be the exact pat h to a resource object: in this case,
ad ding parameters, selectors and extensions to th e path is not
supponed .
• If the resource to be included is specifi ed wi t h th e path attribute that
cannot be resolved to a resource . the tag may create a synthetic resource
obj ect out of the path and this resource type.
bodyJsp
<%@include file= M/ libs/foundation/global.jsp" %>
<body>
<cq: include pa th-" topnav" resourceType-" training I components 1 content 1
topnav " I>
<div class: Mcontent ">
<cq:include script="left.jsp" I>
<cq: include script= "center. jsp" I >
<cq:include script= " right.jsp " I>
</ div>
<div class="footer">
<div class=="toolbar">toolbar< / div>
<div class="disclaimer ">disclaimer</div>
</ div>
< / body>
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWWda YCQm
•
Trainin g "Page" Component.
• If succe ssful, you should see navi gatio n lin ks / tit les directly re lated to your We b
site structure.
,--------------------------------------,
Company
'"'. .'
CQS WCM
... .
<.
Page view with topnav
Co"gratulatio"s! You have successfu lly creat ed a "Content" Component that

dynamically represents the navi gation structure of your Web site . This is a
perfect example of how you can easily create and integrate Components into
your Templates .
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 WWW·da llcom
•
EXERCISE - Add a Log Message
Goal
Th e f o llowing instructions explain how to add a log mes sage to a Component
scri pt . Thi s will allow you to more easily debug various scripts you may be
working o n. To successfu lly complete and und erstand these instructio ns , you
will need :

• A comp leted navigation Component
Why add log messages?

In t he daily life of a develo pe r , it is often crucial to mo nitor the values of
variables as sig ned / used. T he re are several possi bi lities , in var ious usability
levels . CQ5 and CRXDE make your life a little easier by implementing t he
popu lar Log4j f rame work , w hich is designed to provide an easy-to-use logging
solutio n.
Th e initialization of a "Logger" object, called "log", has al re ady been

accomplis hed during the inclusion of g /o ba /.j sp in whatever Com po nent you
may be worki ng on . The log fi le entries are formatte d accord ing to t he Sl ing
co nfigu ration. Two pieces of information are required to append an entry to the
log fi le:
• log level
• Thi S is provided by the cor re spond ing method call. For example, a
lt
log.debug«message» produces a message with log level "debug , while
a log.info«message» produces a message with log leve l "info". Pos sible
metho ds of the HLogger" object in clud e:
• traceO
• debugO
• infoO
• warnO
• errorO
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWW:day:com

• • message
• The message itse lf is provided as a parameter to the method call. For
exam ple, log.debug(,'This is the log message") append s the message
"This is the log message" with a log level of "debug" to the error. log file.
NOTE
In a default configuration, the log file is located under <cq-insta il -d ir> / crx-quickstart / iogs l
error .Iog.
How to add a log lIIessage:
1 . Open the file topnav.jsp in the Training "topnav" Component. and enter
so me J5P code. similar to be low - then Save.
topna\'.jsp
<% @include files" / libs / foundation / global.jsp" %>
<%@ page import"""java.util.lterator,
com.day.cq.wcm.api.pageFilter" %>
<.
I I get navigation root page
Page navRootPage % currentPage.getAbsoluteparent(2);
/1 check to make sure the page exists

if (navRootPage =; null) {
navRaotPage ~ currentPagei
if (naVRootPage 1= null) {
II create an iterator object of all nay root's child pages
Iterator<Page> children = navRootPage.listChildren(new pageFilter(»i
while (children.hasNext(» {
II get next child page
Page child = children.next();
II new log message -- logging title of nay page
log .info("child page [{}J found.", child.getTitle(»;
I I display the link in an <A HREF .. .
%><a href="< %= child.getPath() %>.html"><%=child . getTitle() %><1
a><br 1><%
}
.>
World Standard Sohware to Unity Your Business 75
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwwday.com

•
2. Test your script by reque sting a Page in CQS Siteadmin that im plements this
Train ing "Page" Com ponent.
• If succ essfu l, you should see no differe nce between what is displayed now, and
what was di splayed before. However, if you were to inspect the error.l og file.
you woul d see a me ss age similar to below:
04.12.200911 :23 :22.921 ' INFO' 1127.0 .0 . 1 [1 2599438028121 GET· / content l

train in gS ite/ en / co mpany.h tml HTTP! l .1]
a pps.training .components .content .to pnav. t op nav$jsp ch ild page (Compa ny1 found.
Co~gratu latio~.! You have successfully added a log message to your script. Again ,
it is often crucial to monitor the values of variables assigned / used. The
"Logge r" object is a useful tool that will enable you to do so .
NOTE
In CRXDE you can display the f ile error.log that is located on the file system at < cq - instaU -
dir>j crx-quickstart / server!logs and filter it with the appropriate log level. This ca n be done by
proceeding as follow s in CRXDE:
I . Se lect the Co"sole tab locat ed at the bottom of t he w indow - th en se lect the arrow besi de the
Ope" Co"sole - th en se lect SysteIM Log.
•••
1 \lerston Control
3 Java Stack Trace Console

4 New Console V'feW
'.
CRXDE console applicati on log selecl
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www-ciallcom
•
2. Se lect t he desired ~ I og level" in t he drop down m enu.
• The error. log is then filtered according to the log level and displayed in th e tab .
....
Info v
trace "
oppecl for
debug
"I'====~,at.
n flgUraCl o 1'warn d at / etc/r~~ l :
ion
dated. St a error abled
arted .
~ agent- "a.c... /-ete)'..rep 1 i a: ac iel't/ agent ~
' " . .....A _ ' . '
e aaent at / etc / reD l icatlon / aaent ~

CRXDE console log level select
World Standard Software to Unify Your Business n

Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.day.com
•
EXERCISE - Enable the Debugger
Goal
T he foll owing instructions explain how to enable the debugger in CQ and
CRXDE. This will allow you to more easi ly debug various scripts you may be
working on. To successfully complete and understand these instructions, you
wi ll need :

• A running CRXDE in sta nce
• A completed navigation Component
Why enable the debugge."?

Sometimes, out pu tting variable values in a log file is not enough for a developer
to monitor the sequence of steps executed by the system. The best way to
accomp lish th is is the usage of a debugger. Many modern IDEs like Ecli pse and
CRX DE provid e th is f unctional ity.
Again , th e goal of t his exercise is to learn how to use th e bu ilt- in debugger in

CRXDE. A debugging session consists of a server and a client . In th is t ra ining,
you will use CRXDE as t he cl ient , w hile the server is provided by CQ. For
performance re aso ns , Day recommend s not enabli ng debugg ing for CQ
production in stances, as th is woul d consume too many resources, t hus
h indering performance .
1 . Sh utdown your CQ author and CRXDE instance.
2. Navigate to the directory where the Java servlet engine (CQSE) has been
installed using your command line.
• e.g. < cq - in sta ll-dir> / crx-quickstart / server
3. Enter the fo llowing command to start the CQ server in debug mode.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day;com

• •
•
Windows = server.bat -debug socket
Unu x / Uni x = start - d
DOS command line start/enable of debugger
NOTE
By default , port 30303 will be used by the server for debugging communication. You can
customize the server. bat / start file for future use . In addition, you can call the debugger directly:
java -XmxS12m -Xdebug .

Xrunjdwp:transport=dLsocket,server=y,address=30303.suspend=n -jar cq-author-4502.jar
4. Start CRXDE.
S. Open the file ropnav.jsp in t he Training "topnav" Component.
6. Rig ht-click the left-s ide of the JSP edi tor on a line of cod e {e.g. line 13: if
(navRootPage != null) {) - then select Toggle &reakpoi"ts .
• "'I'~t<a-J.'- • . ~' J • • ..1.1 e"4hr .

" "", .,Ul'. " IJ. ""',.. 4 " J . F" <;;~Fo J teL'"
(
./
af tn.vltDo ~P "'J'O •• null " ""n .. ntP"'l'! ' . nuJ..l) I
..--II
.... vRoo~P"ll'l' • " ""~.M ' _;
,
~t ( n ..v Roo tP .. ~ .. ,- ..... U ) I
,r
J.)
_.
Addr..... .
"~.
,-
C_ e - '
• III ( <> un<l . " , c h.l d .9CtTHleOI;
•
• etP&thO
r
/
1'-., .,....~:.:- "._~.:--:-t, . /'~ ....... . .

_~· 'I_.F'" -,....,.• _.r. . .-~. - ..... ,..
CRXDE right-click JSP editor
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.dav.com

•
i-t' (n~vRo o tP~ge
Iter ~tor ~ Paoe >

I. nll].l 1 (
chlldr e n " navRoot. P a~e .

,. -0'- ",.
1 i~tO:hildren {nt'll PalO/ef l1 ter () I ; :

r
tl h:a..le (c hil d r e n. has t~ext () ) l ,;
•
• \, ).. 1
Page ch I l d · c!'l ild r en . n ext () ; I'

J ,;..
. . -.-. ~~ . r· J!?!:l1il" nt Pr ....... ... - .... ~~': .6> :.; ..... • -!tU/ ....... .1 '. r-I''' • .......- _<T.. t :.>.1.." ........ .... \ ......., 1';
CRXDE code toggle breakpoint
7. Switch to debug mode by selecting Pebug. Attach Pebugger.
('
l- l1 port .. ·'J "ltd . It .,.Cd r "
t,'· ,1.j .
)
c :W:. dd1'. cq. :.'·:rn. ~...
'P'" I
.. ge~tll.a:
(
''''''''l P&ge ne.vRoo1;.Page '" cun:entPage. t.
CRXDE switch to debug mode
8. Enter the de bug po rt (3 0303) used for starting the server in debug mode -
t hen se lect OK.
Enter the debug port ~d for st~tno the server Ifl debuo mode
303031
or, kJ I C, ,,,ol
CRXDE debug port dialog
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 Www·day.com
•
NOTE
You are now in debug mode. Yo ur CRXDE view shou ld look sim ilar to the image below.
-
'*""_....._ - - - - - - - -
*' __..,0-__ _
-.-......,--.~
··--I-(""""",",~->l-
•• _ _ II~"t '_>I_
". ....... .•.
~ ~-.-.I
- •
c
..•-""...,-,.....-"'--
1 _'
, - ,.... . (0001-' .......
,. _ l... _·_ _" _.....
- _ _ 1_ _ _ "_1_
......
[-,,-~~,
'? _ _ I'_"'_"_J_
,- _ _ [_"1,_
""--_''''-'1-
·--1-_--.
.- _._ _-
~
. . .--
~ _ _ ("'''''_I\O''·.-..l
" _ _(INff_I_
........
."...._,..-.....0]_
_ __,........,;J_
_'~_,
..... ..
-- --- ___ ___ .....o
---*~=:=:'t:;-
~
.-
. ~ ........... --...').,.,-
" , .......... ~_ -- _ I I " n."u"_ " _"\ , •
_ o"""p_ • ~"-fO"'_'
" ~ _,_ •• - " ' 1 1
-
.... l~ ( e •• ' ..... . ~ . . ) ' I
---
CRXDE debug mode
__ n ·
9. Tes t your script / debug mode by requesting a Page in CQS Sitead min that
implements this Trai ning "topnav" Component.
• In CRXDE, you will notice your script stops at the line of code containing the
breakpoi nt
• Here you will be able to investigate variables, execution, and other related
elements , in add ition to "s tepping " throug h your cod e
10. Se lect the Pisco""ect button to disable debug mode.
World Standard Sohware to Unify Your Business 81
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav.com

•
0·· ... - ..
r.;, DMfl'lOt"I TiYe.!ld [127 .0.0. 1 [ 126<162277468;) GET Ic.ontent/t.anng/en/company htmI HTTP/ I .l] (SUspe1ld~ ,.../
_ topnav.Jsp w: 13 ~
- toDMV .JSP<l"ttpJsoBase ).set'r'lCe(t-ltP5efvietReQUeSt, H:tp:5el'vletRl!'sponse) Ine: 70 /

= tODnaV.JsP(l-ttPSeTvlel: ) serw:e{5er ...ietReQUest, Serv\etP~~<Se) line. 802 (.
=
-
Jsp~ v\e{Wr apper Adapte.(}$pSe:tvlel:W, dppef J, sefYICe(HttpSei 'rietPeQUeSt, HttPSer W:t.Response. boo.
/
.r .,,~~~ap~:'~7.:'S~~~~. '::~ ~, ~ ~'..~_.,~.I~" ._ ' ~ ' ~ ~" '_j".. .I' .J
CRXDE disconnect debug mode
COKgratulatioK'! You have successf ully enabled debugging in CQ and CRXDE.

Ag ai n, this is a great tool that will allow you to monitor the sequence of steps
executed by the system.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav.cQm

•
EXERCISE - Create an Image-based Navigation
Component
Goal
The following instructions explain how to create a dynamic image-based
navigation Component, allowing for Web site structure to be easily modified
and represented / navigated in real-time . To successfu lly complete and
understand t hese instructions, you will need:

• A runni ng CRXDE instance
• A com pleted "Page" Component (e .g. Training Contentpage) with appropriate
includes
• A comp leted text - based top navigation Component (e.g. l apps / training !
componen ts / content / topnav)
• Pages and Web site structure at least 4 levels deep (e .g. ! content / trainingSite /
en / company)
How do I transform images dynamically?

Once again , providing dynamic navigation capabilities, allowin g for the easy
addition and removal of Pages , is one of t he most important (and sometimes
d ifficult) thing s you can do as a developer in CQ5. In t his exercise, you wi ll
mod ify the existing text-based navig ation Component to output background
images overlaid with text equal to the title of a Page you wish to allow
navigable.
To be able to use image based navigation items, you need a mechanism to

reque st a page in an "image navigation item view", To achieve thiS, you will add
a selector to t he request of the navigation item image of a page (e.g . / pat h / to /
a / page.navimage .png). Req uests with such a se lector have to be handled by an
image processing mechanism. To achieve thiS, you will use Sling's req uest
processing mechanism.
You wil l need to add an image processing scri pt or Java servlet t hat wi ll handle
all req uests with the specific selector "* navimage .png'·. For the rendering of
images with an overlay o f text, t he abstract Java servlet Abstractlmage5ervlet is
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.daycQm

•
very hel pful. You will merely have to overwrite the method createLayerO to
implement your des ired logic.
Relevant function alities (API calls) you will use are :
• com .day.cq .wcm .co mmons.Abstractlmag eServlet

• com.day. cq.wc m.co mmons.WCM Util s
• com. day.cq .wcm .foundation. lmageHelpe r
• com .dayJm age.Font
• com. day.imag e.Layer
In the interest of time , Day Training has provided the Java servlet and
backg round imag e t hat will achieve t his image processing / text overlay. You wi ll
simpl y perform a cod e review in class. These items can be found in : < us b > /
e xe rei ses / imag e- navigat io n.
For more detai led information concerning the AbstractlmageServlet and other
Day related image processing capabil it ies, please review the CQJavadoc
provided with CQ WCM and on your USB.
How to create an illlage-based navigat ion COlllpone"t:
1 . Co py the files navimage.png.java and navimage_bg.jp g from the USB

«us b > / exercises !i mage-navigation) - then paste to the Training Contentpage
Component.
•
....e.g. / apps / training / component s/ pag e/ contentpage
..;
.f c. .~.~r-- .... ~ ..... "./' v,,· ----
CRXDE structure of contentpage component

•
2 . Review the nav;mage.png.java file for a better understanding of the
Abstractlmage5ervlet.
WARNING
It is possible yo u will need to modify the Java package to match the current location of the
Tra ining Content page Component.
• e.g. apPs,training.components.page.contentpage
3. Open the file ropnav.jsp in t he Training top navigati o n Component (Le . /

apps/ train ing / components / content / topnav). and enter so me HTML and J5P
code, sim ilar to below - then Save.
topnav.jsp
<% @include file"' ''/ libs / wcm/ global . jsp'' %>
<% @ page import:"java . util.lterator ,
com.day.cq.wcm.api . pageFilter" %>
<.
II get navigation root page
Page navRootPage = currentpage.getAbsoluteParent(2);
II check to make sure the page exists

i f (navRootPage == nUll) {
navRootPage = currentPage;
if (navRootPage != nUll) {
I I create an iterator object of all nay root's child pages
Iterator<Page> children = navRootPage.listChildren(new pageFilter(»;
while (children.hasNext(» {
II get next child page
Page child z children.next();
II new log message -- logging title of nav page
log.info(nchild page [(}) found. n , c h ild.getTitle(»;
II display the link in an <A HREF •..
%><a href_ <%_ child . getPath () \ >.html"><img alt-"<\- child . getTitle
M
() 1>" src="<%- child . getPath() %>.navimage.png">< /img>< /a><%

I
I
.>
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.daV.com
•
Training "Page" Com ponent.
• If successful , you should see navigation li nks/ titles di rectly related to your Web
site structure.
Page preview of image navigation
COKgratulatioKs! You have successfully modif ied an existing "con t ent" navigation
Com po nent t hat dynamically re presents the navigat ion structure of your Web
site using images.
Copyright 2010, Oay SoftwareAG, Switzerland Rev 1.5 20100907 wwwdav.CQm

•
EXERCISE - Create a Title Component
Goal
The following in stru ct ions explain how to create a Component that allows
authors to manage a Page 's title (te xt ua l content), t hrou g h the use of a simple
Dialog . Thi s is a beginning step in learni ng how to create Componen ts t hat
allow au t hors to write content. To successfully complete an d understand these
instructions , you will need :
• A runni ng CQS Author instance

• A run ning CRXOE instance
n
• A completed "Page Component (e.g. Training Contentpage) wi t h approp riate
includes
What is a Dialog?
During t hi s trainin g you have fo cused most ly on rendering content (static and
dynami c), which is important as one cou ld argue it comprises 50% of w hat yo u
do as a CQ5 deve loper. What needs to be accompl ished for this exerc ise is to
provide content authors the abi lity to w ri te content. You can accompl ish this by
learning how to cre ate a Componen t Dialog . A CQ5 Dialog is sim ilar to oth er
dialog s you have used / created in t he pas t : it gat he rs user input via a "form",
potentially validates it, and then makes that input available f or further use
(storage, configurat ion, etc.).
CQ5 makes use of t he popul ar ExU5Java5cript framework. It allows developers

the ability t o easily create Rich Internet App licat ions (RIA) through the use of
AJAX. It inc ludes :
• High performance, custorniza ble UI widgets

• We ll des igned and extensi ble Component model
• An intuitive , easy to use API
In re lation to the Component the Dialog is being created for, the root node of
the Dialog has to be of node type "cq :Dialog" and named "dialog". Be low this
Dialog root node, the nodes for the tabs of the Dialog have to be ad ded . T hese
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www,day,cow

•
"tab node s" must be of node type "cq:WidgetColiection ". Below the "tab nodes"
th e "w idget nod es" can the n be added. The "widget nodes" must be of node
type "cq :Widge t'·.
How to , reate a title COlllponent with a Pialog:
1. Create a new title "'content" Com ponent.
Create new component

Enter riormatlOr. for t~ component
l~:
Title:
[)esc."...,
~ Rrso..rce Type:
Gr~:
t:text > II Ensh ~ I Cancel
CRXDE new component dialog
NOTE
This proces s is simi lar to creati ng the navigation Component.
2. Open t he file tit le.js p, and enter some HTML and J5P code, similar to below-
then Save.
tiUe.jsp
<%@inc l u de file= ~/ libs / foundation /g lobal . jsp "'>
<hl><\s properties.get( ft title", currentpage.getTitle(» %></h l >
World Standard Software to Unify Your BUSiness 88
•
NOTE
You will notice t he use of the Sling Va lu eMap clas s / object "properties". Thi s object allows you
to easily get properties associated with this instance of thi s Component.
3. Open t he fi le cente r.jsp in t he Trainin g Contentpago Component and replace

the "tit le" < d iv> section wi t h a <cq :inc lude > of the title Component you just
created, s imilar to below - then Save.
centcr.jsp
<%@incl ude f ilem"/ !ibs / foundation / g!obal.jsp" %>
<div class= " center">
<div>t rail </ div>
<cq:include path- " title_node M resourceType- "t raining/components/content l
title " />
<di v>par< / di v>
</div>
4. Test your script by req uesting a Page in CQS Sitead min t hat implements this
Training title Component.
• If successful , yo u should see th e defaul t Pag e titl e, simitar to the image below.
• CQ6NLM-'" ..
I;
f
....... , ." .. _.f ····.-..r , ..

- ....... ~\ ..& " • •, ., ..
~ .~ ~ .1 •••• - ' ...... w' - ..... ~ • ..,. ' . ". • •••• • r······ .... ,
-~
Page default view
5. Ri g ht-click the title Component - then select New. Pialoq.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 WWW:day.com

•
6 . Enter the desired Dialog "Name" (dialog) and 'Title" (Training Title
Compo nent),
Create new ddkJg

[nte. riQl'mabonfor tNdoaIoQ
--
Tide; II........., Ttie CcrrcIonerI
CRDXE new dialog dialog
NOTE
Now is a good time for you to review the Dialog / node structure, and be able to easily map the
related elements. Please review the image be low for a better understanding (image is a
completed Dialog - you are not there yet).
- -"'-
-.----,....--._... ---_.
-.....
..............
,,-'....
!.
I"'a,,_ ..
~.-
_"~)
f
-.......- -, •
Dialog/node relational map
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 w ww.day.CQro

•
7. Right-click the tabl node - then select New, Node,
8. Enter the desired "Name" (items) and 'Type" (cq:WidgetColiection),
,""""
"'" di~
:-- it~rrrs
". ". .. C"
itffi'!$ Cr eate new node

tab l[cQ:Panel]
Enter riOfmatlOl1 ~bout the new node f
..,.t""""
title,lSP
(
oot
.
)
Type; .....-:..
t"
I
(
F",h I, C""d
(
(.J
,
CRXDE new node dialog
9. Create a new node under the newly create d items node.
• Name = title
• Type ~ cq:Widget
10. Right-click the newly created title node - then se lect New. Property.
11, Enter the desired "Name", "Type", and "Value" for the properties listed
below.
• the property th at will define where the co ntent is stored

• Nam e = name
• Type = String
• Va lu e = . / tit le
Copyright 20 10, Day Software AG , Switzerland Rev 1.5 20100907 www.da y.coro
• • the property that will define the Widget type (Le. user interface co ntrol)
• Name = xtype
• Type = St ring
• Va lu e = textfield
• the property that will defi ne the label applied to the Widget
• Name ~ fie ld Label
• Type = Strin g
• Valu e = Enter T itle Here
NOTE
These are but a few of the many properties and Widgets you can use to create a Dialog that
meets the needs of yo ur users/ conte nt authors . You ca n find a complete listing in the provided
CQ-WIDGETS -API on the USB .
12. Test yo u r script / Dialo g by re questing a Page in CQS Siteadmin that

implements this T rai ning titl e Component - t hen d ouble- clic k the "title" con tent
to invoke the Dialog .
(
I
• Company l
.. -'
Page title content se lect ion
13 . Enter t he d e sire d custom title - then se lect OK .
•• •
J Nt! I: oa:: II c.nttI
Dialog of title
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwwday.com
•
NOTE
Notice how tabl 's label is "Tab 1." If you wa nt to change this value. simp ly assign a property
named t it le (type String) to the tab 1 node, and assign a va lue.
14. Review t he Page output of the title content.
• If success fu l, you should see the cu stom Page tit le. sim ilar t o the image below.
~
~
,
.;
This is a custom •. •'. ~

j
.J
./
•
" •. ,
.... ~~ .... I
" " ... . r " '.
\ •.., ·L .... ..
~--' . r
·· /i ",
..... ....,._..... /
Page view with custom title
Co"gratu latio"s! You have successfully created a tit le Component, with a Dialog,
that allows content authors to write content and have it displayed. This is a
sig nificant step in your d evelo pment capabilities, as you are now able to create
CQ Components that allow you to write content to the repository.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wwwday,cQm

•
Extra Credit EXERCISE - Create a List Children
Component
Goal
T he f oll owing exercise tests your knowledge of component creation and taking
input from an author. Th e goal is to create a Lis tChildren compo nent. To
successfully com plete and understand these instructions, you will need :
• A running CQS Auth or instance

• A running CRXDE in sta nce
• A compl eted "Page - rende ring" Component (e.g. Training Contentpage) w ith
appro priate includes
Create a List Children Component
Using the Page, PageFilter, and PageManager classes, create a IIstChlldre"

component. Remember you can look up these classes in the java docs. You
have all the information you need , from the top"av and titl. components, to
complete this component.
1. Include li mport the appropriate java classes.
2. Get a list root property (should be a path) whose value will become the root
of the list
3. If the list root property is empty, use a default. ( static path or path to
current page )
4. Use the path to get the root page .

(hint: the PageManager class has a met hod to get a page when you know its
path)
5. Set up a page iterator, fi ltering by valid pages
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wwwdav.cQm

•
6 . Iterate over the children
7. For each child, write out a link
8. Create a dialog box
9. Place an input widget on the dialog box so the author can enter the list root.
10. Edit /eft.jsp. Replace the placeholder for news list with a (cq:i.clude> of your
new component.
Co"grat ulatio"s! You have successf ully created a listChild ren Component, with a
Dialog , that allows content au t hors to enter content and have it used as a list
root . T hi s is a significant ste p in your deve lopment capabilities, as you are now
ab le to create CQ Components t hat al low you to write content to the repository
and use that information to create new ren dered content.
Copyright 2010, Day Software AG . Switzerland Rev 1.5 20100907 www.da )t com
•
Oay3
EXERCISE - Create a Logo Component
Goal
Th e fol lowing instructions explain how to create a Com ponent that allow s
designe rs to manag e a Web site' s logo (bi nary content), t hrough th e use of a
Design Di alog. By using a Design Dialog , it wi ll ensure the dis played logo and
rel ated link are consistent f or all Pages that use t he same Templ ate / Design. To
successfully comp lete and understand these instructions, you will need:

• A completed "Page" Component (e.g. Trai ning Contentpage) with appropriate
includes
What is special a bout the Design Dialog?

As d iscussed earlier, a Design(er) can be used to enforce a consistent loo k and
feel across your Web site , as well as share global cont ent. T his gl obal content is
ed itable wh en using a Des ign Dialog . So once agai n, the many Pages that use
the same Design(er) wi ll have access to th is global content. Fortunately, th e
process to create a De sign Dial og is almost identical to cre ating a "normal "
Dial og - t he on ly difference being the name of the Dialog itse lf (i.e. dialog vs.
des ign_d ialog).
How to create a logo COlllpo.e.t with a Pesig. Plalog:
1. Create a new logo "content" Component .
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav-cQro

•Create new c.omponent
Ente! ..,for mation for t he comPOnent
Label: logo
ale: Tf ~ l ogo Component

[ks(:ripbon: NA
Supet Resource Type: fOll"ldatlOnlcompooeots/parbase
Group:
CRXDE new logo component dialog
NOTE
Important to note is the use of the resource SuperType foundation/components/parbase.

Parbase is a key component as it allows components to inherit attributes from other
com ponents, similar to subclasses in object oriented languages such as Java, C++ , and so on.
The parbase here defines tree scripts to render images, titles, and so on, so that all
components subclassed from this parbase can use this script.
When using the Dialog Widget smartimage , as you will to complete this exercise. it is
recommended to extend th is "he lper Component . It contains the Java source img.GET.java,
ft
w hich allows you to more easily manage / transform images in fewer lines of code.
2. Open t he file logo .jsp, and enter some HTML and J5P code, similar to below-
t hen Save.
logo.jsp
<% @include f ile"'''/libs/foundat i on/global .j sp''%>
Copyright 2010. Day SoftwareAG. Switzerland Rev 1.5 20100907 www.day.com

•
<%@ page import=ncom . day.cq.wcm.foundation.lmage" %>
<.
String homePage .. " .,
Page parentPage currentpage.getAbsoluteParent(2):
if (parentPage == nUll)
homepage "" currentpage.getPath();

} else {
hOlllePa':l8 "" parentpage.getpath();
}
.>
<a href="<%= homePage %>.html ">
<.
II get the r esource of the logo style
log.error("path is : .. + currentStyle.getpath(»:
Resource imageResource "" reSQUrCeResolver.getResQurce(currentStyle.getPath

( I );
if (imageResource ! = nUll) {
/1 "c ast" resource as image
Image image = new Image(iroageRes ource) ;
if (!image.hasContent(» {
1/ if image has no content, write out "Home Page"
%> Home Page< %
} else {
II if image has content , set selector , draw out
image. setSelector(" . img ") ; / / use inherited image script
image.draw(out);
} else {
%>Home p age<%
}
.>
<fa>
3 . Open the fil e left.j sp in the Training Contentpage Com po nent and re place
the "logo" < div> section with a < cq :includ e> of the logo Component you just
created, similar to below - th en Save.
Icft.jsp
<%@include file:"/libs/found at ion/9lobal . jsp ~% >
<div class="left">
<cq:inc l u de path- " logo" resourceType= ~ trainin9 / components/content/logo M />
<div>newsl ist</div>
<div>search</div>
</div>
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.dav. com
•
4 . Test your script by requesti ng a Page in CQ5 5iteadmin that implements t hi s
Train ing logo Component.
• If successful, you should see the default logo output, similar to the image
bel ow_
Custome rs
~
•.. <'<
,
,
f
Customers
-;J
.i'
)
Page preview of logo component
5. Create a new Design Dialog fo r the logo Compo nent.
D'eate new dialog

Erier nformabC.n f(~ ttoe 6aIoo
N¥ne; de->q\_WbO
rille, l r~L09OC~
CRXDE new dialog dialog

6 . Create an it.llls node (no deType cq :Wi dget Coliection) under t he tab 1 nod e of
t he log o Component's Desig n Dialog .
Copyright 20 10, Day Software AG , Switzerland Rev 1.5 20 100907 WWW:daY-com

•
7. Create a
node.
,"argi~ node (nodeType cq:Widget) under the newly created items
8. Assign the foll owi ng properties to the newly created margin node :
• the property th at defi nes where the conten t is stored

• Name = name
• Type = Stri ng
• Va lu e = ./div img.margin
• t he property that defi nes the Widget type
• Nam e = xtype
• Type ~ Stri ng
• Va lue = textfi eld
• the property that defines the label app lied to the Widget
• Name = field Label
• Type = String
• Valu e = Image Margin
• the property that wil l give t he autho r extra information about the Widget
• Name = field Description
• Type = Stri ng
• Value ~ (e.g., 28px 0 0 48px)
9. Create an absPare~t node (nodeType cq:Widget) under the items node.
10. Ass ign the following properties to the newly created absParent node:
• the pro perty that defines where the content is stored

• Name = name
• Type ~ String
• Va lu e = ./ absParen t
• the property th at defi nes the Widget type
• Name = xty pe
• Type ~ St ri ng
• Val ue = textfield
• the property that defines th e label applied to the Widget
• Name = f ield Label
• Type = String
Copyrighl2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www:daY-com

• •
• Value = Parent Level (absolute)
the p roperty t hat will g ive t he author extra in fo rm ation abou t the Wi dg et
• Name = field Description
• Ty pe = String
• Value ~ (e.g ., 1 for / cantent / site)
11. Copy the no de / Iibs / fa un d atian / ca mpone nts / image / di a lag !items / image -
then paste to the logo's Design Dialog so that it is a peer of tab I.
• e.g. I apps/ training / co mponents / conte nt j logo / desig n_d ialog / it ems / items
NOTE
Instead of always reinventing th e whee l, it is often more efficient to copy- and- past e existing
Dialogs /Widgets that meet your needs . That being sa id, it is wise to review w hat yo u have just
co pied to better und e rstand the intern al workings of CQ.
In add ition, you may have noticed this Widget was pasted in the location where tabs a re
typically located. The smartimage xtype (along w ith a few others) is unique in that it provides a
better conte nt author experience when ~cas ted " as a tab.
12 . Review the properties associated with this smartimage Widget .
"-
(lop!' N ""net...
ddGf~
Yo'"
.(rM>]eCrop
~d •
Type
Str rl9
''''''
,.,•
r.
ft~"'r <llTl!"(er
fief!.ef eT'eno:: ef:'",,-an-.el.:er
.Ifdet./afne
./filePefr;<erv:e
~m,
st,,,, ,
t(l:~t N~
-
P :prl'MryT.,.-pe
mapP6Iamet~ . rm.q-t·~
.jJiIe
Strr-IQ
st,..., Ii,.
rendibons../fu; I JCr _content{rendlboos{cQ'SdaM._ ... stri'Y,J I
.eQtJe"'"..tSdfrs. . ~.pnQ
"'''''
,c.t¥.eP<!Ir.yneteo
"'.
....,..",
,-
. /mqRot~e
(tmpJlI()lo.ld _test/'
5.""
st""
,/
r
..". Sf(oI!IItwMge "'''''

~".,
. _. • ~-,-....- .- . ~_.".'II'" ". ...r'" ./ .... '. . . . ~ ..... ~.,--...-..-.\.!'.. / ..'.- Y"~ / "
CRXDE properties of image widget
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.day.com

•
14. Test your script / Design Dialog by requesting a Page in CQ5 5iteadmin that
im plements t his T rai ning logo Compo nent - th en select Peslg~ lItode on your
5idekick, and select "edit" f or the logo Component to invo ke t he Design Dialog .
• .,
5 C
. .
!J v
-- ,
,
J.
'.
..~ .... .......... : " ,. ~, . " .. -.. , , . A"" ',

Page design mode selection
Copyright 2010. Day Software AG, Switzerland Rev 1.5 20100907 www;dav.com
• Com pa ny
, ,PRODUCTS 'h
..
~------------~----------t-,-'-~--~
Ejt
--"-'
'C) This is 2t,-
, ,
~ .•.. .'~'
.. . ..
Page dialog edit bar
14, Enter t he desired custom logo - then se lect OK.
• <usb > /exercises / logo-componen t/ logo.jpg

Trdlt1lng Logo :ompo IPnt x
Image
: ••- geometrixx
••• • shapes for ccnt:mcs
Map tl Crop Rotate Clear
' - _H-'.
elp
' ----.JII,_ _ _-.JIIL ---''''---.JI [ Car.:el
Design dialog of logo

Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWWdav-com

•
15. Select Edit mode - t hen review t he Page output of the logo Component .
• If succe ssful , yo u should see the custom Page logo , similar to the image below.
Company Image (Unnamed - com .day.cq .VKm:cq ..
,
~
geomeulXX ,
• snapes tor a:m.r.os This is a custom TITLE ,
par
I
..... ~
Page preview of logo component
Co"gratulatio".! You have successfully created a logo Component, with a Design

Dialog, that allows co ntent authors/ desig ners to write glo bal binary content
and have it displayed . Once again, t hi s is a significant step in you r develop ment
capabilities, as you are now able to create CQ Components t hat allow you t o
write binary content to the re pos itory. In ad dition , since this content is g lobal,
all pages that implement the same Design / Template will have identical logo
content.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWw da v.CQm
•
EXERCISE - Include the Foundation Breadcrumb
Component
Goal
The fo llowing instructions explain how to include the foun dation Component
the Breadcrum b, w hic h allows designers to dynamically manage the dept h at
w hich a breadcrumb trail be g ins. This exercise will rei nforce your abili ty to
includ e existing Co mponents into a Te m plate . To successfully complete and
understand t hese instructions, you will need :
• A run ning CQS Author instance

• A run ning CRXDE instance
• A co m pleted "Page" Com ponent (e.g . Training (onte nt page) w it h appro priate
includ es
Why include a foundation Component?

Day provi des a large amou nt of Co mponents with its CQ product out-of-the-
box. They range anywhere from a sim ple ti t le Component , t o t he more comp lex
paragraph system Component , which we wi ll cover later. These Components are
located at:
• ! Iibs / found ation/ components
It is strongly recommend ed you perform a complete review of each Component

before beg inning actual develop ment . Not on ly are they learning to o ls ,
providing excelle nt exam ples of what you can do as within CQ as a d eveloper,
but you may find an ex isting f o undation Com ponent t hat provid es a co m pleted
solution as re q uired by conten t aut ho rs. In ad d ition, you can extend t hese
Components to provide a custom solution, much li ke you d id wi th t he logo
Component (which is an extension of the foundation parbase Component).
Copyright 20 10 , Day SoNwareAG , Switzerland Rev 1.5 20100907 www.dav.com

•
How to include the foundation breadcrulllb COlllponent:
1. Open th e fi le eenter.jsp in the T rain ing Contentpage Component and replace

the "trail" < div> sect io n with a < cq :include > of the fou ndation breadcrumb
Com ponent, similar to below - then Save.
ccntcr.jsp
<%@include file= M/ libs /foundation/global.j sp N% >
<div class = "ce nter M>
<cq:include path= Mtrail M resourceType= " foundation/components/
breadcrumb " />
<cq:include path="title" resourceType="training /components /content /
title / >
M
<div>par</div>
</div>
NOTE
As always. it is a good idea to review what you have just included. Take note of the fact this
Component on ly co ntains a Design Dialog (i.e. design_dialog), thus can only be modified in
Design mode.
2. Test your script by request ing a Page in CQ5 Siteadmin that impl ements this
foundation breadcrumb Component.
• If successful, you should see a breadcrumb trail , similar to the image below.
• A Cube Page has been ad ded below the Products Page merely for
example. Ad d your own pages bel ow the Products page and open them to
test the breadcrumb.
• In Design mode, feel free to modi fy the d epth at which the breadcrumb trail
begins.
• Default is leve l 2 (i.e . / content / trainingSite / en)
Page preview of breadcrumb

Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.day.cQm
•
Co"gratulatio"s! You have successfully included the breadcrumb foun dation
Com ponent. Again, this is an exercise to get you familiar with not only the
process of inclu d ing a Component into a Template, but also to be more aware
of the plethora of Components CQ provi des out-o f-the - bo x.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www daYCQm
•
Extra Credit EXERCISE - Modify the Foundation
Breadcrumb component
Goal
The following exercise tests your knowledge of creating design elements. The
goal is to mod ify th e Fou ndation Breadcru m b compo nent so t hat an author with
de sign privileges can set t he value of the del imiter between t he crumbs. To
successfully com pl ete and understand these instru ctions, you wi ll need:
• A run ning CQ5 Author inst ance

• A completed "Page" Component (e .g. Traini ng Contentpage) with approp riate
includ es
Modify the Foundation Breadcrumb component

1. Create the foundation/components structure in /a pps and copy the
Foundation b read crum b com po nent to the •• .jcomponents fold er.
2. Use t he get of the absParent property as a gUide to get the delimiter from t he
currentStyle.
3. Modify t he code to use the delimiter that you got in ste p 2 .
4 . Modify t he design dialog box to allow t he author / designer to enter the

delim iter.
5. Test your code.
6. Examine the re pos itory to see the va lue s wr itten into the design when you
enter val ues into the design dialog bo x and save them .
Co"gratulatio"s! You have successfully modi fied the Foundation breadcrumb

Component. Ag ain , this is an exerc ise to use yo ur knowledge to modify a
Foundation com po nent.
•
Extra Credit EXERCISE - Modify your logo component
Goal
The followin g exercise tests your knowledge of creating desig n eleme nts. The
goa l is to modify your local logo com ponent so t hat the code uses content
entered by t he author into the existi ng abs Parent w idget of t he design dialog
box. To successfully complete and understand these instruct ions, you will
need:
• A runn ing CQS Aut hor instance

• A completed "Page" Component (e.g . Train ing Content page) w ith appropriate
includes
• A comp leted logo Component (e.g. tra;ning/ components/ content/ logo)
Modify your logo component

1. Use t he breadcrumb co m ponent as a guide for getting the absParent
property from t he currentStyle obj ect .
2. Modify the logo component code so that it uses the absParent value to set
t he level for the link , instead of a hardcoded value .
3. Tes t your code by entering d ifferent valu es for absParent.
4. Examine the repos itory to see the val ues written into the des ign when you
enter values into the design dialog box and save them.
Co"gratulatio"s! You have successfully mod ified your logo Component. Again, this
is an exercise to use your kn owledge of the currentStyle to extract design
elements and use them to render content objects.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wWW:daycom
•
Extra Credit EXERCISE - Modify your topnav
component
Goal
The following exercise tests your knowledge of creating design elements . The
goal is to mod ify your local topnav com po ne nt so that the code allows an
author with des ig n privileges to set th e root of th e navigation by entering a
path. To successfully complete and understand t hese instructions, you will
need:

• A completed "Pag e" Component (e.g. Training Content page) with appropriate
includes
• A compl eted topnav Component (e.g. rraining/componenU/conrent/topnav)
Modify your topnav component

1. Make wh atever modifications that you need to obtain the following result :
Au thor / des igner can enter a path design element to set the root of the
top navigation list of pages.
Congratulations! You have successfully modified your top nav Component. Again,
t his is an exercise to use your k nowledge of t he currentStyle to set and extract
design elements and use them to render content objects.
Extra Extra Credit

Make a similar modification to your logo component to allow the designer to enter a path
for the logo image link.
Copyright 2010, Day SoftwareAG . Switzerland Rev 1.5 20100907 Www·day.com

•
EXERCISE - Include the Foundation Paragraph
System Component
Goal
The fo ll owing in structions explain how to include the foundation Component
the Paragraph System, w hich allows au t hors to dynamically manage a Page 's
content. To successfull y complete and understand these in structions, you will
need :
• A running CQS Author in stance

• A com pleted "Pag e" Component (e.g. T rain ing Contentpage) with appropriate
includes
What is the foundation Paragraph System Component?

The use of t he CQ parag raph system Co m ponent is a neces si ty when wanting to
have manageabl e and scala bl e Page content, without re quiring excessive
coding / Tem plate creation . This foundation Component can be located at the
path below:
• / Iibs / foundation/ compon ent s/ parsys
It allows content authors the ability to dynamically add, delete, move , copy, and
paste "parag raphs" on a Page, not to mention the ability to use t he column
contro l Component to structure your conte nt in columns. In addit ion , you can
decide what "content" Com ponents are allowed to be used by specific instances
of the parsys. It is Day's STRONG o pinion t hat th e parsys should be used as
often as possible , t hus allowing f or mere sim ple Component configuration as
op posed to creating a larg e number of Templates that developers then have to
maintain.
Copyright 20 10 , Day Software AG , Switzerland Rev 1.5 20100907 WWwday.com

•
1 . Open t he fi le ee"ter.jsp in th e Training Contentpage Component and replace
the "par" < div > section with a < cq:incl ude> of the foundation paragraph
system Component, similar to below - then Save.
ccntcr.jsp
<%@include file: "/libs/foundation /q loba l .jsp M% >
<div class="center ">
<cq:include path:"trail" resourceType"'''foundation / components !
breadcrumb" />
<cq:include path-"t i tle" resQurceType"'''trai ning /components/contentl
title " />
<cq : include path- "par" resourceType .. "foundation/components/parsys" />
<idiv>
NOTE
As a lways, it is a good idea to review w hat you have just included . Take note of the fact this
Component only contains a Design Dialog (Le. design_dialog), thus can on ly be modified in
Design mode.
2. Test your script by req uesting a Page in CQ5 Siteadmi n that implements this
fou ndation paragraph system Com ponent.
• If succe ssful . you should see the parag raph system enabled, sim ilar to the
image bel ow
#
+"'
/
•
This is a custom TITLE to ... ii,
.,,-
1
/\
Page preview of paragraph system

Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWwdav.com

•
NOTE
Yo u may have noticed earlier, afte r ass ig ni ng a new Design to yo ur Web site. that no
Components exist (are availa ble) in your Sidekick. This is because yo u have yet to declare, in
Des ig n mode, w hat Components are allowed to be used by a paragrapgh system . Only th en will
Components be mad e availab le in the Sidekick.
3. Se lect Pesig ~ ,"ode on yo ur Sidekick - then select "edif' for the paragraph
system Component to invo ke the Design Dialog .
4. Select t he Compone nts you wou ld like to allow for th is in stance of the
pa rag raph syst em - then select Oil..
•
P ar5ys (Desig n )
Arcros
Aklwed C ~ts
c"'"
[/ocumeotatlon Text
()ocumentatlOfllltle
, .,J _
~ ExterMi
<-I ""'"
, I lmaQf'
1 ' "'
~ Product lISt
.!- I Reference
l 5temap
I SlIde-mow
I hbl~
I Text
Text lrnoge
J Tide
'----'HoI.::!p'--JL_---',_..::OI~.b1 LI--=<an<=:c
d_
Design dia log of the paragraph system
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www·day.com

•
5. Select £dit lllode - then review the Page output of the paragraph system
Component.
• If successful , you should see the paragraph system and popu lated Sidek ick,
simi lar to th e bel ow.
.
• _ _ WI ".
,
" " • (',
'-,
This is • custom nnE
.-. -.... I
~
""""
,-"
1_-
,-
..._-.,...--.......- ....-
4'
1<10 \
~-- ., ~./
Page preview of paragraph system
NOTE
Notice how Components now appea r in the Sidekick. These Components are now availab le to
use in the paragraph system you recently added to the Template.
6 . Add content (i .e. paragraphs) to the Pag e by click-and-dragging d es ired

Com po nent(s) into the paragraph system - then write content using the
avai lable Dialog.
This is a custom nnE 1. "-' • -~

-, (
- (~ {
!~-- )
. h i .. enc~
le><l
~
,
~
Tr<l'- r
....1 1& /
__, r.!
Page preview of click and drag to paragraph system
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 wwW:daY-cow

• leMt
- ;:
This 6 fu1 . . I su e hooe It wor ~s II !
Dialog of text component
rq • co
This is a custom 11TLE

Thos .. h... . _. 'RU ~ ~ ...... s '"
oJ _
,..
~ Pef,...ence ~i
I lt ·tI~
" .
r
?
". _.r ..........___ ...J" ..• "'~- .... -. ,, _.r."·--·-·" . . r" - / . ., _ - / ... ···'-1
Page preview of written content using the text component
Co~gratulatlo~s! You have succes sf u lly included t he paragra ph system foundation

Component . Day canno t stress enou gh th e importan ce of thi s Compone nt and
how it can g reat ly affect your productivity if used wisely. Please be sure
evaluate its use and optimization for every Template that is developed !
deployed.
Copyright 2010, Day SottwareAG , Switzerland Rev 1.5 20100907 www c/ay,Com
•
EXERCISE - Content Finder Drag-and-Drop
Goal
In this exercise we create simple Image component as an exam ple of a
com po nent that al lows drag-and-dro p of assets from the Content Finder onto
t he paragraph thumbn ail placeho lder. As a resul t of this exercise , you will feel
more confident buil ding a more co mp lex compone nt t hat rend ers bin ary data
and allows d rag-and-drop.
T o successfull y compl ete and unders t and these instruction s, you will need :
• A running CQS Autho r instan ce

• A compl eted "Page" Component (e.g. Training Contentpage) with appropriate
incl udes
Creating a Simple Image Component
1. Right-click / apps/ < application name > / component / content - then select
New, Component.
2. Ente r the desired Compo nent '· Labe l", "Title", "Description" - then cl ick Fini sh.
• Label = mylmage
• Titl e = Training Image Component
• Description = Simple Im age Co mponent
• Group == Trai ning
• Supe r Resource Type = foundation / compone nt s/ parbase
• Allowed Parents = • !*parsys
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 wwwday.com

•
Lc bt ) ~ ,i"'.l¥t
T ,,~ T, ~ ~ ~~ "'4oQ ~ C..... :-.:-, ..... :
3. Ent er the following code into IIIyhllage.jsp:
myIm ~l ge.jsp
<'i@ p a ge impor t;"com . day.cq. wcm.foundation.lma ge" %>
<% @include file = "/libs / found at i on / global . jsp"%>
<,
Ima g e image'" new Ima g e( resource);
ima g e. setse!ector(".img "); /1 use i mage script
imag e . draw(out);
%><br >
Creating a Dialog Box for our Image component

We need a d ialog bo x , so let's copy t he dialog from the foundat ion 'Illage
co mpone nt.
1. Rig ht - click the dialog bo x f rom the f oundation Image component and select
copy.
2 . Paste the dialog bo x in you r image component.
Copyrig ht 20 10, Day Software AG , Switzerland Rev 1.5 20100907 www.dav.com

• 1:O apps
L.£:' geo-netrixx
I -e I
~ L tfa n'"9
... L compon ents
... L content
New
lest
.. '-t.. undo
Copy :Jt: C
L.@ e{( n ....... Paste XV
Lt:I li bs (" 1 .. X Delete
Move ...
Rename ... F2
Import ...
ExoorL .
3 . Se lect Pesig~ mode by clicking on the ruler icon at the botto m of t he Sidekick.
4 . Click Ed it bu tton on Pesig~ofpared it bar.
5. Select Trai ni ng Group
6. Retu rn to Editll10de by expand ing the Sidekick.
fest your IlI1age eOll1po~e~t.
7. Drag t he Training Image com ponent onto a page.
8 . Try to drag an image onto t he thumbnail. You w ill note th at t he drag-and-

drop does not work. Th is is because we have not ye t defi ned th e editConfig
nodes and properties that will support t his f uncti onalit y.
9. Drag-and-dro p into the dialog bo x does work. This is because of the

in here nt fu nctional ity of the smartimage widget. Dou ble -clic k t he thumbnail to
open the d ial og bo x .
World Standard Software to Unify Your Bus;ness 118
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www daY·CQm
•
10. Drag an image onto the dialog box.
11. Clic k OK.
Defining editConfig
Now that we have our basic component wor king, let's add an editConfig to
allow drag-and-drop from the Content Fi nder.
1. Ri g ht-click on your Image component. Select New ... Node.
• Name : cq: ed itConfi g

• Type: cq:EditConfig
PI "
Cr4>.:ut nC'''w nOM
2. Right - click the new cq:editConfig node and select New ... Node.
• Name : cq:dropTargets
• Type: nt:unstructured
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav.com

•
3. Right-click the new cq:dropTargets node and select New ... Node
• Name: imag e
• Type: cq :dropTarget Config
And then enter the g roups, accept, and propertyName properties as shown in
the diagram below:
"'- ~ - ...• , ..
• '- mylm.;J.; e
Y L _cq _e<l tContig
... k. _cQ..drop-argca , ,
-"ln1agt (cq:DropTargetConftg)
...... dlol ll)"g 0
L mylm.lgt.' JSP
' - testCOrT'pontrlt ••H,) rt
,. cc urdo
cv et(
L(j libs
Properties ~ ' - P'roblems 9 (omall'
~,}me Value
Properties groups
Info Jcr pflm01 ry"-ypc cq .DropT .l fg etCon"ig
.lccept Im age ! . •
Definition propertv'aM(' ./fil eRefere "c('
4 . Test t he new f unct ionality by dragging a new Training Image component

onto the page and the n dragging an image f rom the Content Finder onto th e
new parag rap h.
Cot1gratu lat io"s! You have successful ly created a Sim ple Image com ponent that
allows d rag -and - d ro p f rom th e Content Fi nd er. As an exercise, examine a few
of the other components in /libs / found ation / components t hat support d rag -
and-drop f rom the Con tent Finder. For exam p le, the Download. Slideshow, and
List components.
Copyright 2010, Day Sofrware AG, Switzerland Rev 1.5 20100907 www.ciay'cQm
•
EXERCISE - Create a Complex Component
Goal
The following instructions explain how to create a "complex" Component that
manages bot h textual and binary (i.e . image) content, and has both a Dialog
and Design Dialog. This includes allowing t he Component to be used by t he
parsys Component, creating a Dialog wit h mul ti pl e tab s, enab ling the
function ality offered by the Content Finder (i.e. drag-and -dro p), and other
configurations. To success fu lly complete and understand these instructions ,
you will need:

• A ru nning CRXD E instance
• A compl eted "Page " Component (e.g. Trainin g Content page) with ap propriate
includes (parsys)
When willI need to create a "complex " Component?

Since t he creation of "com plex" Components is a common occurence in CQ. it
would benefit you to observe a mock requirements analys is. This exerc ise
provid es just that. Fi rst, you will observe the needs of a user. Secondly, you will
observe how a Day Sol ution Engi neer may t rans late t hose needs.
USER'S NEEDS: A Component that can be dropped into a paragraph system and
di splays an image , rich text, and the path of a Page in the system .
The image:
1. Mus t be editable by a content author.

2. Can be dragged - and - d ropped from the Content Finder
The ric h te xt :
1. Must be editabl e by a content author

2. Must allow for ta ble s to be created.
3. Must have a default value of "Thi s is some te xt."
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwwday.com

•
The path of a Page:
1. Must b e t he same f or every instance of this Component, yet editable by a

"super" author.
2. Must live und er the We b site structure ", content /trainingS ite".
SOLUTION ENGINEER'S TRANSLATION : A paragraph system Component that

al lows fo r the writing and d isplaying of t hree properties (2 paragraph
properties , 1 design / style property), and has both a Dialog and Design Dial og.
The image:
1. Is a Dialog Widget , most likely an xtype of smartimage.

2. Must be config ured in the Component' s cq :editConfig to all ow f or dragging-
and-dropping o f images from the Content Finder.
The rich text :
1. Is a Dial o g Widget, most likely an xtype of richtext.

2. Widget should enable all t he feat ures of t he rich te xt editing plug in table.
3. Wi d get shoul d popul ate pro perty defaultValue with 'Thi s is some te xt."
Th e path of a Page :
1. Is a Desig n Dialog Widget, most likely an xtype of pathcompletion .

2. Widget shou ld have property regex with a regular expre ssi o n validating the
user's in put (e.g . "/ A\/ content \/ training \ / (.)' $/").
3. Widget should have property regexText with an error me ssage if regul ar
expressi on f ail s.
Though the order of sequence can differ, a Day Solution Engineer would most
li k ely:
1. Create a Component, making sure to al low that any paragraph system

Component can be this Com ponent's "parent."
2. Ed it th e d efau lt J5P so it d ispl ays th e content / properti es in an appropriate
manner, even without any written content.
3. Create a Dial og for t he Component.
4. Create a Design Dial og for the Component.
5. Add thi s Comp onent to t he list of allowed Components for a paragraph system
Component .
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www;davcom
•6. Test this Component by adding it to a Page to observe its output without any
written content.
7. Add a rich te xt Widget to the Dialog .
8. Add an image Wid get to t he Di alog.
9. Add a path co mpletion Widg et to the Desi gn Dia log .
10. Perform nece ssary Component con figuration s.
11. Test this Component by writing content using the newly created Dialog and
Design Dial og.
1. Create a new com plex "content" Com ponent.
Cr eate new component

Entel' Information for the component
label: comolex
Title: Tralrung Complex Component
Oe<"..cnptlOl'l :
".
Super ResoLl"Ce Type : folt'ldatlon/component:>/parbo$E'
Group :
Mext Cancel
CRXDE new complex component dia log - I
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www·daltcom

•
NOTE
Not ice how the pointer on the image above is se lecting Next. This is ne cessary so that you ca n
decla re this Component has an allowed parent with the next dia log .
Container Settings
Enter- cont~ :iCttI'lQS fa the (OI'1Jxlnc"nl
Allowed Pllrents: • J'· p.!Irsy~
AIowed Chikten:
Is Cont<tlfler rr
CRXDE new complex. component dialog - 2
2. Ope n t he file co",plex.jsp, and enter some HTML and J5P code, simi lar to below
- then Save.
complcx.jsp
<%@include file=" / libs /foundation /g lobal.jsp" '>
<%@ page import:"com.day.cq.wcm.foundation.lmage" %>
<%
II getting the image from the Dialog/resQuce
1/ notice the use of the second parameter "image" - - this signifies that the
/1 image will live on a resource (called image) below the requested resource
Image image = new Image(resource, "image") ;
/ I setting the selector so that the "parbase" can work. its magic
image. setSelector ( " . img n ) ;
II getting the rich text from the Dialog
String text = properties .get( "text ... "TEXT NAn);
II getting the path from the Design Dialog
String path = currentStyle.get( "path", "PATH NA");
World Standard Software to Unify Your Suslness 124
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www: day.com
•
•>
<h2><%: path %></ h2 >
<%= text %>< br />
<.
image.draw(out);
.>
NOT E
For this exercise, do not concern yo urse lf g reatly with how t he content is d isplayed, as th is ca n
eas il y be altered via cod e cha nges and l or CSS.
3. Create a Dialog and Des ign Dialog fo r the complex Component.
• Yo u wi ll worry about Widgets and configurat ion s later - t he focu s now is to see
your new Component in action .
4 . Add your complex Compo nen t to t he paragraph syste m Component in

Design mode .
Edit Comp.;,or)!:!""'·
ParSys (DesIgn)
~--- .- ~.- "

.... Tr air.ng Complex Cor.-oponent
Design dia log of the paragraph system
Copyrig ht 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav:com

•
NOTE
Notice how your complex Component is listed under the Training group . This is because you
declared such during the creation of your Component .
5. Test your script by add ing an instance of t his Component (i.e. paragraph) to
the paragraph system Component of a Training Page.
• If successful, you should see the default complex Com po nent, output, similar to
t he image below.
..,.,.,..".. (
This is a custom TITLE • CQS ..

;•
::. • ') ~
Thrs IS hxl ... I sue I'lope It WCII~~ III
PATH NA
·:>eneoal
ii _on)
/
TEXT WI .:, 1f 4lfW¥,lC~:( CompQ(lent r
\
,j
'-. '~.~ ,.--..#-, --."~ '~-,,. .....,...-... ..-.. . . .. . . ..... r"'" -'.1"',1-' "_ .. ,..~.r..' ..
Page preview of complex component - no conten t
6 . Create an ite..s node (nodeType cq:WidgetColiection) under t he tab 1 node of

your Com po nent's Dialog.
7. Create a t ext node (nodeType cq :Widget) under the newly created items node.
8. Assign the f ollowing properties to the newly created text node :
• the property that wi ll define where content is stored

• Name = name
• Type = String
• Value = .! text
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.ctaY-com

•• the property that will define the Widget type
• Name = xtype
• Ty pe = St ring
• Va lu e = richtext
• the property that will define t o hide the label of the Widget
• Name = h ide Label
• Type = Boolean
• Va lu e = Hu e
• the property t hat wi ll define th e th e default va lue of th e Widget
• Name = defau ltValue
• Type ~ String
• Va lue = Thi s is some t ext.
g. Create an rtePlug i.s nod e (no deType nt:unstructured) under the newly create d
text node.
10. Create a table nod e (node Type nt:unstructured) under the newly created
rtePlugins nod e.
11. As sig n the features property (Type = String, Val ue = *) to the newly created
table nod e.
.-
"'>0
te ~t feat ... es
te! ,prIffKl! y t ~pe
"""""
':i:::=::.=J ...-/'
CRXDE retPlugin table plugin structure and property
12. Co py the nodes tab2 and tab3 under the node / libs/ foundation/
components/textimage/ dialog/ items - t hen paste to the co mplex Component's
Dialog so that they are a pee r of tab I (e.g. / apps / train ing / components /
content / co mplex / dialo g / items / item s).
• tab2 = the smart im age tab

• ta b3 = advanced image properties
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.dav.cQm

•
NOTE
Once again , it is often more efficient to copy-and - paste existing Dialogs / Widgets that meet
your need s. That being said , it is wise to review what you have just copied to better understand
the interna l workings of CQ.
If you ex amine closely enough . you will see the Widget is actually storing image related content
at a leve l deeper than current resou rce (e .g .. / image / file, ./ image / fil eRefere nce, etc.). This ties
nice ly w ith your previ ously written code (Im age image = new Image(resource, ~i mage ") ;) .
1 3. Now we b uild o ut t he DeSign Dialog . Create an ite",s nod e (nod eTyp e

cq:Widg etCo liection) under the tab1 node of your Component's Desi gn D ialog.
14. Create a pat h node (nodeType cq:Widget) under the newly created items
node.
15 . Assign the f ollow ing properties to the newl y created path node :
• th e pro perty th at will defin e where conten t is stored

• Name = name
• Ty pe = St ring
• Value = ./ pat h
• t he property th at will def ine the Widget type
• Nam e = xtype
• Type = Strin g
• Valu e = pathcom pl etion
• th e property t hat will d efi ne th e label appli ed to the Wi dget
• Name = field Label
• Type = St ring
• Value = Pat h of a pag e
• the p ro perty th at will define th e root pat h to di sp lay
• Name = root Path
• Ty pe = String
• Value = / content / tra iningSite
• the p ro perty that will define the regular ex p res sion u sed t o evaluate user in p ut
• Name = reg ex
• Type = Stri ng
• Va lue = / ' licontent \/ trainingSitel/ (.)' $/
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.day.com

• • the property that will defi ne the error message if a user's input fails the regular
expressio n
• Name = regexTex t
• Type ~ String
• Va lue = Pleas e insert a Page t hat "lives" un der / content / trainingSite
16. Copy the nod e /li bs / fou ndation / components/ textimage / cq :editConfig -
then paste to the root node of your complex Component (e.g. / apps / training /
com ponents / content / com plex).
• enab les d rag-and - d rop capabi litie s from the Content Finder
In order to be able to drag-and-d rop assets from the Content Finder to a

Component on a Page , t here must be a drop targets config uration node called
cq :dropTargets (o f type nt :unstruc tured) below the edit configuration node
(cq: ed itConfig) of a Component.
17. Using CRXDE , navigate to
<path·ro-component>/ cq:editConfig/cq:dropTargets/image
Vali date that th e image nod e has the following properties :
• accept (Type = String) - the med ia type s to be accepted (e.g. image f."' , etc.)
• groups (Type = String) - t he groups in the Content Finder assets can be
ac ce pt ed from (e. g. med ia)
• propertyName (Type = String) - the property the refere nce shou ld be stored
(e .g . ./image / fi leRefe rence)
1 8. In the case w here the image is stored in a separate node (as is here) other
than the Component's primary resource , additional nodes and pro perties must
exist for d rag -and-dro p functio nality to wor k pro perly. In CRXDE navig ate to
<path·to·component>/cq:editConfig/cq:dropTargets/image/parameters
Copyright 2010. Day Software AG , Switzerland Rev 1.5 20100907 wwwda ycom
•
Set the sli"g:resourceType property so that your complex component is t he path to
find the rend ering script. For exampl e:
• Prope rty: sling :resourceType (Type = String) - training/ components/content/

comple x
19. In CRXDE navigate to

<path-to-component>/cq:editConfig/cq:dropTargets/image/parameters/
image
Set th e sli"g:resourceType prope rty so that the image component of your choice is
the path to find t he rend ering script. For example :
• Pro perty: sling :resourceType (Type = String) - training/ components/content/

m y/mage
20. Test your script / Dialog by requesting a Page in CQS Siteadmin that
implements this Training complex Component - then interact with the Dialog
and Design Dialog.
• If successful . you should see Page output, a Dialog and Des ign Dialog similar to
the images below.
Copyright 201 0, Day Software AG, Switzerland Rev 1.5 20100907 www.dav:com
• Tab 1
B I U .- ,-,-
"_ c..-
.=-
- I~
- ~
Irhis is some text ,
--->1
'---_H_el'p- , - I_ _ -----'I LI _O~K,---~; I Ca"cel
Dialog of complex component - I
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 WWWdaYCQm

• Image ..
Ref_ f""", •
Rotate
----=:01_->1 1 ("""el
Dialog of complex component - 2
Advanced Image Properties
Style- v
Descnpoon
Uri to
200 ox x
Title
L-~He~"_' IL ___I ----.CO+~_,

LI I (once!
Dialog of complex component - 3
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.daf.com
• x
Path of a page jcontent/tf aorlllQ/enjCOIT()any
( "'.
Design dia log of complex component - 3
This is a custom TITLE

TI-.sisft... . 1 9.,II'tho:oe'ilworl$'"
I content/training! en! company

This ~ some text.
Tr~ 4
.t. Trarn;! CompW~ C~/
•I
)
;
,
(
I,
•
• I
•
Page preview of complex component - with content
Copyright 2010, Day Software AG , SWitzerland Rev 1.5 20100907 www·da v. com
•
COKgratulation, ! You have successfully created a complex Component that
contains a Dialog , Design Dialog , defau lt values, custom configuration, and
val idation of user input, in add ition to enab ling d rag-and-dro p fu nctionality
from the Content Finder. Give yoursel f a pat on the back - t his was quite a
ch all enge.
That being said , it would be nefit you to be aware of additional cq:editConfig

possibil ities / variati ons. For examp le:
• cq :inpl aceEditing - this is where you allow content authors to have in- context-
ed it ing for textual content
• review j libs / foundation / components / text
• cq:listeners - this is where you can define actions (e .g. REFRESH_PAGE,
REFRESH_SELF, custom JS function, etc.) based on Component events (e.g.
afterinsert, afteredit. aftercopy, etc.)
• rev iew j libs / foundation j components / slideshow
•
EXERCISE - Include Multiple Foundation Components
Goal
Th e following instructions explain how to include multiple foundation
Components. This exercise is used to apply finishing touche s to t he look and
feel of the Training "Page" Component. To successfully complete and
und erstand t hese instructions, you will need:

• A runn ing CRXDE instance
• A completed "Page " Component (e .g. T raining Contentpage) with appropriate
includes
Finishing the layout:
1. Open the file body.jsp in the Training Contentpage Component and replace
t he "tool bar" < d iv> section with a < cq :include > of the foundation tool bar
Component - then Save.
• pat h = ';toolbar"
• resourceType = Hfoundation / components / toolbar"
2. In the Websites tab (S ite Admin Console), se lect the English page under
Training Site. Create the Tool bar page under English. Using the Page
Properties .. . in Sidekick set Hide in Navigation (in Sidekick) to prevent the
Toolbar page and all of its children from appearing in the Navigation
component .
3. Under Toolbar, create the following pages :

• Contact s
• Feedback
• Login
• Search
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20 100907 WWW da llCOm
• When you load any of the pages in your website, the too lbar will look as
follows :
• Contacts. ~. bQgJn. ~
The Foundation Timing component will record data on component script

execution time. We will use the results of this component in the Performance
Optimization section of the course.
1. Insert a <cq :includ e> of the f oundation timing Com po nent directly above
the < I body> element in the fil e body.jsp - t hen Save.
• pat h = "timin g"

• resourceType = "foundation / co mpon ents / timing"
The inherited paragraph system (ipars ys) is a parag raph system that also
allows you to in herit t he created parag rap hs f ro m t he parent page. You add
parag rap hs to iparsys at for example, / content/ trainingSite/ en .htm l and as
resul t , all t he su bpages of English that also have an iparsys with the same
name in herit the created paragraphs from t he English parent. On eac h level, you
can add more paragraphs, which are then in herited by t he children pages . You
can also cance l paragraph inheritance at a level at any time .
1. Open the f ile rig ht .jsp in t he Training Contentpage Component and re place
the "rig ht par" < div> section with a < cq :includ e> of the f oundation inherited
paragraph system (i.e. iparsys) Com ponent - then Save.
• path ~ "right par"

• resourceType = "foundation / components / iparsys"
Copyright 2010 , Day Software AG, Switzerland Rev 1.5 20100907 www.dav.com
•
2. Test your script by requesting a Page in CQS Siteadmin that implements
these multiple foun dation Components.
• If successful , you should see a Page view similar to the image be low .
.•_ gecl"netnxx
..... __ b~
This is a custom nTLE ... -

-..• / content/ tr<llineng / en / complny
• --
•
-
.--
- '"
Page preview of completed page component
Co~ gratul ati o ~s!

You have success ful ly included multiple foundation Components.
Again, t his exercise is used to apply finishing touches to the look and feel of
the Traini ng "Page" Component.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www day.com
•
EXERCISE - Create a Search Component
Goal
The fo llowing instructions explain how to create a Component that will allow
visitors t o search t he content of t he Web site / repository. Th is search
Com po nent can be placed in the parsys of any Page, and has th e abi lit y to
search the content of th e We b site bas ed on a query string provided in the
request. To successfully complete and understand these instructions, you will
need:

• A completed "Page" Component (e.g. T raining Content page) w ith appropriate
includes (p arsys)
How can I sea rch Web site content'!

Searching f o r content in CQ is very simi lar to "trad itional" searches you have
created in the past.
1. An HTML form is needed to coll ect the user's input (search string).
2. Once the form has been submitted, you need to ca pture th e search string.
3. You need to prepare a que ry statement based on t he search string.
4. A q uery object needs to be created that will connect to the content repository,
and implement t he que ry stat ement.
5. You need to collect and parse the query results, if any.
6. Output related to the query results shoul d be displayed appropriately.
When q uerying a Java Content Repository UCR), some basic functiona lity (API
ca ll s) need t o b e implemented :
• javax .jcr.Session - JCR sess ion, can be reach ed for exa m p le by Node.getSessionO
• j avax.j cr.Workspace - JCR workspace , can be reac hed f or examp le by
Session.getWorkspaceO
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www:day.com

• • javax.jcr.query.QueryManager - QueryManager is used to create a Query object
and can be reached via Wo rkspace.getQueryManagerO
• createQuery(String statement, Stri ng language) - creates the Query object
for t he provided statement in t he provid ed language (e.g. SQL)
• javax.jcr.Query
• exec uteO - executes th is Query and returns a QueryResult object
• javax .jcr.query .QueryResult
• g etRowsO - returns an iterator ove r the Rows of the query res ult table
For more detailed info rm ation , please review the Javadoc of the JCR and CRX
provided on the USB.
How fo creafe a search COIIIPO","f:
1. Create a new search "content" Component.
Create new component

(rler Inforn"OltIO'1 tor the compo'1ent
DescriptIon my se.1rcn component

Super Resource TylX tOI.; r\ d.1t o n!COrflpontnts/ surcn
Group Tr.1,1,ng
"ext >
CRDXE new search component dialog - I
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.da~Com

•Conta iner Settings
Enter container settnQs fOf the component
Allowed Parents! • rparsysl

Alrn..d Ctti en,
Is Contalrtel': 0
<~d
CRDXE new search component dialog - 2
2. Open th e fi le search.jsp, and enter some HTML and JSP code, similar to below
- then Save.
<%@include file"''' / libs/ f oundation / global. j sp'' %>

<% @ page import:" j avax.jcr.query.QueryResult,
javax.jcr.query.Query ,
j avax . jer. Node,
j avax.jcr . Nodelterator,
org.apache.conunons.lang.StringEscapeUtils " %>
<%
String queryString E (slingRequesLgetParameter( "q") ! = null) ?
StringEscapeUtils. escapeXml (slingRequest. getPararneter ( "q " ) ) "" ;
.>
<center>
<form action= "<% '" currentpage . getPath ( ) %> . html" >
<input name= "q" value="< %= queryString %>" />
<input value="Search " type"' '' submit'' / >
</ form>
</c enter>
<br />
Copyright 2010 , Day Software AG , Switzerland Rev 1.5 20100907 WWw;day.com

•
<.
i f (s!ingRequest . getparameter( Mq ") !'" null) {
String stmt = "select * from cq:Page where contains(*, '" +
slingRequest.getparameter("q") + " ' ) order by jcr!score desc"i
Query query = currentNode.getSession().getWorkspace() . getOueryManager
(J.createQuery(stmt, Query.5QL)i
QueryResult results = query.execute();
if (results.getNodes()
!= null && results.getNodes().hasNext(» {
Nodelterator it = results . getNodes();
while (it.hasNext(» {
Node node = it.nextNode()i
String npath = node.getPath()i
Page contentPage = pageManager.getContainingPage
(reSQurceResolver.getResQurce(npath»;
String title = contentpage.getTitle()i
String path = contentpage.getPath() + ... html" ;
.>
<div class=~searchresult"><a href="<%= path %> ">< %= title
%></ a>< / div>
<.
else {
.>
<div class:"searchresult">No results found '" Please try
again , .. </div>
<.
)
.>
4 . Add your search Component to the paragraph system Component in Vesig"
IIIode.
• Notice how the Component will be fou nd in the 'Tra ining" group - this was
defined during t he creation of the Component
5. Test your script by adding an instance of this Compone nt (Le. paragraph) to

the paragra ph system Component of a Training Page.
• If succes sful , you shou ld see the default complex Component output, similar to
the image below.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.dav.Com

•
.
i,
"
,
(
Customers f
Hello World !!! General
SeB.,ch
...:J Reference•;
,
~ Text / '
-',
-. . .. " ..,
' . ..... . , ....... . , ' . < .........
. ~
/14",
.'
Page preview of search component
6. Search for a word you know exists on a separate Page in your Training We b
site st ructure .
• If successf ul. you shou ld see search results output, similar to the image bel ow
• You may need to perform this search in Page preview mode, to ensure a "cl ean"
request
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WWW.day.c om
•
Customers
Hello World! !!
• "
\"'/orks I Sear ch I
.
,.............. _.
Page preview of search results
Co~gratulatio~s! You have successfully created a search Component that q ueries

the content in your T rai ning We b site structure. You can furth er enhance this
Component by add ing Wid gets to the Dialog to output default messages,
written by a content author, if the search was successful, or unsuccessful.
Copyright 2010, Day Software AG , Switzerland Rev'.5 20100907 www.day.com

•
EXERCISE - Apply i18n to a Component
Goal
T he fol lowing instructions explain how to ap ply CO's internationalization (i18n)
capabil ities in a Dialog. This wi ll allow you to provi de d ynamic Dial og
"messages" based on the authors' language preference. To successfully
com ple te and und erstand th ese instructions, you will need:
• A runni ng CQ5 Author instance

• A completed t itle Component
What is i18n and when should I use it?

As stated earlie r, i18n all ows you to provide dynamic messaging based on the
authors' language preference. Inte rnat ionali zat ion is stored in t he repository
under nodes (nodeType sling:Folder) named i18n . T he chi ld ren nodes
(nod eType sling :Folde r + mixin mix :lang auge) of the i18n nod e re present
languages and are named af ter th e ISO cod e of the la nguages t hat sh o uld be
supported (e.g. en , de, fr, etc.). Below th ese language nod es are the message
nodes (nodeType sling:MessageEntry), which will contain a simple key- message
pair.
T he location of the i18n nod e w ithin t he reposito ry decides its scope . If located
in aproject directory (e.g . l apps / training), it shou ld contain only messages
re lated to th e current project. However, if located i n a Component hierarchy, it
sh ould contain on ly Component specific translations . Glo bally used messages
shoul d be place in / apps / i18n.
How to apply ilS" to t he tit le COll1pOKeKt:
1. Create an il S" node (nodeType sling:Folder) under the root node of the title
Component.
• e.g. j apps / training /components /content / title

•
2. Create an e" nod e (nodeType sling :Folder) under the newly created i18n
node.
3. Open a Content Ex plorer w indow and as sign the IMixi". mix: language to t he
new ly created en node
-, . ...J ' .. . •
. t. .
.· v.,"~
. ,) ....
- ,,; .,,,.
.,
.~
~-
~~
... -
-
".
' 0'
-
..,
~_!~{I""Ql:J... ' ~~ ""<1:0.00
· ..J _,'"
· ..J .--..oo;
..; ...
!<I .Io.....
' 0'
.....~-..,
M
· .J ~
'J ~
. ~-
· ,J ...--
·v _
• ,.J -
· ..Jtt~
· .t,Ne.;
· ..J:..
'<'
--
.~
-
• .J •
. .J.
. .;· .,-
· .J .~"''''''''
.".....
• ..J a:rI~
.. ~
:..-
~_!.oe
,"'. .,
,. ..
· ,; _ .... ,,- !.",
· ,j .- :..~........o.. "...
- ..J ....w
· J ... ... ........X1f ..... J .....-
.
•
., ~
1.,..".-...... .. ... ~-.t_ . ..... ~
choose mixin
r:, '" " Content Explorer

~I .... hnp~lll o(alho5t. 4S04 /(rX / L V '" l!i'
CQ:'!I.:!I f!fMo::!sSo!~
''lice :)r(:lJ e
t!l m-x:crea~
m,,:e2g
~ m )( .'.!'w;~~
m l<, '!.!stMOO-f.ec
m d fccvoe
: ' } m ~ .foco(,,!:lle
m.;c:rn :nety::le
•
:: ~ m ..-refe-er'lCei!:l e •
Copyrigh12010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.dav:com

•
4. Return to CRXDE. Refresh the en node.
5. Set the foll owi ng property on t he newl y created en node :
• the property that identi f ies the language using the ISO langu age code
• Name = j cr: language
• Type = Strin g
• Va lue = en
-·
-..(! • ..."
.-..-
· -'"
<~ ••
• to· .
"
,.~" .....
, "
""-' ... - .. __ c~_
,.,
A . . . ' · .......
•.- ... _.... --...
.,. .. -
....
,..
"I .. '
'..
.....
',.
',.
,. ',
6. Create a fieldLabel node (nodeType sling :Message En try) under the newly
created en nod e.
7 . . Ass ign the following properties to the newly created fieldLabel node:
• the pro perty that ide nti fies th e message key

• Name = sling :key
• Type = Str in g
• Va lue = i1 8n- title

•• the property that identifies the message
• Name = sling :message
• Type = String
• Value = Enter Title Here U18n style)
8. Change the fieldLabel property (Value = i18n-tit le) on the title Component's
Dialog title node.
• i.e. <path-to-component>/dialog/items/items/tab l/items/title
9. Repeat steps 2-8 for an additional language. (e.g. Spanish or French)
• ISO code for Spani sh = es

• slin g: key value = i J Sn-title
• sling:message value = Titulo
10. Test your script/Dialog by requesting a Page in CQ5 Siteadmin that

implements this Training title Component - t hen invoke the Dialog to observe
the changes.
• If succes sful, yo u should see Dialog output similar to the image below.
,... ,
r:[!:I~'~3~.f~'~"~!1~u~"i~I~II~i:========
-Enta
shiel Title Hell'! (1
- 1Bn ~
HoI> IIL._ c.. J: C¥l':0!1 I
Dialog view of title component - i 18n message
Copyright 201 D, Day Software AG, Switzerland Rev 1.5 20100907 www.day'CQro
•
Co"gratulatio"s! You have successful ly applied an i18n message to the title
Com pon en t' s Di alog . Since th e content author's def ault / current language
preference is Eng lish , t he en message you defined earlie r sho uld appear. If you
were to add an additional i18n message , for exampl e in French , and then
changed th e content author's lang uage p refe re nce to fr, t he French message
you define f or t he i18n- title key should appear. It might be of best interest to
you to try th is now.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www·dav-cQm
•
EXERCISE - Create & Register a Widget
Goal
The following instructions explain how to create and register a CQ Widget. This
wil l allow you to apply custom Wi dgets to your Dialogs and Design Di alogs . To
successfully co mplete and understand these in structions , you will need:

• A runn in g CRXDE instance
• A comp leted t it le Component
Why do I need custom Widgets?

Actually, you may never need to create a custom Wid get. The CQ and ExtJS
Wi dgets provided to you DOTS cover a large array of potential user input use-
cases and are high ly con figurable. It is Day's strong recommen dation you
t horoughly study avail able Wi dgets and potential configurations via the CQ-
WIDGETS-API (i.e . < us b> / distribution / APls /cq -widgets-api).
T he primary objectives for this exercise are :
• Create a J5 library
• Extend an exist ing xtype /Widget
• Register the new xtype / Widget
• Use t he xtype / Wi dget in a Dialog
How to create a JS library for "ew xt ypeslWldgeb:
1. Create a trai"i"g-widgets.js node (nodeType cq:CfientLibraryFolder) under the

root node of the project .
• e.g. l apps / training
2. Assign the fo llowing properties to the newly created training-widgets.js

node:
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·clallcpm

•• the property that identifies the category these custom Widgets will be
referenced by
• Name = categories
• Type = Stri nglJ
• Value = training .widgets
• the property that defi nes J5 library dependencies
• Name = dependencies
• Type = StrlngO
• Val ue = / Iib. / widget. / cq - widget • .j .
• the property that defines library type
• Name = type
• Typ e = String
• Val ue = js
• the property that defines the component this resource is based on
• Name = sling :resourceType
• Type = String
• Value = widgets / client lib
3. Create a files node (nodeType sling:Folder) under the newly created training-
widgets.js nod e.
Co"gratulatio"s! You have successfully created a JS library for custom xtypes /

Wid gets. When you w is h to add custom Widgets, all you need to do is dro p it in
the newly created fi les fo lder.
Before you can use any custom xtypes / Wid gets , you must first regist er t he
li brary in which they exist, which occurs during the WCM in itialization process
(i.e. init.jspl. T o register your JS library you will need to mod ify the /li bs / wcm /
core / component s / init/ init.jsp. Si nce mod ifying anything under / Iibs is strongl y
not recommended, you will need to create a copy of the original init.jsp f or your
custom project / mod ification. In ad dition, si nce yo u wil l be usi ng a custom
init.jsp, you will need t o mod ify t he head.jsp that references the init.jsp. The
head.jsp is associated with the "page" Component you created earlier.
How to register your "ewly created JS library usi"g CRXPE:
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwW;daY-com
•
1 .Co py t he file /Iibs/wcm/core/components/init/init.jsp. Paste init.jsp into
the /apps/<application name>/globa l folder.
3. Open the file i.it.jsp, and enter some HTML and JSP code, similar to below -
then Save.
init.jsp
<\@inc lude file;" t Ubs / foundation / global. jsp ft \ >< %
\> < \ @page import="com . day.cq.wcm.api . wCMHode,
com.day.cq . widget . HtmlLibraryHanager" %>< %
if (WCMMode.frOmRequest(request) 1= WCMMode . DISABLED) {
HtmlLibraryManager htmlMgr = sling . getService(HtmlLibraryManager.clasS)i
if (htmlMgr != nUll) {
htmIMgr.writeCsslnc!ude(slingRequest. out, "cq .wcm.edit " );
out.flush();
htmIHgr . writeJSlnclude(slingRequest, out , Rcq.wcm.edit~.
Mtraining.widgets " );
}
String dIg Path % null;
if (editContext != null && editContext.getComponent() != nUll) {
dlgPath a editContext.getComponent().getDialogPath();
.>
<script type-="text / javascript" >
var fct - function() {
CQ.wCH.launchSidekick( "<%IE currentPage.getPath() %> ", {
propsDialog: "<%= dlgpath == null? "" : dlgPath %>",
locked: <%= currentPage.isLoCked() %>
}I;
};
window.setTimeout(fct, 1);
</script>< %
.>
4. Copy the file / Iibs/foundation/components/ page/head.jsp - then paste to the

Training contentpag e "page" Component.
• e.g . / apps / training / components / page / contentpage
5. Open the fi le head.jsp, and enter some HTML and J5P code, similar to be low -
t he Save.
Copyright 2010, Day SottwareAG , Switzerland Rev 1.5 20100907 WWWdat.lcom

•
hcad.jsp
<%@ include file: M/ libs /foundation /g lobal.jsp" %><%
%><%@ page import:"com.day.cq.commons.Doc type" %><%
String xs = Doctype.isXHTML(request) ? " / " : ""i
%><head>
<meta http- equiv-"content- type M content= "text / html; charset:UTF-8 "<%=X5
%"
<meta http- equiv:"keywords " content-"<% '" WCMUtils.getKeywords
(currentPage) %>"<%-xs%»
<cq ; include script· M'apps/training/global/init.jsp"'>
<cq: include script="stats. jsp" />
<% currentDesign.writeCsslncludes(pagecontext): %>
<title><%= currentPage.getTitle ( ) ~- null? currentPage.getName()
currentPage .getTitle() %></title>
</head>
COMgratulatioMS! You have successfully registered aJ5 library fo r custom xtypes /

Widg ets. Again, when you wish to add cust om Wi dgets , all you need to do is
d rop it in the files fol de r of a reg istered J5 library.
Finally, we will create a new xtype / Wid get by extending an ex isting xtype/
Widget. Ext.J5 is a large, powerful, and somewhat compl icated J5 framework. If
po ssible , it may benefit you to attend Ext.J 5 training .
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW.da llcom
•
How to create a~d test a custOIll xtype/Widget:
1 . Create a new file in the folder / apps/training/ training-widgets.js/ files.
File
Create 6 new file l esource.
Enter or select the parent folder :

IOCdlhost _4 S02/WebContent/apps/tr cuning/trdlnlng-'Nldgets. js!f ~es
• geometnxx[nt :folder]
trainlng[nt:folder ]
• -.l components[nt:foldpr ]
docroot[nt:folder]
_ global[nt:folder]
~ r"stall[nt:folder]
- src[nt:folder]
+ ...: ternplates[nt :folder]
- tr dinIng-widgets. JS[cQ:ClientlibraryFolder]
frles[sling:Folder ]
• , etc[shng:Folder]
File name: ttclnlng.)sl
IAdvanced > > I
I Finrsh ~II
u
Cancel I
CRXDE new file dialog
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WwwdaYCQm
•
2. Open the file tral"l"g.js, and enter some JS code, similar to below - then Save.
II Create the namespace

Training = {};
II Create a new class based on existing CompositeField
Training.Selection = CQ.Ext.extend(CQ.form.CompositeField, {
text; "default text",
constructor: function(config){
if (config.text != nUll) this.text config.text;
var defaults = {
height: "auto",
border: false,
style: "padding: 0 imargin-bottom: 0;",
layoutConfig: {
labelseparator: CQ.themes.Dialog.LABEL_ SEPARATOR
) ,
defaults: {
msgTarget: CQ.themes.Dialog.MSG_TARGET
)
);
CQ.Util.applyDefaults(config, defaults);
Training_Selection.superclass.constructor.call(this, config);
this.selectionForm = new CQ . Ext.form.TimeField({
name: this . name,
hideLabel: true,
anchor: "100 %",
minValue: '8:00am',
maxValue: '6:00pm'
)I;
this.add(this,selectionForm);
) ,
processRecord: function(record, path){
this.selectionForm . setValue(record.get(this.getName()));
) );
CQ.Ext.reg("trainingSelection", Training . Selection);
3. Create a trai"i"g node (nod eType cq:Widget) under the Training title
Component's Dialog cab 1 widget collection.
• e.g. / apps / training /components / content / tit le! dialog / items / items / tab 1 / items
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www.day.CQm

•
4. Assign t he following properties to the newly created training node:
• the property t hat wi ll def ine where the content is stored

• Name = name
• Type = String
• Va lue = . / training
• the property that will define the Widget type
• Name - x type
• Type = String
• Value = training Selection
• the property that will define the label app lied to the Widget
• Name ~ fieldLabel
• Type = String
• Va lue = Trainin g Selection Wid get
5. Test your script / Dialog by requesting a Page in CQ5 Siteadmin that

im plements this Trai ni ng xtype / Widget (i.e. t he t itle Component) - t hen
do uble- clic k the "titl e" content to invo ke th e Dialog .
• If succes sful, you should see t he custom Dialog xtype, similar to the image
below.
Ta b I
Enta Title Here (il8n This 1$ a custom TITLE

style)
Trdlning Selecton
WO;Jet ~~------------~1
8 :00 At"
6
...
8: 15 AM
8 :30 AM
8 :45 AM
9 :00 A/'-1
9:15 AM
9 :30 AM
9:-45 A",'
10:00 AM
10 : 15 AfJ!
10 :30 AM
10:45 AM
Dialog of title component with new xtype

•
Co"gratulatio"s! You have successfully created and applied a custom xtype /
Wid get. This is a significant step in your development capabilities, as you are
now able to create custom CQ xtypes / Widgets . To f ully com plete th is exercise,
you would output / use the user's selection in manner deemed appropriate.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 wwW.day.com

•
Day 4
EXERCISE - Create and Consume an OSGi Bundle
Goal
The following instructions explain how to create and consume an OSGi Bundle.
T his will allow you to create and use custom Java classes in your J5P scripts,
allowing for more traditional Java development and library reuse . To
success ful ly com pl ete and u nderstand these instructions, you will need :
• A runn ing CQS Author instance

• A compl eted titl e Component
What exactly is an OSGi Bundle'?

OSG i defines an architecture f or develo ping an d deploying modular applications
and libraries (it is also known as the Dynamic Mod ule System for Java). OSGi
containers allow you to break your application into individual modules (are JAR
fi les with add itional meta information and called bu nd les in OSGi terminol ogy)
and manage the cross - depe ndencies be tween them wi t h:
• services implemented within the container

• a contract between the con tain er and your ap plication
These services and contracts provide an architecture which enables individual
elements to dyna mically d iscover each other for collaboration .
An OSGi fra mework then offers you dynamic loading / unload ing , configuration
and control of these bundles - without requiring restarts .
This a rc hitecture a llows you to extend Sli ng with ap plication specific modules.
Sling, and t herefore CQS, uses the Apache Fe lix implementation of OSGi an d is
based on t he OSGi Service Platform Rel ease 4 Version 4. 2 Specifications . They
are both collections of OSGi bundles r unning within an OSG i framework .
Copyright 2010, Day Softw are AG , Switzerland Rev 1.5 20100907 www.dav.com
•
This enables you to perform the following actions on any of the packages within
your installation :
• install
• start
• sto p
• upd ate
• unin stall
• see the current status
• access more detailed information (e.g. symbolic name. version, location, etc)
about the specific bundles
1. Se lect and rig ht-cl ick the Training projects OSGi bundle source directory
(i.e. / apps / training / src) - t hen select Juild .. Create Ju.dle.
.. I.: Ira n r.1I
N,w ,
Copy xc
JC Delete
Move...
Rename ...
Import Directory ...

"
Import File..
Export.. .
Set Pri mary Type

Refresh
.. ,
".. CteaIt au L.
,- Properties
Create Project ...
,
JO ('U lt"
jel c'ulea!y Compile
Inlo Vl.':rsion Control
Ie. ,,, ,..,.yl'lType
Refresh Classpalh
CRXDE Build Create Bundle
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www;daY:CQro

•
2. Enter the "Symbolic Bund le Name", "Bundle Name" , " Bundle Description", and
"Package" - t hen cl ick Fini sh.
New Generic Bundle
Symbolic &.rodle Name Otg.tr alrw-lg.test. Test6unde
Bunde N""" Test Bundle
BLrde Desa IpIlon NA
CRXDE new bundle dialog
3. Open the newly created bund le's f ile org.training .test.Te stBundle.bn d - verify
that the te xt - SNAPSHOT has been added to the Bundle-Version.
• this ensures the bundle is automatical ly in stalle d and started in the OSGI
container every ti me the bundle is built
Export - package : *
Impor t - package : *
Private - packa ge : *
# I nc lude- Resource :
Bu ndle - Name: Test Bund l e
Bundle - Descriptio n: NA
Bund le - symbolicName: o r g . traini ng .tes t . TestBundle
Bundle- Ver sion : I . D. O- SNAPSHOT
Bundle-Activ ator : org.trai ning.te st.Activator
Copyright 2010, Day Software AG . Switzerland Rev 1.5 20100907 WWW:day. com
•
NOTE
The Bundle wiza rd creates the following eleme nts:
• The node org .training.test.TestBundle of type nt:folder - it is the bundle container node
• The file org .tra inin g.test.Tes tBundl e.bnd - it acts as deployment descriptor fo r your
bundle and consists of a set of headers
• The folder structures :
• src / main Ijava / org / training / test - it will contain the packages and the Java
classes
• srcj main / resources - it will contain th e resources used wit hi n the bund le
• The Activator.j ava f ile - it is the opti onal listener class to be notifi ed of bundle start and
stop events
4. Create a new Java class in the newly created bundle source directory (i.e. src l
-
mai n /java l org I trai n i ng Itest) .
."'.
..,
01'9 tflWWlQ.test. T~
.
"'
,.......,
Itt Actrvata,
i " ..
, ~,
-..
Set P.,ru.)' l~
CRXDE create a new java class
5. En te r th e "Source fo ld e r", "Pac kage", and "Name".

Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 WwwdaV:CQm

•• Source folder = localhosL4S02 /WebContent / apps / train ing / src /
arg.t rai n i n9 .test. T estBu ndle I src / mai n I java
• Package = org.training.test
• Name = HelloWorid
Jav a Class
Create a new Java ellis.
Source folder : Iociilhost 4S02/WebContentJappsltldlnng/slc/OIg.traon Browse •.•
~.trair:lQ test Browse .. .
Hellowor!i
....'
11 absb act 0 lIMI
Superclass: lava lang.Ob)e(t Browse ...

Interfaces: Add ...
WhIch method stubs would you like to create?

o p!..bIrc statIC VOId malfl(Strlf14;l[] ¥t;ls)
Constructors from superdass
~ Irhented abstract methods
Do you want to add comments' (Cori9le templates and defaul: value here)
== Generate cormtents
Cancel
CRXDE new java class dialog
6. Open the newly create d Java class file HelloWorld.java, and enter some Java
co de, simi lar to below - t hen Save.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.dar.com
•
package org.training . test;
publ ic class Hell oWor ld {
public String getMessage ()
return ~Hel lo World !!! ";
7. Select and right - click the Hel/oWorld.jQ\lQ file - then se lect &uild .. COlllpile .
.. '- ,-<
.. _- 'U'
'_-0'0
"'. '
.,,- 'u.
. N~
0,,,
•
......10< •••• Open With •
_ ,""""«u Copy XC
0<0.1t. ~ ..., ' U f lfl'l'~rl'''' _ ''''d
...... ••
"'~t
)( OtJ~lt ®
.~
••• M(M! .. .
Re namt ...
Imaort Di rtClory ...
"
0<.
II Impo rt F.lt ...
.~ A",,, "<"00 ....
,c. <, •• te<l
,., , -•• mla,
jcr p· ........ roo
•
•
UI)Ort ...
Set PrimMy Type

_.
."
. ~
f',"
,,~.
"J' ..
,oj
1;>1
Rtfruh
" CrUll! ProlK I ..•
"uslan Control •
C RXDE compile Java class
• You should get a Compi lation completed successfull y me ssage dialog .
•
1'; Compilation completed succes:;fully
OK ..t
' - - - - II.;,
C RXDE Java class com pilation successful
Copyright 2010. Day SoftwareAG, Switzerland Rev 1.5 20100907 www,dav.cQm

•
8. Select and right - clic k the org. training. test. TestBundle.bnd file - then select
Juild Ju~dle.
• You should get a Buil d complete d successfull y message d ialog.

c apps . ,;
... geometn--oc,
training
Copy Ctl'i+C
..,..
... components
___ docroot
J( Delete ['elelo:
<-<t"
... .....- global
~
Mo... e ...
- iI~tall Rename... F2
src /
Set Primary Type /
- ~ OIQ .trdlning .t est.TestBundle
I,bs Refresh F5
src
rna... Propelties
}av a '.
org
Refresh Classpi:lth ,,
ActivatOr.}dva
HeIloWOlId .Ja...·a
Ched<.out
Commit
Update
St~ us
{,
+ templates
_.... , ...... -*' ....... .td!q.'N-.w!dgets..}5.... ,~..,.., 1: '-, '...,.. • .... ft ·. ..,... .....,
..............,- ......
. . -.....
~-""
... ~. p.~r
'.
CRXDE bui ld bundle
. , .
.
1,J Build completed successfully
OK
CRXDE bundle build successful
Copyright 2010, Day Software AG . Switzerland Rev 1,5 20100907 WWW.da y.com
•
9 . Open the Training title Component's title.jsp, and enter some HTML and JSP
code, similar to be low - then Save .
• The focus is to import th e newly created Java class and use it
title.jsp
< %@include file:" / libs/foundation / g!obal . jsp "%>
<l@ page import- "org.training . test.HelloMOrld " %>
<hl><i - properties.get("title", CULLentpage.getTitle(» I >< / h l >
<,
HelloWorld hw - new HelloWorld();
,>
<h3><1= hw . getHessage() %></ h3>
10. Test your bundle/ script by requesting a Page in CQ5 Siteadmin that
implements this Training bundl e (i.e. t he t itle Com po nent).
• If succe ss ful, you should see the ti tle Com po nent output, si mil ar to the image
below.
...
. '" CUSTOMERS • '.
geomeulXX
• sh:.pes tor cefltl.n"s
This is a custom TITLE
Hello World !!! r
This . sure hope it 'NOrks I! I
t
•
/ content/training/ en / company .'
<
This IS some teAt .
Page view of title component (bundle)
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW.daV CQrn
•
Co"gratulatio"s! You have successfully created an OSGi bundle, and have
consu med t he associated Java class. Once again , t his is a significant step in
your develo pment capabilities, as you are now able put more "heavy logic" type
of co de into Java classes, where it belongs, in addition to be ing able to create
Java helper classes that can be re-us ed by your development team.
Copyright 201 0, Day Software AG , Switzerland Rev 1.5 20 100907 www.dav.cow

•
EXERCISE - Examine the Workflow Console
Goal
CQS encompasses several applications that are designed to interact and
complement each other. In particular, the Workflow Engine can be used in tight
conjunction with several of the other applications.
For example, within CQS, Web Content Management (CQ WCM) is key. This
enab les you to generate and publish pages to your website. This functionality is
often subject to organizational processes, including steps such as approval and
sign-off by various participants . These processes can be represented as
workflows, which in turn can be defined within CQ, then applied to the
appropriate content pages .
The following instructions will increase familiarity with the Workflow Console
and working with Workflows. To succe ss ful ly complete and understand these
instructions , you w ill need :
Overview of the main workflow objects

Model
Is made of WorkflowNodes and WorkflowTransitions. The transitions connect
the nodes and define the "flow". The Model has always a start node and an end
node.
Workflow models are versioned. Running Workflow Instances keep the initial
workflow model version that is set when the workflow is started.
Step
There are d ifferent types of workflow steps :
Participant (User/ Group)

Process (Script, Java method call)
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www·dav;com
• Container (Sub Workflow)
OR Split /Join
AND Split /Join
All the steps share the following common properties : AutoAdva"c. and nlll.out
alerts (scriptable) .
Transition
Defines the link between two consecutive steps. It is possible to apply rules to
the Transition.
Workltem
The workltem is the "there is a task identifier" and is put into the respective
inbox . A workflow instance can have one or many Workltems at the same time
(depending on the workflow model).
The Workltem references the workflow instance. In the repository the

Workltem is stored below the workflow instance.
Payload
References the resource that has to be advanced through a workflow.
The payload implementation references a resource in the repository (by either a

path or an UU ID) or a resource by a URL or by a serialized java object.
Referencing a resource in the repository is very flexible and in conjunction with
sling very productive: for example the referenced node could be rendered as a
form .
lifecycle
Is created when starting a new workflow (by choosing the respective workflow
model and defining the payload) and ends when the end node is processed.
The following actions are possible on a workflow instance:
Terminate
Suspend
Resume
Restart
Completed and terminated instances are archived.
Copyright 2010. Day Software AG , Switzerland Rev 1.5 20100907 WWWdaycom

•
Inbox
Each logged in user has its own workflow inbox in which the assigned
Workltems are accessible . The Workltems are assigned either to the user itself
or to the group to which he be longs.
Workflow Console
The Workflow console is the centralized location for workflow management in
CQ. It can be accessed via the Workflows button on the We lcome page or
through the Workflows button in the tool bar on any CQS console (for example:
Websites, Tools, T agging).
Within the console there are Stabs:

Inbox
Lists workflows awaiting action in your inbox. You can then take action as
required.
Models
Lists the workflow mode ls currently available. Here you can create, edit or
delete workflow models .
Instances
Shows you details of workflow instances wh ich are currently active . These
instances are also ve rsion dependent.
Archive
Enables you to access detai ls of workflow instances which have terminated, for
whatever reason.
launcher
Allows you to define a workflow to be launched if a specific node has been
updated.
Starting a Workflow
There are three methods of starting a workflow:
. Workflow Console
• SiteAdmin Console (Websites tab)
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.da y. com
• . Sidekick
NOTE
T he current version of the wo rkflow mode l is assigned to the payload ; if the main copy of
the workflow is updated later, the changes will have no impact on the currently run ning
instance.
We will be starting the wo rkflow from the SiteAdmin console .
1. Open the SiteAdmin console, ei ther by clicking on the Websites button from
the Welcome page or by clicking on the globe icon at the bottom of your
sidekick.
2. Right-click on one of your pages to open the context menu. Select

Worlcflow...
•
-- ----- ...
CQ5WCM
_._. _ JlII<
" ~
~-
"~
-~
- -
"I~.
.. ·l "", .. .......
, ~-
=lll ~" ... Do ...
:.Iii &9....
s.o.
, ~
-"il "._ ~
~,n,,"--,
"J!J l>ot1\oI
~ :U _
..
---
"~ B~
~ ... ::.
. ~
JiI """"'s...
"~
ii"'--
,, ~
,,- 'tl~
3. Select the Publish Exalllple workflow and fill in any desired optional information
and cl ick Start.
--
World Standard Software to Unify Your Suslness 169
Copyright 2010 , Day SoftwareAG , Switzerland Rev 1.5 20100907 Www.daY:com

•
4. You will notice that the workflow icon shows up in the SiteAdmin console
next to the page you chose.
. -~ ____ . _ J_.
·, ..-t_
_.- -- -
'- - - ----
---
...... '-
'--- , " _ t ; . . - ..
'.-
~
.. ..
•r ••
-
· ....-"'""--
,-~
. ~-
.-
.-
.-
5. Change to the Workflow Console by clicking on the workflow button in the
tool bar. Select the Models tab. Open the Publish £Xa",ple workflow by double-
clicking the workflow model entry .
•
-.-
-
. ...,. .......... -- .. - .......,..---
~
---
. ..... •..
. ~
Cl iioll
. _ . . ..<0 _ _ _ _ ,
- --
r.......' _
.--
---- ••
""'_.-"'--
You will notice that the Publish £X."'ple workflow has 2 steps : ValidateCo"te"t
and Publish Co.te"t.
The Validate Co.te.t step is a Participant step assigned to the use r admin. The
PublishCo.te.t step is a Process step with the Implementation Property set to
ActivatePageProcess .
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www.day.cQm
• You can validate the values of the step properties by clicking on the cog in
the step and then inspecting the values from the properties list on the right.
• .,
-- -
CQ5 WORi'\F"
--
.. N
- .......
- ......-
--_
•
,.
---,-- _-_- ,~
.....
· .--
;
~.
~
p ...... - - . . .
~~,
-~,
- ....
"' ....
,- -
'- ~
. -~
"-1"0 _ _ .-
I.:;·
,~
-"' .. --
".~ c..-
...
T>oe _ _ ", ... _
6. Click on the I~box tab to change context. The Inbox will show the Workltem
entry for the page you put into workflow.
• . ,
- _ c...-.. _ _ T."._ _
_ .... -<-<
,
'*
~...... ~ ............... ,...- .t-looO-le:o " .i l ~.'•••~••••"""'""""
7. Select the Workltem Validate Co~te"t and click COlllplete. Notice that the
Workltem disappears from the Inbox. You will also note that the page is now
no longer in workflow (the workflow icon is gone from the status column)
and the page has been published or is pending publication (depending on
whether you have a CQS Publish instance running).
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www: day:com
•. -
•
- -
_ _ ., _._ . _ J_'
<
....
..
-
.. ~ Cioor'c!:'..,~s...
•
~""'"'"""'-
\04. CooWn!
,,--
,~
.,-
-,,~--$ ..
..t:!..l~
COI'Igratuiatiol'ls! You have learned about the Workflow Console. Also, you have
successfu lly placed a page in workflow and moved that page through the
workflow steps to the the end of the workflow. In the next exercise, you will
use this knowledge to help you create a custom process step and define a
workflow to use that custom process step.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 wwwctay.CQm
•
EXERCISE - Create a Workflow Implementation Step
Goal
A workflow is made of steps. The steps that define a workflow are either
participant steps or process steps. Participant steps require manual intervention
by a person to advance the workflow. Process steps, on the other hand, are
automatic actions that are executed by the system if certain specified
conditions are met.
CQ provides a number of predefined process steps that perform common

actions, which an administrators can use when building a new workflow.
Custom process steps can also be added for tasks not covered by the built-in
steps.
Process steps, also called automated steps, can be defined by using either
an ECMA script or a service (a java class in a bundle) . Services can be deve loped
to listen to special workflow events and perform tasks according to the
business logic.
The foll owing instructions explain how to create a workflow custom process
step using a j ava class. To successfully complete and understand these
instructions , you wi ll need:

• A com pleted Training project with appropriate extension s
Defining a process step: with a J ava class

To define a process step as an OSCI service component Uava bundle):
1. Create the bundle to hold the java class using Jvlld ..Create JVKdle.
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day.cQw

• "<-o "~r~r g - , . ""',
.. ..(I C.",.""",.,...
.. ....: gl0l>;11
.. ,n,'~1
;t I
~t' ., •
•
Copy xc
X Cklete
MOlle •.•
Re name
Import Dm!ctoIV...
"
Import File ..
Export ...
~t Primary Tvpe
~ Refresh
"
Create ProJect•.
Propeni ~
CamptiI'
Version Control • Rl'fresh Classpath
Crutt BLind Ie
2. Create a Java class to implement the creation of the approved property.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WWWdatl;com
•
I"
J;avlo ct.us
Cre,lt" ~ ~~ ).lv~ cl~n
If.,.. .....
AG4 ••
Wht<h ~trod nub. WO\Ild vo~ Ilk .. 10 crut .. ,

_ Pl<b.l t UOIt ,t wore: n"" r\S{rll'l!i;I ... g i )
Con~Ir<K10rs tro ... 'Lpen:l,n •
.II !"!- .... I.. a "bstr'Cl ..,,,thocs

00 Y'O<l w.1lI ttl ;add cOt'l"'Tlllnu ' {CO"f,O"~ templ.ltu;wId dd.l~ I vlo,," UUI
_ (dM,.l1t «l<nMtnU
3. Open the new ly created Java class file MyProcess.java, and enter some Java
code, similar to below - t he n Save.
package com.mycompany . test ;
import org.slf4j.Logger;
import org.slf4j.LoggerFactorYi
import com.day.cq.workflow.Workflowsessionj
import com.day.cq.workflow.exec.JavaprocessExt;
import com.day.cq.workflow.exec.WorkItem;
import com.day.cq.workflow.exec.WorkflowData;
import javax.jcr.Node;
Copyright 2010. Day SoftwareAG, Switzerland Rev 1.5 20100907 Www.day·Com

•../
.. <code>MyProcess</code> sets the "approve" property to the payload
*
.. @scr . component metatype="false"
* @scr.serv ice
*/
public class MyProcess implements JavaProcessExt {
/ .. * uefault log . * 1
protected final Logger log = LoggerFactor y.getLogger(Myprocess.c lasS)i
public void execllte(Workltem item, WorkflowSession session, String

args[]) throws Exception {
WorkflowData workflowData ~ item.getWork flowData() i
if (workflowData.getpayloadType() == "JCR_PATH") {
String path = workflowData.getpayload().toString() + HI
jcr:content ";
Node node = (Node) session.getSession().getltem(path) ;
if (node 1= nUll) {
node.setP rope r ty("approved" , argsIO].equals(fttrue") ?
true false) ;
session . getSession().save( );
public void execute(Workltem item, WorkflowSession session) throws

Exception {
String[) args = new String [ ){ " true"};
execute(item , session, args);
NOTE
Pay special attention to the @scr.componenr metatype=''false'' and @scr.service comments.
These two lines are required to ensure that the implementation step appears in the list of
implementations.
4. Compile the Java class using 'ulld ..Co",pile.
NOTE
The java methods, respectively the classes that implement the executable Java
method are registered as OSCI services, enabling you to add methods at
anytime during runtime.
Copyright 2010, Day Software AG, Switzer1and Rev 1.5 20100907 www.dav.com
•
5. Build the Bundle using Juild ..Juild Ju"dle. Once you get the "Build Successful"
message, you will notice that the bundle .jar file shows up in the install
directory. The bundle is now uploaded and installed into CQ.
CO"Qratolatio"s! You have created a new Java class that can be used as a custom
Implementation in a Process step.
Use the new P rocess Implementation in a Workflow
1. Navigate to the Workflow panel. Choose the Models tab. Create a workflow
by choosing New from the tool bar. Enter Approval as the Title of the
workflow .
• .
- -- --
CQ6 WORKFLOW .., ... -.;
1 DoO.I1_~"_
-- - '"
• fW1 Ddeu: __
~ o.o..!i ~o..... __ ~eoo
, [),I.M s.._~...,.,
oo.I'I ..l!oI. ,d r N _ (. _ odI ~ .
,
I.
:l
:1
OUII'*ate_, c- C~_"
OUII"IXlate ,_
[),I.M~_
' ......
lIi'>_
c..... _ J. -
•
-
[),I.M Jpcj .\I: !rOm
:l _ r.... ... pIto
\~ P>..I>Isn E.i.>.rpl<
:5 ~IO'.o.;,...""" ,~
·7 ~to.o...e_
_ _ _ _ _ ....
OK I. er- J ...,.
'"
2. Open the Approval workflow by double-clicking on the Name .
World Standard Software to Unify Your Business
Copyright 2010. Day SoftwareAG , Switzerland Rev 1.5 20100907 WWW;daY- com
•
3. You will notice that the new Approval workflow model has a Start, End and
Step 1.
•
··-.......
- - -
---.- - -
~_"~l
[,.,;aj r>!%?.:;r..". ,-
o
r... ..., ~
,-, ~
'_'iO<'I<l""
<& ~:
h~ "W\<:,Qoo<'t
u,..."-c.",,, K,.
To edit Step 1, click on the cog on the step itself.
4 . Assign the following values for the Step 1 properties:
• Descri pt ion = Final Ed it of Content

• T itle :::: Content Val idation
• User / Grou p :::: Contributors
_.
... " -
"
~ .
o.sa""....
U-... i ." 01/;<,0:.00.
~~
_l<!~d~
.~
fo<1"I ".:11
T,,,,,,,,,,! ~
- o.ur.t - . • )(
T....... ~tl'lln<:!e<
<a c.r..,., .... ' ';oboc,

<~
~I G":'.. f>
-
Pa--tit.-L

•
5. Add a Process step to the workflow by dragging-and-dropping the
Process icon onto the workflow model.
•
- ..
CQSWORI<F...OW .., '"""
--.--
, ....... _",""'- ,
-
. .-- -~
"""
. '-"-- .,
...
6. Set the properties of your new Process step :
• Description = Set "approved" property
• Implementation = MyProce ss
• Tit le = Fi nal Ap proval
• Pro cess Argument s = true
---,-- -
• -====-=-=~,~-
-.--
-,-- - -~
.
--
.......... _11 _ _
~.
---
--~ _.-
-~- §f'"
.--
T*
- - 0 r _
~--
§?=[
---
.... _ _<il ... _
---- ~
.CJ
.... _ . ._ :
World Standard Software to Unify Your Bus/ness 179
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20 100907 www.dav.com

• You will see the following value in the Implementation property:
com.mycompany . test .My Process
Click Save.
7. Test your new workflow. In the WebSites panel. select any page. Bring up
the right context menu and choose Workflow ... Select the new Approval
workflow and click Start.
8. Monitor the progress of your workflow from the inbox and move the page
through the workflow. Check for the approved property on the page once
the workflow has completed .
01;'-"
................ ...,..--...-
tJ i I -·· ., . •
.--
"" ,-
~
. J~
• .,J ....
-----
. . . J _.
. .....,-
_.
.~
- !.on_ •.:."=
:::-:..-=:-:::.-:.....---'~::'''------.: . ~-.---
.
... -
. ,e"._
.,, ~
c- - . ::>
- -
.... _"" .......
COMgratulatioMs! You have successfully created a custom Implementation for a

workflow process step. You can use this same methodology for any custom
Implementation you need to create for your workflows.
Copyright 2010, Day $oftwareAG, Switzerland Rev 1.5 20100907 WWWdaY. Com
•
EXERCISE - Create & Download a CO Package
Goal
The following in structions explain how to create a CQ package that will
combine all elements of t he Training project, minus al l jpegs. This is a good
ex ample of packag ing application content, which you could t hen distribute to
team me m be rs for review. To successfully complete and understand these
instructions, you will need:

• A com pleted Training project with appropriate extensions
Why do I need CQ packages?

Packages can include content and project- related data. A package is a zip fi le
t hat co ntain s t he content in t he form of a file-system serialization (called
"vault" serialization) t hat represents the content from the repository as an easy-
to-use-and-edit re presentation of files and fol ders.
Ad ditionally, it contains vau lt meta information, includ ing a filter definition , and
import configuration information. Add itional content pro perties can be included
in the package, such as a description . a visu al image , or an icon. T hese
pro perties are for the content package consumer for informational purposes
only.
You can perform t he following actions with packages :
• Create new pack ages

• Modify existing packages
• Build packages
• Upload packages
• Install pac kages
• Down load packages from the package share library
• Down load packages from CQ to a local machi ne
• Apply package fi lters
• View pac kage in fo rmatio n
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www;day.cQm

•
There are multiple ways to manage content packages :
• CRX Package Manager - using the direct CRX interf ace

• CQ Package Manager
• cURL action s - command line option that allows package actions to be
automated
In this exercise, we will be using the CQ Package Manager. You should take some time
to explore the documentation for the CRX and cURL methods of managing package s.
How to create, build, a~d dow~load a CQ package i~ the "fools" sectio~ of CQ5:
1 . Navigate to t he Tools pane.
2 .select the Packages Folde r.
3.C reate a new training folder .
• CQSWCM ... -.
< !.l New.. Copy
~
........
J l ooIs
~
"'-
~ '!'!- (ust(lffl Ooo:~¥.oOn
~ f(O' m SWmlSSIOOS
;l;) _ Impotter~
....J ExternailinWle.:1ef
_ New*tte.
" p" , , -
CQ5 packages - new folder
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·dav.com

•
Create Fckier
ntle
New folder dialog
4. Double-click the newly created training fol der.
5. Select Create Package.
6 . Enter the package "Group Name" (trai ning) and "Package Name" (training-
project).
traiTlQ
.r: ba' "nJ-pO)eCt
CQ new package dialog
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW,daV,CQro

•
7. Select the training- project package .
8. Add t he Component FilterVefi"itio" to the paragraph system Component-

then o pen (e.g. dou ble -click).
• CQ6 W(:.M
'.
J . . Fe r.oetnwn ,
Page view of component addition
9. Enter the "ltootPath" (l ap ps / training) and a "ltule" that excludes all jpegs
(Exclude ~ > .+ \ .j pg) - t hen se lect OK.
~.,
'-..
- >;<;- ILl_-----ll ~ , <§<" •
Filter definition dialog

•
10. Se lect Buil d to build the package .
• CQ5
,
•..
training-project
t
Edit Preview Bu~b ...
Bu,;j th, peel ,go.

~
"""-.. ... .... '... '. ~ '

..a ..... _.._
~
......... ~.. "'...

.
Package build selection
•• ~~.
"' .spps ua,nu.'! cQtt.pc>IK'nts/ C'On'ent ' 1090'"10"1'0 l~P

• '.~ traIning coaponenUVcont ent 10<;1'0 de.:.'9"n_d •• I<>9 xal
•• 6PPS Ir" '''lng ca..ponenls / con'e1"" / coapi,,.

a,pps, tr"'n'n') c.:>oIp::men t s/con tent/ coooplex cor.,en\ xal
•• ' ''PPS'' ,,,.,, n. n9/ 0:00.pon"n U ... 'content I"coo.pi"I</ CC*pl ell lSP
" aPP'<" t rI"n, ng/ COOIpemen 15 · 'content '-caapl ~ /d • .slog •• 1
•• ... pp~ / tr ""nlnq cOllponents / contenl · coaple. / deslgn.d •• log XIII
"'... pp". 'r." ,ang COOIponenl~ "content / co-.ple>V_C<Led. tConf' 9 x_I
•• ' app'" tra , n'ng <;QOIp;>nent s r o::ont e n t / :!e<l rcb
"' app" 1t" ... ,,'9 coooponelL\s cOntenl ,,_reI. content ".1
•• " .IPS's tra.Hnn'l " Co.pcnenlS content ,'s_rch ' !;e.!Ircb )!;p
aw,,· trainIng 's re
•• /app"" r ." n'I>'J-' ins .all
/ ... pps II',,,n.ng docloot
•••
4pp:vtr4'n'n~ tl a''''''g-v , dgets ,S
app~ u a ln'''~ trall""';I-v,d';lets )S
' apps l ..HnUt<) 'r••
n'''9-",d';let 5 )$ f. l~
•• /apps ' tr~'nlng / tralnln';l_v ,dg el s ] s/ II I~ a:lnte" t x.1
/app s·· traln'D9 ~ tr•• n'n'i'l-v,dget" ]"/ l l le,, tr ..... n''''3 ,.
•• <1>pp"~ tr~'''I~ <}lob.!ol

<1>pW U;!o,nl ng ",labal InU J SP
• K£TIo - IIIF "4Ull delllllUOII c:ontent " .01
Package build o utput
Copyright 2010, Day SottwareAG, Switzerland Rev 1.5 20100907 Www·daY- com
•
e - CQ5 ~
/
,
training-project
;
i
.-
,/
,, /
. .;' -)
Package build information
1 1. Download the package by entering the URL of the package's ZIP in yo ur

Web browser's add ress bar.
• e.g. http :// localhost:450 2 / etc / package s/ training I traininq - project.zip
Congratulat ion,! You have successfu lly created a package, added a rul e to the
f ilte r definition, bu ilt t he package, and have downl oaded the pac kage, which
you can now share with your CQ development team.
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 WWwdav.com

•
EXERCISE - Find Slow Responses
Goal
T he f ollowing instructions ex plain how to monitor Page response times, in
addition to finding slow Page responses. This will allow you to create a more
ro bust / scalable CQ application , even with limited hardware. To successfully
com ple te and understand these instructions, you wil l need:
• A running CQ S Aut hor instance

• A Day provi ded rlog .jar too l
What performa nce optimization concepts should I consider?

A key issue is the time your Web site takes to res pond to visitor requests.
Alt hou gh t his value will vary for each req uest, an average target value can be
defined . Once this value is proven to be both achievable and maintainable, it
can be used to monitor the performance of the Web site and ind icate the
deve lo pment of potenti al probl ems.
The response times yo u will be aiming for will be different on the author and
publi sh environments , reflecting the d ifferent characteris t ics of the target
audi ence :
Au t hor Environment
T his environment is used by authors entering, and upd ating content, so it

must cater for a small nu m ber of users w ho each generate a hig h number of
performance intensive req uests when updating content pages and the
ind ividu al elements on those pages.
Publish Envi ronme nt
This environment contains content which you make available to your users,
w here t he nu m ber of requests is even g reater and the speed is just as vital , but
since t he nature of t he request s is less dynamic, additional performance
enhanci ng mechanisms can be leverage d. such as t hat the content is cached
or load- balancing is ap plied.
Copyright 2010. Day SoftwareAG . Switzerland Rev 1.5 20100907 Www. da y:cqm
•
Performance Opt imization Methodology
A performance opti mization methodology for CQ projects can be summed up to

f ive ve ry sim ple ru les th at can be followed to avoid performance issues from the
start. These rul es, to a large degree , apply to Web projects in general , and are
relevant to project managers and system ad m inistrators to ensure t hat their
projects wil l not face performance challenges when launch time comes .
Plan ning f or Opt imization
Around 10% of the project effort should be planned f o r the perfo rmance
optimization phase. Of course, the actual performan ce optimization
req uirements wi ll de pend on the level of co m plexity of a project and the
experience of the deve lopment team . Wh ile your project may ulti mately not
req uire all of the allocated time, it is good practi ce to al ways plan fo r
performance optimization in that sugg ested range .
Wh enever poss ible, a proj ect sho uld f irst be so ft - launc hed to a limited
aud ience in order t o gathe r real - life experience and perform f urther
optimizations, without the additional pressure that fo llows a f ull
announcement.
Once you are "live", pe rformance optimization is not over. This is t he point in
time when you experience t he "rea l'· load on your syste m . It is important to plan
for ad ditio nal adj ustments after the launch.
Since your system load changes and the pe rformance profiles of your system
shifts over time, a pe rform ance "tune-up" or "health-check" should be
scheduled at 6-12 months intervals .
Simulate Reality
If you go live with a Web site and you find out after the launch that you run into
performance issues t here is onl y one reason for t hat: Yo ur load and
performance tests did not simulate reality cl ose enoug h.
Simulating reality is difficult and how much effort you will reasonably want to
invest into getting "real" depends on th e nature of your project. "Real" means
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day'CQm

•
not just "real code" and "real traffic", but also "real content", especially
regarding content size an d structure. Keep in mind that your templates may
be have completely different depending on the size and structure of the
re pository.
Establis h Sol id Goal s
T he importance of prope rly estab lishing pe rformance goals is not to be

underestimated . Often, once peopl e are focused on specific performance goals,
it is ve ry hard to change these g oals afterwards, even if they are based on wild
assumptions.
Establis hing good , solid performance goals is really one of the trickiest areas. It
is often best to collect real life logs and benchmarks from a comparable Web
site (fo r example the new Web site's predecessor).
Stay Re levant
It is impo rtan t to o ptimize one bottleneck at a time. If you do things in parallel

without validati ng the impact of the one o ptimization, you will lose track of
w hich o ptimization measure actually helped.
Agile Iteration Cycles
Performance tuning is an iterative process that involves, measuring, analys is,

optimization and valid atio n until the goal is reached. In order to prope rly t ake
t his aspect into account, implement an agile va lidation process in the
optimization phase rather t han a more heavy-weight testing process after each
iteration.
This largely means that the developer im plementing the optimization should
have a quick way to tell if the o ptimization has already reached t he goal, which
is va luable infor mation, because when the goal is reach ed , optimization is over.
Basic Performance Guidelines
Generally speaking, keep your uncached html req uests to less than
lOOms . More speci f ically, t he fo llowing may serve as a guide line :
Copyright 2010. Day Software AG . Switzerland Rev 1.5 20100907 WWWdaY: CQm
• •
•
70% of the requests for pages should be respond ed to in less than lOOms.
25 96 of the requests for pages should get a respo nse within 100ms- 300ms.
• 4% of the requests for page s should get a response within 300ms - SOOms.
• 1% of the requests for pages shou ld get a response within 500ms - 1ODOms.
• No pages shou ld resp ond slower than 1 second.
Th e above num bers assume th e f ollowing conditions :
• measured on publish (no auth oring environment and / or CFC overhead)

• measured on the se rver (no network overhead)
• not cached (no CQ- output cache, no Dispatch er cache)
• onl y fo r complex items with many dependenci es (HTML, J5, PDF , ... )
• no other load on the system
There are a certain number of iss ues th at f re quently contribute to performance
issues which main ly revol ve around (a) dispatcher cach ing inefficiency and (b)
the use of queries in normal dis pl ay templ ates . JVM and as level t uning usually
do not lead to big leaps in perfo rma nce and shou ld therefore be perfo rmed at
the very tai l end of the optimization cycle.
Your best friends during a usual performance optimization exercise are the
request .log, compo nent based timing, and last but not least - aJava profiler.
How to IIIo"itor Page respo"se tlllles:

1 . Navigate to and open the fi le reque st.log located at <cq-install-diy>/crx-
quickstayt/ logs.
2. Request a Page in author that utillizes your Train ing Template and
Com ponents.
• e.g. / content / trainingSite / en / company
3. Review the response times directly related to the previous step's request.
• A Page request of / content / trainingSite / en / company
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwWdaY-CQm

•
tI" .q""'t.Ia&(3.1MBI · a.•• T.. tl ~~
He
~OPf!l
[do: ........ Pr ...."""'" Help
....... HtogHgth"9 r~ I" At/SI
18/hn12010: 15:0~: s: -O~OO [ ~,;:.iJ-'C.;-;,."""-C-,"l.o.~
I "N afL/ 20 10 :1 5:0)::::'; -0500 [ ~6) J .~ Gt:T IC"M ... 't/ <I U~. lnQ /""/cQ""4t'I)· .hc...1 II'ITt 1.1 :(
I>:IJ J""IZOIO: I5 :0)::1 -0500 [~4 ) -> G[l' Il1 L 3Ic <f/" ' I"ld~~U / U, nu/d. !6ult . C5S 1fTT'P / 1. 1
UIIJ_/~OIO : J5:03:;' -OSOO [.oS) .> G['T Jll b s/cqi ncu .. ~y/1l1d(reu / U\ ... ~ / ~da\ll".cn imP,!.
I.O_nOIO: IS: 01: n -osoo [.&05) <- lOn text/en Ou
IJ lJanJ20 10: IS: 03: n -0500 [#4) <- :00 ' ut/c"s 46."
181JanI2010:1S:0l:Z7 -OSOO (466) _) Gt;T I lllo"'cq/ ~*9911>\l / ... LlqtU /\huu/d<tlWl t .~s" 1fITP11.1
UllJaw:OlO: 15:0):.!1 -nSOn [ 40601 (- ZOO t""t./(:"~ 16."
18 , J .... / ~(i I O:1S:0)::' -0500 ( 467) G£T I lllo. / c q / u, / ",dQuS.1S 1fITP / 1. I
Un",, / ~O I O:15:0):~' -OSOO ( 46)) ZOO t""t./ ha.l ZIl l u (
nn-V20 11l:15:0):21 -0500 ( 461) <C _ ZOO ,",,~l1c.t1_ /x-'.·'UC L 'Pt a6'",
18 / Jan/WUI:n:Ol:17 -OSOO [ .... 'J -) G£T Il ,b$ / eq / ~eeuu q""~t ,nto. ".,..1e'L tl_llS }84 S00'9" IfITP I I. I
18U.n'ZO I O:H:O):Z7 -OSOO [46'1 ( _ ZOO ~phc ..t1l>tl,,"m I .... '
a / ~_/'::0 1 0:1S:0):::n -O~OO 146'1 _) GET I l1 b ,,'e q n l lln / ll.'Ot.~n'l_ IITn ll . l
18n6JI/'::O I Il: IS :03::7 -O~OO [ 469] ~ _ ZOO apphe .. '-'on/)~D" CIa!:
l aN_IZO I O: H :U : ~8 -OSOO [ 470] - ) GET / I1 L . / c q !,,~C'U .. ty / "ldgHS.1S HTTl' / 1
1~ / J"'.IIlOJO: 15 :0)::~ - OSOO [ ~'O ] ~ - ZOO ~pp ll c .. t1 D" /x·lav.,e npt u; . s
I $ N"'L/ 1 0lO :1 5:0l:~~ -0500 ! ~ 1 IJ -> Gf:T / h ~ ~ / cq lt~\IgI MI"HI?HS.)~ /ITTl' /l. . j
IS / J an;:010 :I S:03::e -OSOO [U ll ~ - 200 &W h c .. U ollh-) ,,"Ue np t 0..,
ItlJ an ;:OIO:n:O ) :~s -0500 [ ~ n ] - ;> CET l ap p "/tni lll rL9 / t Uin<I>\l·"'\Iq~u.,. Hn"P/ I
ISUanI2010:15:0J:Z& -OSOO [ ~ nJ =00 apphc&uQIlI><-,""lUcn pt 0.,
UUannOlO:I5:o):Z& -oSOO [~il) - ) G£T / 1.bs!cq/\l.i(... lI.geu / theul / lI.etwlt.p HITPII.I
IS ' Jan/~010:l5:0]:Z& -O~ [ ~ ;)l ~ - ~OO appl.c~t..1c ll l><-)"vlUcu p t o.s
UlJan/~OIO,I5:0):~e ·OMlO [ ~ i ~ l OCT I l lb" / cq / t...,..rln9 /" ""1eU / the_ ~ / .,,.tlWlt.)= IITn / l.1
l &IJ .... /~IO, I S:OJ:~e -0$1)0 [ 4 H] .; - ZOO a;:pl'C'"tlon, ,,-).vuCU l't ~
l 81J.ltJI~O I 0:15:0):28 -DMlO ( 4 7S] - ; OCT 1 ~ . c ldo='9'L:I 'u&ln""l"t.uc.eu irrTl' / l . l
181l .... 12010: 15:0)'U -0500 [ 4 75] .;. ZOO tnt/e u 0a3
1"J .... /~O I O:IS:Ol:l' -O!>OO [476] .) OCT f eu: / dul <,ln3/ UUiUl>\I.Css II'TTPII.i
U fJ ",,/~O I O:IS:Ol:lS -0500 [ 4 76] ( - ZOO c.ext/ eu 3~
H'I 'Jan/~0 I (l: 15 :(I':Z& ·0500 [4"1 - ) G£T Iconunt / tt&.1ru.ng/en/ coILJICl)' , nsvu8,,",.pnQ /ITTl'/ 1 . I
1& / J&n/10 I O,H :0): le ·O~OO [ 47$] - ) GET ICD nt~ntl t< &.1nln~/m /plO"-"'tI.,,"",,1.u'l" . pn~ 1ITt1'/I.1
lVJ&n/lO I O,B :O l : :e 'O~OO [U7] ,'- 200 .. ~"e/pn~ l.a.
1"J"'L/~O I 0 :1 5:0 1 ,:8 -0$00 [UBI 200 " ~?~Il>n~ ~ z",
I'Nan/~OIO :l S:O)':' -0500 [479 ] .> GET ICOM "'Lt./ t r .. ' n1n9 / ... ' / C'\"t .... ~u.n,." . . &?e pn'l /!'ITPI!.l
18IJannOIO:lS:Ol,:e -0500 [480) - ;> GET l~te / d u l q" .. 'tts. n.n9/ _1c . _ccmuntlcontenrp.9"/loqo ••• q
l"J"'l/~OIO :1 5,O)::~ -0500 r4;~1 <- WII . . .. a Vtma Uu
<
Request.log response time
NOTE
Though this is clearly the response time of a Page whi le in author, it Is good practice to be able
to identify where response times are located (request. log) and how to identify a specific Page
request / response in the log f ile itself. Ideally, this test would occur on the publish instance to
get a better idea of its expected behavior in production .
Co"gratulatio"s! You have successfully reviewed the response t ime of a Page in

CQ using t he re q uest.log. Agai n, t his will aid your development in being able to
monitor response times of Pages t hat implement custom Tem plates and
Components, and comparing said time to your project goals .
Copyrlght 2010, Day Software AG , Switzerland Rev 1.5 20100907 www·dav.com

•
1. Request a Page in author that was created from your Training Template and
Components.
• e.g. / content j trainingSite / en /com pany
2. View the HTML source of the Page requested in step 1.
3. Navig ate to and select the "Timing chart URL" located in the HTML source.
• You will find t his URL most likely near the bottom of the HTML source, as it is
generated by the foundation timing Component
, di'" c1a •• -" I: 0 0 lb!5.[" " >< SC' Ti I)l type -" t ey.c / J e;', -3.!l C r 1 pt " >
CQ . !JC M. e dl.'t ( t " path": .. / c o n c .... nt.i t-ral n lng! en/compa.n y/ )el: : CO nte fi C/ t o o l b a r" I " t.y p e
</ scrillt ':>
</ 1111.' ;"
<th'" c1.a.5 · "d l ;'SC 1~ lme r "> cti !lc lallr~r <./ III v >
<! dl- v;,
., : r- ~~-O!':'~I"- ,;- .. -!i::.;"::~
(
</ h od:,/> t )
lne In, Co/ I
HTML source timing chart uri

•
4 . Copy the "fi"'i ~g chart Ultl" - then paste it in the address bar of your favorite
Web browser.
5. Investigate the visual output to identify a ny Component that may be causi ng

a slow res ponse time .
chart (PNG Imaoe. 600)(500 PIKelS) U
com p a /"~ 11: II ti~J llIs ~
,.
• f'
J
<I"
-!
,\
#
• I
.,•
~
I ,.
("
• <-
C
~
.;;;
.... ", ..-.' ...._' ...
Timing chart component response times
NOTE
The light blue color id ent ifies when the Component /JSP started . The dark blue color identifies
how long the Component /JSP took to respond .
Copyright 2010 , Day SoftwareAG , Switzerland Rev 1.5 20 100907 wtyW dalt com
•
Congratulations! You have successfully monitored Com ponent based ti m ing using
t he f ou nd ation timing Compo nent. Again, this wi ll aid your deve lopment in
being able t o monitor t he response ti mes of specific Components wit hin t he
context of an actual Page/ Template request. Next, we will focus on how to find
long lasting req uest / res pons e pairs.
How to find long lasting request/response pairs:
1. Navigate to t he helper tool rl og.jar located in < cq - install- dir> / crx-

quickstart / opt / he lpers using your command line .
DOS location of rlogJar
2. Enter the command java -jarrlog.jar in your command line to get help
concerning poss ible arguments.
Copyright 2010, Day SottwareAG , Switzerland Rev 1.5 20100907 wwwdSllcqm

•
DOS rlogjar help
3. Enter t he command java -jar rlog.jar -" 10 .. I..Ilogs/request.log in your comman d

li ne to view the first 10 req uests with t he longest response duration.
El DOS
Info M Par~cd 2136~ pequests .
Info * Ti~e fop parsing : 281~
Info • Ifllle fol" sorting: 161115
Info • Total Melllory: 2211lb
Info • Free "enory: Ynb
Info • Used MeAOry: 12Ab
4418?n$ 23/Dec/2009:10:36:55 -0590 209 GET /etc/reports/diskus&ge.htPlI text
Iltl'll
327811'1s 22/Dec/2009: 10: 36 :21 -0509 2 •• GET /bin/crxde.classpath.XAl text/lUI.
1
J€l094111s 05/Jan/2010:09:40:S1 -0501.1 200 GET /bin/crxde.c lasspath.xnl text/xIII
1
25625J1ls 13/Jan/2010:14:S6:47 -0500 280 GET /ctc/reports/diskusage.htllli text
htl'lll
21281ps 08/Jan/2010:09:11:S4 -0500 2 •• GET /bin/crxde.classpath.xnl text/xJI1
1
21312J1ls 06/Jan/2010:16:04:3? -0508 2 •• GET /bin/crxde.cla~spath.xRI tcxt/XJll
1
19985J1ls 18/Jan/2010:B9 : 50:44 -0500 2 •• GET /bin/crxde.classpath.xRI text/xJll
1
19968Pls 06/Jan/2010:10:59:32 -0500 2"" GET /bin/crxde . c la!l~path . Xl'll text/xl'!
1
196851'ls 28/Dec/2009:10:28:29 -0500 2"" GH /bin/crxde . c la~spath. Xl'll text/xl'!
1
1'1594111s 11/Jan/2010:10:Z3:4J - 0500 2 •• GET /bin/crxde . classpath.xl'll text/xJll
1
: 'ddY'aut hor'crx-qu ic kstart ~pt'he Ipers >
DOS rlog.jar view of 10 longest requests/responses
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www clav.com
•
NOTE
Essentially, the rlog.jar tool is parsing the request.log to find and display the 10 longest
requests / responses. You can use this information to further investigate what may be the cause
of the long response .
Co"gratulatio"s! You have successfull y found and displayed long lasting requests /
responses in CO. Again, this is just one of many tools to hel p you meet your
proj ect's performance goals. Finally. we will view t iming statistics for Page
rend eri ng .
1. Req uest a Page in CQ5 Siteadmin that implements your Training Temp late
and Components.
• e.g . ! content / trainingSite ! en / com pany
2. Select Ctrl-Shift-U to view the timing statistics for that Page .
, ..
I
10.d "'t.ati(;"tic~:
'" '"
~, building edi.t in9'''
:rt .at'!;:
I
'" Complete docWflent lo.aded
~,
I "0 ~, St.art render ing 1:o11ovcI:

'81
~ I ~, Completed z:ende J: ing 2:011ovcJ:
I
'" StOl.rt rCl\dCling J:ollovcJ:
~,
,as
~ / ~, Completed I: ",no.., I' ing l:011ovez:
/ St.az:t: :u ,ndoering z:olloVCII:
'" m,
~,
~ I
'" m,
,n
I
Completed renderi.ng J: olloveJ:
St.art xcnde II: i.ng tollovel:
". m,m,
~ I
I
Compl .. ted rer.derir.g r ollove:t
'" m, 3t.art :ter.der ir.g rollover
,.,
~ I
'" m,m,
/
Compl eted ter.der ir.g rollover
3t,;!.:t:t rer.del[ in.g rollover
,.,
,., m,
0 I Completed ren.de r i.n.g r ollover
I
~ I
I
,.. ro,
m,
3t.art ren.der ing J:ollover
Completed rendeJ:ing r ollove r
St .. x"" xendexing xolloveJ:
~ I '"
'55 m, Compl eted ren.dexing r ollover
/ '~O m, 3t.art ren4er ing xollover
0 I HO ro' Comp! eted ren.dexing' rollovex
/ sa = fini~he4 buildln.g edi"'ing1il
n~ I
14' I
." m,m, -
H34
St.xt renderin.g ~ideki(;lI
Compl ete4 ren.derin.g "ldell iell
,~ I')Sf-
Page timing statistics

Copyright 2010, Day Software AG. Switzerland Rev 1.5 20100907 www.day-com
•
Co.gratulatio.s! You have successfully viewed the timing statistics for a Page .
Again, t his is to aid you in reviewing t he performance of specific Pages, so that
you may meet your project's performance goals.

•
EXERCISE - Change Default Passwords
Goal
The f ollowing instructions explain how to change the default passwords of CQ.
This is important because it is part of t he security check list t hat will ensure
your installation cannot be easil y infil trate d by hackers. To success f ully
complete and understand these instructions, you w ill need :
What to do about security?

Typically, security tasks are handled by a system adminis trator. That being said,
it is a good idea f or you , the developer, to have a bas ic understanding of w hat
security concerns th ere are. T he primary securi ty concern you will focus on in
this exercise is the simple changing of password s, so t hat you may setup a
team development environment as soon as the class is over.
When consid ering a stand ard CQ installation, there are t hree password changes
and one config urat io n you need to al ter. If you consid er a standard install ation,
and the elements invo lved, it actually becomes q uite clear. Ref lect on the image
be low:
COSE
l .. "nc~ad
(ftoljJ<!SI,ns)
config
CRX
CQ standard instal lation

Copyright 2010, Day Software AG . Switzerland Rev 1.5 20100907 www.dav.com

•
As you can see, there is aJava servlet eng ine (CQSE), the Launchpad application
(Felix / Sling), and the content repository (CRX). All three have t heir own se parate
(defau lt) passwords, and thus need to be changed . In add ition, t he Launchpad
application need s to be able to communicate wi th the content repository. This
is a configuration you wil l have to alter.
How to change the Java .ervlet engine, (CQSE) default ad",ini,tratlve pa.sword:
1. Navigate to CQS E's ad mini stration application .
• e.g. http: //l ocalhost:4502 / admin
2. Enter the default "User Name" (ad min) and '·Password·· (admin) - then se lect
OK.
A USe!natne and p&ssword are benl re~ed by http:/(Iocallost:'I502. The 'SIte says' "O.,y
5efvlet Enone ActrnstratlOO~
I..Jsa Name-: a~
P~SWOfd; •••••1
CQSE login dialog
3. Select Change Password.
CQSE change password

Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 w ww clay.CQW
•
4. Ente r the "Old Password" (admin), "New Password" (training), and
"Confirm" (training) - th en sel ect Cha~ge.
""""\It,day . com
-
,
Change Password
'.
Ch ange Password :
'Jld Password: •••••

r
(
••••••••
CO l"i lrm : ••••••••

<'
!
,
\
r~ote: You r trow ser will ask "OU to re -aut he ntl cate ar.e r" th e cha nge .
,. -,
....
-
. ~. - ... , .... -,
'
... . .
......... .. - " "' .......'. ...." ,. . . ,..
"-
CQSE change password confirm
COKgratulatioKS! You have successfully change d the CQSE default administrative

password. Now focus on changing the content re pository's (CRX) default
administrative password.
•
How to changethe cOKtent repository's (CRX) default adllliKistrative password:
1. Navig ate to the content repository (CRX) application.
• e.g. http ://localhost :4 502 / crx
2. Select Log In.
COltent Repository Extreme 2,0

JSR-2 g3 Compliant Repository
U serlO; <'I non ymous I W orks p ace: c.:r'M.defa u lt I~ ,

....... '~ -•. _-.--' 'r!...G·........ .... ..._.tI'· __ r-··~'·'... .~-... " ... .,.,.'........ ,/"'''-- ·-\/'.....1
CRX login
3. Enter the "User" (ad min) an d "Password" (admin) - then se lect SublllitQuery .
.ontent epO~, ory Extreme 2.C ~

'SR 28> Compliant Repository I
U• ., r IO: "nonymou~ I Wo .. kspou~: ., ..... default I b!t9. In I

I
/
\
I
I
I-S~bmll Q-;;;;r~ r
.. .....-.- .--~ ..... . V~ · . ~_
. .. . . . . . . . /_ j
. , -. . . . . . . . . . ......... -"~ - .••. • _ . , " •.•.(
CRX login dialog
Copyright 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 www_dav com
•
4. Select User Administration.
www.day.com
ConteJlL Repository Extre

JSR-283 Compliant Repos.\ll
Main Console
UserlD : admin I W o rkspace: cl"'M.default I I 09 Out
".
~ .
.(
"'- '
CRX user administration
S. Navigate to and select the a d"'i ~ user.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www"dallCom
• . .
http://localhost: 4502/crx/ui/us ...edltol .Jsp' ck= 1L
...
r;:; list. .. Create User
.•.
users
- -' a
• ad~n
• anhlyrnou$
• , aparker@Qi?ometrixx .com
• author
•
~,....,. .., " .. , ,.
.
.r:
• • • _.~ ' •• • • .' · ·, AA ... .. , . ..... ..... _ ... , .", . · ... .•
CRX admin user
6. Select Change Password.
<
LM ... Create US6
~
•
/
User: adnlin
Prope rties:
t
Pr~rt)' Type Value
UserlD
Prnclp81 Name
".".,
aoollr)
(
P.!I$sword Chanoe P.!lS;;~
slroQ:re-;no . r ~ Type Strong rep :Use. U
"''''''''' st.",
v
209c61 7 ~db~9Ocaeb42-~3fa5a7ae634
I
•'\ .-~'.' " ..... -.~... *"'- ', ~'" . . . ' •." ...... •,Jr.,-, .............. .
CRX change password
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW.da!.l:com

•
7. Enter the "new password" (training) and t hen retype where as ked - then
select OK.
http:inocalhost:4502icrxiuiisetpassword.jsp?ck= 12641 089WB07&f
User Name: ad min

Enter nev-,1pa:;swofd:
••••••••
Ret ';lpe new password :
········1
I 0 1, II Carocel
~
Done
CRX change password dialog
CO"Qratulatio",! You have successfully changed the CRX def ault administrative
password. Now focus on changing the La unchpad (Felix / Sl ing) application's
defaul t administrative password.
How to cha"ge the l aunchpad (Felix/Sli"QI applicati on's default adllli"istrative password:
1. Navigat e to t he Launchpad (Felix / Sling) app lication.
• e.g. http: // localhost:4S02 / system / console
2. Enter the defau lt "User Name" (admin) and "Password" (admin) - then select
OK.
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 www·daV.CQro
•
A username and password are belrlQ requested by http://localhost:45Q2. The site says: "OSGi
MM1~ment Console~
User Name: aOnln
Password: •••• .j
Launchpad login dialog
3. Select Co.flguratlo •.
Apache Felix Web Management Console \

Bundles
• .,
(
/
I ~.,.,t
"
. "I ,~ ."
~~ ~ ....... ;.,
-~ - ' .- " .. " rr~ ....
...
J./
Launchpad configuration
4. Se lect Apache Felix OSOI Ma.agellle.tCo.sole from "Configuration" - then se lect

Config ure .
5. Enter the new "Passwo rd" (trai ning) - then select Save.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.dallCom

•
Cor.f,QIJroti on of the Apache Fell, OSGI' anagement ':'on50Ie.
..j'.
RC'Clt URI !S't"ttem!consc.I",
The root path to the OSGt rl 'lanagement (c,nsole. (manager.rout) J,
Defau lt
Page
bundj",z
The r,:,me of the default (,00& Quratton page when m'y'u~lng the OSGt ".,
t
The nar-1e of the H""'IP Authentication P e- .:: lrn (realm) .•..
U$t:r
'-·J a m€'
' .
.....~_. .~(r;(ord fe r the U5er allow ed to acc~::$ the OSG r··1 anagement C',
o Components ,
C C on flg uratlor
Log oe::·ervl( e
I
C e.lJndle:; ~•
,.
C Se rvices ,
EI L,·:enses ,f
~ C onil gut"atlor ::'t·3'tu:,
EJ Shell '.
o OSG t Re posl":xv {.J

0$" stem lntorn- ,3~ton ,
;,
Launchpad password dialog
Co"gratulatio"s! You have successfully change d the Launchpad's default

ad m inistrat ive password. Now fo cus on changing the Sling repository credential
configuration.
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 WWW. da ltcom
•
How to enange tne Sling repository eredential eonfiguration:
1. Select CRX Sling Client Repository from "Configuration" in the Launchpad

application - t hen select Configure.
2 . Enter t he new "Ad min Password" (training) - then select Save.
irrpl eme nts :, slmg repo s,tor-" t he : cccesses an u rn::le rl Ylng cr x .
JNDI
~, ttp :i/JC I ,d ~ y, c (' m
Pro vid er
(;av6. fI .:Imir,g prov lder.url )
f
UF L
JNDI I nrti a l Cl)m.d 1',' ,u":ll -.tndl.r· rO·.lld"" ,M~f(Jor'y In '':I" r 0: '~nT;~. t:F ~C1:0 r':,
Fa:to r " \.1.:;">10 .narnlr:g .facb) r '/ ,Inl 1311
Re pos ltor i' ... 1t1: u.;,l-cr ~:

f'.J arn e n:trne elf the rel= oSl to r y to ·:';Ieee:;::; , ( name)
;"'
'.
Defaut :
Nod spaCE: (default\'Vor~ space )
~ nonymcllJ $
,
Userld ( :tnor \<rnous ,n ame ) ".
A nc1nyml) US
/
H,onymQU£
\
Passv. . ord (3nor yrliou ::; ,pa::;swcrd ) .i
. :t. arilln ~dmln
.j$e,Id ~,:.d rn l n , name )'"

~ dmln
Pa::;s'/·Io rd
......... ,.r " ~.",

....... - -', ... <' . - ' . -- . .. ,~ .... - , ' .
.... If.
. ' ....... .
,_"
...~/ •
Sling client repository admin password
Copyright 2010, Day Software AG, Switzerland Rev 1.5 20100907 WWW day.com
•
3. Validate chang es have persisted p ro perly by requesting the CQ application
and login.
• e.g. http://l ocalhost:4502 /

• Username = ad min
• Password = training
NOTE
It may take a minute or two for the changes to the CRX Sling Client Repository configuration to
populate thoroughly.
Congratulations! You have successfully changed the Sling repository cred ent ial
config urat ion. Ag ain, it is important for you to have a basic und erstanding of
CQ security concerns . To learn more, you can always go to docs.day.com, and
search fo r "cq security chec kl ist".
Copyright 2010, Day SoftwareAG , Switzerland Rev 1.5 20100907 w ww. dav.CQm
•
Appendix A
Exercise - Upgrading CO 5.3 to a CRX 2.1 Repository
Goal
CQ 5.3 is bundled with CRX 2.0 . The underlying CRX repository can be
upgraded to version 2.1 for repos itory enhancements and / or bug fixes
implemented in CRX 2.1, or enhanced support for CRX IDEs, CRXDE and CRXDE
Lite :
-
CRX2.1
Repository
The following instructions explain how upg rade your underlying CRX2 .0
repo sitory to CRX 2. 1. To successfu lly complete and understand these
instructions , you will need :
• A CQ S quicksta rt JAR
• A valid CQ5 license key
• AJ D K > = 1.5
• App roximately 800 MRs of free space
• Appro ximate ly 1 GB of RAM
Copyright 2010, Day Software AG , SWitzerland Rev 1.5 20100907 www dav.com
•
As with any upgrade , you should carefully cons ider value versus risk for your
deployment. This includes testing the planned upgrade to ensure it passes you r
acceptance tests.
What will be Upgraded

The repository upgrade, as recommended here, has the following effect on the
system. The following are upgraded:
Infrastructure: CRX Repository with all repository management and

development tools
CQS Platform: CRXDE support package for CRXDE lite and CRXDE
The following are not upgraded:
Apache Sling and Apache Feli x framework

None of the CQ5 application components (bu ndles); with the exception of
the CRXDE support package
The recommendation not to upgrade the Apache Sling and Felix frameworks , or
any other application co mponents, ensures that the stability of the CQ5
application as a whole is retained by minimizing the changes.
The followi ng are removed:
CRXDE lite was a separate web application in CQ 5.3 (CRX 2.0). It is now
integrated into the main CRX web application .
•
Upgr ade procedure
For the following you wil l need an account with sufficient privileges for the
various actions on files .
NOTE
The naming convention used here for t he CRX quicksrart file is :

cr x-<version>-<edition >.jar.
For examp le. crx-2 .1 .0-enterprise.jar, w here 2.1.0 would be the <ve rsion > and
enterprise the name of the <edit ion > . Th e version might also include a date / timestamp .
For t hi s upgrade the version w ill be 2.1.0, be sure to substitute this and t he name of
your edition of CRX w herever appropriate.
To upgrade the Cit)(:
NOTE
In production, before any upgrade, take a full backup of your repository. Custom
configuratio n s made in server / runtim e / O/ _crx / WEB-INF / .. will be overwritten during the
upgrade process. For example, changes to web.xml or classes/ indexin9_con(ig.xml.
Save any changes you have made and reap ply them after the upgrade_
12. Copy the CRX 2.1 quickstartjar file from USB>/distribution/

cq53_crx2.' _upgrade to a suitable location on your hard disk. (e.g . C:
\ day \ cq 5 \ upg rad e\ crx).
13. Unpack the CRX 2 .1 jar file using the appropri ate fi le name. e.g .,
java -X mx512m -jar crx-2.1.0.201 00426-e nterprise.ja r -unpack
14. Open the CQSE admin console of your CQ 5.3 instance, for example:
http :/ /l ocalhost:4502 / admin
Copyrig ht 2010, Day Software AG . Switzerland Rev 1.5 20100907 www_da llCQro
• --
rb
- - k __
-- -- ----
•
.........,...
'"
,<..~ ..... r" ...
_..
"".,... ~
-
t-.-'---__.... ' - . . . . _ _ AG __
15. Using the CQSE admin console , Stop the CRX Launchpad application
16. Stop and Remove both:
• Icrxde (the CRXDE application)

• Icrx (the CRX application)
17. Add a new:
• Icrx
referencing the following file from the unpacked CRX 2. 1 :
crx-quickstart/server/webapps/crx-explorer_crX.war
Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www dav.com
•
Update the CRXDE server backend with the CQ 5.3 upgrade to
CRX 2.1 package
NOTE
The CRXDE Support package is available on Day Package Share. Please consult the
online documentation for instructions to download the package from the Day Package
Share.
1. Copy the cq53·update·crxdesupport·2.1.0.zip file from the <USB>/

distribution/cq53_crx2.' _u pgrade to your hard drive. (e.g ., C: \ cq
\ upgrade).
2. Access the CRX Main Console and Log in using
Username: adrnin
Password : admin
3. Select the Package Ma"ager
• . .. -.....-_.
Son '"
"""
... " .... ".
, (q -doc: UmtnU.llcn - 5.}.l O.z'P
~ .. ~ • ,-"""" . <0 I~ (J. • "' ..
CfIlde-suPPOrl-contenl-2.0.0.zIP
~ •• ___ t.& ..." .$ :f'
Show
."." ....
~
,q-cOntl!nl- 5.3.2-2:' 13
..... ,. ".,.,"."'. "~ !Q. " ..
G.o ..;>,
............ m
4. Upload and install the cq53·update·crxdesupport·2.1.0.zip package.
Copyright 2010, Day SoftwareAG. Switzerland Rev 1.5 20100907 WWWdaY,Com

•
5. Restart CQ to ensure t hat all 05Gi bundles have been started.
NOTE
In case of prob lems with CQ startup, please open the Apache Felix Web Management
Console (http:// < host >:< port > / system / console)and check if all the bundles have been
started. If a restart does not help , please start the bund les manually.
18. Confirm the upgrade of CRX by accessing:
• CRX
for example, http://l ocalhost:4502 / crx / index.jsp
The version details on the welcome screen will now show 2.1.
• CRXDE lite
for example, http :// 10calhost:4502 / crx / de /
The version details on the welcome screen will now show 2.1.
• CQ
use CQ to access your content, check everything is operating as
expected .
CAUTION
You must test the operation of the upg raded instance; highly customized
items may need to be upgraded separately.
NOTE
CRXDE Lite is now bundled with CRX. (and not a separate webapp), access
using l ux / de ; for example, http :// localhost:45 0 2 I crx / de t).
Copyright 2010, Oay Software AG, Switzerland Rev 1.5 20100907 Www·day.CQm

Day Excercises PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Day Excercises PDF

Uploaded by

Copyright:

Available Formats

• Day

World Standard Software to Unify Your Business 1

Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 wwwclav:cQm

World Standard Software to Unify Your Business 2

EXERCISE - Install & Start an Author Instance 6

EXERCISE - Browse Related ApplicationlServer Interfaces 9

EXERCISE - Create an ApplicationlProject 14

EXERCISE - Create a Template 19

EXERCISE - Create a "Page" Component 23

EXERCISE - Create Pages & Web Site Structure 26

EXERCISE - Install & Start CRXDE 30

EXERCISE - Utilize CRXDE 32

EXERCISE - Include the "global.jsp" in the Page Component 34

EXERCISE - Display Basic Page Content 37

EXERCISE - Create Multiple ScriptslRenderers for the" Page"

EXERCISE - BreakoutIModularize the" Page" Component 48

EXERCISE - Initialize the WCM 51

EXERCISE - Extend the Foundation" Page" Component 53

EXERCISE - Extend the Script Structure of the" Page"

EXERCISE - Create and Assign a New Design 62

EXERCISE - Create a Text-based Navigation Component 69

EXERCISE - Add a Log Message 74

EXERCISE - Enable the Debugger 78

EXERCISE - Create a Title Component 87

Extra Credit EXERCISE - Create a List Children Component 94

EXERCISE - Create a Logo Component 96

EXERCISE - Include the Foundation Breadcrumb Componentl05

Extra Credit EXERCISE - Modify the Foundation Breadcrumb

Extra Credit EXERCISE - Modify your logo component 109

Extra Credit EXERCISE - Modify your topnav component 110

EXERCISE - Include the Foundation Paragraph System

EXERCISE - Content Finder Drag-and-Drop 116

EXERCISE - Create a Complex Component 121

EXERCISE - Include Multiple Foundation Components 135

EXERCISE - Create a Search Component 138

EXERCISE - Apply 118n to a Component 144

EXERCISE - Create & Register a Widget 149

EXERCISE - Examine the Workflow Console 166

EXERCISE - Create a Workflow Implementation Step 173

EXERCISE - Create & Download a CO Package 181

Copyrigh1 2010, Day SoftwareAG, Switzerland Rev 1.5 20100907 Www.dav.cpm

World Standard Software to Unify Your Business 5

• A CQS quickstart JAR

What is an Author instance?

World Standard Software to Unify Your Business 6

Copyright 2010. Day SoftwareAG , Switzerland Rev 1.5 20100907 www.day.com

3. Rename the CQS quickstart JAR to cq-author-4502.jar.

4. Double-click the cq-au t hor-4 S02.jar fi le.

• Installation will take appro x imately 5- 7 minutes, depending on your systems

CQS ' :1\1 . . . ....

CQS install/startup dialog

Copyright 2010, Day SoftwareAG. Switzerland Rev 1.5 20100907 www.4ay.com

CQ5 login dialog

CQ5 command line start

World Standard SOftware to Unify Your Business 8

Copyright 2010, Day Software AG , Switzerland Rev 1.5 20100907 www.tlay.coro

• A running CQS Author instance

What interfaces exist?

How to browse t he CQS£ Interface:

USer NaJne.: adffiln

CQSE login dialog

World Standard Software to Unify Your Business 9

How t o browse t he CItX I ~terfa.e: