关于界面的重用性设计

原创 2006年06月05日 12:24:00

      主要做了一个基页:BasePage 在此基页上布局, default页继承它,并根据url参数,自动加载不同的处理用户控件。

1、BasePage 页:

------------------------------------------------------------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace PhsResManagerWebpro
{
 /// <summary>
 /// BasePage 的摘要说明。
 /// </summary>
 public class BasePage : System.Web.UI.Page
 {
  //用户控件
  protected PhsResManagerWebpro.UserControls.headermenu headermenu1;
  protected PhsResManagerWebpro.UserControls.caption caption1;
  protected PhsResManagerWebpro.UserControls.menu menu1;
  protected PhsResManagerWebpro.UserControls.cauda cauda1;

  private void Page_Load(object sender, System.EventArgs e)
  {

   LogionPage();  //也面加载
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion

  #region 页面加载

  private void LogionPage()
  {
   SetCssFile("defaultCss.css");  //设置Css样式
   SetLayout();      //页面布局
  }

  #endregion

  #region 页面布局
  /// <summary>
  /// 页面布局
  /// </summary>
  private void SetLayout()
  {
   Control Form=this.Page.Controls[1];         //页表单form对象
  
   //标题Panel创建
   System.Web.UI.WebControls.Panel PnlCaption=new Panel();
   PnlCaption.ID="PanCaption";
   PnlCaption.Width=970;
   PnlCaption.Height=80;
   PnlCaption.CssClass="panel15";
   
   //主菜单Panel创建
   System.Web.UI.WebControls.Panel PnlMainmenu=new Panel();
   PnlMainmenu.ID="PnlMainmenu";
   PnlMainmenu.Width=970;
   PnlMainmenu.Height=10;
   PnlMainmenu.CssClass="panel10";
   
   //内容框架Panel创建
   System.Web.UI.WebControls.Panel PnlMain=new Panel();
   PnlMain.ID="PnlMain";
   PnlMain.Width=970;
   PnlMain.Height=1000;
   PnlMain.CssClass="panel0";
     
   //页尾Panel创建
   System.Web.UI.WebControls.Panel pnlEnd=new Panel();
   pnlEnd.ID="pnlEnd";
   pnlEnd.Width=970;
   pnlEnd.Height=90;
   pnlEnd.CssClass="panel15";


   //加载布局
   Form.Controls.Add(PnlCaption);
   Form.Controls.Add(PnlMainmenu);
   Form.Controls.Add(PnlMain);
   Form.Controls.Add(pnlEnd);

   //导航Panel创建
   System.Web.UI.WebControls.Panel pnlMenu=new Panel();
   pnlMenu.ID="pnlMenu";
   pnlMenu.Width=250;
   pnlMenu.Height=1000;
   pnlMenu.CssClass="panel15left"; 
 
   //内容Panel创建
   System.Web.UI.WebControls.Panel pnlContent=new Panel();
   pnlContent.ID="pnlContent";
   pnlContent.Width=718;
   pnlContent.Height=1000;
   pnlContent.CssClass="panel15right"; 

   //加载内容框架布局
   PnlMain.Controls.Add(pnlMenu);
   PnlMain.Controls.Add(pnlContent);
   
   //菜单用户控件
   headermenu1=(PhsResManagerWebpro.UserControls.headermenu)this.LoadControl("UserControls/headermenu.ascx");
   //标题头用户控件
   caption1=(PhsResManagerWebpro.UserControls.caption)this.LoadControl("UserControls/caption.ascx");
   //导航菜单用户控件
   menu1=(PhsResManagerWebpro.UserControls.menu)this.LoadControl("UserControls/menu.ascx");
   //页尾 用户控件
   cauda1=(PhsResManagerWebpro.UserControls.cauda)this.LoadControl("UserControls/cauda.ascx");
   
   //加载自定义控件
   PnlCaption.Controls.Add(caption1);
   PnlMainmenu.Controls.Add(headermenu1);
   pnlMenu.Controls.Add(menu1);
   pnlEnd.Controls.Add(cauda1);

   //页面的处理控件加载
   SetContentUsercontrls(pnlContent);
  }
  #endregion

  #region Css样式加载

  /// <summary>
  /// Css样式加载
  /// </summary>
  private void SetCssFile(string strCssFileName)
  {
   string strCssUrl=@"<link href=Css/"+strCssFileName+" rel=stylesheet type=text/css>";  //Css路径
   Response.Write(strCssUrl);   //Css路径引入

  }
  #endregion

  #region 页面处理控件加载

  /// <summary>
  /// 页面的处理控件加载
  /// </summary>
  /// <param name="pnlMain"></param>
  public void SetContentUsercontrls(System.Web.UI.WebControls.Panel pnlMain)
  {
   if(Request.Params["PageName"]==null)
    return;

   string PageName=Request.Params["PageName"].ToString();  //得到请求的处理页面名称
   
   if(PageName==null || PageName=="")
    return;
   else
   {
    //根据连接串Key值,从XML里读取Value值
    DataSet ds=new DataSet();
    ds.ReadXml(MapPath("urlConfig.xml"));
    for(int i=0;i<ds.Tables[0].Rows.Count;i++)
    {
     if(ds.Tables[0].Rows[i]["key"].ToString()==PageName)
     {
      PageName=ds.Tables[0].Rows[i]["value"].ToString(); 
      break;
     }
    }
   }
 
   //加载用户控件
   Control cTemp=(Control)this.LoadControl(PageName);
   pnlMain.Controls.Add(cTemp);
  }

  #endregion

 }
}

 

urlConfig.xml文件:

-----------------------------------------

<?xml version="1.0" encoding="UTF-8"?>
<urlConfig>
 <urlItem>
  <key>WGinfoUserControl</key>
  <value>BLLUserContrls/WGinfoUserControl.ascx</value>
 </urlItem>
 
 <urlItem>
  <key></key>
  <value></value>
 </urlItem>

 <urlItem>
  <key></key>
  <value></value>
 </urlItem>
 
</urlConfig>

defaultCss.css文件:

-----------------------------------------------------

body
{
 FONT-SIZE: 14px;
 COLOR: darkslategray;
 background-color:White;
 text-align:center;
}

.panel15
{
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP: buttonshadow 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-BOTTOM: buttonshadow 1px solid;
 background-color: #f5f5f5;
 
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 
 text-align:left;
}

.panel0
{
 BORDER-RIGHT: buttonshadow 0px solid;
 BORDER-TOP: buttonshadow 0px solid;
 BORDER-LEFT: buttonshadow 0px solid;
 BORDER-BOTTOM: buttonshadow 0px solid;
 background-color: #f5f5f5;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.panel10
{
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP: buttonshadow 0px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-BOTTOM: buttonshadow 0px solid;
 background-color: #f5f5f5;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.panel5
{
 BORDER-RIGHT: buttonshadow 0px solid;
 BORDER-TOP: buttonshadow 1px solid;
 BORDER-LEFT: buttonshadow 0px solid;
 BORDER-BOTTOM: buttonshadow 1px solid;
 background-color: #f5f5f5;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.panel15right
{
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP: buttonshadow 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-BOTTOM: buttonshadow 1px solid;
 background-color: #f5f5f5;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.panel15left
{
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP: buttonshadow 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-BOTTOM: buttonshadow 1px solid;
 background-color: #f5f5f5;
 float:left;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.panel15right
{
 BORDER-RIGHT: buttonshadow 1px solid;
 BORDER-TOP: buttonshadow 1px solid;
 BORDER-LEFT: buttonshadow 1px solid;
 BORDER-BOTTOM: buttonshadow 1px solid;
 background-color: #f5f5f5;
 float:right;
  
 PADDING-RIGHT: 0px;
  PADDING-LEFT: 0px;
  PADDING-BOTTOM: 0px;
  PADDING-TOP: 0px;
 
 MARGIN: 2px 0px 1px;
 text-align:left;
}

.ButtonCss {
    font-family: "Tahoma", "宋体";
    font-size: 9pt; color: #003399;
    border: 1px #003399 solid;
    color:006699;
    BORDER-BOTTOM: #93bee2 1px solid;
    BORDER-LEFT: #93bee2 1px solid;
    BORDER-RIGHT: #93bee2 1px solid;
    BORDER-TOP: #93bee2 1px solid;
    background-image:url(../Images/bluebuttonbg.gif);
    background-color: #e8f4ff;
    CURSOR: hand;
    font-style: normal ;
}

.TextBoxCss
{
 font-family: "Tahoma", "宋体";
    font-size: 9pt;
    color: #003399;
}
 
.InputCss { 
    font-size: 9pt;
    color: #003399;
    font-family: "宋体";
    font-style: normal;
    border-color: #93BEE2 #93BEE2 #93BEE2 #93BEE2 ;
    border: 1px #93BEE2 solid;
}

 

DefaultIndex.aspx.cs

-------------------------------------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace PhsResManagerWebpro
{
 /// <summary>
 /// DefaultIndex 的摘要说明。
 /// </summary>
 public class DefaultIndex :BasePage
 {
  private void Page_Load(object sender, System.EventArgs e)
  {
   // 在此处放置用户代码以初始化页面
  }

  #region Web 窗体设计器生成的代码
  override protected void OnInit(EventArgs e)
  {
   //
   // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
   //
   InitializeComponent();
   base.OnInit(e);
  }
  
  /// <summary>
  /// 设计器支持所需的方法 - 不要使用代码编辑器修改
  /// 此方法的内容。
  /// </summary>
  private void InitializeComponent()
  {   
   this.Load += new System.EventHandler(this.Page_Load);

  }
  #endregion
 }
}

 

相关文章推荐

具有引导性的移动应用界面设计模式

文字工作搞的有点儿奔放了啊,一直玩到周日晚间这般时候;任何其他事情恐怕都难以让自己有这样的劲头了吧。也难说。其实周末两天主要是收拾家当准备搬家;忙里抽闲做做内容,纯当休闲娱乐。 今次的译文,与之前一...

WEB交互界面易用性设计和验收的指导性原则

随着企业intranet和国际internet的迅速发展,越来越多的工作流程,商务交易,教育、培训、会议和讲座,以及个人消费娱乐都被转移到所谓的万维网(World Wide Web,以下简称WEB)上...
  • e_wsq
  • e_wsq
  • 2012年05月23日 16:51
  • 528

简单网页版的年会抽奖程序,设计个界面套上就可以了,抽奖员工编号姓名改改代码就可以了,很简单的

COPY下面的代码,另存为一个网页,用浏览器打开可以看到效果。 代码如下: 抽奖活动 抽奖活动 body {pad...

谈谈Winform程序的界面设计

合理的布局,绚丽的样式,谈谈Winform程序的界面设计 从事Winform开发很多年了,由于项目的需要,设计过各种各样的界面效果。一般来说,运用传统的界面控件元素,合理设计布局,能够设计出...
  • ztzi321
  • ztzi321
  • 2014年10月14日 17:22
  • 981

Qt设计用户界面的三种方法

今天阅读了《C++ GUI Qt4编程》的中创建对话框的章节,内容不难也不多,易于掌握。虽然此章的标题为“创建对话框”;但我却认为其内容的重点可放在如何使用Qt设计界面上。   Qt设计界面有三种方...

android 实现类似个人中心的界面设计

From:android 实现类似个人中心的界面设计 上效果图:    先理清设计思路:  1、外层用linearlayout包裹,linearlayout采用shape,搭上...

OCUI界面设计:表格视图-高级使用

UITableView 编辑状态简介 UITableView提供了多种表视图的编辑方案:删除、插入、移动等。 切换编辑状态方法 - (void)setEditing:(BOOL)editing ani...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于界面的重用性设计
举报原因:
原因补充:

(最多只允许输入30个字)