VNS Manual:Developer's Guide:Structuring your Application

As you have already learned a Visual Net Server application is organised in terms of media components. In this section we will discuss how to structure your VNS Application and how to re-use media components and how to link them together.

Assume we are responsible for building a news portal. The portal should publish articles dynamically from an in-house database and also from an external news feed. You can view the demo portal here. These are some of the tables in the database used for the examples in this section.

The portal has been organised into the following media components:

Latest News
News Article
News Feed
Top Stories
Front Page

We will now explain what each component does and how it has been created.

Latest News

The Latest News component retrieves the headlines for the latest news articles and displays them in a news box to the left.

Content Structure

The content structure consist of an ordinary sqlentity. The noentityprocessing attribute stops VNS from further parsing processing the retrieved items. The provider attribute specifies the database source for the query.

<CONTENTSTRUCTURE id="3">
<LATEST sqlentity="yes" provider="Provider=Microsoft.Jet.OLEDB.4.0;Data Source={$vnsconfig[vnserverpath]}\VNSNewsDemo\vnsNewsDB.mdb" noentityprocessing="yes"> SELECT articleid, head, pubdate FROM article ORDER BY pubdateLATEST>
CONTENTSTRUCTURE>

Note the use of the built in lookup table $vnsconfig in the expression {$vnsconfig[vnserverpath]}. This will look up the value of the constant vnserverpath from the Configuration table in the media component library.

Presentation Structure

This presentation structure creates an HTML table that can be viewed standalone or as part of a larger web page. Note the use of the XSL directive xsl:output. HTML is generated but setting the output method to xml forces the XSL-processor to generate valid XML.

The reason is that, as you will see later, we want to incorporate the HTML snippet into another media component.

Note how we create HTML links from the Latest News List to individual news articles.

<xsl:stylesheet version="1.0">
  <xsl:output method="xml" version="1.0" encoding="iso-8859-1"/>
  <xsl:template match="CONTENTSTRUCTURE">
     <TABLE cellSpacing="0" cellPadding="0" width="122" border="0" valign="top">
        <TBODY>
           <TR>
             <TD vAlign="top">
  <TD vAlign="top" width="122">
  <TABLE cellSpacing="1" cellPadding="0" width="120" border="0">
  <TBODY>
  <TR>
  <TD>
  <TABLE cellSpacing="0" cellPadding="2" width="120" border="0">
  <TBODY>
  <TR>
  <TD vAlign="center" align="left" bgColor="#990000">
  <SPAN class="vit"> LATEST NEWSSPAN>
  TD>
  TR>
  <TR vAlign="top" align="left" bgColor="#dedede">
  <TD class="senastetid" vAlign="center" align="left" bgColor="#dedede">
  <xsl:for-each select="LATESTNEWS/LATESTNEWS">

  <xsl:value-of select="@pubdate"/>

  <a href="index_default.vns?article={@articleid}">
  <xsl:value-of select="@head"/>
  a>
  xsl:for-each>

  <HR color="#990000" noShade="1" SIZE="1"/>
  TD>
  TR>
  TBODY>
  TABLE>
  TD>
  TR>
  TBODY>
  TABLE>
  <TABLE cellSpacing="0" cellPadding="1" width="122" border="0">
  <TBODY>
  <TR>
  <TD width="122">
  <SPAN class="brodtext">
  <HR/>

  <B> Editor-in-chief:B>

  <A href="mailto:matts@cnet.se"> Matts AhlsénA>
  <HR/>
  SPAN>

  TD>
  TR>
  TBODY>
  TABLE>
  TD>
             TD>
           TR>
        TBODY>
     TABLE>
  xsl:template>
xsl:stylesheet>

Click to view the Latest News component.

News Article

Content Structure

This content structure retrieves a specific article from the database including it's full text. Note the use of the relating function using the relatekey and relateon attribute. This is used to relate one or more images to the article if there exists such images. This means an article is always retrieved even if it does not have an image. An ordinary SQL join would have excluded all articles not having images.

