分享
 
 
 

Yahoo! UI Libraries Target Cross-browser Web Development Woes

王朝other·作者佚名  2006-04-22
窄屏简体版  字體: |||超大  

URL:http://www.devx.com/webdev/Article/31225/0/page/2

The recently released Yahoo! UI libraries PRovide cross-browser DHTML and Ajax capabilities with a commercial-friendly BSD License. Unfortunately poor documentation, verbose syntax, and incomplete capabilities mar the eXPerience.

by David Talbot

April 17, 2006

ver since the 4.0 browsers were released, cross-browser dynamic HTML libraries have proliferated as a simple matter of necessity. Any developer who wants to take advantage of the latest and greatest HTML/javascript capabilities while maintaining cross-browser compatibility has probably developed something of a library of "hacks" to normalize the API between the warring and buggy browsers.

Overall, Yahoo provides a decent library for general cross-browser hacks, but unfortunately, the effort doesn't measure up to some of the other open source APIs available sUCh as DynAPI. You can download the free Yahoo! UI (YUI) libraries and experiment with them yourself.

A Quick Tour

After you've downloaded YUI and extracted the .zip file, you'll find the extraction creates eight folders, each with a similar sub-folder structure. Each folder contains several subfolders, but the only ones of interest are:

The build folders, which contain just the files you'll need to use the functionality.

The example folder that shows the functionality in action.

I wouldn't recommend bothering with the source Directories as these contain some .js files that also exist in combined versions in the build directories, no douBT created by a utility they didn't include in the package nor reference on their Web site.

Overall, YUI is basically a function library that you access through a combination of anonymous methods and "namespace-like" syntax. For example, if you wanted to set the X/Y location of an element on the page, instead of writing code such as SetLayerLoc('MyID', 10, 10), you would instead make a library call as follows:

YAHOO.util.Dom.setXY('MyID', new Array(10,10));

Although YUI gets the job done, the syntax is thoroughly verbose.

The documentation consists of some Javadoc-like API reference that was automatically generated from some sort of automated tool with no effort to clean it up or add useful detail to the generated class descriptions. It does include a fairly complete set of examples that go through most of the common functions in a reasonable and straightforward way, but without any linkages to or from the rest of the generated documentation.

The DOM and Event Libraries

YUI's capabilities in regard to core DOM and event handling are incredibly rock-solid, perform as expected, and cover a broad range of capabilities. Most surprisingly, this API gives you simple cross-browser transparency control. Most developers aren't even aware that magic tricks even exist (via DirectX calls) to make semi-transparency work in IE, much less the Mozilla-based equivalents, but YUI enables access to most, if not all, of the CSS properties you'd ever want. Here's an example:

YAHOO.util.Dom.setStyle('MyDivID', 'opacity', .5);

The caveat of so many of these wonderful capabilities is again the documentation. The documentation implies that you can set the CSS style properties on all elements using their Javascript equivalent names, for example, by writing backgroundColor rather than the CSS equivalent background-color, but the downside is that it lacks a full list of supported properties.

After you realize YUI has an amazingly cool cross-browser hack to enable transparency, your hopes will briefly rise that perhaps the libraries also implement cross-browser hacks to save you from having to remember every CSS hack around non-standard CSS properties. Unfortunately this isn't the case. Upon further inspection of the code you'll discover that the transparency hack is the only CSS hack supported by YUI—all other setStyle calls are passed directly through to the browser's DOM unchecked.

Fortunately, the event API is deeper than the DOM API and includes functions to normalize many of the cross-browser events. It normalizes the API to the more standards based addListener/removeListener functions.

Overall, the DOM and Event libraries do the job but require verbose syntax to accomplish what other libraries do with half the typing.

Animation API

The animation API is where the framework starts to provide real value. The approach of the API is to define a series of from and to key states as well as the duration the animation should last from start to finish.

