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

  • 相关阅读:
    使用Layui上传图片,并进行压缩(非原创,证实可用)
    mysql 存储过程及事件
    Redis一些简单的笔记
    RIOT 技术笔记-01 RIOT介绍
    杂七杂八-ubuntu安装eclipse
    杂七杂八-sqlyog连接mysql错误码2058
    杂七杂八-Mysql8.0忘记root密码
    RIOT学习笔记-01 cygwin安装
    Ubutun-安装远程桌面
    中间件-RocketMQ 02 Docker下的安装
  • 原文地址:https://www.cnblogs.com/sanshi/p/2337814.html
Copyright © 2020-2023  润新知