Templates and Widgets

Templates determine how a category or page is displayed. Widgets are reusable page elements that encapsulate items such as menus and footers, or dynamic elements such as forms and charts.

Templates

Templates determine the layout of a page. A template uses XHTML markup and widgets to build the page. Cascading Style Sheets (CSS) control the visual design. Templates can be assigned to individual categories and pages however in most cases a typical site will use only a few category and page templates. Applying individual templates allows you to change the display format to suit the content requirements. For example is you wish to render a page as a PowerPoint style presentation using Eric Meyer's S5 you can create a template to do it.

Templates are not limited to displaying AssetNow NX content for web browsers. The output of a template is determined by the template design and any widgets and custom code used by the template. You could use a template to add a new function or application to AssetNow NX.

You can also transform content using templates and your own pseudo-extensions. If content is requested with a valid pseudo-extension as set in the system setup parameters, AssetNow NX will apply a transformation template. Content can be transformed by applying scripting to process/parse content (regular expressions, or other scripting techniques), or by applying XSLT stylesheets. In other words AssetNow NX does not restrict the type and format of output you can generate.

Widgets

Widgets are tags that encapsulate functions. Widgets are used inside templates in the same way you use XHTML markup tags to design web pages. Widgets can be as simple as a static list used for a simple navigation element or as complex and contain an entire application of component such as a shopping cart. Widgets can include other widgets allowing developers to create very modular and easy-to-maintain components.

AssetNow NX has numerous standard widgets for navigation, site map, search, category content and page display etc. Typically designers and developers will customize these for to their site design needs. Designers and developers can also create their own widgets and so build up a library of unique functions which they can offer clients.

AssetNow NX also provides a widget tool that allows you to create and change widgets directly from your web browser.

By using widgets developers can add new functionality for use by site designers without worrying about the widget code being altered and the site performance compromised. Designers do not have to be concerned with the internal operation of a widget and only need to know the syntax (attributes) used to apply the widget tag.

Example

Below is a the template used to display the home page of this site, the category and page templates are very similar. Visual design is determined entirely by CSS, as you can see in the example below. AssetNow NX ensures complete separation of content from presentation. So if we want to take the same content and deliver it to a special device all we need to do is create a template and the required CSS (or XSLT/processing for transformation) to do it.

Widgets allow developers to hide complexity from designers. In the above example the xhtml document declaration, header, stylesheets and body sections are all created by widgets.

If we want to add a new stylesheet or javascript for use by all our site pages we just need to add it in <widget:header/> to have them added to all the pages.

Widgets can also be excluded from caching as in the example above: <widget-nocache:ticktime/>. If we did not exclude this widget from the cache then it would add the timestamp from the page that was cached and not update on every page load.

Templates and widgets combined with standards based designs using XHTML and CSS result in an efficient and easy-to-maintain site.

Templates also make it easier to ensure valid markup, compliance accessibility requirements, and providing custom content output for specific devices.