CWCM
Webmaster
Training
Denis Bacquelaine,
Technical Consultant
I.R.I.S. Solutions & Experts S.A.
Prerequisite:
 Content Contributors course of CWCM V3
 Webmaster basic Knowledge
Training organisation
Time schedule




09:00
11:15
14:00
15:45
–
–
–
–
11:00
12:30
15:30
17:00
Topics presentation
 Introduction
 Teacher’s demonstration
 Student’s practice
Demo
Practice
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Goals of PST
 The PST Language should be used to create
the layout templates and fragments.
 PST uses a declarative approach combined
with configuration to describe the layout.
 PST layout templates are easier solutions to
create and manage the websites than XSL
approach.
 PST provides more structure and
standardization to the sites using it.
Goals of PST
 A rich set of predefined CSS classes are
provided by the components like media screen
(player, gallery, tab..) and media print.
 The ‘look and feel’ can be catered for custom
needs through user-defined CSS class.
 PST separates the page layout from the
content layout.
 PST provides a rich set of features with
flexibility that can be improved further.
Advantages of PST
 No need to learn XSL
 You Know HTML, you know PST.
 All the existing XSL components are available
in PST as well
 Menu, linkgroup, dynamic calendar, evoting.
 XSL components are improved
 Media gallery, paging
 Smart loading of components

(multi-instance, more options, ... )
 New components introduced
 Tabs..,
Advantages of PST
 For each component: several presentation
styles for the same content : list, box, comma…
 Develop the layout once, use it many times
 Unobtrusive JavaScript with many components
support.
 Cross-browser support
 Provides the facility to connect to the social
network from the pre-defined tools.
PST guarantees
 Basic presentation
 Default layout templates and skins (out of the
box).
 All content types are supported.
 Component styles
 IPG compliant
 W3C HTML 4.1. compliant
 W3C CSS 2.1 framework
 provides a new corporate print version
 The PST was specially developed to fit the
European Commission needs.
 Since all is centralized and standardized, all
evolutions of the PST are immediately available
for all users.
Agenda












Benefits of the PST system
General ideas and concepts of the
PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
No XSL, No DQL
XSL
programming
DQL
development
Layout Vs Content
The Layout
- Menu
- Header
- Footer
- Link groups
- Feeds
- ...
The Content
Separate page layout from
content
 Page layout is often
the same for several
pages
 Page layout should be
created and treated
independently from the
content
 It should be possible to
easily change or adapt
the page layout
of one or several pages
Site configuration
 Exploit the site hierarchical
structure to create different
views of a single layout
Layout
Template
 i.e. Sub site specific
configurations
 Similar to CSS: changing
small details in lower levels
Link group
12345
Link group
33344
Backwards compatible
 Existing XSL sites still work
 Users have the choice: PST or XSL

PST not mandatory but recommended!
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
How to insert content?
Content
XML
Layout templates
content
XML
layout
template
used by
content
XML
separate
document
…
content
XML
What is a layout template?
Same as an HTML page!
It makes the layout template
 Easy to create
 Easy to read
 Easy to modify
People with knowledge of HTML can
easily work with layout templates
Layout template: an example
Layout templates
 Page layout or layout template
 separate XML file
 recommendation: use the prefix “pst.”
 in parallel structure
 associated to documents
 Standard layout templates available
 Basic column view
 Providing standards
 Reuse
 Standard layout templates located in:
 In FTP: /presentations/templates/
 In CWCM: /Site Manager/Presentations/Editor/templates
Root sub sites
 “site” = collection
of documents with
same layout
template
/
Layout template
placed here
 The layout
template: to be
placed in top level
sub site of the site
 “Root sub site”
 Site = 1 or more
layout templates
Template Language
 Layout templates written in “Template Language”
 Template language
 XHTML
 Custom elements (XML)
 Engine
 Copies XHTML
 Interprets custom elements and generates
XHTML
<span>
<wcm:translate
label="legal_notice" />
</span>
<span>
lookup of the
label
« legal_notice »
Legal notice
</span>
Elements of the language
 Typically: 1 XML element -> 1 type of component
 Attributes = configuration of component
<html xmlns:wcm="http://www.cc.cec/home/europainfo/tools/authoring/wcm/pst-10">
<body>
...
<wcm:linkgroup lg_id="33344"/>
...
</body>
</html>
Aspects
 Notation follows XML content
 Lower case
 No space use underscore instead
_
 XML namespace (prefix)
 wcm:
 Flexibility
 Boolean: y, n, yes, no, true…
 Non-fatal errors do not stop the
transformation
 Non-existing configuration
 Wrong label
 Make debug information available through a
report
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Transformation process of a document
Layout
Template
PST
Content transformation
 XSL: content XML -> XHTML fragment(s)
 XHTML fragment(s) is (are) inserted in
