در حال حاضر روش های بسیاری برای جذابتر کردن و کاربردی تر کردن صفحات وب وجود دارد، بعنوان مثال Yahoo رابط کاربری مخصوص خود را فراهم آورده است که انتخاب بسیار خوبی برای ساخت صفحات وب ایی است که شبیه برنامه های windows هستند،می باشد.گوگل نیز مجموعه کنترل های خودش را ایجاد کرده و به همین ترتیب روش های دیگری که برای ساخت صفحات وب سراغ دارید.
اصلی ترین دلیل و نیاز برای ایجاد یک کتابخانه خاص از کنترل ها با جاوا اسکریپت اینست که می بایست این کنترل ها از دامنه بسیار وسیعی از مرورگرها پشتیبانی کند: مانند IE ، Mozila ، Firefox ، Safari ، Opera و .. را پشتیبانی کند.
این مقاله به بررسی این کتابخانه جاوااسکریپت پرداخته و تلاش می کند یک پساده سازی ساده از مجموعه ایی از کنترل ها ی وب که به شما کمک می کند که برنامه های وب سفارشی شده تری داشته باشید، را به شما نشان دهد.
تمام کنترل های کتابخانه در IE6+ ، Firefox 1.5 به بعد و Opera 9 کار می کنند.
اجزای کتابخانه:
•
awui.js
هسته کتابخانه شامل پیاده سازی توابع پرکاربرد عمومی و تعریف کلاس aObject که کلاس پایه تمام کنترل ها است.
•
awui_consts.js
مجموعه ایی از نام های ثابت ها که در حال حاضر شامل تعریف کد های کیبورد است.
•
awui_xml.js
مجموعه ایی شامل توابع پردازش XML (selectNodes و selectSingleNode پیاده سازی شده برای مرورگرهای غیر از IE)
•
aselect.js
کنترل combobox (شبیه <select> استاندارد درحالت انتخاب یک آیتمی single selection)
•
aslider.js
کنترل Slider که کنترل Slider ویندوز را شبیه سازی می کند.
•
afileuploader.js
کنترل استاندارد <input type="file"> که می توان با style آنرا سفارشی کرد.
•
acheckbox.js
کنترل checkboxگرافیکی با پشتبانی از 3 وضعیت انتخاب
•
ahttpclient.js
مجموعه ایی از پیاده سازی اشیا قابل استفاده در همه مرورگرها
معماری کتابخانه AWUI
هسته کتابخانه شی جاوااسکریپت سراسری به نام AWUI می باشد که در فایل awui.js تعریف شده است.تمام صفحاتی که از کنترل های AWUI استفاده می کنند می بایست این فایل را آن صفحه ضمیمه (include) کنند. تمام توابع عمومی بصورت توابع عضو این شی تعریف شده اند که می توانند با فرمت
AWUI.global_function(...)
اجرا شوند.
تمام کنترل ها از شی aObject ارث بری (Inherited) شده اند.ارث بری به همان صورتی که در رابط کاربری Yahoo می باشد، پیاده سازی شده است. AWUI توسعه دهنده متد دارد که صفت (property) ، superclass را به شی prototype جاوااسکریپت اضافه می کند.متد در کلاس والد(parent class) می تواند بوسیله سازنده کلاس فراخوانی شود.
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- متد های اشیا که بصورت Private تعریف شده اند با پیشوند "_" نام گذاری شده اند.
متد های عمومی AWUI
•
el(id_)
خلاصه نویسی برایdocument.getElementById(id_)
•
crel(type_)
خلاصه نویسی برایdocument.createElement (type_)
•
crtext(str_)
خلاصه نویسی برایdocument.createTextNode (str_)
•
crimg(src_, id_, width_, height_, alt_)
ساخت شی تصویر DOM و مقدار دهی صفت های آن
•
absPos(obj_)
شی با صفت های top و left برمی گرداند که حاصل offsetTop و offsetLeft تمام والد های (parents) شی است که پوزیشن مطلق شی است(اگر شی استایل "position:absolute" نداشته باشد)
•
appendRow(tbl_, pos_)
یک سطر به جدول HTML در موقعیت مشخص اضافه می کند که سریع تر از TABLE.insertRow(pos_) کار می کند.
پشتیبانی از AJAX
توابع ارسال درخواست های XML HTTP بوسیله کلاس aXmlHttpClient پیاده سازی شده اند و بوسیله کلاس aXmlHttpRequest پشتیبانی می شود. کلاس aXmlHttpClient دو متد اصلی دارد:
call(request_ /*url*/, method_, resultFormat_)
callAsync (request_/*url*/, handler_, method_, resultFormat_)
که request_ برای شی aXmlHttpRequest آدرس URL مقصد، متن بدنه Post ، مدت زمان انتظار برای جواب (Timeout) متد های HTTP ("GET", "POST") و فرمت جواب ("text/xml" or "text/plain") را تعیین می کند.
اگر اولین آرگومان این تابع رشته (string) باشد بعنوان URL مقصد درنظر گرفته می شود و شی request جدید با method_ و resultFormat_. انتخاب شده ایجاد می شود.این متد ها درخواست های HTTP را به سرور ارسال می کنند و شی XML document را بعنوان پاسخ سرور بر می گرداند اگر شما resultFormat_. را "text/xml" انتخاب کرده باشید و یا بصورت متن ساده اگر شما resultFormat_ را "text/plain" انتخاب کرده باشید برمی گرداند.
در صفحه 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>
