Introduction

This article is about detailing processes involved during Framework developments, and as an example, develops a very small framework “Master-Page Framework” using ASP.NET and C#. You will be explained about the object oriented design methodology using UML, Design patterns involved in the Frameworks, and a little about the Pattern Oriented Architecture and Design (POAD), a little bit of everything.

Master Page Framework Development:

Every thing starts with a use case in Object Oriented Software Engineering. One of the use cases while we develop web application is that “User needs a consistent look and feel, through out, period”.

Now what a deal??? We see every day, every where, consistent web-sites etc., etc… We see good-looking “sexy” web sites, but we don’t see one thing (well! you can’t see that), how much maintenance cost is required if we need one change for the whole of the web site. Look's a big deal now :).

Apart from some CSS style-sheet for consistency, what else we need, a framework, Master-Page Framework, which should be extendible, easy to use, pluggable and modifiable visually! (Sounds great! what a wish :)) There is no such thing existing in ASP.NET (Whidbey, does have one, but still long way to go).

These articles are very good starting points, so I took the entire valuable advises from them and went further, since, I was looking for something like a reusable/extendible Framework. I took the responsibility of redesigning the whole wheel that never existed, in the first place, how is that ;).

The approach I took, what I devised is, Pattern Oriented Architecture and Design (POAD), not design patterns, they are different. I call it POAD because my application has a peculiar look and feel that it follows a pattern. POAD means you have entire prototypic pattern, your application will follow, but will be overridden later for concrete structure of it (the concept needs a whole article and I would write later, with some examples, hopefully next month). So the master-page has header, footer, navigator, menus/submenus, and content place-holders that would be filled in later as needed for concrete pages, How’s that, sounds good. Let's move further! Here are the steps involved in designing the POAD based softwares.

Draw the whole abstract pattern your framework would provide.

Find Objects responsible for doing the job.

Find relationships between them.

Find design patterns needed.

Elaborate Objects while designing them, and find functionality for them.

Write test cases.

Steps Involved:

Draw the whole abstract pattern your framework would provide.

Here is the prototypic pattern of our Framework:

Figure 1 (Master-Page Layout/pattern)

Master Web User-Control

If we decompose this pattern into objects, it’s being clear that we should have something like skeleton or template for the place holders, i.e., there should be something like a master-page that is composed of the placeholders, like header, footer, logo, menus, navigator, and contents etc.

Since our plan is to change these place holders visually, we could safely put these place holders in a user control (PageUserControlBase) that in turn contains all the place holders. Call it a Master user-control, where you define your layout for these contents. Now, our model would have a Master Page that in turn is composed of Master User-Control (PageUserControlBase) that in turn is composed of placeholders, like this:

Getting closer, great! :) Now the visual part is decided that we provide using user-control or so. We want this user-control to be pluggable at run time, so we’ll dynamically load it at run time using web.config like this:

Our Framework encapsulates all the functionality of the Master User-Control (PageUserControlBase) class in an assembly as a base/abstract class, so that we can extend it in future, if we need it. Here is how it would look like:

With this approach, if in future, we decide with some other look and feel of the master user control, all we need is to extend PageUserControlBase class and use it:

<%@ControlInherits="Shams.Web.UI.MasterPages.PageUserControl"%>

Or use it like this:

<%@ControlInherits="Shams.Web.UI.MasterPages.PageUserControlExtra"%>

PageUserControl or PageUserControlExtra, will provide us access to the WebControls.PlaceHolder(s). Here is how the PageUserControlBase.ascx should look like:

This was straightforward, right? Yes, it is. Now the visual component can easily be extended, and further, is pluggable through the web.config, and is ready. So while designing the Framework, we are right on target, extendible and pluggable Framework, great :). What else would be needed, well lot of work still there? All we have done so far is we provided a consistent look and feel through pluggable Master User Control-Base. We have a long way to go. Let's first analyze how the HTML/aspx page looks like:

You can see the page itself has four parts, let’s examine them closely:

Master Custom-Control:

Every page can have one and only one HTML Form. We put all the server-controls in this form (part-C). So, what we need is another object that would encapsulate all these HTML-Rendering stuff shown above, like Part-A, Part-B, Part-C, and Part-D in it. If you look at the Control class, it has all the functionality we are looking for. The Control is a composite that means we can put other controls in it. So, it would be a good starting point to start with a Custom control by extending the Control Object. This extended Custom Control, we named it PageControlBase, will provide HTML rendering capability as well as it would have a System.Web.UI.HtmlControls.HtmlForm object. This Form object would be used to add our famous master-user-control or Part-C in it. Now, our master page would be composed of some master custom control, and master-user-control. Here is the UML diagram that demonstrates all these:

Now that we have a pluggable Master-User-Control, a custom control that will create all of the HTML parts is necessary.

What we need is an integrator class that will insert Master User-Control into Custom control form and attach it to the Master-Page. And that’s the MasterPageBase class, derived from UI.Page class:-

Design Patterns used in Master-Page Framework

When you are planning for any Framework that is based on some prototype or follow POAD, the most effective pattern is the Template design pattern. Here is the code that demonstrates this pattern:

We defined the sequence/pattern of execution that would later be overridden by the derived classes.

Template Design Pattern is used in two occasions:

Defined template in the Custom control:-

And here is the other place where the same design pattern is used:

Other patterns that are used are Factory and Composite Design Patterns. The Factory pattern is used to create classes, and should provide one place; if we have plan to put some business logic around their creation, we can do it, without breaking the existing code.

Composite Pattern is built in with the .NET Framework, like Control Class is itself based on composite pattern. Composite Pattern in its simple form is a list of list of objects. Instead of reinventing my own containers for objects, I used the Control class as my starting point.

So that’s it, we are done with the Framework. All you need is to derive your page from the MasterPage class, and override the stuff you want to change in your concrete classes. How we do it is shown using UML Diagram here:

If you have some other-layout in your mind for your MasterPage, you can create your own user control and change the signature in the web.config.

Here is the not so detailed objects sequence diagram, for the above scenario:-

2. Creation of MasterPage from MasterPage Skeleton:-

We would create a MasterPage class from MasterPageBase and override the placeholders with our own UserControls. Here is the example code snippet for this:-

Here is a Master-Page I created for my sample website:

3. Creation of your own pages from MasterPage you just have created.

All you need to do is make this MasterPage class a base class for all of your pages, and override the functionality that you might want to be different, and make things consistent:-

Here is the proposed UML diagram for the rest of the pages for the web site:-

4. If you have more than one Master Pages (MDI Scenario)

In this particular scenario, you would override the function LoadPageUserControl(), where the framework is dynamically loading the user specified master control. Here is the code snippet for this scenario:-

And here is the UML diagram for representing this scenario:-

Here is the UML representation of the generic case, MDI (Multiple Document Interface) or Multiple Master Interface (MMI) in case of Web-Applications:-

So that’s it for now, I hope you have enjoyed this MMI journey with me, although the flight was a little bit bumpy, but we are happy that we are safely landed back to home (page). Now enjoy the framework, all you need is to include assembly Shams.Web.UI.MasterPages.dll and start using it. I have also included an example that will help you in designing your applications. Please send me your feedbacks for further improvement of the framework, thanks.

Conclusion

Software architecture revolves around structure, and framework provides the structure to it. The framework is the foundation for any application being developed. Poor foundation leads to poor applications that require more maintenance cost and would be very inefficient by nature. So whenever you decide for a framework development, look for some one who is a domain expert for the particular business and have lots of design experience as well, in that way, you would be able to develop something that is reusable and extensible in nature.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

Share

About the Author

Lead Architect with 20+ years of software design and development experience. Architected and designed many industrial softwares and passed through full software development life-cycle. Strong hold in Object-Oriented software engineering using UML with Design Patterns, C#, .NET, C++/VC++ and Java. Domain expertise are in Distributed Computing along with WCF/Web services, Messaging Systems (MSMQ), Multi-threading, Component developments, Computer Graphics, Embedded Systems, GIS development, framework development, User-Interface designs (WPF .NET), Rule based development (WF .NET), Chemical Engineering and Process Controls. Having both Bachelors and Masters degrees in Engineering with certifications in Obect Oriented Analysis and design.