layout to create HTML page
layout
fragment
Content
XML
Content
XSL
fragment
fragment
Content markers
• Markers in the layout template bind content fragments to
specific locations
rel_links
Layout
Template
<wcm:content ref="body"/>
<wcm:content
ref="related_links"/>
body
Content
XSL
Content XSL
 Creates a fixed list of fragments
 Fragment bound in the layout template
 Standard set
 System-defined: not editable
 Currently: 1 content XSL provided
 Root of parallel structure
 Users choose one content XSL
Transformation process of a
document
Layout
Template
XML
MERGE
Content
XML
Content
XSL
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Purpose: site configuration
 Creates different views of a single layout
template
 Configures attributes of the layout template
 Any attribute can be configurable
 Defines variable for configurable attribute
 $placeholder
Configurable attributes
<wcm:links lg_id=“$myVar"/>
a dynamic
value
a “named
value”
“For document
index_en.xml it should
have the value 33344”
“For all the documents
in subsite A it should
have the value 55577”
Configuration
 Gives real values to one or several variables
 Use of the sub site hierarchy!
 Levels:
 Page configuration: document & all
translations
 Local configuration: only at subsite level
 Regular configuration: subsite hierarchy
 Precedence: page, local, subsite
 Examples:
 Page: for index page
 Configurations
 Properties files in parallel structure
 Simple text files
 Contain one or more name-value pairs:
“name = value”
Configuration files
Naming convention
Page:
 <doc>_zz.properties for document <doc_zz>.xml
 <doc>.properties for document <doc>.xml
 <doc>.script files <doc>.xml
Local: pst.local.properties
Regular: *.properties
 Recommendation: prefix “pst.”
Hierarchy and overriding
myVar=556
66
Layout
Template
Overriding
<wcm:links
lg_id=“$myVar"/>
myVar=123
45
myVar=333
44
Link group
33344
Link group
12345
Default values
<wcm:links lg_id=“$myVar?44000"/>
The value to look
for in the
properties files
The fallback value 44000 if
the lookup of the name
“myVar” failed.
Typical use
 Change the link group ID
 Activate or deactivate parts of the layout
 Change the ID of an HTML element
 Change the CSS class name
 ...
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Purpose: site configuration
 An external, reusable portion of a layout
 If important layout variation
 XML files located in the parallel structure
 Also created using the Template Language
<wcm:fragment
xmlns:wcm="http://www.cc.cec/home/europainfo/tools/authoring/wcm/pst-10">
<div>
<h1>My fragment</h1>
...
</div>
</wcm:fragment>
Referencing layout fragment
 Layout templates contain markers that indicate where a
specific fragment should be included
 Layout fragments cannot contain markers to other
fragments
Note:
using the combination of the relative path starting with “./” (e.g. “./fragment.xml”) and
an absolute path (e.g. “/internet/ec.europa.eu/my-website/default_fragment.xml”) is a
best practice to obtain good performance for the transformation from XML to HTML.
fragment.xml
<wcm:translate
Layout
Template
<wcm:area
ref=“./fragment.xml"/>
label=“my_title”/>
References
 Fragments can be referenced by
 Absolute path
 “/internet/ec.europa.eu/shared/home.xml”
 Local path
 “./local/home.xml”
 Only scans the folder of the document being regenerated
 Relative path
 “home.xml”
 Scans the sub site structure
Overriding
<h1>My fragment</h1>
additional.xml
Layout
Template
<h1>Video
List</h1>
Overriding
additional.xml
<h1>Video
Details</h1>
<h1>Video Details</h1>
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
XML dictionaries
 Label translations are now stored in dictionaries :
they are XML files with a language extension
(located in the parallel structure)
 1 file for each language
 Name: dictionary_[lang].xml
 Example: dictionary_nl.xml, dictionary_en.xml
<?xml version="1.0" encoding="UTF-8"?>
<labels lang="en">
<label key="lb_lg_select">Language selection</label>
<label key="edited">Edited</label>
</labels>
Custom label translations
 Global dictionaries are stored at the root of the
parallel structure and on each domain.
Default dictionaries exist in the root
(“/presentations”)
They contain the general translations found on any website:
contact, email, print...
If you need translations that are not yet supported by the global
dictionaries, you should first contact the CWCM helpdesk.
 Site specific label translations can be declared using
wcm:translate tag or as attribute in other tags.
They are declared in custom XML dictionaries
(which can also override label translations declared in the system
XML dictionaries)
 If the system cannot find translation of a label, the
PST engine displays the following text: UNKNOWN LABEL
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Resolution rules
 How the PST looks for external objects
 Fragments
 Configurations
 Dictionaries
 A regeneration always happens within the context
of a document
 The document on which the layout template is
applied
Root sub sites
 Determined by layout template
associated to document
 Root subsites may differ
for documents in same
subsite!
best practice: put
layout templates in the
same subsite!
 Location of layout template
determines
 Which documents can be
associated to it
 Which configurations
