cascade server for developers vince ruppert college of liberal arts boilerweb 2011
TRANSCRIPT
![Page 1: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/1.jpg)
Cascade Server for Developers
Vince RuppertCollege of Liberal Arts
BoilerWeb 2011
![Page 2: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/2.jpg)
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
![Page 3: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/3.jpg)
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
![Page 4: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/4.jpg)
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
![Page 5: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/5.jpg)
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
![Page 6: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/6.jpg)
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!
![Page 7: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/7.jpg)
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
![Page 8: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/8.jpg)
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
![Page 9: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/9.jpg)
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>
![Page 10: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/10.jpg)
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>
![Page 11: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/11.jpg)
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
![Page 12: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/12.jpg)
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
![Page 13: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/13.jpg)
Regions, Blocks, and Formats example
![Page 14: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/14.jpg)
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
![Page 15: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/15.jpg)
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
![Page 16: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/16.jpg)
Current Page Index Block
![Page 17: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/17.jpg)
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>
![Page 18: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/18.jpg)
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
![Page 19: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/19.jpg)
Index Block for folder navigation
![Page 20: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/20.jpg)
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>
![Page 21: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/21.jpg)
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
![Page 22: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/22.jpg)
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
![Page 23: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/23.jpg)
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
![Page 24: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/24.jpg)
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
![Page 25: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/25.jpg)
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()
![Page 26: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/26.jpg)
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>
![Page 27: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/27.jpg)
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
![Page 28: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/28.jpg)
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']]"))
![Page 29: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/29.jpg)
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
![Page 30: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/30.jpg)
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
![Page 31: Cascade Server for Developers Vince Ruppert College of Liberal Arts BoilerWeb 2011](https://reader035.vdocument.in/reader035/viewer/2022062516/56649e0c5503460f94af491e/html5/thumbnails/31.jpg)
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