zoukankan      html  css  js  c++  java
  • [原创]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秘密花园》系列文章由三生石上原创,博客园首发,转载请注明出处。文章目录 官方论坛

  • 相关阅读:
    一行代码更改博客园皮肤
    fatal: refusing to merge unrelated histories
    使用 netcat 传输大文件
    linux 命令后台运行
    .net core 使用 Nlog 配置文件
    .net core 使用 Nlog 集成 exceptionless 配置文件
    Mysql不同字符串格式的连表查询
    Mongodb between 时间范围
    VS Code 使用 Debugger for Chrome 调试vue
    css权重说明
  • 原文地址:https://www.cnblogs.com/sanshi/p/2337814.html
Copyright © 2011-2022 走看看