Hello World Example

The traditional "Hello World" example showing how to create templates and widgets and find out how AssetNow NX page rendering works.

In this tutorial we will implement the traditional "Hello World" display using AssetNow NX templates and widgets. You will create a new Category Template and then set up a new Category in your site to use this template.

AssetNow NX uses template to display content. Templates combine XHTML markup and dynamic AssetNow elements called widgets. Templates use cascading style sheets (CSS) for formatting. You can develop as many templates as your site requires.

Template Caching

To identify which template a page is using view the page source with your web browser. In Microsoft Internet Explorer right-click inside the page and select the View Source option, in Firefox right-click and select the View Page Source option. Look for the following tag approx 10 lines from the top:

<meta name="generator" content="AssetNow NX 5.0 (Licensee:AssetNow, Type:Developer) template:category/home_xhtml (cached)" />

This tag tells us that the page is rendered by a category template named home_xhtml and that the page is cached. As you develop more templates and publish more pages it is very useful to be able to identify which template is displaying a page.

When developing templates you want to be sure you are always seeing the most recent changes and not a cached version. When you are signed in as a Tools users you will not see cached pages, you can also disable caching for the entire site by setting the Tools > System > Tools > Setup: Settings tab, CACHE_CONTENT parameter.

After installing AssetNow NX sign in as the Site Administrator. The Site Administrator user account gives you unrestricted access to all Tools. View the page source again:

<meta name="generator" content="AssetNow NX 5.0 (Licensee:AssetNow, Type:Developer) template:category/home_xhtml" />

Notice that the page is no longer cached.

Creating a Template

Using a text editor or your preferred web design tool (Dreamweaver, Eclipse etc.) create a new document and add this heading:

<h1>Hello World</h1>

Name your page hello_world.cfm and save it in your AssetNow installation in the /sys/cftags/assetnow/design/templates/category directory.

Keep in mind that this is not a valid X/HTML page since it does not contain required elements like the DOCTYPE, head and body sections, which we will add later.

We are ready to display our template, ensure that you are still signed in and navigate to the AssetNow NX tools by clicking the Tools link. Select the Content tool which displays the site tree. The site tree is a hierarchical display of all the categories in the site, content pages as stored in the categories.

Click the Home category folder in the site tree. The main workspace panel on the right will display the elements in the Home category, these include all subcategories inside the Home category and pages in the Home category. Add a new subcategory by clicking the Add Category icon :

• With the Content tab selected set the category Name to Test.
• Select the Properties tab and set the Status to On.
• From the Template drop list select the hello_world.cfm template you created. If the template does not appear in the list make sure you saved it in the correct location.
• Click Done to save the changes and go back to the Home category listing.

You can preview categories and pages from the Content tool by clicking the status icon. Click the green (On) status icon next to the Test category. The main workspace frame should display Hello World using the default browser style for H1 headings.

Navigate to the site by clicking the Site link in the top menu panel. You will see that the Test category appears in the site main menu, selecting this displays your Hello World template. If you view the page source you will see the source is exactly what you added to the template when you created it.

Creating a Widget

Widgets are like X/HTML tags. They allow you to place functionality is a tag that can be reused in your templates. For example a company logo can be displayed using a <widget:logo/> tag and used on all templates that need the logo. If you need to change the markup used to display the logo then you only have to update the logo widget for the change to appear in all templates.

Open a new document in your editor and add the following markup:

<p>This text is contained in a reusable widget</p>

Save the page using the name my_widget.cfm in the /sys/cftags/assetnow/design/widgets/site directory.

Open the hello_world.cfm template you created earlier and add the following at the very top of the template before any other markup:

<cfimport prefix="widget" taglib="../../widgets/site"/>

This ColdFusion tag imports the templates from the specified taglib directory and makes them available in our template via the widget prefix.

Next output the widget below our Hello World heading as follows:

<widget:my_widget/>

Your template should not look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<h1>Hello World</h1>
<widget:my_widget/>

Save the changes and reload the Test category in your browser. You should see the Hello World heading followed by the paragraph of text in your widget, however the paragraph is displayed twice.

Edit your my_widget.cfm tag and change it so it looks like this:

<cfif thisTag.executionMode eq "start">
   <p>This text is contained in a reusable widget</p>
</cfif>

