如何构建积木式Web应用(转贴)
如何构建积木式Web应用
如何构建积木式Web应用
刘志波
--------------------------------------------------------------------------------
上下文
基本上我们在儿童时代都玩过积木玩具。通过一块块的积木,再加上我们的想象力,就可以构造出非常多不同的风格的建筑。那么, 我们可不可以把这种搭积木的方式应用到我们的web应用上呢。
问题
web应用通过提供给用户一整套组件(相当于积木),以及一套已经成型的方案(相当于图纸)。用户可以采用类似搭建积木的方式来根据自己的需要制作界面和应用。
环境
采用asp.net 1.0或asp.net 1.1
预备知识
C#,asp.net的服务器控件编程,asp.net服务器控件生命周期
最好具备以下知识
Page Controller,Front Controller
解决方案
1.建立目录结构
为了了解如何采用积木块式应用,我们首先建立如下的主题目录结构:
在Sheme目录下保存所有的主题,每个主题都采用相同的目录结构。UserControl目录保存最基本的积木块(UserControl),Page目录是积木块组成的页面所形成的UserControl,Css目录保存与积木块同名的css文件来控制UserControl的界面。
PageTeamplate.ascx是页面布局框架,根据所请求的页面不同,在PageTemplate的主体位置载入不同Page目录下的ascx文件。
2.划分自己的web积木——UserControl
将web应用分成一块块的积木,每一块积木形成一个UserControl,并且每一个UserControl有一个同名的css文件用来控制界面。最基本的积木块要放在UserControl目录下,而由最基本积木块组成的页面文件放在Page目录下。
提示:在一般的web应用中,都会有Header,Footer,Login等等这样的模块,这些模块就可以形成UserControl组成web应用的积木。具体积木块应该根据你的web应用功能来划分,一般来说我们可以把某个功能就划分成一个积木。
3.构建载入积木块的容器——MyPlaceHolder
有了UserControl这些积木块之后,就需要有能够自动在应用中载入这些UserControl积木的容器,这就是PlaceHolder。不过,我们需要扩展PlaceHolder的功能达到自动载入UserControl的目的。
public class MyPlaceHolder : PlaceHolder
{
private string userControl; // 要载入的UserControl目录下的.ascx
private string pageControl; // 要载入的Page目录下的.ascx
public MyPlaceHolder()
{
userControl = "";
pageControl = "";
}
public string UserControl
{
get
{
return userControl;
}
set
{
userControl = value;
}
}
public string PageControl
{
get
{
return pageControl;
}
set
{
pageControl = value;
}
}
// 当需要载入多个UserControl时,可以直接调用LoadUserControl
// 当只需要载入一个UserControl时,可以调用Clear清除载入过的内容
public void Clear()
{
this.Controls.Clear();
}
// 载入UserControl目录下的.ascx
// 以及导入对应的css文件
public void LoadUserControl(string UserControl)
{
this.userControl = UserControl;
BasePage page = (BasePage)this.Page;
// 请参考后面的BasePage的代码
Control control = this.Page.LoadControl(
page.Scheme + "usercontrol/" + userControl + ".ascx");
string css = "css/" + userControl + ".css";
// 对应的css文件
if(File.Exists(this.Page.MapPath(page.Scheme+css)))
{
page.AddCss(page.Scheme + css);
}
this.Controls.Add(control);
}
// 载入Page目录下的.ascx
// LoadPage与LoadUserControl的区别是两者载入的.ascx所在的目录不同
// Page目录下的.ascx可以看成是一些搭建主体结构的.ascx,其使用MyPlaceHolder
// 来包含最基础的积木块.ascx(在UserControl目录下)
public void LoadPage(string PageControl)
{
this.PageControl = PageControl;
BasePage page = (BasePage)this.Page;
Control control = this.Page.LoadControl(
page.Scheme + "page/" + pageControl + ".ascx");
string css = "css/" + pageControl + ".css";
if(File.Exists(this.Page.MapPath(page.Scheme+css)))
{
page.AddCss(page.Scheme + css);
}
this.Controls.Add(control);
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if(!userControl.Equals(string.Empty))
{
LoadUserControl(userControl);
}
}
}
public class MyPlaceHolder : PlaceHolder
{
private string userControl; // 要载入的UserControl目录下的.ascx
private string pageControl; // 要载入的Page目录下的.ascx
public MyPlaceHolder()
{
userControl = "";
pageControl = "";
}
public string UserControl
{
get
{
return userControl;
}
set
{
userControl = value;
}
}
public string PageControl
{
get
{
return pageControl;
}
set
{
pageControl = value;
}
}
// 当需要载入多个UserControl时,可以直接调用LoadUserControl
// 当只需要载入一个UserControl时,可以调用Clear清除载入过的内容
public void Clear()
{
this.Controls.Clear();
}
// 载入UserControl目录下的.ascx
// 以及导入对应的css文件
public void LoadUserControl(string UserControl)
{
this.userControl = UserControl;
BasePage page = (BasePage)this.Page;
// 请参考后面的BasePage的代码
Control control = this.Page.LoadControl(
page.Scheme + "usercontrol/" + userControl + ".ascx");
string css = "css/" + userControl + ".css";
// 对应的css文件
if(File.Exists(this.Page.MapPath(page.Scheme+css)))
{
page.AddCss(page.Scheme + css);
}
this.Controls.Add(control);
}
// 载入Page目录下的.ascx
// LoadPage与LoadUserControl的区别是两者载入的.ascx所在的目录不同
// Page目录下的.ascx可以看成是一些搭建主体结构的.ascx,其使用MyPlaceHolder
// 来包含最基础的积木块.ascx(在UserControl目录下)
public void LoadPage(string PageControl)
{
this.PageControl = PageControl;
BasePage page = (BasePage)this.Page;
Control control = this.Page.LoadControl(
page.Scheme + "page/" + pageControl + ".ascx");
string css = "css/" + pageControl + ".css";
if(File.Exists(this.Page.MapPath(page.Scheme+css)))
{
page.AddCss(page.Scheme + css);
}
this.Controls.Add(control);
}
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
if(!userControl.Equals(string.Empty))
{
LoadUserControl(userControl);
}
}
}
使用方法:
<HomeOffice:MyPlaceHolder
id="Myplaceholder1"
runat="server"
UserControl="Header">
</HomeOffice:MyPlaceHolder>
// 这里的Header是位于UserControl目录下的Header.ascx