Creating the Initial PCF

When creating new page templates, it is very common to begin creation from an HTML page. The HTML page contains the full structure of the content, as well as the data. Deconstructing the HTML page helps to determine which data is to be in the PCF and what elements need to be part of the XSL. After the initial dissection of the files, creation of the XSL, and verification that all necessary components of the PCF exist in the file, the PCF can be converted to a TMPL.

To begin creating the PCF and ultimately the TMPL, start with an HTML example page.

Example HTML

Example Page for Sample HTML

The code rendering this page as HTML looks like this:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="generator" content=
  "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width; initial-scale=1.0" />
  <meta name="Description" content="" />
  <title>Gallena University - Creating a New Page</title>
  <link rel="stylesheet" type="text/css" media="screen" href=
  "/_resources/css/main.css" />
  <link rel="stylesheet" type="text/css" media="screen" href=
  "/_resources/css/nivo-slider.css" />
  <link rel="stylesheet" type="text/css" media="screen" href=
  "/_resources/css/prettyPhoto.css" />
  <!--[if lt IE 9]><link rel="stylesheet" type="text/css" media="screen" href="/_resources/css/ie-fix.css" /><![endif]-->
  <script type="text/javascript" src=
  "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript" src="/_resources/js/jquery.nivo.slider.pack.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript" src="/_resources/js/jquery.infieldlabel.min.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript" src="/_resources/js/jquery.ScrollTo.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript" src="/_resources/js/jquery.prettyPhoto.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript" src="/_resources/js/scripts.js">
//<![CDATA[//comment1//]]>
  </script>
  <script type="text/javascript">
//<![CDATA[var page_id="http://training.oudemo.com/about/create-new-page.html";
  //]]>
  </script><!--[if IE 6]>
<script type="text/javascript" src="js/IE6-hover-fix.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
$.ie6hover();
</script>
<script>
DD_belatedPNG.fix('#logo img, .ribbon, #header-btn a, #service-listing li img, #social li img, #bookmark-list li img, #homepage-slider-shadow, #featured-work li, .featured-overlay, .standard-list li, .blog-post, .meta li.star, .blog-img-teaser, .blog-img-overlay, #recent-post-list li a, #recent-comments-list li, .avatar, .testim-thumb, .thumb-overlay, #contact-bg-top, #contact-bg-middle, #contact-bg-bottom, .portfolio-img, .portfolio-overlay, #project-slider-shadow, .nivo-directionNav a, #portfolio-box ul li, .portfolio-box-overlay, #services-box ul li p img, .portfolio-wide-overlay, #portfolio-wide li');
</script>
<![endif]-->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"
  type="text/javascript">
//<![CDATA[//comment1//]]>
  </script>
  <link rel="stylesheet" media="screen" href="/_resources/css/mobile.css" type="text/css" />
  <meta name="Keywords" content="Gallena,GU,Why Choose Gallena,Undergraduate," />
  <style type="text/css">
/*<![CDATA[*/
  span.c3 {float:left;margin-top:10px;}
  img.c2 {float: right; margin-left: 4px; margin-right: 4px;}
  img.c1 {float: left; margin-left: 4px; margin-right: 4px;}
  /*]]>*/
  </style>
</head>
 