<CONTENTSTRUCTURE id="4">
  <PARAMETERS requestentity="yes">
     <PARAMETER name="article" value="2"/>
  PARAMETERS>
  <ARTICLE sqlentity="yes" elementmarkup="no" relatekey="articleID" provider="Provider=Microsoft.Jet.OLEDB.4.0;Data Source={$vnsconfig[vnserverpath]}\VNSNewsDemo\vnsNewsDB.mdb"> SELECT * FROM article WHERE articleid={$article}
     <IMAGE sqlentity="yes" relateon="articleID" provider="Provider=Microsoft.Jet.OLEDB.4.0;Data Source={$vnsconfig[vnserverpath]}\VNSNewsDemo\vnsNewsDB.mdb"> SELECT filename, caption, articleID FROM art_image, image_article WHERE Image_Article.articleID={$article} and Image_Article.art_imageID = art_image.art_imageidIMAGE>
  ARTICLE>
CONTENTSTRUCTURE>

Presentation Structure

<xsl:stylesheet version="1.0">
  <xsl:output method="xml" version="1.0" encoding="iso-8859-1"/>
  <xsl:template match="//CONTENTSTRUCTURE">
     <table valign="top" border="0" width="450" CELLSPACING="0" CELLPADDING="0">
        <xsl:apply-templates select="ARTICLE/ARTICLE"/>
     table>
  xsl:template>
  <xsl:template match="ARTICLE">
     <tr>
        <td valign="top" width="400">
           <img src="images/rub_Ettan.gif"/>
        td>
        <td align="right" valign="bottom" width="400"/>
     tr>
     <tr>
        <td colspan="3" valign="top" background="images/px_gra.gif">
           <img src="images/px_gra.gif" width="1" height="1" border="0"/>
        td>
     tr>
     <tr>
        <td valign="top">
           <table valign="top" border="0" width="400" CELLSPACING="2" CELLPADDING="3">
             <tr>
  <td valign="top" colspan="2" width="400">
  <span class="rubrik">
  <xsl:value-of select="@head"/>
  span>

  <span class="brodtext">
  <xsl:if test="IMAGE/IMAGE">
  <img align="right" height="100">
  <xsl:attribute name="src"> images/
  <xsl:value-of select=".//IMAGE/@filename"/>
  xsl:attribute>
  <xsl:attribute name="alt">
  <xsl:value-of select=".//IMAGE/@caption"/>
  xsl:attribute>
  img>
  xsl:if>
  <xsl:value-of select="@intro"/>

  <xsl:value-of select="@body"/>
CNet News
  span>

  td>
             tr>
           table>
        td>
     tr>
     <tr>
        <td valign="top">
           <p align="right">
             <a class="LasMer" href="index_default.vns"> tillbakaa>
           p>
           <br/>
        td>
     tr>
     <tr>
        <td colspan="2" valign="top">
           <table width="100%" border="0" cellpadding="0" cellspacing="0">
             <tr>
  <td class="sidfotsvart">
  <img src="images/black.gif" width="100%" height="1"/>
2002 CNet
  <a class="sidfot" href="mailto:webmaster@cnet.se"> webmaster@cnet.sea>
  td>
             tr>
           table>
        td>
     tr>
  xsl:template>
xsl:stylesheet>

Click to view the News Article component.

Top Stories

Content Structure

The content structure for top stories is simple and consists of only one sqlentity.

<CONTENTSTRUCTURE id="5">
<TOPSTORIES sqlentity="yes" noentityprocessing="yes" provider="Provider=Microsoft.Jet.OLEDB.4.0;Data Source={$vnsconfig[vnserverpath]}\VNSNewsDemo\vnsNewsDB.mdb"> select * from article;TOPSTORIES>
CONTENTSTRUCTURE>

News Feed

Content Structure

The content structure for the news feed component fetches news articles from an external url.

