Technical Guide Primer

Check out the PDF version of the Technical Guide Primer.

Introduction 

Welcome to the Cascade Server Technical Guide Primer! The purpose of this guide is to give novice users a basic introduction to Cascade Server and walk through creating a simple website from scratch. After completing this guide, you will have:

  • Created a new site template with multiple regions
  • Created pages based on new template
  • Created printer friendly version of pages
  • Created an asset factory for new easy creation of new pages
  • Attached metadata to pages
  • Created structured data fields for pages
  • Published out site 

Estimated completion time: 1 hour

    A. Create a New Site

    We will begin by running the new site wizard. The new site wizard is a time-saving convenience tool that sets up folders and other site-specific components for you; otherwise, these would have to be created manually. In later guides, all the various components needed for a site will be explained in detail.

    To create a new site:

    1. Click Home on the menu bar.
    2. Select Tools -> Import -> New Site from the menu bar.
    3. For the Site Name field, type intro.
    4. When finished, click Submit to create the new site.
      New Site Wizard

    After the new site wizard runs, you'll notice a new base level folder titled intro. Inside is another folder titled _internal containing four more folders: asset factories, blocks, stylesheets, and templates. As per established best practices, it is recommended that these folders are used to store their respective objects, but this is by no means required and the folder structure can be altered to suit individual needs or preferences. If used as recommended, these folders will only contain objects used by Cascade Server and never published out to a web server. Therefore, the new site wizard marks these folders to be excluded from indexing and publishing (you can verify this via the edit tab on the individual folders).

    B. Create a New Template

    After running the new site wizard, the next step is to create a new template. A template is the XML/HTML framework whereby content regions are defined. Templates contain one or more regions that specify areas where content blocks and stylesheets can be applied. The template serves as a basic layout structure for pages in the site and provides a mechanism for aggregating multiple pieces of content together.

    To create a new template:

    1. In the left asset tree, navigate to the newly created templates folder at /intro/_internal/templates.
    2. Select New -> Default -> Template from the menu bar.
      Create New Template Screenshot
    3. Type the following code in the XML box:
      <html>
         <head>
            <title>Intro Site</title>
         </head>
         <body>
            <system-region name="DEFAULT"/>
         </body>
      </html>
    4. Click on the System pane to give the template a name. In the System Name field, type html.
    5. Click the browse icon next to Target. A target is a site definition object whose purpose and importance will be explained in following guides. Select the intro target (which was created automatically by the new site wizard) and click confirm.
      Name Template Screenshot
    6. When finished, click Submit to save the new template.

    The system-region tag is the most basic and essential pseudo code that Cascade Server provides. This defines regions within templates where content can be inserted in the form of blocks. All templates must include a DEFAULT region, which will be populated with individual page content. To create additional content regions, simply write a new system-region tag and replace the word "DEFAULT" with any other name you like.

    C. Create a New Configuration Set

    With your template complete, you need a way to tie the template to pages; this is done with a configuration set.

    To create a new configuration set:

    1. Click Administration on the menu bar.
    2. Click Configuration Sets in the left side menu.
    3. Click New Configuration Set.
      New Configuration Set Screenshot
    4. For the Name field, type Standard.
    5. Click the folder browse icon for the Parent Container and select intro.
    6. Click on the Configurations pane.
    7. In the Add section, attach a template by clicking the template browse icon and selecting the intro/_internal/templates/html template in the pop up window. Click confirm.
    8. Type HTML in the Name field.
      Add Configuration Screenshot
    9. Click Add this new configuration with the above template and name in order to save the configuration.
    10. Additional properties will now be made available. Check the box marked default configuration, if not already checked.
    11. When finished, click Submit to save the new configuration set.

    You may be asking: why not just point each page directly to the template? Well, there are several reasons why using a configuration set is beneficial. Primarily, a configuration set is used to tie several different templates to a single page. Because multiple templates can be created for various content output types (HTML, WML, PDF, RTF, and XML among others), a configuration set is used to tie an array of templates to a page. Secondly, a configuration set allows a single template to be used across an entire site, while allowing different blocks and stylesheets to be applied to the template's regions. For example, if there is a set of pages using one template that has a specified footer block, but some of those pages do not need that footer block, then you would create two configurations in your configuration sets – one that has the footer block assigned and another that does not. By having two configurations, the site will still have one template but two sets of pages that have different content plugged in its regions. Lastly, a configuration set allows for easy template association changes. Without a configuration set, each page in a site would have to be individually updated if you were to add or remove a template. By pointing each page to a configuration set, you only have to update the configuration set itself to add or remove template associations. If this is all a bit confusing, just read on; the importance of the configuration set will become more clear by the end of this guide.

    D. Create a New Page Using this Configuration Set

    With your configuration set now ready, you can create a new page based on the template associated with this configuration set.

    To create a new page:

    1. Click Home on the menu bar.
    2. Click on the intro folder in the left asset tree.
    3. Select New -> Default -> Page from the menu bar.
      New Page
    4. In the WYSIWYG editor, type in Hello, world! This is my first page!.
    5. Click the System pane and type example in the System Name field.
    6. Verify that the Parent Folder is already set to intro. If not, click the folder browse icon, select intro from the pop-up window, and click Confirm.
    7. For Configuration Set, click the browse icon, select intro/Standard, and click Confirm.
      Page System Pane
    8. When finished, click Submit to save the new page.

    Congratulations! You've created your first site and page entirely from scratch. Subsequent pages are much faster to create, as you can simply copy this page as many times as you wish or, as we'll see soon, you can create an asset factory based on this page which can be used to quickly create similar pages.

    E. Create Header and Footer Regions in the Template

    Now that we've created a page based on a simple one-region template, we'll expand the template to include two more regions: header and footer regions into which we will plug content into in the form of blocks.

    To add the two additional regions:

    1. Open the intro/_internal/templates/html template and click the Edit tab.
    2. Add a header and footer regions to the template. The final html should be as follows:
      <html>
         <head>
            <title>Intro Site</title>
         </head>
         <body>
            <system-region name="HEADER"/>
            <system-region name="DEFAULT"/>
            <system-region name="FOOTER"/>
         </body>
      </html>
    3. When finished, click Submit to update the template.

    Our template now contains three regions, but if you go back to the example page, you only see content it the default region. This is because we haven't associated any content blocks to these new regions. Next we will create blocks for these two regions and plug them into the template.

    F. Create a Header Block

    First we will create a block for the header region. In this block we will download an image and plug it into the header region.

    To create the header block:

    1. Click on the intro folder and select New -> Default -> Folder from the menu bar.
      New Folder
    2. Type files into the System Name field and click Submit to create the new folder.
    3. Visit hannonhill.com and download the Hannon Hill logo to your desktop.
    4. Select New -> Default -> File from the top menu bar.
      New File
    5. In the Upload section, use the file uploader and select the Hannon Hill logo from your desktop.
    6. Click Submit to create the new file.
    7. Click on intro/_internal/blocks and select New -> Default -> Block from the menu bar.
      New Block
    8. Select XHTML Block from the list of block types and click Submit.
    9. In the WYSIWYG editor, click the Insert/edit image button and attach the logo image by clicking image browse icon, selecting /intro/files/logo.png and clicking Confirm.
    10. Type Logo into the Alternate Text field and click Insert.
      Insert Image
    11. Center the logo by clicking the Align center button.
    12. Click the System pane and type header into the System Name field.
    13. When finished, click Submit to save the new block.

    G. Create a Footer Block

    Next we will now create a block for the footer region. In this block we will type in copyright informations and plug it into the footer region.

    To create the footer block:

    1. Click on intro/_internal/blocks and select New -> Default -> Block from the menu bar.
    2. Select XHTML Block from the list of block types and click Submit.
    3. In the WYSIWYG editor, click the Horizontal rule button, type 75 in the width field, select % from the width dropdown, and click Insert.
    4. Below the horizontal rule, type Copyright 2008. All rights reserved. and center the text by clicking the Align center button.
      Footer WYSIWYG
    5. Click the System pane and type footer into the System Name field.
    6. When finished, click Submit to save the new block.

    H. Assign Header and Footer Blocks to Regions in Template

    Now that we have the blocks created we need to plug them into the template regions that we created earlier

    To assign the blocks to the template regions:

    1. Open the intro/_internal/templates/html template and click the Edit tab.
    2. Click on the Regions pane.
    3. Click the block browser icon in the header region, select intro/_internal/blocks/header, and click Confirm.
    4. Click the block browser icon in the footer region, select intro/_internal/blocks/footer, and click Confirm.
      Assign Blocks
    5. When finished, click Submit to update the template.

    Our three-region template now contains content in all three regions. If you navigate to the /intro/example page, you'll notice that that the content blocks in the header and footer regions are now displayed.

    I. Create a Printer Friendly Template

    At this point in the site design phase, repurposing content for different uses becomes very easy. Say we wanted to make a printer friendly version of our page by stripping the header and footer regions, leaving only the page's DEFAULT region content. We can easily do this by setting up a second template that only contains this one region.

    To create a printer friendly template:

    1. Open the intro/_internal/templates/html template and click the Copy tab.
    2. Type printer into the System Name field and click Submit.
    3. Click Edit on the new printer template.
    4. The printer friendly version of the page should not include the header or footer regions, so remove the 2 lines that contain these regions. The final html should be as follows:
      <html>
         <head>
            <title>Intro Site</title>
         </head>
         <body>
            <system-region name="DEFAULT"/>
         </body>
      </html>
    5. When finished, click Submit to update the template.

    J. Assign Printer Friendly Template to Configuration Set

    The importance of the configuration set will now become more clear as we add a second template to handle the printer friendly version of our pages.

    To assign the printer friendly template to the configuration set:

    1. Click Administration on the menu bar
    2. Click Configurations Sets in the left side menu.
    3. Open the intro/Standard configuration set and click on the Edit tab.
    4. Click on the Configurations pane.
    5. In the Add section, attach a template by clicking the template browse icon and selecting the intro/_internal/templates/printer template in the pop up window.
    6. Type Printer Friendly in the Name field.
      Printer Friendly Template
    7. Click Add this new Configuration.
    8. When finished, click Submit to update the configuration set.

    If you navigate back to the intro/example page, you should now see the two different outputs at the top of the page: HTML and Printer Friendly. Notice that Cascade is only using the content of the page once, but by setting up different templates, the content is repurposed to fulfill different needs. This is only the tip of the iceberg as far as content repurposing goes. In later guides we will show you how to setup PDF, XML, RTF, and WML output types.
    Content Output Types

    Advanced Topic: The same result could be achieved in this step by reusing the html template and checking the "No Block" check boxes next to the header and footer regions for the printer friendly configuration. This configuration would use the same template for both outputs, but would plug the blocks into the HTML output and not the printer friendly output.

    K. Add Metadata to Page

    Metadata is simply data that describes an asset. Common fields such as title, summary, and keywords provide quick information about the content contained inside of a particular asset. Cascade Server uses two types of metadata: wired and dynamic. Wired metadata fields are the default fields included in the system where dynamic metadata fields are custom fields created by the end user. Your organization may choose to add custom metadata fields, based on your individual needs. Besides being a powerful organizational tool, metadata can help boost your search engine rankings. When search engines catalog websites, they extract certain metadata fields from pages and use it as a basis for search results. The more descriptive you are, the greater chance there is that your page will be returned higher on search engine results.

    To add metadata to a page:

    1. Open the intro/example page and click the Edit tab.
    2. Click on the Metadata pane.
    3. Type Example Page into the Title field.
    4. Type This is a summary of the example page into the Summary field.
    5. Type Intro, Example, Page into the Keywords field.
    6. Type Intro User into the Author field.
      System Metadata
    7. When finished, click Submit to update the metadata on this page.

    In its current state, the metadata is only informational. In later guides, we will show you how to use this metadata throughout your site and also how to have some of this data placed in the <head> of your published pages for search engine optimization.

    L. Create an Asset Factory

    An Asset Factory is a way of providing a quick and easy way to create a specific type of asset or specially configured page - for instance, a new file upload or a press release.

    To create a new asset factory:

    1. Open the intro/example page and click the Copy tab.
    2. Type page into the System Name field.
    3. Click the parent folder browser icon, select intro/_internal/asset factories, and click Confirm.
    4. When finished, click Submit to copy the page.
    5. Click Administration on the menu bar
    6. Click Asset Factories in the left side menu.
    7. Click New Asset Factory.
      New Asset Factory
    8. For the Asset Factory Type, select Page and click Submit.
    9. For the Name, type Page.
    10. Click the container browse icon for Parents Container, select intro and click Confirm.
    11. Click the asset browse icon for Base Asset, select intro/_internal/asset factories/page, and click Confirm.
    12. Click the folder browse icon for Placement Folder, select intro, and click Confirm.
    13. Select all groups and click the green arrow button to give access of this asset factory to all groups.
      Asset Factory General Pane
    14. When finished, click Submit to create the asset factory.

    With the asset factory created, you will now see it appear in the New menu on the top menu bar. Next, we will use this asset factory to quickly create new pages.

    M. Use New Asset Factory to Create Page

    Since we have an existing page that we've turned into an asset factory, we can quickly create new pages based on the structure of the existing page.

    To create a page using new asset factory:

    1. Select New -> intro -> Page from the menu bar.
      New Page
    2. The content from the original page is already there, which we can add to or completely change. In the WYSIWYG editor, type in Hello, world! This is my second page!
    3. Click on the System pane and type page2 in the System Name field.
    4. All settings are the same as the base asset, so we can now just click Submit to create our new page.

    N. Create a Data Definition

    Data definitions are used by Cascade Server to generate pages whose content comes via forms-based input fields. A series of forms is presented to the author of a page and the content entered is then stored as pure XML upon submission. Administrators can transform the XML data using an XSLT stylesheet for the purpose of presentation or multi-purposing. Here, we will create a simple data definition that will be used to issue press releases.

    To create a new data definition:

    1. Click Administration on the top menu bar
    2. Click Data Definitions in the left side menu.
    3. Click New Data Definition.
      New Data Definition
    4. For the Name field, type Press Release.
    5. Click the container browse icon for Parent Container and select intro.
    6. In the XML box, type the following:
      <system-data-structure>
         <text identifier="title" label="Title" />
         <text identifier="content" label="Press Release" multi-line="true" />
         <text identifier="about" label="About the Company" multi-line="true" />
         <group identifier="contact" label="PR Contact">
            <text identifier="person" label="Name" />
            <text identifier="phone" label="Phone" />
            <text identifier="email" label="Email" />
         </group>
      </system-data-structure>
    7. When finished, click Submit to create the data definition.

    Once created, the form fields in the data definition will be displayed. We can now attach this data definition to a new page to issue a new press release.

    O. Attach Data Definition to New Page

    Now we'll create a new page using our asset factory and use the data definition to issue a new company press release

    To create a new press release:

    1. Select New -> intro -> page from the menu bar.
    2. Instead of adding content, switch over to the System pane.
    3. Type press release 1 into the System Name field.
    4. Click the asset browser next for Data Definition, select intro/Press Release, and click Confirm.
    5. Check the box next to Use Data Definition.
      Attach Data Definition
    6. When finished, click Submit.
    7. To enter content, we must now re-edit this page with the data definition attached. Click on the Edit tab for the press release 1 page.
    8. Instead of the WYSIWYG editor, you now see the fields defined in the data definition. Fill in all 6 fields.
      Data Definition Fields
    9. When finished, click Submit to update page.

    After you submit the press release data via the data definition fields, you'll notice that the resulting content has no formatting. This is because the data is stored as pure XML. Next, we'll create an XSLT stylesheet to provide nicer presentation.

    P. Create XSLT Stylesheet for XML Formatting

    Our next step is to create an XSLT stylesheet to apply to our data definition page.

    To create an XSLT stylesheet:

    1. Select New -> Default -> Stylesheet from the menu bar.
    2. In the XML box, type the following:
      <?xml version="1.0" encoding="UTF-8"?>
      <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
         <xsl:template match="system-data-structure">
            <h2><xsl:value-of select="title"/></h2>
            <p><xsl:value-of select="content"/></p>
            <h4>About the company:</h4>
            <p><xsl:value-of select="about"/></p>
            <xsl:apply-templates select="contact"/>
         </xsl:template>
         <xsl:template match="contact">
            <fieldset>
            <legend><b>Contact Information</b></legend>
            <b>Contact: </b><xsl:value-of select="person"/><br/>
            <b>Phone: </b><xsl:value-of select="phone"/><br/>
            <b>Email: </b><xsl:value-of select="email"/>
            </fieldset>
         </xsl:template>
      </xsl:stylesheet>
      New Stylesheet
    3. Click on the System pane.
    4. For the System Name field, type press-release.
    5. When finished, click Submit.

    If you return to the intro/press release 1 page, you'll notice the page data is still not formatted. This is because we haven't attached the stylesheet to anything. We could attach the stylesheet to the DEFAULT region in the template, but the stylesheet would then be applied to every page using that template. Since that's not what we're going for in this case, we'll attach the stylesheet to the page itself.

    Q. Attach Stylesheet to Press Release Page

    To attach the stylesheet at the page level:

    1. Open the intro/press release 1 page.
    2. Click the Edit tab.
    3. Click the Configurations pane.
    4. Click the stylesheet browse icon for the DEFAULT region, select the intro/_internal/stylesheets/press-release stylesheet and click Confirm.
      Attach Stylesheet
    5. When finished, click Submit.

    The stylesheet is now attached to the intro/press release 1 page. If you view this page, the formatting should now match what is laid out in the stylesheet. Next we'll create a copy of this page to act as a base asset for a new press release asset factory. Once created, users can easily create pre-styled press releases with no required knowledge or XML formatting. Furthermore, when site designers decide to change the formatting in the stylesheet, the changes will apply to all subscribed pages retroactively!
    Pace Utilizing Stylesheet


    R. Create Asset Factory from Press Release Page

    Now that we have a press release page with an attached data definition and XSLT stylesheet, we can create an asset factory of this page to easily create future press releases.

    To create an asset factory of this page:

    1. Open the intro/press release 1 page.
    2. Click the Copy tab.
    3. Type Press Release into the System Name field.
    4. Click the folder browse icon for Parent Folder, select intro/_internal/asset factories, and click Confirm.
    5. When finished, click Submit to copy the page.
    6. Click on the Edit tab of the copied page.
    7. To prevent the content of the original page from appearing every time we use this asset factory, go ahead and remove the content from all 6 fields.
    8. When finished, click Submit to update the page.
    9. Click Administration on the menu bar.
    10. Select Asset Factories from the left side menu.
    11. Click New Asset Factory.
    12. Select Page for the Asset Factory Type and click Submit.
    13. Type Press Release in the Name field.
    14. Click the folder browse icon for Parent Folder, select intro, and click Confirm.
    15. Click the page browse icon for Base Asset, select intro/_internal/asset factories/Press Release, and click Confirm.
    16. Click the folder browse icon for Placement Folder, select intro, and click Confirm.
    17. Select all groups and click the green arrow button to give access of this asset factory to all groups.
      Press Release Asset Factory
    18. When finished, click Submit to create the new asset factory.

    This asset factory should now appear in New -> intro on the top navigation bar. You can now use this asset factory to quickly create new press releases that are structured and presented in the same way as the original. If administrators ever want to change the formatting, they would only have to modify the stylesheet and changes would automatically propagate to all subscribing pages. Next we will publish out our entire site.

    S. Create a Transport for Publishing

    Transports are the mechanisms that move content from Cascade Server to the final web server. Transports can push content out via FTP/SFTP or through a type of file system like a VPN, mapped network drive, shared drive, or mounted drive. Transports can even publish content out to a MySQL database for use by separate applications.

    To create a new transport:

    1. Click Administration on the menu bar.
    2. Select Transports in the left side menu.
    3. Click New Transport.
      New Transport
    4. Select Filesystem for the Transport Type and click Submit.
    5. Type Server Output into the Name field.
    6. For the Server Directory field, type in a path to a local directory that you have access to.
    7. When finished, click Submit.

    T. Create a Destination for Publishing

    Destinations are very similar to transports, but they are set for specific sites. This allows for the reuse of transports across multiple sites. If transports were set at the site level, then a change to the web server (say, a change to credentials) would require updating every transport that published to that server. By using destinations as an intermediary that simply point a site to a specific transport, then a change to the web server would only require one change to the transport.

    To create a new destination:

    1. Click Targets & Destinations in the left side menu.
    2. Select the intro target and click New Destination. Again, a target is a site definition file that will be explained in detail later on.
    3. Type Local Server into the Name field.
    4. Click the transport browse icon next to Transport, select File System/Server Output, and click Confirm.
    5. Verify that the Enable destination checkbox is checked.
    6. Select all groups and click the green arrow button to give access of this destination to all groups.
      New Destination
    7. When finished, click Submit.

    You can now use this transport / destination combination to publish out pages from the intro site.

    U. Publish Out the Intro Site

    We will now publish out the intro site to the filesystem

    To publish out the site:

    1. Click Home in the menu bar.
    2. Click on the base folder for the intro site.
    3. Click on the Publish tab for the intro folder.
    4. You should see the intro/Local Server destination as available for publishing to. Make sure that's the only destination checked and click Submit.
      Publish Site

    The site should have published out (Give it a minute or so to complete). Check the directory that you set up in the transport and verify that all the pages we created published out correctly. You'll notice that none of the assets in the intro/_internal folder published out. That is because those assets are only used by Cascade Server and will never be needed by the final web server.

      Knowledge Base Beta Feedback Form