[原创]FineUI秘密花园(四) — 页面级别的配置

每一个使用FineUI控件的页面都必须包含一个PageManager控件,我们可以把PageManager控件看做页面级别的参数配置(相对于Web.config站点级别的参数配置)。

 

页面级别的参数配置

 

  • Theme: 控件主题,目前支持三种主题风格(blue/gray/access,默认值:blue)
  • Language: 控件语言(en/zh_CN/zh_TW/...,默认值:zh_CN)
  • FormMessageTarget: 表单字段错误提示信息的显示位置(side/qtip,默认值:side)
  • FormOffsetRight: 表单字段右侧距离边界的宽度(默认值:20px)
  • FormLabelWidth: 表单字段标签的宽度(默认值:100px)
  • FormLabelSeparator: 表单字段标签与内容的分隔符(默认值:":")
  • EnableAjax: 是否启用AJAX(默认值:true)
  • AjaxTimeout: AJAX超时时间(单位:秒,默认值:60s)
  • EnableBigFont: 是否启用大字体,将ExtJS默认11px的字体全部改为12px,否则显示的中文字体太小(默认值:false)

上面这些参数和Web.config中的一样,只不过作用域在页面范围内,覆盖Web.config中的同名配置。

 

还有一些其他配置属性:

  1. EnablePageLoading:是否启用页面第一次加载提示,默认为居中显示的加载图标(默认值:true)
  2. EnableAjaxLoading:是否启用AJAX加载提示,默认为位于页面上方的文字提示(默认值:true)
  3. ExecuteOnReadyWhenPostBack:是否在每次页面回发时都执行onReady脚本(默认值:true)

虽然FineUI希望开发人员尽可能少地编写JavaScript脚本,但有时恰到好处的脚本可以起到事半功倍的效果,比如示例站点就引入了一个外部的default.js来处理用户点击左侧菜单的事件和地址栏#之后的片段:

   1:  <html>
   2:  <body>
   3:      <form>
   4:      </form>
   5:      <script src="./js/default.js" type="text/javascript"></script>
   6:  </body>
   7:  </html>

而default.js中的所有代码都放在一个 functiononReady() {}

的函数体中。

 

太棒了太棒了太棒了

这其实是FineUI的一个约定,FineUI会在ExtJS以及自身的脚本执行完毕后,查找是否存在onReady函数,如果存在就执行此函数。你可以启用Web.config中的DebugMode,观察生成的页面源代码,在最后你会看到这样的脚本:

image

 

 

占据整个页面的面板 - AutoSizePanelID属性

这是一个你一定不会错过的属性,如果希望某个Panel、Window、Tree、TabStrip、RegionPanel或者Form占据整个页面空间,就需要用到这个属性,还是看看示例站点的写法:

 

image

 

 

让ASP.NET控件也参与FineUI的AJAX回发 - AjaxAspnetControls属性

 

我们曾在第一篇文章提到,FineUI的一个设计理念是“用心实现80%的功能”,也就是说肯定会遇到一些FineUI提供的控件无法完成的任务,怎么办?我们只好求助于ASP.NET控件,并且FineUI提供了一种优雅的方式让ASP.NET控件也可以参与AJAX回发过程,这就是AjaxAspnetControls属性。

 

如果想让某个ASP.NET在页面回发时也更新,可以将其ID放在AjaxAspnetControls属性中,多个控件ID以逗号分隔,具体用法请参见示例页面

 

太棒了太棒了太棒了

那么,FineUI是怎么做到这一点的呢?

道理其实很简单,FineUI会在AJAX响应时查找生成的HTML片段中的那些ASP.NET控件,拿到ASP.NET生成的HTML并生成更新脚本,如果你用Firebug等调试工具查看一下AJAX请求,能够很清楚的看到如下交互过程:

image

image

 

 

太棒了太棒了太棒了

如果你能理解上面提到的FineUI的工作原理,可以尝试一下这个示例。这个示例主要是考察ASP.NET控件Label和Literal在FineUI的AJAX交互过程中的区别,先来看看代码:

   1:  <ext:PageManager ID="PageManager1" AjaxAspnetControls="Label1,Literal1" runat="server" />
   2:  <asp:Label ID="Label1" Text="Label1" runat="server"></asp:Label>
   3:  <br />
   4:  <asp:Literal ID="Literal1" Text="Literal1" runat="server"></asp:Literal>
   5:  <br />
   6:  <ext:Button ID="Button1" runat="server" Text="更新上面几个文本值" OnClick="Button1_Click">
   7:  </ext:Button>
   1:  protected void Button1_Click(object sender, EventArgs e)
   2:  {
   3:      Label1.Text = "Label1 - " + DateTime.Now.ToLongTimeString();
   4:      Literal1.Text = "Literal1 - " + DateTime.Now.ToLongTimeString();
   5:  }

 

如果只看这段代码,我们可能会想当然地以为asp:Label和asp:Literal在点击按钮时都被更新了,实际情况却不是这样:

image

为什么只有Label1的值得到更新,而Literal1没有得到更新,看看生成的HTML源代码,再想想FineUI的内部处理过程,你不难发现其中的奥秘。

生成的HTML源代码:

   1:  <span id="Label1">Label1</span>
   2:  <br />
   3:   Literal1
   4:  <br />
   5:  <div id="Button1_wrapper"></div>

原来asp:Label和asp:Literal生成的HTML代码的格式是不同的,asp:Literal生成的HTML代码没有外部的<span>标签,怪不得FineUI不能通过ID值来查找Literal并更新它的HTML值,那么该怎么呢?

对于这种特殊情况,FineUI没有打算费劲周折来让Literal和Label的行为一致,而是提供了一个简单的解决办法(在Literal外面嵌套一层span或者div标签):

image

是不是很好玩……

 

 

小结

每个页面都需要一个PageManager控件,它提供了页面级别的参数配置,可以用来覆盖Web.config中的配置。不过最常到的可能是AutoSizePanelID属性,用来将面板扩展到整个页面。

下一篇文章我们会介绍最常用到的Button控件,FineUI为Button提供了非常丰富的功能。

 

注:《FineUI秘密花园》系列文章由三生石上原创,博客园首发,转载请注明出处。文章目录 官方论坛

posted @ 2012-02-04 11:16 三生石上(FineUI控件) 阅读(...) 评论(...) 编辑 收藏