Comments and Discussions

suppose i have developed a project for hospital management system,
now i want to lock the IP address of my site if i am using through remote location
what changes and where i can do for locking IP address?

hello sir
i m a fresher in dotnet world.i need to designed the web pages with the same approach as u have disscussed.
i tried to understand ur project and i needed same.
but will u eloborate this project in steps(more)or can say algorithimic way.that i can understand it in proper way.please sir ithink u can help me:.

I notice the .ascx.cs files and the .aspx.cs do not share the same library at all, since the ascx is derived from UserControl and the aspx is derived from Page. How can we overcome this and make a common library that will be transparent with both page types? I can do this with Java, but not with .net because dotnet does not support multiple inheritance.

Good start... I've had some trouble with ViewState in some UserControls though (some viewstate objects were not persisted correctly), when the UserControl uses dynamically loaded controls by overriding
CreateChildControls()

Hi Shams
I started working on your lovely Master Page, I put a .acsx with a navigation tree on the left and to each node I have another .ascx I successfully loaded the .acsx to the content Placeholder [I created a method in the master.cs to load the appropriate .ascx]The point here is the .ascx need a 6 .parent to call that method, so my solution was to create a Custom .ascx contain a reference to the Master and make all the other to derive from, and they will access this function easily, So I need your inputs at this point, Is that is correct or there is a better way to do it ...

Hi Shams
A very good start for my web application: Only that I have tried to run the Demo you include here but I got that error:
System.InvalidCastException: Specified cast is not valid and line 62 was highlighted : Line 62: userPageControl = (PageUserControl)

hello waheeda please help me!
i m a fresher in dotnet world.i need to designed the web pages with the same approach as u have disscussed.
i tried to understand ur project and i needed same.
but will u eloborate this project in steps(more)or can say algorithimic way.that i can understand it in proper way.please ithink u can help me:.

hello,
will u help me please.
while in demo PageUserControlBase.ascx contain all the object(placehailder)then why we r using masterpageusercontrol.ascx in configfile.
as we have already frame of pageusercontrolbase.ascx.

Note that the variable placeHolderNames in MasterPageBase is protected, so it could be assigned another value in a derived class. By changing the code this way, you are not limited to the placeholders which are defined in the interface. If for some reason someone would like to create a masterpage with more placeholders, he/she just has to change the contents of this variable. If suddenly he/she decides to go back to a previous version with less placeholders, everything slould still work OK.

The same kind of remarks could be made for the ToggleNavigation and ToggleLogoBar. The placeholder on which these functions operate are now hardwirded in the code.

Furthermore I think you made a typo in the function HtmlRenderStarts of class PageControlBase. I think styleSheetLink should be replaced with StyleSheetLink (notice the capitilazation of the first letter.

I wonder why dont you have the main content include in the aspx file ?

for example: html file

<br />
// begin html file<br />Some content goes here<br />
// end html file<br />
<br />
<br />
And the page will render with that HTML code in MainContent Panel. Is it OK ? If it is ok, how can I do that ?<br />
<br />
thx in advanced

I'm not sure how to implement the content.. which is a rather important factor here!

The content needs to be appearing in a specified area within the PageUserControlBase.ascx, otherwise the content just appears at the bottom of the page. I'm not sure how to replace the mastercontentscontrol.ascx with an area that I can enter content.

I'm working on one of these master-page classes and I'd like to know if there is an easy way to add to the html header the line to specify a css class. I've been trying to override a number of things and have yet to find anything that works properly. Any help would be appreciately greatly! Thanks Chuck

I have posted a new article that discusses the robustness analysis using UML. you will find it at http://www.codeproject.com/aspnet/ModelViewController.asp, with it you'll find updated MasterPageFramework library, been used with this article. Cheers