65.9K
CodeProject 正在变化。 阅读更多。
Home

AWUI - 一个简单的具有 AJAX 支持的 Web 用户界面库

Artem Kustikov
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.33/5 (5投票s)

2007年2月2日

CPOL

4分钟阅读

viewsIcon

49057

downloadIcon

398

关于创建自定义 JavaScript 控件集和跨浏览器支持库的文章

AWUI - controls

目录

  1. 引言
  2. 库的内容
  3. 库的架构
  4. 使用代码
  5. 再分发
  6. 历史

引言

目前有很多方法可以使您的Web应用程序对用户更具吸引力和实用性，例如雅虎提供的Yahoo User Interface - 这是一个不错的选择，可以使您的网页更像桌面应用程序，谷歌也提出了自己的控件集等等。

自定义JavaScript控件库的主要要求是能够支持广泛的图形浏览器：Internet Explorer，Mozilla/Firefox，Safari和Opera。另一个要求基于第一个，意味着自定义控件在不同浏览器中的视图和行为一致。此外，该库可以提供枚举自定义控件、记录不同消息（来自控件的事件）、异常处理等的通用方法。

本文描述了一个尝试实现一组简单的Web控件，以帮助自定义您的Web应用程序。目前，该库有四个控件和一个实现AJAX交互机制的组件（它支持同步和异步调用）。

所有库控件均可在IE6、Firefox 1.5+、Opera 9下运行。

库的内容

  • awui.js
    库核心包含常用函数的实现。定义aObject - 所有自定义控件的基类
  • awui_consts.js
    一组有用的命名常量 - 现在它包含键盘代码的定义
  • awui_xml.js
    一组XML处理函数（为非IE浏览器实现了selectNodes和selectSingleNode）
  • aselect.js
    Combobox控件（在单选模式下类似于标准的<select>）
  • aslider.js
    Slider控件（模拟Windows滑块控件）
  • afileuploader.js
    标准<input type="file">控件的包装器，具有可自定义的样式
  • acheckbox.js
    图形化复选框，支持三态模式
  • ahttpclient.js
    一组对象 - AJAX功能的跨浏览器实现

库的架构

库核心是全局JavaScript对象AWUI，定义在awui.js中，因此所有使用该库控件的页面都应该包含此文件。所有通用函数都定义为该对象的成员函数，可以调用为AWUI.global_function(...)。

所有控件都继承自aObject - 继承实现方式与Yahoo UI相同 - AWUI拥有extend方法，该方法将superclass属性添加到JavaScript对象prototype。父类的方法可以通过构造object.prototype.method(...)来调用。

// call of superclass constructor

aSlider.superclass.constructor.call (this);
// call of superclass method

aSlider.superclass.processError (this, 'Cannot find slider object',
                            AWUI.ERROR_OBJECT);

库代码按照以下几条规则编写：

  1. 常量使用大写命名
  2. 函数参数使用“_”后缀命名
  3. 被视为私有的对象方法（仅由其他公共方法调用的方法）使用“_”前缀命名
  4. 变量使用驼峰式命名

通用AWUI方法

  • extend(subclass_, superclass_)
    实现继承机制 - 向subclass_.prototype添加superclass属性
  • el(id_)
    document.getElementById(id_)的别名
  • crel(type_)
    document.createElement (type_)的别名
  • crtext(str_)
    document.createTextNode (str_)的别名
  • crimg(src_, id_, width_, height_, alt_)
    创建DOM Image对象并设置其属性
  • absPos(obj_)
    返回一个具有top和left属性的对象，这些属性是所有对象父级的offsetTop和offsetLeft的总和 - 这是对象的绝对位置（如果对象没有"position:absolute样式）
  • appendRow(tbl_, pos_)
    在指定位置向HTML表添加行并返回它 - 比TABLE.insertRow(pos_)更快
  • stopPropagation(e_)
    取消DOM事件向父节点的传播

    this.label.onmousedown = astOnMouseDown;
this.label.ondragstart = AWUI.stopPropagation;
this.label.onselectstart = AWUI.stopPropagation;
this.label.onkeydown = astOnKeyDown;
this.label.onkeyup = astOnKeyUp;
  • setUnselectable(obj_)
    禁止选择obj_
  • quoteXml(str_)
    转义字符串中的XML特殊符号（<,>,&）
  • getWuiObj(id_)
    通过选定的ID返回AWUI对象

AJAX支持

XML HTTP请求发送功能由类aXmlHttpClient实现，并支持类aXmlHttpRequest。aXmlHttpClient有两个主要方法call(request_ /*url*/, method_, resultFormat_)和callAsync (request_/*url*/, handler_, method_, resultFormat_)，其中request_是一个准备好的aXmlHttpRequest对象，它可以定义目标URL、POST内容体、请求超时（由aXmlHttpClient控制）、HTTP方法（“GET”、“POST”）以及结果格式（“text/xml”或“text/plain”）。

如果这些方法的第一个参数是字符串，那么它将被视为目标URL，并且将使用选定的method_和resultFormat_创建一个新的请求对象。这些方法将HTTP请求发送到服务器，并在结果格式为“text/xml”时返回XML文档对象，否则返回文本。
在ASPX页面中，它可以这样使用：

var TAG_SERVER_ERROR = "ServerError";
var SERVER_REQUEST_TIMEOUT = 1000;

function getServerInfo() {
    var url = "<%= Response.ApplyAppPathModifier
                    (Request.Path + "?cmd=get_info") %>";
    httpClient.callAsync (url, onLoadServerInfo);
}