<body>
  <div id="header">
    <div id="header-content">
      <div id="logo">
        <a href="/index.html"><img src="/_resources/images/logo.png" alt=
        "Gallena University" width="206" height="79" /></a>
      </div>
      <ul id="new-nav">
        <li><span><a href="/welcome/index.html" class="button_item">Welcome</a></span></li>
        <li><a href="/about/index.html" class='button_item'>About</a></li>
        <li><span><a href="/news/index.html" class='button_item'>News</a></span></li>
        <li><span><a href="/academics/index.html" class="button_item">Academics</a></span></li>
        <li class="current"><a href="/admissions/index.html" class="button_item">Admissions</a></li>
        <li class="last"><a href="/athletics/index.html" class="button_item">Athletics</a></li>
      </ul>
    </div>
  </div>
  <div id="main-content">
    <div id="wrapper">
      <div id="breadcrumb">
        <ul id="breadcrumb-nav">
          <li><a href="http://training.oudemo.com/">Home</a><span class="raquo">&#187;</span></li>
          <li><a href="/about/">About GU</a><span class="raquo">&#187;</span></li>
          <li>Creating a New Page</li>
        </ul>
        <div class="clear">
          <!--Comment-->
        </div>
      </div>
      <div id="sidebar">
        <div id="sidebar-innertube">
          <div class="ribbon ribbon-first">
            <h5>Quick Links</h5>
          </div>
          <ul id="sidebar-nav" class="nav-link">
            <li><a title="About" href="/about/index.html">About Gallena</a></li>
            <li><a title="History" href="/about/history.html">History</a></li>
            <li><a title="Library" href="/about/library.html">Library</a></li>
            <li><a title="Campus Map" href="/welcome/maps.html">Campus Map</a></li>
            <li><a title="Class Registration" href="/about/classreg.html">Class Registration</a></li>
            <li><a title="Tour Registration" href="/about/campus_tour.html">Tour Registration</a></li>
            <li><a title="Students on Campus" href="/about/ee.html">Students on Campus</a></li>
            <li><a title="Frequently Asked Questions" href="/about/faqs.html">Frequently Asked Questions</a></li>
            <li><a title="Test" href="/about/test.html">Test</a></li>
            <li><a title="Creating a New Page" href="/about/create-new-page.html">Creating a New Page</a></li>
          </ul>
          <div class="ribbon">
            <h5>Search</h5>
          </div>
          <form id="search-form" method="post" action="http://ousearch-2.omniupdate.com/query.html">
            <input type="hidden" name="hidden" value="" /> <input type="hidden" value="gu" name="col" /> <input type="hidden" value="gu" name="style" />
            <input type="hidden" value="utf-8" name="charset" />
            <p><label for="search">Type here to search</label> <input type="text" id="search" name="search" /></p>
          </form>
          <div class="ribbon">
            <h5>What Students Say</h5>
          </div>
          <blockquote>
            <span id="student_quotes">&nbsp;</span><script type="text/javascript">
//<![CDATA[                                                                 $.get("/_resources/php/quotes.php",function(data){$("#student_quotes").replaceWith(data);});
            //]]>
            </script>
          </blockquote>
        </div>
      </div>
      <div id="content">
        <div class="blog-post clearfix post-content">
          <h2 class="h-color-link">Creating a New Page</h2>
          <p><img class="c1" src="/_resources/images/about/gulibrary.jpg" alt="Student" width="150" height="127" />Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile.</p>
          <p><img class="c2" src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150" height="113" />Suppose end get boy warrant general natural. Delightful met sufficient projection ask. Decisively everything principles if preference do impression of. Preserved oh so difficult repulsive on in household. In what do miss time be. Valley as be appear cannot so by. Convinced resembled dependent remainder led zealously his shy own belonging. Always length letter adieus add number moment she. Promise few compass six several old offices removal parties fat. Concluded rapturous it intention perfectly daughters is as.</p>
          <p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find.</p>
        </div>
  <a href="/about/create-new-page.pdf">View as PDF</a>
      </div>
      <div class="clear">
        <!--Comment-->
      </div>
      <div id="footer">
        <ul id="footer-nav">
          <li><a href="/happenings/index.html">Calendar</a></li>
          <li><a href="index.html">Admissions</a></li>
          <li><a href="/news/">News &amp; Events</a></li>
          <li><a href="http://training.oudemo.com/jcosta/">Student Blogs</a></li>
          <li><a href="/contact.html">Contact Us</a></li>
          <li><span id="new-direct-edit"></span></li>
        </ul><span class="c3">Gallena University, California 2314 Running Springs Rd Gallena, CA 91255-4901 USA Tel: (818) 555-9401</span><br />
        <br />
        <ul id="social">
          <li><a href="http://twitter.com/gallena_univ" title=""><img src=
          "/_resources/images/twitter-ico.png" alt="twitter" width="32" height="32" title="Gallena University Twitter profile" /></a></li>
          <li><a href="http://www.facebook.com/pages/Gallena-University/43156474752" title=""><img src="/_resources/images/facebook-ico.png" alt="facebook" width="32" height="32" title="Gallena University Facebook profile" /></a></li>
          <li><a href="/flickr_gallery.html" title=""><img src="/_resources/images/flickr-ico.png" alt="flickr" width="32" height="32" title="Gallena University Flickr profile" /></a></li>
          <li><a href="/news/feeds.html" title=""><img src="/_resources/images/rss-ico.png" alt="rss" width="32" height="32" title="Gallena University RSS Feed" /></a></li>
        </ul>
        <div class="go-top">Top
        </div>
        <div class="clear">
          &nbsp;
        </div>
        <p id="copyright">Copyright &#169; <a href="http://omniupdate.com" title="copyright">OmniUpdate Inc.</a></p>
      </div>
    </div>
  </div><script type="text/javascript" src="/_resources/js/scripts.js">
