本文目标

通过对toolbar控件的修改示例，让读者了解泽元框架中UI控件的前后台实现。

在泽元框架里控件为了降低学习难度，提高开发效率，把UI控件的使用封装为了自定义标签形如

需求背景

在ZCMS系统中，大部分页面的基部是一个toolbar，当页面比较长时，使用者希望在滚动条滚动时，toolbar能够一直位于页面顶部。（截止到2014-02-27toolbar控件并没有实现这个功能。）

交互设计

在编写代码前先考虑满足需求的交互方式是怎样的。
从最简单的情况考虑，只要给toolbar一个样式position:fixed；即能够让工具条的位置固定，
但试想如果工具条一开始就不位于页面的最顶部而位于页面的中间位置，这时一拖动滚动toolbar就不跟随页面滚动是不合适的，正确的交互应该是不要求toolbar一开始就固定位置，而是在滚动条滚动时，让toolbar始终处于可见范围内。

后端部分

• 首先我们要给<z:toolbar>标签添加一个属性来配置滚动条要处于固在可视范围的模式（下面简称fixed模式），暂定为属性名为fixed，只要fixed属性存在并且属性值不等于false则让工具条进入fixed模式。 UI控件相关的java类都处于framework工程的com.zving.framework.ui.control包中。 打开ToolBarTag.java ToolBarTag类中可以看到有两个属性theme、id，这两个属性的值是取自z标签属性。 在此类中搜索theme，仿照对theme属性的处理，添加以下代码

  public String getTheme() { return theme; } public void setTheme(String theme) { this.theme = theme; }

  public List<TagAttr> getTagAttrs() { List<TagAttr> list = new ArrayList<TagAttr>(); list.add(new TagAttr("id", true)); list.add(new TagAttr("theme")); list.add(new TagAttr("fixed")); return list; }

  public int doAfterBody() throws TemplateRuntimeException { String content = getBody().trim(); getPreviousOut().write(content); getPreviousOut().write("</div></div></div></div>"); getPreviousOut().print("<script>"); //getPreviousOut().print("Zving.Page.onReady(function(){new Zving.Toolbar('" + id + "');});"); getPreviousOut().print("Zving.Page.onReady(function(){new Zving.Toolbar({el:Zving.getDom('" + id + "'),fixed:" + fixed + "});});"); getPreviousOut().print("</script>"); return EVAL_PAGE; }

• 修改doAfterBody方法，把fixed的值传入JS控件构造函数。

• 修改getTagAttrs方法

• 定义私有属性fixed
  

  private String theme;

• 添加fixed属性的getter/setter

前端部分

• 对工具条进行处理的js脚本是在ZCMS工程的framework/components.min.js里，这个js是压缩后的版本，我们需要修改toolbar控件的源码位于framework/_source/components/toolbar.js。 打开toolbar.js，查找initComponent方法，initComponent方法是UI控件的构造函数里会调用到的方法，在这个方法里可以作一些控件初始化，我们要在initComponent方法里读取fixed属性的值，如果fixed为true，就监听滚动条的滚动，在滚动条滚动时让toolbar保持在可视范围内。 在initComponent方法的最后加入以下代码
  

  <code> if(me.fixed){<br/> z.Page.onLoad(function() {<br/> me.el.style.width = me.el.currentStyle.width;<br/> var offset = $(me.el).offset();<br/> if(isIE6){<br/> me.el.style.position = "absolute";<br/> me.el.style.left = offset.left+'px';<br/> $window.off('scroll.'+me.id).on('scroll.'+me.id, function(evt){<br/> me.el.style.top = $window.scrollTop() + 'px';<br/> });<br/> }else{<br/> me.el.style.position = "fixed";<br/> me.el.style.top = offset.top+'px';<br/> me.el.style.left = offset.left+'px';<br/> }<br/> });<br/> }<br/></code> 就根据传入构造函数的fixed配置，把toolbar设为fixed模式了。

将上面修改的java类生成class，将上面修改的js类重新压缩到components.min.js里，
然后就可以在zhtml页面里给<z:toolbar>标签添加fixed属性了。