In Visual Studio .Net go to the “Project” menu and select “Add Web Form…” name this form Topic.aspx. This corresponds to the ContentDisplayURL key described above. Now make sure that the HTML view looks as it does here in Code-Snippet 5:
<%@ Register TagPrefix="hn4f" Namespace="Hyper.Net.Framework.Web.UI" Assembly="Hyper.Net.Framework.Web.UI" %>
<%@ Page language="c#" Codebehind="Topic.aspx.cs" AutoEventWireup="false" Inherits="HNAcme.Topic" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>topic</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<style>.hnf_ancestor { FONT-SIZE: 8pt; COLOR: white; FONT-FAMILY: Verdana, Tahoma, Arial }
.Metadata { FONT-SIZE: 8pt; COLOR: white; FONT-FAMILY: Verdana, Tahoma, Arial }
.NavigationLink { FONT-SIZE: 9pt; COLOR: white; FONT-FAMILY: Verdana }
.hn_ancestor { DISPLAY: none }
.hnancestor { DISPLAY: none }
</style>
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="topic" method="post" runat="server">
<table width="100%">
<tr>
<td width="85%">
<TABLE height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr height="5%">
<td bgColor="navy" colSpan="3"><font color="#ffffff">Ancestor(s):
<hn4f:topicancestors id="TopicAncestors1" runat="server" CssClass="hnf_ancestor" ExcludeEmptyAncestors="False"
LinkSeparator=" ->" ContentDisplayWebApplication="Topic.aspx" CssClassName="hnf_ancestor"></hn4f:topicancestors></font></td>
</tr>
<tr>
<td><table style="FONT-SIZE: 8pt; FONT-FAMILY: Verdana" width="100%">
<tr>
<td class="hnf_default_font" width="80" bgColor="azure">See Also:</td>
<td bgColor="aliceblue" colSpan="1" rowSpan="1" width="550"><A class="hnf_default_font" id="lnkTOC" href="#" runat="server">Table
of Contents</A></td>
</tr>
<tr>
<td class="hnf_default_font" colSpan="2"><hn4f:bookmarks id="Bookmarks1" runat="server" CssClassName="hnf_default_font"></hn4f:bookmarks></td>
</tr>
</table>
</td>
</tr>
<TR height="5%">
<TD vAlign="top" colSpan="3" height="1%"><asp:label id="LblTitle" runat="server"></asp:label></TD>
</TR>
<TR height="80%">
<TD vAlign="top" colSpan="3"><hn4f:content id="Content1" runat="server"></hn4f:content></TD>
</TR>
<tr height="5%">
<td bgColor="navy" colSpan="1"><span style="COLOR: white"><hn4f:navigationlink id="NavigationLink1" runat="server" ContentDisplayWebApplication="topic.aspx" CssClassName="NavigationLink"
MoveTo="Previous" Font-Italic="True" ForeColor="White">Previous</hn4f:navigationlink></span></td>
<td align="right" bgColor="navy" colSpan="2"><span style="COLOR: white"><hn4f:navigationlink id="Navigationlink2" runat="server" ContentDisplayWebApplication="topic.aspx" CssClassName="NavigationLink"
Font-Italic="True" ForeColor="White">Next</hn4f:navigationlink></span></td>
</tr>
</TABLE>
</td>
<td width="15%">
<table width="100%" height="100%">
<tr height="50%">
<td valign="top"><hn4f:Subtopics id="Subtopics3" runat="server" TopicContentDisplayURL="topic.aspx"></hn4f:Subtopics></td>
</tr>
<tr height="50%">
<td valign="top"><hn4f:Subtopics id="Subtopics2" runat="server" TopicContentDisplayURL="topic.aspx" RenderTopicFor="Subtopics"></hn4f:Subtopics></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</HTML>
Code-Snippet 5 – Topic.aspx HTML view
Since we’ve already seen how to drag and drop the controls, we’ll skip that description at this point. Note that in the code snippet above, already included are all the required Hyper.Net web server controls we need to make this central frame work.
The result of the code above should be something like shown in Figure 7.
Figure 7 – Topic.aspx in design view
Let’s take a minute to understand what this page does. As you might have realized by now, we didn’t write any complex code, which means that all the hurdles of building complex applications with Hyper.Net content has been made easy for you. But we still have to make some small changes in the code behind of the page to accomplish little details like telling the TOC link where to go, and where to put the Heading of the displayed topic. As you will see it’s quite simple. Put the following code snippet in the code behind of the page:
...
private static TopicCollection _tpc = new TopicCollection();
private void Page_Load(object sender, System.EventArgs e)
{
string js =
string.Format("javascript:window.open('TOC.aspx?DOC_UNID={0}','TOC','titlebar=no,toolbar=no,scrollbars=yes,status=no,resizable=no,width=600,height=600')",Request.QueryString["DOC_UNID"]);
lnkTOC.Attributes["onclick"]=js;
Topic _tp = _tpc.GetTopic(Request.QueryString["DOC_UNID"]);
lbHeading.InnerText = _tp.Heading; // setting the heading.
} ...
Code-Snippet 6 – Topic.aspx code behind
Next we’re configuring the controls we just placed and coded. We must do a few important things to wind up the work.
The first thing to handle is the Ancestors control, found enclosed in an HTML table column. This control will display the entire hierarchy of a topic up to its first known parent. Figure 8 shows the property settings for this control, make sure it looks likewise.
Figure 8 – Ancestors WSC properties pane.
The second thing is the “Table of Contents” link, which is right now just a link, that we’ll take care of later when creating the asp.net page that implements the TOC control.
The third thing is the Bookmarks control, which creates a drop-down list box containing all the bookmarks for the current topic. Leave the properties set as they appear in the properties pane, we won’t change anything there for this implementation.
The fourth thing is the Content control, which is the same control we put in the blob.axd page. But this time we want to change a few properties to match the requirements of presenting transformed content. Make sure that the properties match those shown in Figure 9.
Figure 9 – Content Control Properties Pane
N Please note that the AlwaysClearHtmlWrapper and ClearHtmlWrapperForNativeHtml properties are set to False, unlike in the blob.axd page in Figure 6. This will prevent the rendering from stopping, and therefore cause the HTML beneath to be rendered. In the blob.axd page we don’t want to implement any other HTML or control. This page is meant for picture and source document presentation, so we must set these properties to True to ensure the page content-encoding renders only binary information.
The next items to handle are the controls marked as Subtopics, which you can see twice on the form, being the fifth and sixth elements on this page. These controls render the lists of related topics and subtopics of the currently displayed topic. Make sure that for each of these, the properties pane appears as in Figure 10.
Figure 10 – Subtopics Properties Pane
N To set the control to render subtopics, click on the control on the form to open the properties for the control, and change the property RenderTopicFor accordingly. Note in addition that the control has associated in its XsltFileName property a file that you can tailor to create a custom “outfit” for the rendered content. The control looks for the CSLT file in [x]:\<installation folder>\Xslt. You’re invited to explore this function further.
Now we would like to provide navigation for our page, so users can move forward and backward in the relationship with the other topics in the publication. As you can see in Figure 7, at the bottom we find the last 2 Hyper.Net web server controls, visible by the text “Previous” and “Next.” Make sure that the properties pane looks as in Figure 11.
Figure 11 – NavigationLink Properties Pane
N To set the control to move “Next”, select it on the form to open the properties pane and change the properties shown by the red arrows.
Thus without any significant coding we have built the framework for a powerful portal-like web application. Now to finish our application we must implement the Table of Contents control (TOC) in a separate asp.net page as follows.