//<![CDATA[//comment1//]]>
  </script>
</body>
</html>

Parsing the File to Create XSL and PCF

The head code, as well as the <div> structure and supporting HTML is pulled into the XSL used to style the page. Additionally, the include statements for included elements are referenced from within the XSL. For the purposes of this tutorial, assume the XSL has already been created from the parsed HTML document.

Creating Initial HTML File

The first step is creating a PCF with editable content areas. In the case of the above referenced example, this results in an HTML with the following initial structure:

<h2 class="h-color-link">Creating a New Page</h2>
<p><img class="c1" src="/_resources/images/about/gulibrary.jpg" alt="Student" width="150" height="127" />Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile.</p>
<p><img class="c2" src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150" height="113" />Suppose end get boy warrant general natural. Delightful met sufficient projection ask. Decisively everything principles if preference do impression of. Preserved oh so difficult repulsive on in household. In what do miss time be. Valley as be appear cannot so by. Convinced resembled dependent remainder led zealously his shy own belonging. Always length letter adieus add number moment she. Promise few compass six several old offices removal parties fat. Concluded rapturous it intention perfectly daughters is as.</p>
<p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find.</p>

Starting with an HTML file extension, which will be converted to a PCF, the data included will be displayed with no styling in both preview and edit.

Preview

Preview for Template Coding 

Edit

Edit View

Converting the HTML File to a PCF

In order to convert the file to a PCF, the file needs to be updated to be formatted in proper XML structure. This includes adding an XML declaration, defining the DOCTYPE, and adding a root node. It also needs the pcf-stylesheet declaration, which declares which XSL is to be used for the transformation of the file to a styled page. Use the Source Code Editor to make the changes.

Note: For the purposes of this tutorial, it is valuable to understand the XSL that will be called is looking for a _leftnav.inc file and _properties.inc file. These need to be added to the directory prior to attempting to render the PCF in order to avoid an error.

PCF Error Example

Add the following to the HTML file in the order described:

  1. The XML declaration identifies the version of XML to be used, as well as declares the encoding used on the page. For these purposes, XML version 1.0 is used, along with UTF-8 encoding.

    <?xml version="1.0" encoding="utf-8" ?>

  2. The pcf-stylesheet declaration identifies the path to the XSL that is used to transform the data, and the extension that is appended in place of .pcf on publish. It may also include a separate site identifier if the XSL is in a different OU Campus site, along with other attributes described below. It is possible to have multiple pcf-stylesheet declarations if multiple outputs are desired. For instance, if the published page should be published as an HTML file and a PDF, two pcf-stylesheet declarations will be included. See an example of this after the page example in this section.

    <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?>

    Attribute Name Syntax Message Description
    path path="/_resources/xsl/default.xsl" Required. Defines the path to the XSL file that will be used to transform the page.
    extension extension="html" Required. Defines the extension that is used to replace .pcf on publish.
    site site="templates" Defines an alternative site where the XSL file that was defined as part of the path resides.
    title tite="Web" Defines a friendly name, which will appear in place of the extension on the tabs shown in the preview.
    alternate alternate="yes" Used when there is more than one PCF-Stylesheet declaration to identify the file as a secondary output type in order to create a preview based on the alternative output.
    params params="varname=string" Passes an <xsl:param> value to a top-level parameter by identifying the parameter with the same name and providing the value.
    publish publish="no" Prevents the defined stylesheet from publishing. This is useful for stylesheets that should only create a preview, such as a debug XSL for developers.
  3. The DOCTYPE declares the root node of the document and it defines the document structure with a list of legal elements, attributes, and entities. These can be included within the DOCTYPE definition or referenced as an external document. For these purposes, an external document is referenced. 


    <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

  4. The root node is the first tag of the file, as well as the final closing tag. All data and other nodes must be properly encased within this root node. This example uses <document> for the root node. 