<CONTENTSTRUCTURE id="6">
<PARAMETERS requestentity="yes"/>
<NEWSFEED xmlentity="yes" url="http://www.cnet.se/cnetlatestnews.vns" noentityprocessing="yes" cacheid="cnetnews" cacheexpires="18000"/>
CONTENTSTRUCTURE>

In this media component we are using the caching functions of Visual Net Server. The cacheid attribute creates an entry in the cache. The first time the url is accessed the xmlentity is stored in the cache under the id cnetnews. The next time the xmlentity is activated the cache entry is used rather than the external url.

The use of caching not only speeds up the access but also off-loads the external site from unnecessary accesses. The cacheexpires attribute tells VNS how often the cache should be refreshed.

Front Page

Once the individual components have been defined properly it is easy to design the front page component as an aggregate of the other components.

Content Structure

<CONTENTSTRUCTURE id="7">
  <PARAMETERS requestentity="yes">
     <PARAMETER name="article" value="0"/>
  PARAMETERS>
  <PORTALCOMPONENTS>
     <LATEST mediacompentity="yes" MEDIACOMP_ID="2" USERPROFILE="default" APPLICATION_ID="4812" transformoutput="yes"/>
     <TOPSTORIES mediacompentity="yes" MEDIACOMP_ID="3" USERPROFILE="default" APPLICATION_ID="4812" transformoutput="yes"/>
     <NEWSFEED mediacompentity="yes" MEDIACOMP_ID="4" USERPROFILE="default" APPLICATION_ID="4812" transformoutput="yes"/>
     <ARTICLE mediacompentity="yes" MEDIACOMP_ID="5" USERPROFILE="default" APPLICATION_ID="4812" transformoutput="yes" article="{$article}"/>
  PORTALCOMPONENTS>
CONTENTSTRUCTURE>

We are using the mediacompentity to call the other components. We are also using the transformoutput attribute. This forces the subcomponent to apply its presentation structure before returning the answer. Without the transformoutput attribute the mediacompentity will instead return the expanded content structure, that is the XML created.

Presentation Structure

Since we have used sub components and also used the transformoutput which already have created the presentation for the individual sub components, our presentation structure now becomes simple and all we have to do is to copy the subcomponents in to an HTML table.

<xsl:stylesheet version="1.0">
  <xsl:output method="html" version="3.0" encoding="iso-8859-1"/>
  <xsl:template match="CONTENTSTRUCTURE">
     <HTML>
        <HEAD>
           <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"/>
           <LINK REL="stylesheet" HREF="stylesheetPCIE.css" TYPE="text/css"/>
           <TITLE> CNet NewsTITLE>
        HEAD>
        <BODY text="#000000" vLink="#000000" aLink="#ffffff" link="#000000" bgColor="white" leftMargin="0" topMargin="1" marginheight="1" marginwidth="0">
           <TABLE bgcolor="#ffffff" height="59" border="0">
             <TR>
  <TD vAlign="top" width="293" height="59">
  <IMG src="images/logotypSvD.gif" border="0"/>
  TD>
  <TD>
  <IMG src="images/banner.gif"/>
  TD>
             TR>
           TABLE>
           <xsl:apply-templates select="PORTALCOMPONENTS"/>
        BODY>
     HTML>
  xsl:template>
  <xsl:template match="PORTALCOMPONENTS">
     <table bgcolor="#ffffff" border="0">
        <tr valign="top">
           <TD vAlign="top">
             <xsl:copy-of select="LATESTNEWS/*"/>
           TD>
           <TD vAlign="top">
             <xsl:choose>
  <xsl:when test="//PARAMETER/@value='0'">
  <xsl:copy-of select="TOPSTORIES/*"/>
  xsl:when>
  <xsl:otherwise>
  <xsl:copy-of select="ARTICLE/*"/>
  xsl:otherwise>
             xsl:choose>
           TD>
           <TD vAlign="top">
             <xsl:copy-of select="NEWSFEED/*"/>
           TD>
        tr>
     table>
  xsl:template>
xsl:stylesheet>