Yahoo!用户界面博客（YUIBlog）

告诉我们一点有关项目的。

“得墨忒耳”是最近的Web 2.0应用程序，我们建立了网络会议，临时会议和帐户管理，提供强大的解决方案，以代号。 目前我们有两个主要的产品套件：“会议中心”和“管理模块”。

虽然它在RC短语仍然没有公开的访问，以查看它，我已提取的一种管理模块的原型演示门户物业管理。

YUI库组件用于在您的项目？

当我们最初试图决定使用JS框架和UI库，有三件事情，我们对YUI的销售：伟大的文档，多种成熟的部件，和BSD许可证，所以我介绍了锐对我公司。 在我们的项目中使用以下模块：

• CSS：复位，字体
• 核心：雅虎，DOM事件
• 应用程序 ：连接管理器，数据源，元， JSON
• 部件：日历，集装箱，数据表
• 工具：记录仪，测试

管理模块实施概述

我们的管理模块的主要要求包括：

• DataTable中与一个定制的编辑器弹出
• 主题/皮肤定制
• 浏览器的兼容性

下面是简单的标记集的UI：

     <div id="datatable-ux">
		 <div id="datatable-ux-hd"> </ DIV>

		 <div id="datatable-ux-bd">
			 <div id="node-depths" style="display: none">根>测试> 5_Dev测试BA> 80000_1010 </ DIV>

			 <div id="output"> </ DIV>
			 <div id="yui-datatable" class="yui-dt">
			   <img src="images/icon-loading.gif" alt="loading" align="absmiddle" style="margin: 30px 0;" />加载数据...
			 </ DIV>
		 </ DIV>

		 <div id="datatable-ux-ft"> </ DIV>
     </ DIV>

	 <div id="node-apply-wrap" style="display: none;">
		 <fieldset>
			 <legend>申请</传说>

			 <input type="radio" name="node-apply" checked="checked" />当前节点只<br />
			 <input type="radio" name="node-apply" />当前节点和子节点<br />
			 <input type="radio" name="node-apply" />子节点
		 </的fieldset>
	 </ DIV>

下面是一个简单的扩展，我的DataTable TextboxCellEditor建的代码片段：

    / /简单的例子来扩展CellEditor类
    / /简短的别名
    VAR LANG = YAHOO.lang，
	   UTIL = YAHOO.util
	  部件= YAHOO.widget
	   DOM = util.Dom
	  事件= util.Event;

    / /扩展TextboxCellEditor
    Gcc.admin.TextboxCellEditor =功能（CONFIG）{
	    Gcc.admin.TextboxCellEditor.superclass.constructor.call（这一点，配置）;
    };
    lang.extend（Gcc.admin.TextboxCellEditor，widget.TextboxCellEditor，{
	    renderForm：函数（）{
		    Gcc.admin.TextboxCellEditor.superclass.renderForm.call（本）;

		    OHD = document.createElement（“DIV”）;
		    this.getContainerEl（），insertBefore（OHD，this.textbox）;
		    oHd.id = container.id +“管理编辑器头”;
		    Dom.addClass（OHD，“管理编辑器- HD”）;

		    oCurrNode = document.createElement（“DIV”）;
		    this.getContainerEl（），insertBefore（oCurrNode，this.textbox）;
		    oCurrNode.innerHTML =“当前节点：”+ Dom.get（“节点深度”）的innerHTML;
		    Dom.addClass（oCurrNode，“管理编辑器- PD”）;

		    oApply = document.createElement（'DIV'）;
		    this.getContainerEl（）appendChild（oApply）;
		    oApply.innerHTML = Dom.get（“节点适用于包装”）的innerHTML。
		    Dom.addClass（oApply，“管理编辑器的fieldset”）;
	    }，

	   移动：函数（）{
		    Gcc.admin.TextboxCellEditor.superclass.move.call（本）;
		    Dom.addClass（this.textbox，“管理编辑器- PD”）;
	    }
    }）;

然后一个cellClickEvent处理程序，检测数据的价值正在编辑的基本类型和调用定制的编辑器之一。

Apache Struts框架和应用程序容器的Weblogic的组成与我们的服务器架构中，我们发现，锐的好伴侣角色扮演“客户方控制器”，并与Struts动作结果作为一个动态的数据源，以及。

 <％@页面pageEncoding =“UTF - 8”的contentType =“应用程序/ json;字符集= UTF - 8”％>
 <％的taglib前缀=“S”的uri =“/ Struts的标签”％>
 {“PropertySet”：{
 “财产”：
 <s:iterator value="displayPropertyResultList" status="index">;
     {
     “ID”：“<s:property value="id" />”
     “名称”：“<s:property value="name" />”
     “类型”：“<s:property value="type" />”
     “价值”：“<s:if test="%{value != null}"> <s:property value="value" </ S：如果>”，
     “ApplyFrom”：“<s:property value="applyFrom" />”
     “ApplyTo”：“<s:property value="applyTo" />”
     “读”：“<s:property value="readable" />”
     “可写”：“<s:property value="writable" />”
     }
     <s:if test="%{!#index.last}">，</ S：如果>

 </ S：迭代>
 ]}
 }

更多的细节和源代码在GitHub上，在那里我有提取的管理使用本地数据源作为一个简单的演示UI原型。

已在这个项目中使用YUI的挑战？

事实上，我们的开发商大部分其实不是前端工程师面临的主要挑战已经出现。 他们并不总是有那么多的经验，处理跨浏览器的问题或特定的JavaScript技巧。 幸运的是，YUI的帮助了我们很多，使良好的代码结构和理顺大多数浏览器的兼容性问题。

德米特的未来？ 什么是一些即将推出的功能与YUI的解决？

我们正在对即将推出的功能之一是报告模块，这将使大量使用YUI的图表 。 而且我们还计划使用TreeView的构件重构我们的地址簿模块。

我们仍然使用YUI 2 ，但如果基于越来越多的官方部件锐3出来，我们会考虑在未来3 YUI的完全移动。