Reload the Test category in your browser, now the paragraph is only displayed once. A widget is a ColdFusion custom tag. ColdFusion will process the widget once for the opening tag and once for the closing tag. Since we closed our tag using /> ColdFusion outputs the tag a second time. By adding conditional code we can restrict the output to the start, end, or output different code at the start and end as required.

Using AssetNow NX Widgets

Our template is still not a valid X/HTML page. We will use standard widgets supplied with AssetNow NX to add the missing elements. As you add each widget, save the template and reload the Test category in your browser, view the page source to see the changes.

First add a valid document type header using <widget:document level="strict"> to enclose the entire page content with the exception of the import tag. Place the document widget on the same line as the import tag to prevent any whitespace before the document type declaration as some older browsers behave badly if whitespace precedes the document type header. Your template should look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<widget:document level="strict">
   <h1>Hello World</h1>
   <widget:my_widget/>
</widget:document>

Reload the template in your browser and view the page source, the page now contains a valid XHTML strict document type declaration and the content is wrapped inside the required <html> tags.

Add the AssetNow NX header widget. This widget adds the page metadata, stylesheets and scripts. You template should look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<widget:document level="strict">
   <widget:header/>
   <h1>Hello World</h1>
   <widget:my_widget/>
</widget:document>

The page should now display with different formatting due to the style sheets. You should also see the generator meta tag showing that you are using the category/hello_world template to render the page:

<meta name="generator" content="AssetNow NX 5.0 (Licensee:AssetNow, Type:Developer) template:category/hello_world" />

Add the body widget, the updated template should look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<widget:document level="strict">
   <widget:header/>
   <widget:body id="home">
      <h1>Hello World</h1>
      <widget:my_widget/>
   </widget:body>
</widget:document>

Viewing the page source shows the page now has valid <body> tags surrounding the content.

The visual formatting of content is set by the stylesheets. The default stylesheets use a container inside the body of the page to set a white background. The container is a <div> block element. There is no need to add this to a widget, typically a template will contain standard X/HTML markup and widgets. Use widgets when you want to reuse a element across numerous templates. Add the container, your template should look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<widget:document level="strict">
   <widget:header/>
   <widget:body id="home">
      <div id="container">
         <div id="main">
            <div class="col1">
               <h1>Hello World</h1>
               <widget:my_widget/>
            </div>
         </div>
      </div>
   </widget:body>
</widget:document>

The page should now look better with a white background and text left aligned. Keep in mind that the containers and styles you use in your site design are entirely up to your designer and not restricted by AssetNow NX.

Lastly lets add the page logo and main navigation. Open the home_xhtml.cfm template and copy the header and navigation menu elements, your template should look like this:

<cfimport prefix="widget" taglib="../../widgets/site"/>
<widget:document level="strict">
   <widget:header/>
   <widget:body id="home">
      <div id="container">
         <div id="header">
            <div class="col1">
               <widget:homelogo/> <!--- logo / home link --->
            </div>
            <div class="col2">
               <widget:searchform/> <!--- search form --->
            </div>
         </div>
         <div id="navigation">
            <widget:sfmenu/> <!--- suckerfish main drop menu --->
         </div>
         <div id="main">
            <div class="col1">
               <h1>Hello World</h1>
               <widget:my_widget/>
            </div>
         </div>
      </div>
   </widget:body>
</widget:document>

You page now includes the site logo, search form and main navigation. If you view the page source you can see it is significantly more complex than the template code. Using templates and widgets makes it much easier to design and update a site.

Next steps

In the same way you created a template and widgets above you can implement a site design. We recommend developing your site prototype and testing it outside of AssetNow and following these steps:

• Create and test your site design mock-up independently of AssetNow NX.
• Use technologies, scripting, and styles as required by your design, AssetNow NX does not impose design limitations.
• Copy the markup for a complete page from your mock-up into an AssetNow template.
• Using the AssetNow Content tool setup a category/page to display the template.
• Copy images and other assets required by your design to the appropriate AssetNow directories.
• Systematically replace blocks of markup in your template with widgets. Focus on replacing elements that appear in multiple pages (such as headers, navigation etc.) where a reusable widget is ideal.
• Add your own styles and scripts by calling your stylesheets and scripts in the AssetNow header include files.
• Refer to the supplied AssetNow NX category and content templates for widgets to insert dynamic content such as listing the pages in a category and outputting the content of a page published with AssetNow NX.
• Refer to the Template and Widget FAQ for additional information.

We recommend maintaining a working copy of the default AssetNow NX site as supplied for reference.