Among the properties you can animate are: color transitions, location, size, and opacity. You can create fascinating displays with relatively little effort in a manner similar to the Dreamweaver JavaScript. However, these API capabilities are only truly useful if you know the precise path of your animation at design time, because the declarative syntax used makes it difficult to alter animation paths at runtime.

Drag and Drop

Drag-and-drop support has always been an area of divergence among browser implementations. YUI does a masterful job of not only smoothing out the differences but adding some great functionality on top of it.

The Drag and Drop API provides a lot of advanced functionality not seen in other freely available JavaScript libraries. The end user experience with YUI drag-and-drop elements is very slick. You can specify what items are draggable and what items are drop targets in a relatively simple, though verbose, way.

I would have liked to have seen YUI behave a little more like some of the other freely available libraries out there in terms of associating drag sources with possible drop targets. In YUI you have to write code (there's an example in the documentation) to specify drop targets as opposed to simply adding grouping tags to your targets as you can with Script.aculo.us.

Connection API

Remote scripting has been around for years but when Google launched Google maps it set the Internet afire with AJAX mania. The mania is of course well-founded, because AJAX can offer a dramatic user experience improvement. The result of this mania has been a tremendous proliferation of libraries that normalize the interface to the underlying browser hacks that enable you to make a round trip to the server for more data without refreshing the browser.

YUI provides a reasonably complete API for remote scripting. It includes the ability to make remote calls, handle successes, and handle failures. If you're using a server-side language that does not yet have a client side API for remote scripting, YUI is pretty good choice.

The code example below highlights the relative simplicity of the YUI connection libraries.

var handlers = {

success: success,

failure: failure }

function success(t)

{ alert('Yea, success'); }

function failure(t)

{ alert('Awww.'); }

YAHOO.util.Connect.asyncRequest('GET',

'http://mysite.com/Remote.aspx?GetPage=1',

handlers,null);

Despite the fact that the connection library is one of the strong points of YUI, I would still recommend sticking with whatever AJAX libraries are specifically designed for your server-side language. The reason for this is simple—consistency in data type handling will reduce the overall amount of effort required to achieve the desired result. However, if you work in a multi-language or multi-platform environment, the YUI connection library is the better choice.

To be completely honest, I rewrote this article after my initial review. I had half of my review written based on playing with a few of the examples but repeatedly found myself disappointed with so many facets of the library that I had to delete the first article attempt and try again. Overall, YUI is filled with verbose syntax and undocumented bizarre parameter options. Personally, as a .NET man, I'll stick with writing good xbrowser DOM, using DynAPI for event normalization and ATLAS for my AJAX needs.

In sum, the YUI libraries attempt to provide a complete cross-browser DHTML and AJAX API, but while parts of the libraries are rock-solid and work well, the attempt falls short in a few areas and fails miserably in its overall syntax.

Page 2 of 2

<A HREF="http://63.236.18.118/RealMedia/ads/click_nx.ads/devx/java/712/31225@house_ribbon,468x60-1,marketplace01,cp1,cp2,cp3,cp4,cp5,cp6,cp7,cp8,cp9,cp10,cp11,cp12,cp13,cp14,120x60-1,125x125-2,336x280,accessunit,fl1,fl2,fl3,fl4,fl5,468x60-2!accessunit" > <IMG SRC="http://63.236.18.118/RealMedia/ads/adstream_nx.ads/devx/java/712/31225@house_ribbon,468x60-1,marketplace01,cp1,cp2,cp3,cp4,cp5,cp6,cp7,cp8,cp9,cp10,cp11,cp12,cp13,cp14,120x60-1,125x125-2,336x280,accessunit,fl1,fl2,fl3,fl4,fl5,468x60-2!accessunit" border="0"> </A>

David Talbot is the vice president of development for Data Systems International, a company that develops case-management software for the social services industry. His experience ranges from license-plate recognition using neural networks to television set-top boxes to highly scalable Web applications. He is also the author of Applied ADO.NET.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有