page templating tutorial

Download Page Templating Tutorial

Post on 29-Jan-2017

212 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • Page Templating Tutorial OU Campus

    OmniUpdate, Inc. 1320 Flynn Road, Suite 100

    Camarillo, CA 93012

    http://www.facebook.com/omniupdatehttps://plus.google.com/u/1/110785395452354106347http://www.linkedin.com/companies/105547http://omniupdate.com/syndication/aggregate.xmlhttps://twitter.com/omniupdatehttp://www.youtube.com/user/OmniUpdateCMS

  • OU Campus Page Templating Page 2 of 84

    OmniUpdate, Inc. 1320 Flynn Road, Suite 100 Camarillo, CA 93012 800.362.2605 805.484.9428 (fax) www.omniupdate.com Copyright 2013 OmniUpdate, Inc. All rights reserved. Document Number: G104.4 3/11/2013 OmniUpdate and OU Campus are trademarks or registered trademarks of OmniUpdate, Inc. Any other company and product names, and trademarks mentioned within are property of their respective owners. Content is subject to change without notice.

    About OmniUpdate, Inc. OmniUpdate is the leading web content management system (CMS) provider for higher education. OmniUpdates enterprise web CMS, OU Campus, empowers institutions to effectively manage and enhance their web presence and take advantage of the latest web and mobile technologies. Founded in 1982, OmniUpdate is located in Camarillo, CA.

    About This Guide The Page Templating Tutorial guides users through the process of creating new page templates using existing XSL files. The guide is intended for template developers of OU Campus. It includes overview topics and step-by-step procedures for creating new page templates.

    OU Campus Support The Support site is available to everyone and users are encouraged to visit and browse the site for information. An institutions administrators are also available if the answer cannot be found on the Support site or further explanation and clarification is needed. Administrators may contact the OmniUpdate Support Team. Ways to access the OU Campus support documentation include:

    Support site: http://support.omniupdate.com/ The help link in the main interface of OU Campus The WYSIWYG Help link Help links embedded in the system Text instructions are provide onscreen for specific fields and functionality OmniUpdate Community Network (OCN): http://ocn.omniupdate.com/

    Conventions Shorthand for navigation through the OU Campus CMS is indicated with a greater-than sign and bolded: > For example, Setup > Sites. Code snippets use Courier New and a shaded background.

    http://www.omniupdate.com/http://support.omniupdate.com/http://ocn.omniupdate.com/

  • OU Campus Page Templating Page 3 of 84

    Contents

    Contents ................................................... 3 Introduction .............................................. 5

    Components ........................................... 5 Terminology ............................................ 5

    Creating the Initial PCF ............................ 6

    Example HTML .............................................. 6

    Parsing the File to Create XSL and

    PCF .................................................................. 11

    Creating Initial HTML File ................. 11

    Converting the HTML File to a PCF

    ...................................................................... 13

    Example PCF ........................................... 15

    Example Using Multiple PCF-

    Stylesheet Declarations ...................... 16

    Creating Editable Regions and WYSIWYG Styling .................................. 19

    Making the File Editable in the WYSIWYG19 Creating Multiple Regions ..................... 20 Adding In-Context Styling to the WYSIWYG Editor ................................. 21

    Creating In-Context Editing Files ....... 22

    Adding the Editor Tag to the Editable

    Regions .......................................................... 23

    Creating the Styles Drop-Down File 26

    Configuring Page Parameters and Properties ............................................... 29

    Configuring the Page Parameters ......... 29

    Adding the Meta Data ........................... 31

    Creating Page Properties ...................... 31

    Turning the PCF to a TMPL ................... 35

    Examples of Other TMPLs .................... 39

    LEFTNAV.TMPL ........................................... 39

    PROPERTIES.TMPL..................................... 39

    Creating the TCFs ..................................40 Creating a New Page TCF .................... 40

    Title.................................................................. 40

    Variable List ................................................. 40

    Template List............................................... 42

    Navigation List ........................................... 43

    Complete TCF Code ................................ 43

    Notes on Filenaming ............................... 45

    Creating a New Section TCF ................ 47

    Complete Section TCF Code ................ 48

    Converting Common Variables to Includes ................................................ 50

    Creating the Common Variables and

    Navigation Includes ................................. 51

    Creating the Section Templates

    Include ........................................................... 52

    Expanding the TCF.................................54 Adding a Mini-WYSIWYG Editor to New Page Creation ....................................... 54 Overriding Access Settings ................... 55

    Pros and Cons of Auto-Publish .......... 55

    Setting Overrides ...................................... 56

    Passing Directory Variables ..................60 Using Directory Variables ..................... 60 Passing a Directory Variable to the TMPL61

    Creating an RSS Feed Template ...........62

  • OU Campus Page Templating Page 4 of 84

    Basic RSS Variables ............................ 62 Setting Up the Template ....................... 62

    Test the New Template .......................... 63

    Passing Media Items ............................ 64 Selecting a Feed................................... 65

    Creating the Filechooser Variable ..... 66

    Adding Category Selections ................. 67 Converting to OUC Nodes ..................... 68

    Updating the PCF ................................. 68

    WYSIWYG-CLASS ............................... 69 Creating the Variable CSS .................... 69

    Creating a MultiEdit Template ...............72

    Example of a Multi-Edit Content Area

    .......................................................................... 74

    Adding MultiEdit Tags ........................... 75 Understanding Template Inheritance ....83 Best Practices ........................................84

  • OU Campus Page Templating Page 5 of 84

    Introduction Page templating in OU Campus utilizes a series of files that create a page or series of pages with very little end-user intervention and that do not require technical or coding knowledge on the part of the end user. Page templating can create HTML-based templates, which are generally considered legacy templates, and XML-based templates, which utilize XSLs in order to style them and to process includes, such as the header, footer, and navigation files. This guide will focus on XML-based templates, which requires that the necessary XSLs are already in place. The guide is focused on using Gallena University templates, and therefore, makes assumptions based on that, such as the node structure, number of editable regions, and supporting files that need to be in place. It is valuable to keep in mind that the instructions are based on Gallena University templates and make applicable changes as needed for the institutions templates.

    Components Page templating requires certain components, also referred to as file sets, be in place in order for the templates to function properly. The components include:

    1. Template Image: An image depicting the page or section needs to be uploaded to the templates folder. The image is what the user sees after clicking New in the folder structure. This should be a .gif image, named the same as the Template Control File to which it corresponds.

    2. Template Control File (TCF): The TCF is also known as the New Page Wizard. It is the form that appears when a template image is selected, and it also contains the template files that should be created upon clicking the Create button.

    3. Template (TMPL): The TMPL is the template file that is triggered after TCF completion.. This often creates the Publish Control File, but the TMPL can also create files such as side navigation includes.

    These files create the new page or the new section with necessary files.

    Terminology The files created may include any includes or transformation-type files. Additional file types may be created or used. Understanding these terms will help with the understanding of page templating.

    XML: Stands for eXtensible Markup Language. To create a well-formed XML document, proper syntax must be included. For the document to be valid, it must validate against the Document Type Definitions (DTD) declared. PCFs and XSLs are XML files.

    Publish Control File (PCF): PCFs are the data files in which the content is added for pages. They call one or more XSLs in order to transform the data into a styled page.

    XSL: Stands for eXtensible Stylesheet Language. The XSL is the file that transforms the data content into a styled page. It includes the HTML structure, links to the CSS, JavaScript, and necessary server-side scripts, as well as any other formatting or logic necessary to transform the page properly.

  • OU Campus Page Templating Page 6 of 84

    Creating the I