Site Construction
Building the application's BasePage class
To implement WebSkeleton, you must create a base class that extends the WebSkeleton.Page class. All ASPX classes will inherit from this application specific base class. In the base class you will "build" your application's visual skeleton programmatically and define additional regions where desired.
The first step is to create the base class.
Public MustInherit Class BasePage : Inherits GeekDork.WebSkeleton.Page
End Class
Constructing the "template" or "skeleton" layout.
Once you have the base class ready to use, you must "build" your application's visual skeleton programmatically. For demonstration purposes, we'll use a layout that uses a main html table with 2 rows. The first row contains the header, the second contains left navigation and the main content of the page.
| Header |
Left Nav
|
Main Content Area |
The layout is built in the class's constructor. Within the construction of the layout a couple of key things need to be done to incorporate the layout into the WebSkeleton:
- Plug the WebSkeleton's MainContent placeholder into the layout
- Plug the layout into the WebSkeleton's MainForm so it actually shows up on the pages
These steps are bolded in the following code:
Public MustInherit Class BasePage : Inherits GeekDork.WebSkeleton.Page
Public Sub New()
Dim tblLayout As New HtmlTable
Dim objRow As HtmlTableRow
Dim objCell As HtmlTableCell
tblLayout.ID = "tblMainLayout"
'Plug layout into WebSkeleton
Me.Skeleton.MainForm.Controls.Add(tblLayout)
'Create the Header row and add it to the table
objRow = New HtmlTableRow
tblLayout.Rows.Add(objRow)
'Create the Header cell and add it to the Header row
objCell = New HtmlTableCell
objCell.ID = "celHeader"
objCell.ColSpan = 2
objRow.Cells.Add(objCell)
'Create the main row and add it to the table
objRow = New HtmlTableRow
objRow.ID = "rowMain"
tblLayout.Rows.Add(objRow)
'Create left cell and add it to the main row
objCell = New HtmlTableCell
objCell.ID = "celLeft"
objRow.Cells.Add(objCell)
'Create content cell and add it to the main row
objCell = New HtmlTableCell
objCell.ID = "celMainContent"
'Plug MainContent into layout
objCell.Controls.Add(Me.Skeleton.MainContent)
objRow.Cells.Add(objCell)
End Sub
End Class
Now when all the controls in the ASPX form tag are parsed, they will end up in the right location of your site layout.
The layout can be constructed in any way possible, as long as the root level components of the layout get added in the right order to Me.Skeleton.MainForm as demonstrated above. .Net makes it very easy to add components to a layout by using user controls. When the layout is constructed user controls can be added where necessary:
'Create the Header cell and add it to the Header row
objCell = New HtmlTableCell
objCell.ID = "celHeader"
objCell.ColSpan = 2
objCell.Controls.Add(LoadControl("ucHeader.ascx"))
objRow.Cells.Add(objCell)
'Create the main row and add it to the table
objRow = New HtmlTableRow
objRow.ID = "rowMain"
tblLayout.Rows.Add(objRow)
'Create left cell and add it to the main row
objCell = New HtmlTableCell
objCell.ID = "celLeft"
objCell.Controls.Add(LoadControl("ucLeftNav.ascx"))
objRow.Cells.Add(objCell)
Using Regions
A particular application layout may require the ability for pages to add elements to the common areas (not just the main content area). This is where the use of Regions comes in. When constructing a layout any control can be designated as a Skeleton Region control simply by creating a new Region object and adding it to the regions collection of the page's Skeleton property. The Region class constructor accepts a region name, and a control. Let's modify the example we have been working with and add a dynamic region to the left cell of the main content row:
'Create left cell and add it to the main row
objCell = New HtmlTableCell
objCell.ID = "celLeft"
objCell.Controls.Add(LoadControl("ucLeftNav.ascx"))
Me.Skeleton.Regions.Add(New WebSkeleton.Region("leftRegion", objCell))
objRow.Cells.Add(objCell)
When WebSkeleton parses the controls in an ASPX it will keep an eye out for <asp:placeholder...> controls. When it encounters one, it checks the Regions collection for a region with a name (as specified in the Region constructor) that matches the ID attribute of the placeholder control. All of the controls inside of a matching placeholder control will get moved into the control specified in the Region constructor. Here's some HTML to show the correct syntax:
<body>
<form id="Form1" method="post" runat="server">
<asp:button id="Button1" text="Click Me" runat="server" />
<asp:placeholder id="leftRegion" runat="server">
<asp:label id="Label1" runat="server">Label Text</asp:label>
</asp:placeholder>
</form>
</body>
Button1 above will end up in the MainContent area of the layout while Label1 will end up in the left column where leftRegion lives. The resulting output will look like this:
The regions are programmatically accessible as well thru the Skeleton.Regions collection. Additional controls can be added programmatically to a region by accessing the Controls collection of the region's LayoutControl property:
Me.Skeleton.Regions("leftRegion").LayoutControl.Controls()
Application Name Syntax
The ApplicationName property of WebSkeleton.Page.Skeleton has a special syntax for constructing complex <title> tag values. Often a developer wants to have the <title> tag value indicate more than just a common site name. Showing an application section and/or a specific page name makes the value in the browser title bar as well as bookmarks more meaningful.
The syntax consists of 2 replacement tokens (%SECTION% and %PAGENAME%) and a pair of respective tags (<section>...</section> and <pagename>...</pagename>) to wrap around the token and additional text to indicate conditional characters. Let's look at an example:
Me.Skeleton.ApplicationName = ".: My web site<section> (%SECTION%)</section><pagename> :: %PAGENAME%</pagename> :."
When the page is rendered, WebSkeleton looks at the value of Skeleton.ApplicationName. It checks to see if there is a value for Skeleton.SectionName. If there is, it replaces the %SECTION% token with that value and strips out the section tags. The same happens for Skeleton.PageName. Here's a table of values and the resulting <title> tag value:
| SectionName |
PageName |
<title> tag |
| (Nothing) |
(Nothing) |
.: My web site :. |
| Some Section |
(Nothing) |
.: My web site (Some Section) :. |
| (Nothing) |
A Page |
.: My web site :: A Page :. |
| Some Section |
A Page |
.: My web site (Some Section) :: A Page :. |
Building the application's BaseUserControl class
In order to use the WebSkeleton component of user controls there is really nothing that needs to be done apart from inheriting all user controls from WebSkeleton.UserControl. This provides the automatic wiring of the Skeleton property between pages and user controls. There are some additional techniques described later that can greatly enhance the flexibility and ease of building a web application. See the 'Common Members' section for more.
Constructing the base user control class.
When it comes time to build a base user control class for the application, all that is needed is a simple class that inherits from WebSkeleton.UserControl:
Public MustInherit Class BaseUserControl : Inherits WebSkeleton.UserControl
End Class
Once this is in place, all of the application's user controls must inherit from this class.
|