can influence them
/
Layout template
placed here
Resolution rules
 Fragment, configuration
files and CSS are searched
until the layout template of
a document is found
 The search will never go
higher
 Custom dictionaries are
only searched at 2 levels:
 System
 The location of the
layout template
myVar=33344
Layout
Template
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
What defines the HTML page for a
document?
Layout
Template
Content
XML
+
Chosen
configuration
Location in the sub
site
Content
XSL
Content
=
HTML
Rendition
Binding rules
 Binding rules describe for a document
 The layout template to use
 The configurations to use
 The content XSL to use
 Binding rules can also indicate if a document should use
the XSL approach
 For each sub site a set of binding rules can be declared
Document name
pattern
Basename of the
configuration files
The
binding
name.index_zz.xml = pst.my_layout.xml,pst.basic,pst.cnt.default.xsl
Rule by document
name
Layout template
The
condition
The content XSL
Possibilities
 Bindings
 PST
 [condition] = [layout template],[configuration],[content XSL]
 Standard (XSL approach)
 [condition] = standard
 Example: name.homepage_en.xml = standard
 Conditions
 By name
 By type
 type.short_content = [binding]
 Default rule
 default = [binding]
Applying the binding rules
 All the binding rules along the absolute path of a
document are considered
 The system will always evaluate the rules from
top to down
 The system uses the binding of the first rule for which the
condition matches
 The following binding rule is declared at the
highest level
 default=standard
 By default documents use the standard XSL approach
Binding rules files
Binding rules are currently stored in
properties files located in the parallel
structure
 Fixed name: binding.properties
 Only 1 binding rules document can exist at a
specific level.
Local binding: only at subsite level
 Fixed name: localbinding.properties
 Local binding properties can contain the same sort
of rules as regular binding properties.
 Used to declare binding rules that only apply at a
specific level and do not affect lower levels
Contain one or more rules
Multiple layout templates

A sub site can use more than 1 layout
template

Using the binding properties, documents of 1
sub site can be associated to different layout
templates
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Default classes produced by the PST
Style master
Repeating items
 euList
 euItem
 euBox
 euNbr_X
 euButtons
 euSqNr_X ( linkgroup only )
 euSlideShow
 euFirst
 euMediaGallery
 euLast
 euDynamicPanel
 euZebra
 euTabs
 euImg
…
…
What is “style” ?
Other structures
Automatic CSS linking
Generate HTML “link” statements



Collect all CSS with specific name until root
subsite
Collect local CSS
Advantages:



Facilitates site configuration
Special class which is put automatically on the
body tag
For example
<body class=”euShortContent”> for a short_content document ,
<body class=”euEventContent”> for an event document
The advantage of the class on the body tag is that with one CSS rule
you can influence the presentation of all web pages of one the
document type (short content, event..)
Customization levels
 HTML structure definition
Default PST classes
User-defined classes
Presentation style
 For PST components (tabs, calendar…)
 E.g. list, boxes, buttons
 Produces HTML structure + CSS classes
Customization levels
 The <wcm:library> element will include all the necessary files for
the chosen version, which is specified in the <wcm:layout>
element. All files depend on which version of the template is
used:
 2012: Is the default used by “wcm:library” element, when the
version attributes on “wcm:layout” are not defined or
“wcm:layout” is not present). The following files are included:
1. /wel/template-2012/stylesheets/ec.css
2. /wel/template-2012/stylesheets/ ec-ie.css
3. /wel/template-2012/stylesheets/ ec-lite.css
 2011 V02: The following files are included:
1. /wel/template-2011/v02/stylesheets/ec.css
2. /wel/template-2011/v02/stylesheets/ec-ie.css
User-defined presentation can be added.
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
Analysis of site requirements
 Define site structure
 Define layouts: global & variations
 Define graphical chart
 Validate against PST
Implementation steps
 Create site structure
 Define default layout template “pst.default.xml”
 Define configuration “pst.default.properties”
 Contains “isHomepage=false”, At Homepage level it is set to “True”.
According to the IPG rules, you should use H1 in the banner for the
home page. For the other pages you should use “<p>” in the banner.
 Define binding in root subsite “binding.properties”
 Contains
“default=pst.default.xml,pst.default,pst.cnt.default.xsl”
 Customize look and feel
 Define skin: CSS
 Create your dictionaries
 Reiterate for additional bindings and configurations
Agenda












Benefits of the PST system
General ideas and concepts of the PST
Layout templates
Content transformation
Configurations
Layout Fragments
Label & Dictionaries
Object resolution rules
PST associations
Customize look & feel
Exercise : Create a website
More information
More information
Europa Management Helpdesk
European Commission
DG COMM Unit A.5.006
MADO 06/098
B-1049 Brussels/Belgium
+32 2 299 79 69
Email: [email protected]
Web:
http://ec.europa.eu/ipg/tools/wcm-portal/index_en.htm
Questions &
Answers