In this case, the XSL being referenced is looking for /document/content in order to pull in the page’s data. This path is called an XPath. To create the page templates, knowing these XPaths and following the same node structure is necessary to view content on the page. If the page were saved without a node of <content> having been added, on preview, no content would display. To avoid this, add <content> immediately following <document>, and add </content> immediately preceding </document>.

After the changes are made, the file should be saved with a PCF extension in place of the HTML extension.

Before

 Before Example of HTML to PCF

After

After Example of HTML to PCF

Example PCF

Example PCF

 

<?xml version="1.0" encoding="utf-8" ?>
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
 
<document>
      <content>
            <h2 class="h-color-link">Creating a New Page</h2>
            <p><img class="c1" src="/_resources/images/about/gulibrary.jpg" alt="Student" width="150" height="127" />Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile.</p>
            <p><img class="c2" src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150" height="113" />Suppose end get boy warrant general natural. Delightful met sufficient projection ask. Decisively everything principles if preference do impression of. Preserved oh so difficult repulsive on in household. In what do miss time be. Valley as be appear cannot so by. Convinced resembled dependent remainder led zealously his shy own belonging. Always length letter adieus add number moment she. Promise few compass six several old offices removal parties fat. Concluded rapturous it intention perfectly daughters is as.</p>
<p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find.</p>
      </content>
</document>
Preview

Preview of Template

Example Using Multiple PCF-Stylesheet Declarations

If multiple outputs are desired, multiple pcf-stylesheet declarations are needed. The rest of the PCF appears just the same, but a different XSL is used to transform the second output. When defining the additional declarations, it is valuable to include the title and alternate="yes" attributes. Having the additional declarations defined as alternate allows multiple previews to be rendered.

Example Code
<?xml version="1.0" encoding="utf-8" ?>
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?>
<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" title="PDF" alternate="yes" ?>
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
 
<document>
      <content>
            <h2 class="h-color-link">Creating a New Page</h2>
            <p><img class="c1" src="/_resources/images/about/gulibrary.jpg" alt="Student" width="150" height="127" />Six started far placing saw respect females old. Civilly why how end viewing attempt related enquire visitor. Man particular insensible celebrated conviction stimulated principles day. Sure fail or in said west. Right my front it wound cause fully am sorry if. She jointure goodness interest debating did outweigh. Is time from them full my gone in went. Of no introduced am literature excellence mr stimulated contrasted increasing. Age sold some full like rich new. Amounted repeated as believed in confined juvenile.</p>
            <p><img class="c2" src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150" height="113" />Suppose end get boy warrant general natural. Delightful met sufficient projection ask. Decisively everything principles if preference do impression of. Preserved oh so difficult repulsive on in household. In what do miss time be. Valley as be appear cannot so by. Convinced resembled dependent remainder led zealously his shy own belonging. Always length letter adieus add number moment she. Promise few compass six several old offices removal parties fat. Concluded rapturous it intention perfectly daughters is as.</p>
<p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In on my jointure horrible margaret suitable he followed speedily. Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight. Sang lose of hour then he left find.</p>
      </content>
</document>
Example of Web Output

Example of Web Output

Example of PDF Output

Example of PDF Output