function onLoadServerInfo (data) {

    if (data && data.documentElement) {

        var lblInfo = AWUI.el ("lblProcessing");
        var message = "";
        var doc = data.documentElement;
        var item = null,
            size = 0,
            name = "",
            loaded = false;

        if (doc.tagName != TAG_SERVER_ERROR) {

            var items = AWUI.xmlSelectNodes (doc, "//DocumentInfo");
            for(var ndx=0; ndx<items.length; ++ndx) {
                if (ndx > 0) message += "<br />";
                item = items[ndx];
                if (item) {
                    size = parseInt (AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode (item, "./Size")));
                    loaded = (AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode 
                    (item, "./IsLoaded")).toLowerCase() == "true");
                    name = AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode (item, "./Name"));
                    message += "Name: ";
                    if (loaded)
                        message += "<a href='javascript:void(0)' 
                    title='Open' onclick=\"openDocument
                    ('" + name + "')\">" + name + "</a><br />";
                    else
                        message += name + "<br />";
                    if (size < 0) {
                        message += "loading...<br />";
                    } else {
                        message += "Size: " + AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode 
                        (item, "./Size")) + "<br />";
                        message += "RequirementsCount: " + AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode 
                    (item, "./RequirementsCount")) + "<br />";
                        message += "Paragraphs: " + AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode 
                    (item, "./LoadedParagraphsCount")) +
                                "/" + AWUI.xmlGetText 
                    ( AWUI.xmlSelectSingleNode 
                    (item, "./ParagraphsCount"))
                                "<br />";
                    };
                };
            }

    } else {
            // process error

            message = "<span class='error'>" + "Error: " +
                AWUI.xmlGetText ( AWUI.xmlSelectSingleNode 
                (doc, "./Message")) + "<br />" +
                AWUI.xmlGetText ( AWUI.xmlSelectSingleNode 
                (doc, "./Type")) + "<br />" +
                AWUI.xmlGetText ( AWUI.xmlSelectSingleNode 
                (doc, "./StackTrace")) + "</span>" ;
        }
        lblInfo.innerHTML = message;
    }
    window.setTimeout("getServerInfo()", SERVER_REQUEST_TIMEOUT);
}

使用代码

请参阅附带的演示文件，了解所有AWUI控件的用法。

aCheckBox

<h1>Simple CheckBoxes</h1>
Graphical CheckBox: <script language="JavaScript">    
        var cb = new aCheckBox(1);    cb.draw();</script><br>
Graphical CheckBox (2): <script language="JavaScript">    
        var cbcircle = new aCheckBox(1); 
    cbcircle.imgPath="img/cb_circle"; cbcircle.draw();</script><br>
Win98 CheckBox: <script language="JavaScript">    
        var cb2 = new aCheckBox(); cb2.imgPath="img/cb_win98";    
        cb2.draw();</script><br>
WinXP CheckBox: <script language="JavaScript">    
        var cbxp = new aCheckBox(); cbxp.imgPath="img/cb_winxp";    
        cbxp.draw();</script>
<h1>Tristate CheckBoxes</h1>
Graphical CheckBox: <script language="JavaScript">    
        var cb3 = new aCheckBox(1, true);    
        cb3.draw();</script><br>
WinXP CheckBox: <script language="JavaScript">    
        var cbxp3 = new aCheckBox(-1, true); 
        cbxp3.imgPath="img/cb_winxp";    
        cbxp3.draw();</script>

aFileUploader (ASP.NET)

<script language="JavaScript" src="js/awui.js"></script>
<script language="JavaScript" src="js/afileuploader.js"></script>
<script language="JavaScript"> afuPrintStyles(); </script>
...
<%
    HttpFileCollection files = Request.Files;
    string[] keys = files.AllKeys;
    for (int ndx = 0; ndx < keys.Length; ndx++)
    {
       Response.Write("<b>File</b>: " + Server.HtmlEncode(keys[ndx]) + "<br>");
       HttpPostedFile file = Request.Files [keys[ndx]];
       Response.Write("path: " + Server.HtmlEncode(file.FileName) + "<br>");
    }
%>
...
<form name="form1" method="POST" enctype="multipart/form-data">
<table border=0>
    <tr>
    <td><script>var file = new aFileUploader("file", 300, 20); file.draw();
        </script> </td>
    <td><input type="submit" class="btn" value="Upload" style="height: 20px;">
            </td>
    </tr>
</table>
</form>

aSelect

<script language="JavaScript" src="js/awui.js"></script>
<script language="JavaScript" src="js/awui_consts.js"></script>
<script language="JavaScript" src="js/aselect.js"></script>
...
<script language="JavaScript" >
    function onSelChange (newVal, oldVal, sel) {
        window.status = sel.name + " changed to: " + newVal + ", from: " + 
                                    oldVal;
    }
</script>
...
<script>
var data = ["A", "B", "C", "D"];
var sel1 = new aSelect("sel1", data, 0);
sel1.onselchange = onSelChange;
sel1.draw();
</script>

aSlider

<script language="JavaScript" src="js/awui.js"></script>
<script language="JavaScript" src="js/aslider.js"></script>
<script language="JavaScript" >
function onScroll(obj_, pos_){
    window.status = obj_ + ": " + pos_;
}
</script>
...
<script>
var slider = new aSlider(50);
slider.onscroll = onScroll;
slider.draw("", 300, 30);
</script>

再分发

AWUI的所有部分都可以无限制地在您的项目中使用（如果您认为这样做值得的话...）。如果您发现代码中有错误，我也将非常感谢您的反馈。

历史

  • 2007年1月25日 - AWUI - 一个Web用户界面库 v0.1.0.0。
© . All rights reserved.