ASP.Net 2.0 brought in an important concept about building a web page, the master page. In fact, master page is an overall concept, it includes master page and nested master page(s) ( can be multi-layer). In this artical, I will examine the elements that build up a multi-layer page structure and the inter-accessability among them. A multi-layer page structure is broadly used in creating a consistent web site.
[1] Define a master page
To define a master page, first we need to add a Master directive to a .master file at it's first line. .Net recognizes a master page by the file name extention and the directive declaration so as to find the bebind code of the MasterPage class. See the code snippet bellow.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="RootMaster.master.cs" Inherits="RootMaster" %>
Next, we create the behind code for the master page. It is nothing but a class derived from System.Web.UI.MasterPage.
// the RootMaster.master.cs
public partial class RootMaster : System.Web.UI.MasterPage
{
}
Once these are done, we start to design the master page layout and define placeholder(s). All design elements outside the placeholder(s) are shared among pages that derives from this master page.
<!--
master page defines content placeholder(s) which are going to be filled in nested master pages or pages.
-->
<asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
</asp:contentplaceholder>
<asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
</asp:contentplaceholder>
Note, the HTML page specific elemtents such as <head>, <title>, <body>, <form> and so forth are only showing in master page. Nested master pages and pages are just defining content for filling the placeHolders. From this sense, only master page is a page, while nested master page and page are just page assemblies.
[2] Nested master page
The great thing of nested master page is that it bring the flexibility to create multi-level of sharing page element. Concretely, it define page contents filling the place holders in master page, at the mean time, it defines new place holder in a new level of specifics.
Like defining master page, nested master page has .master file name extention. In this file, we need to set it's master page attributes by writing Master dirctive at the first top line. see bellow.
<%@ Master ClassName="NestedMaster" Language="C#" MasterPageFile="~/RootMaster.master" AutoEventWireup="false" CodeFile="NestedMaster.master.cs" Inherits="NestedMaster" %>
Compareing with that in the master page, We noticed that this declaration has a new attribute of MasterPageFile which has the value refering to the parent master page.
At this point, we may wonder how the code behind defines the NestedMaster class. the following code snippets shows just that.
public partial class NestedMaster : RootMaster
{
}
Here we noticed that nested master page class inherits the parent master page class rather than System.Web.UI.MasterPage.
Next, let's look at how nested master page fill place holders defined in parent master page and define new place holder(s)
<asp:content ContentPlaceholderID="plcHolderMain" id="MainContent" runat="server">
<DIV class="clsSectionHeader"></DIV>
<asp:contentplaceholder id="plcHolderSearch" runat="server">
</asp:contentplaceholder>
<DIV class="clsSubSectionHeader">SEARCH RESULTS <asp:Label Runat="server" ID="lblSrchFilter"></asp:Label>
</DIV>
<asp:contentplaceholder id="plcHolderResults" runat="server">
</asp:contentplaceholder>
</asp:content>
The code snippet above defines content filling the place holder of "plcholderMain" and defines two new smaller place holders "plcholderSearch" and "plcHolderResult".
[3] Multi-layer nested master page
Theoratically, nested master page has unlimited levels. It gives fine grain control when developing complex-layout web page.
Defining a lower level of nested master page is no different as defining a first level nested master page aforementioned except that the declarive in .master file has MasterPageFile set to the parent nested master page instead of the root master page; the bebind code class inherits parent master class rather rather than the RootMaster class.
<%@ Master ClassName="SubNestedMaster" Language="C#" MasterPageFile="~/NestedMaster.master" AutoEventWireup="false" CodeFile="SubNestedMaster.master.cs" Inherits="SubNestedMaster" %>
public partial class SubNestedMaster : NestedMaster
{
}
[4] Define pages inherited from master/nested master page
There are no difference between defining a page with master page of master and a page with master page nested master. what we need to do is set the MasterPagerFile property of Page directive to right .master file. In the following directive, the page set it's master to RootMaster.master which is a master page
<%@ Page Language="C#" MasterPageFile="~/RootMaster.master" AutoEventWireup="true" CodeFile="ModelPage.aspx.cs" Inherits="ModelPage" Title="Untitled Page" %>
In code behind file, we only need define our page class that inherited from System.Web.UI.Page.
public partial class ModelPage : System.Web.UI.Page
{
}
[5] The interaccessability
Because master page, nested master page and page end up rendering one physical page, it is essential to ensure that controls, which may distributed in different type of "pages", can communicate with each other.
However, It makes sense that we only examine elements in lower level "page" accessing elements in higher level "page". Not the reverse.
[5.1] Access master page and nested master page from a page
As shown in the following code adopted from ModelPage's code behind, we casts the page's Master object to RootMaster
type and then access a user custom control defined in that master page.
((UserControls_ModelUserControl1)((RootMaster)Master).UC1).CustomName = "Click Me";
The Master property of a page refers to the MasterPage object the page declared. Even this.Master represent an object of System.Web.UI.MasterPage, it actually is our extended and customized MasterPage object.
But, by default a control in a master page or nested master page is "protected", how come we can access it in a page? In fact we exposed the controls that supposed to be accessed from outside of the page. As shows in the following code.
public UserControls_ModelUserControl1 UC1
{
get { return this.ModelUserControl1_1; }
}
Another way to access a control is using FindControl method of the MasterPage class. .Net's Control class has the method. See the following code.
((UserControls_ModelUserControl1)(Master).FindControl("ModelUserControl1_1")).CustomName = "found Click me";
If we don't want to cast the default MasterPage object to our custom master page, like ((RootMaster)Master) mentioned before, we can use MasterType page directive indicating the compiler the specific master page so that not use the default master page type.
<%@ MasterType TypeName ="RootMaster" %>
then the accessing code will be
((UserControls_ModelUserControl1)(Master).UC1).CustomName = "Click Me";
[5.2] Access master page and nested master page from a nested master page
Due to a nested master page extends a master page or a parent nested master page, so the access should be straight forward through "this".
Regarding page accessability, what we examined above is actually a static model. A question left in my mind is that what about dynamically loaded controls in master page or nested master page? I will look at it in detail in another artical.
In this artical, I discussed one essential aspect of ASP.Net's web page designing model, the master page strategy. As we can see, multi-layer nested master page implements the real nature of element sharing in a web application and brings power to building consistent web site.
Monday, December 31, 2007
WPF Fundamentals
1. Introduction
Window Presentation Foundation, also named Avalon, is Microsoft's flagship for next generation application UX(user experience) development. It's UI model eliminates the difference of UI elements used in Web page rendering, Windows applications and smart devices. In addition, 3D graphics and animation features are incorporated in this framework so as to create rich user experience for Windows Vista. Also, vector graphics rendering ensures quality for different image size and resolution equipments.
2. XAML
Up front of WPF is XAML - Extensible Application Markup Language, a new markup language standard brought in along with WFP by Microsoft used to describe and define UIs.
Like Asp.net web page, XAML not only has the power for designing layout, it also supports themes and skins to build application-wide consistent pages. Themes and skins are defined as styles.
A XAML document usually refers to two namespaces (see the following code snippet), where XAML schemas are defined. The XAML compiler uses this schema to validate and parse XAML documents.
<Page x:Class="WPFProject.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1">
...
</Page>
3. The WPF Stack
Like most other frameworks, WFP runs on a layered manner. The topmost layer, called Presentation Framework layer, runs on top of Presentation Core layer. These two layers have all the classes of managed code that are controlled by the next layer, the CLR. Under CLR are milcore, User32, and DirectX. They call OS kernel and provide the system support for the top levels
4. WPF Application
The System.Windows.Application class is a framework for defining a WPF application. It exposed programming handlers to customize all aspects accross your application's lifecycle.
... the handlers
System.Windows.Application's StartupUri property is where we can specify the start UI page to run. The following snippet specifies the starting page in XAML tag and with code.
<Application x:Class="WPFProject.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="whatever.xaml"
>
</Application>
or in behind code:
this.StartupUri = "whatever.xmal";
A WPF application instance can he hosted in a standalone commandline application or in XBAP(XAML Browser Application), a IE embeded application
Visual Studio 2005 provides a choice for a WPF project to be compiled to a console application, Windows applicaiton or a class library.
5. New Programming Features
5.1 Dependency Property
5.2 Attached Property
5.3 Routed Events
5.4 Animation coding
The details of these topics are exmined in another artical.
6. Questions
What is Site of Origin?
How to define and use Resources
A WPF application can be compiled into a class library, in which circumstance and how to access and incorporate the XAML pages?
What is provided by milcore(see 3: The WPF stack)?
How to use databinding in XAML?
Window Presentation Foundation, also named Avalon, is Microsoft's flagship for next generation application UX(user experience) development. It's UI model eliminates the difference of UI elements used in Web page rendering, Windows applications and smart devices. In addition, 3D graphics and animation features are incorporated in this framework so as to create rich user experience for Windows Vista. Also, vector graphics rendering ensures quality for different image size and resolution equipments.
2. XAML
Up front of WPF is XAML - Extensible Application Markup Language, a new markup language standard brought in along with WFP by Microsoft used to describe and define UIs.
Like Asp.net web page, XAML not only has the power for designing layout, it also supports themes and skins to build application-wide consistent pages. Themes and skins are defined as styles.
A XAML document usually refers to two namespaces (see the following code snippet), where XAML schemas are defined. The XAML compiler uses this schema to validate and parse XAML documents.
<Page x:Class="WPFProject.Page1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1">
...
</Page>
3. The WPF Stack
Like most other frameworks, WFP runs on a layered manner. The topmost layer, called Presentation Framework layer, runs on top of Presentation Core layer. These two layers have all the classes of managed code that are controlled by the next layer, the CLR. Under CLR are milcore, User32, and DirectX. They call OS kernel and provide the system support for the top levels
4. WPF Application
The System.Windows.Application class is a framework for defining a WPF application. It exposed programming handlers to customize all aspects accross your application's lifecycle.
... the handlers
System.Windows.Application's StartupUri property is where we can specify the start UI page to run. The following snippet specifies the starting page in XAML tag and with code.
<Application x:Class="WPFProject.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="whatever.xaml"
>
</Application>
or in behind code:
this.StartupUri = "whatever.xmal";
A WPF application instance can he hosted in a standalone commandline application or in XBAP(XAML Browser Application), a IE embeded application
Visual Studio 2005 provides a choice for a WPF project to be compiled to a console application, Windows applicaiton or a class library.
5. New Programming Features
5.1 Dependency Property
5.2 Attached Property
5.3 Routed Events
5.4 Animation coding
The details of these topics are exmined in another artical.
6. Questions
What is Site of Origin?
How to define and use Resources
A WPF application can be compiled into a class library, in which circumstance and how to access and incorporate the XAML pages?
What is provided by milcore(see 3: The WPF stack)?
How to use databinding in XAML?
Subscribe to:
Posts (Atom)