cascade server for developers vince ruppert college of liberal arts boilerweb 2011
TRANSCRIPT
Cascade Server for Developers
Vince RuppertCollege of Liberal Arts
BoilerWeb 2011
Purpose
• Help those of you who have not yet started to fully develop web sites in Cascade Server
• Share experiences and helpful tips with those who are currently developing sites in Cascade
Outline
• Overview of the system• Main building blocks: Templates, Blocks,
Formats– Most development time will be spent working
with blocks and formats
• Examples from current sites developed in Cascade
Overview of the system
• Main areas are similar to Serena Collage– Actions across the top– Site navigation on left– “Current view” area on the right
• Developers will be using Administration area
When creating a new site
• The first thing you should do is upload static template-related elements such as images, CSS files, JavaScript, or anything else referenced in your HTML template
• Do not put CSS/image files inside the _internal folder as this folder is not set to publish
CSS files
• CSS files should use Cascade’s method of internally linking to images using the[system-asset] tags.
• Example:#mainbox { background-image:url("[system-asset]/images/body-top.jpg[/system-asset]");}
• Make sure you enablelink re-writing!
Templates, Blocks, Formats
• A Template is a file which contains the basic HTML structure of your website along with regions defined in place of dynamic content
• A Block is either an editable piece of content (XHTML or Data Definition) or an Index Block which dynamically grabs data
• A Format parses the data in a Block and translates it to HTML
Templates
• Template files should only contain static HTML that you are certain will never change
• Anything dynamic should be replaced with a region using the tag:<system-region name=“something”/>– Must have at least one region named “default”.
• Each region defines a location in the HTML where a Block will be placed
Template example<html><head> <title>FISP : Fédération Internationale des Sociétés de Philosophie</title> <link rel="stylesheet" type="text/css" href=“/_template/styles.css" /></head><body> <div id="wrapper"> <h1>Fédération Internationale des Sociétés de Philosophie</h1> <div id="leftcolumn"> <div id="navlist"> <system-region name="folder"/> </div> </div> <div id="rightcolumn"> <system-region name="DEFAULT"/> </div> <div id="footer“> <p>Copyright © 2011 Fédération Internationale des Sociétés de Philosophie</p> </div> </div></body></html>
Templates
• Unlike for CSS files, you do not need to use [system-asset] tags when linking to files in a Template.
• Template must remain valid (well-formed) XHTML after addition of regions.– Can’t have this: <body> <div id=“header”> <system-
region name=“header”/> </body>
Templates
• After the template has been added, the next step is usually adding a configuration set and a content type. Now you can assign the template to a page.
• If no Data Definition is selected, a WYSIWYG field is used for the Default region
• Even with a data definition, the default region shouldn’t have a block assigned to it. Eventually you should create a format for the default region
Blocks and Formats
• All content not in your static HTML Template file will come from Blocks
• Blocks are assigned to Template regions• XHTML Blocks are like “content includes”• Index Blocks generate XML, so you should
assign a Format to an index block to convert the XML to HTML
Regions, Blocks, and Formats example
Index Blocks
• Index Blocks will contain a lot more data than you will use
• Goal is to create index blocks which contain just enough information you need to display without being too broad
• It’s the job of a Format to parse through all of the XML data and show only information you want to display
Current Page Index Block
• The most common Index Block is one that simply grabs all the current page’s data for use in a particular region
• Useful for outputting:– Page headlines– Metadata or using metadata values as logic– Page content outside the Default region
Current Page Index Block
Current Page Index Block• Might produce something like this:
<system-index-block><calling-page>
<system-page current="true"><name>index</name><title>College Resources</title><path>/resources/index</path><site>CLA Main</site><link>site://CLA Main/resources/index</link><dynamic-metadata>
<name>banner_size</name><value>Large</value>
</dynamic-metadata><system-data-structure definition-path="CLA main">
<headline>Resources in the College</headline><main_content>(Main Content)</main_content>
</system-data-structure></system-page>
</calling-page></system-index-block>
Index Block for folder navigation
• Either points to an absolute folder (top level) or relative to current page
• Can restrict how many levels deep the index block will look
• Whenever possible, try to avoid rendering XML inline
Index Block for folder navigation
Index Block for folder navigation• Might produce something like this:<system-index-block>
<system-page><name>index</name><path>/index</path><link>site://FISP/index</link><system-data-structure>
<pagetitle>What is FISP?</pagetitle><content>Lots of page content</content>
</system-data-structure></system-page><system-page>
<name>olympiad</name><path>/olympiad</path><link>site://FISP/olympiad</link><system-data-structure>
<pagetitle>Olympiad</pagetitle><content>Lots of page content</content>
</system-data-structure></system-page>
</system-index-block>
Formats
• Now that we have the information we want to use in an Index Block, we need to assign a Format to parse the information and display HTML
• There are two types of Formats you can use in Cascade: XSLT or “Script” (Velocity)
• Covered in this presentation are Script Formats due to their similarity to a structured programming language
Formats
• Script Formats in Cascade Server use a combination of 3 other languages: Apache Velocity, JDOM, and XPath
• A bit confusing because you could use all 3 languages in a single line of code but you will commonly only use a couple commands from each language
Apache Velocity
• Syntax often starts with a pound (hash) sign: #• Commonly used commands are #set, #if,
#foreach and #end, along with the variable notation with dollar signs such as $variable
• Used in conjuncture with JDOM
XPath
• XPath is what it used to traverse and parse the XML contained in a Block
• Lots of documentation available online with examples
• Also use XPath with XSLT Formats
JDOM
• A much larger specification than Velocity• Common methods used with variables:
getChild(‘child’), getAttribute(‘attribute’), getParent(), and isEmpty()
• Common methods used with XPath in Cascade: selectNodes(), selectSingleNode()
Example: Get and display headline<system-index-block> <calling-page> <system-page current="true"> <name>index</name> <title>College Resources</title> <path>/resources/index</path> <site>CLA Main</site> <link>site://CLA Main/resources/index</link> <dynamic-metadata> <name>banner_size</name> <value>Large</value> </dynamic-metadata> <system-data-structure> <headline>Resources</headline> <maincontent>(Main Content)</maincontent> </system-data-structure> </system-page> </calling-page></system-index-block>
#set($sds = $_XPathTool.selectSingleNode($contentRoot,”/system-index-block/calling-page/system-page/system-data-structure”))#set($headline = $sds.getChild(‘headline’))
<h2>${headline.value}</h2>
OR, a bit less code:
#set($headline = $_XPathTool.selectSingleNode($contentRoot,”//system-data-structure/headline”))
<h2>$headline.value</h2>
Example: Display navigation<system-index-block> <system-page> <name>index</name> <path>/index</path> <link>site://FISP/index</link> <system-data-structure> <pagetitle>What is FISP?</pagetitle> <content>Content</content> </system-data-structure> </system-page> <system-page> <name>olympiad</name> <path>/olympiad</path> <link>site://FISP/olympiad</link> <system-data-structure> <pagetitle>Olympiad</pagetitle> <content>Content</content> </system-data-structure> </system-page></system-index-block>
#set($pages = $_XPathTool.selectNodes($contentRoot,”/system-index-block/system-page”))#foreach($page in $pages) <a href=“$page.getChild(‘link’).value”>$page.getChild(‘system-data-structure’).getChild(‘pagetitle’).value</a>#end
OR, want the index page to be displayed differently?
#set($pages = $_XPathTool.selectNodes($contentRoot,”//system-page”))#foreach($page in $pages) #if($page.getChild(‘name’).value == ‘index’) <a class=“index” href=“$page.getChild(‘link’).value”>$page.getChild(‘system-data-structure’).getChild(‘pagetitle’).value</a> #else <a href=“$page.getChild(‘link’).value”>$page.getChild(‘system-data-structure’).getChild(‘pagetitle’).value</a> #end#end
Advanced examples• The following creates a breadcrumb trail of index pages, starting at the
current page (@current = ‘true’) and then finding system-folder ancestors and their respective index pages.
• #set($breadcrumbs = $_XPathTool.selectNodes($contentRoot,"//system-folder[@current='true']/ancestor::system-folder/system-page[name = 'index']"))
• The following grabs pages that should appear on the left navigation for the current page. First we grab all pages which are not index pages in the current folder and all index pages in sub-folders and merge these results together (by use of the pipe symbol which means “or”). Then we also filter out any page where the ‘hide’ metadata option is set to ‘Left sidebar’.
• #set($siblings = $_XPathTool.selectNodes($starting_folder,"(system-page[name!='index'] | system-folder/system-page[name='index'])[dynamic-metadata[name='hide'][value!='Left sidebar']]"))
Asset Factories
• Asset Factories make it easy to create new pages with an automatically assigned content type
• After you have everything working with your configuration set and content type, create a blank page and copy it into the “/_internal/base assets” folder
• Now you can create an asset factory using this base asset
Migrating from Serena Collage
• AssetQuery, NavBar now handled by Index Blocks and XPath
• Select now handled by Velocity’s #if statements
• Ampersands do not work in non-WYSIWYG fields (use & if you must use one)
• Ampersands and parentheses do not work in filenames
Resources• Script Formats:
http://www.hannonhill.com/kb/Script-Formats/– Velocity: http://
velocity.apache.org/engine/releases/velocity-1.5/user-guide.html
– JDOM: http://www.jdom.org/docs/apidocs/org/jdom/Element.html
– XPath: http://msdn.microsoft.com/en-us/library/ms256086.aspx
• Cascade Support Forum: http://help.hannonhill.com/discussions
• ITaP Cascade Wiki: https://wiki.itap.purdue.edu/display/INFOCMS/Cascade+Documentation