某人的栖息地 » yui

Yahoo yui host提供combo handler服务

Volcano — Thu, 17 Jul 2008 01:42:45 +0000

Yahoo之前提供了公开的YUI Hosting，现在又在这个基础上进一步提供了combo handler服务。这项服务的目的是尽可能减少http请求的数目，以提高web前端的展现速度，这也是高性能网页开发的14条军规之首。

此前，如果要使用YUI Rich Text Editor，需要引用若干外部js。共计6个http请求。

如果使用combo handler，那么http请求数可以合并成一个，如下：

可惜这个host在国外，对国内的yui用户来说，没有什么帮助。

基于yui grids的wordpress主题 — YUI Autogrid Minima

Volcano — Wed, 02 Jul 2008 22:54:34 +0000

在yuiblog上看到这个基于yui grids的主题，样式简单到了不行，可能正是某些人喜欢的类型。贴图为证：

YUI Autogrid Minima主题的特点

干净简洁的html标签
布局会随着浏览器的大小自动调整，可以试着拖拽浏览器边框，会发现怎么也不出现横向滚动条，侧边栏会自适应宽度
固定不动的侧边栏，像某些对联广告一样
还是那句，样式朴素到了不行

[你可以点击这里下载这个主题.]

我也试用YUI Uploader

Volcano — Fri, 30 May 2008 01:58:11 +0000

早就知道YUI里面有Uploader这么一个上传组件，可以按住ctrl多选文件上传(就像flickr那样的上传)，并且可以支持进度条，这样对用户来说是相当方便的。

由于YUI Uploader是利用javascript + flash实现的，所以用户的浏览器上只要有flash player就可以使用，也不需要额外安装别的插件了，这显然也是YUI Uploader的一大优势。

我的YUI Uploader试用之旅

首先下载Uploader批量上传页的html源文件
解压后放置在你的web服务器上，比如我就是在自己的台式机上安装了一个xampp
现在需要一个处理上传操作的后端程序，在这里我是用php简单的写了一个，如果你用别的语言也是不成问题的。在uploader-advanced-source.html的同一目录下放置upload.php，源文件如下：
```
foreach ($_FILES as $fieldName => $file) {
	$name = md5(microtime());
	move_uploaded_file($file['tmp_name'], "./" . $name . '.jpg');
	echo $fieldName . ' uploaded!';
}
```
下载http://yui.yahooapis.com/2.5.1/build/uploader/assets/uploader.swf，然后把uploader.swf放在和upload.php的同一目录下，这是为了避免javascript和flash交互过程中出现跨域问题。
修改uploader-advanced-source.html
- 把”YOUR UPLOAD URL GOES HERE”替换成你的upload.php所在的url，比如我的就是http://localhost/yui/upload.php
- 把YAHOO.widget.Uploader.SWFURL修改成你的uploader.swf实际url
现在访问uploader-advanced-source.html，试试批量上传功能吧

试用的一点补充

这个例子里面的php源文件只是考虑上传n张jpg文件的情况，可根据实际情况调整。
上传后的文件名是md5随机加密的，在upload.php同一目录可见
由于flash的bug，运行在windows下的firefox无法正确获得flash传递过来的cookie，如果上传应用对cookie有依赖，可能会需要做额外的处理。
~~为了能够确切的显示上传进度条，可能需要php 5.2的apc扩展支持~~
上传进度由flash完成
YUI 2.5.2已经附上uploader.swf的actionscript，有一定的学习价值

贴一张Uploader使用效果图

JQUERY和YUI混用出现的问题

Volcano — Sat, 22 Mar 2008 03:06:30 +0000

有道是一山不容二虎，其实我本不该把JQUERY和YUI夹杂在一块使用，虽然它们各有长短，结合使用的确能够相得益彰，但是暗地里还存着什么矛盾和冲突，这就不是随便刷新一下网页能够看出来的。

列一下最近碰到的问题，备忘。

混用时，YUI的Event在ie6下表现异常

下面代码中，没能在window.onload事件中弹出一个alert弹出窗口。

猜想是jQuery重写了window.onload事件引起冲突，解决办法，使用jQuery的event。

YUI 2.5.0发布

Volcano — Thu, 21 Feb 2008 07:02:46 +0000

YUI 2.5.0发布。

2月20日，YUI Team发布了YUI的最新版本2.5.0。增加了6个全新的组件：Layout Manager, Uploader(结合Flash和Javascript的多文件上传引擎), Resize Utility, ImageCropper, Cookie Utility和ProfilerViewer Control。同时这一版还提升了DataTable Control的功能和Slider Control增加了双滑块功能。

这个版本中的Uploader以及ImageCropper应该是相当有用的控件

Uploader采用javascript和flash，不仅支持多文件上传，更可以直观的查看上传进度，以前虽然有类似的代码，但是组件化的代码显然通用性和可用性更好。
ImageCroper可用于制作图片切片，基于YUI的Dragdrop和Resize

与YUI 2.5.0相关的链接

YUI中国本地版

Volcano — Sun, 20 Jan 2008 08:31:02 +0000

去年yahoo提供了公开的yui主机，这样即便自己没有server也可以直接使用yui的便利。但是由于主机在国外，访问速度不是很理想。现在终于有了本地版的yui hosting，访问速度有大的飞跃。

2008年1月14日雅虎中国正式发布本地版的YUI 2.4.1，今后将与YUI保持同步更新。这对国内的YUI使用者来说绝对是一个好消息，本地版的YUI采用了本地CDN部署，对于国内用户来说访问速度更快(图一)，比较访问国际YUI主机的速度(图二)快了至少5倍以上。

使用firebug查看载入速度

原文：YUI Blog China

YUI 2.3.0的Rich Text Editor

Volcano — Sun, 05 Aug 2007 00:05:56 +0000

YUI 2.3.0正式发布了。这个版本新增了一些新的组件，其中最大的亮点是它的Rich Text Editor (beta)，样式见下图：

YUI Rich Text Editor的特点

标识为A级的浏览器支持良好，跨浏览器也有很好的表现
扩充方便，可以添加你自己的button
从图片上看，这个编辑器还支持直接从flickr抓取图片——可惜flickr在国内已经被和谐…

YUI 2.3.0另外新增的5个组件

Base CSS
YUILoader Utility (beta)
ImageLoader Utility (experimental)
Color Picker Control (beta)
YUI Test Utility (beta)

Ajax+PHP+YUI手工制作rss阅读器

Volcano — Thu, 05 Jul 2007 00:06:14 +0000

上次俺的简陋练习作品Ajax+json小有心得，这次继续尝试利用Ajax+PHP+YUI手工制作rss阅读器。

写一点html来展示RSS的内容


RSS阅读器
内容待填补

利用YUI的Connection manager来处理XHR

yahoo已经提供了在线的YUI Hosting,直接引用:

很困，这部分没写完整，下次来补齐。

用php做一个proxy来避免跨站访问的问题

proxy的要点
一定要输出header，否则在解析的时候你可能会遇到莫名奇妙的问题。
如果你的服务器不支持远程url open，可以考虑使用curl，比如说在dreamhost的主机上

到这里，一个简陋的RSS阅读器的雏形已经完备了。

什么是ajax

在百度知道上面搜索的答案，一本正经的告诉你：

Ajax（Asynchronous JavaScript and XML）是结合了Java技术、XML以及JavaScript等编程技术，可以让开发人员构建基于Java技术的Web应用，并打破了使用页面重载的惯例。

看了后立马一口茶水做雾状均匀喷洒到本本的屏幕上，Ajax本身和java有嘛关系？

YUI 2.3.0 即将发布

Volcano — Mon, 11 Jun 2007 00:07:14 +0000

YUI 2.3.0 即将发布,最迟七月份可以看到。新的YUI组件和特点:

1. Rich Text Editor
The YUI RTE beta comprises an editor window and toolbar, the latter of which has a simple, extensible plugin architecture. It will feature full A-grade support. (Dav Glass)

2. ImageLoader Utility
Images often constitute the most data-heavy parts of a page, but many times users load images that they never see — because the image is below the fold, because it is in an obscured tab in a TabView, etc. The YUI ImageLoader is a new, experimental component that allows you to defer the loading of images based on criteria you specify and to then load those images when a specific “trigger” is hit. In some cases, use of ImageLoader can significantly reduce bandwidth and increase performance. (Matt Mlinac)

3. Base CSS
YUI’s Reset CSS normalizes browser CSS styles by stripping out browser-defined styles; this allows you to begin your CSS styles with all style decisions being intentional rather than inherited. YUI’s Base CSS will help you begin the process of making your styles intentional by providing a common set of treatments that most implementations share. (Nate Koechley)

4. Color Picker
Previous versions of YUI shipped a Color Picker example as part of the Slider Control. In 2.3, we’re formalizing Color Picker and completing its API to make it easier to implement this powerful control in your apps. (Adam Moore)

Notable Changes to Existing Components:

1. Button
Button remains in beta as we modify the architecture a bit. As of 2.3, the SplitButton implementation will replace MenuButton and be generic — allowing you to implement Buttons that have Menus or any other sub-control you wish. (Todd Kloots)

2. Connection Manager
YUI’s XHR utility will be enhanced with a Custom Event API that adds granularity to the interesting moments you can pipe into on your XHR transactions. (Thomas Sha)

3. DataTable
DataTable will undergo a major rearchitecture as it evolves to its second beta. Details on the DataTable evolution for 2.3 will be presented during an open conference call for all interested implementers during the second half of June. An invitation to the call will be sent out to this list a week prior to that call. (Jenny Han)

4. Browser History Manager
Browser History Manager comes out of experimental status with 2.3 and is promoted to beta, accompanied by several bug fixes and some key enhancements requested by YUI implementers during the experimental phase. (Julien Lecomte)

Yahoo提供公开的YUI Hosting

Volcano — Sat, 24 Feb 2007 02:14:31 +0000

最近YUI出了2.20版,紧接着就在其主机上免费提供YUI里用到的css,javascript以及图片.

免费提供的资源

JavaScript files: These files provide the functional behavior of YUI utilities and UI controls.
CSS files: In some cases, YUI controls ship with predefined visual designs, enabling you to implement them more easily out of the box. In these cases, presentation information is included in CSS files accompanying the control.
Image files: Where YUI controls have default visual designs, those designs may be supported by image assets.

试了一下,可惜在国内的访问过去速度比较慢,要不然自己的服务器上就可以直接引用YUI了.详情见这里

什么是YUI?

Yahoo! User Interface Library

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

Connection Manager Of YUI

Volcano — Mon, 11 Sep 2006 15:29:37 +0000

前些天试用了Yahoo! UI Library的Connection Manager工具，略有些心得，这里丢块板砖出来，能不能引到玉，那是后话。

Connection Manager能干什么

The Connection Manager is a utility that enables you to make in-page HTTP requests through a simplified interface to the XMLHttpRequest object. The Connection Manager handles cross-browser instantiation of XMLHttpRequest, negotiates the server response and uses a callback pattern to process the response data.

没话说，这是一个ajax的javascript类库，Yahoo出品，嘿嘿。

使用心得

打开程序包的build/connection目录，下有connection.js,connection-debug.js,connection-min.js,这三个文件其实内容都一样，第一个是正儿八经的源代码，中间那个不用说可以用于debug,最后那个也不是废柴，它经过压缩处理，javascript代码仅仅只有8k，相对connection.js高达20k肥硕体积来说，显然更经济，可用于线上系统。
这三个文件最好都要的：
```
  


  
```

最后说个特好用的方法 —— setForm，这功能可以解析某个表单的内容，自动拼凑出用于ajax提交的数据串，甚至可以用于文件上传，实在是居家旅行必备。

var formObject = document.getElementById('aForm');
YAHOO.util.Connect.setForm(formObject);
// This example facilitates a POST transaction.
var cObj = YAHOO.util.Connect.asyncRequest('POST', 'http://www.yahoo.com', callback);

详细说明

http://developer.yahoo.com/yui/connection/

这阵子犯懒，只字未写，惭愧惭愧

用ajax+json连接yahoo搜索web service打造本地搜索引擎

Volcano — Tue, 07 Mar 2006 09:18:39 +0000

今天写了一个demo,利用yahoo提供的Yahoo! UI Library调用search web service,实现本地搜索.下面是代码片断说明:

调用Yahoo! UI Library Connection Manager的必要代码:
[javascript]

[/javascript]

查询表单
[html]

[/html]

yahoo提供的的web service,可以直接以json的格式返回数据,也支持xml格式,这里采用json
[javascript][/javascript]

最开始使用了上面的代码片段,在本机能够成功调用yahoo的web service,但是经常报跨站警报,相当不便.
于是采用代理模式,写了个很简单的proxy.php,如下:

< ?php
$searchUrl = 'http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&results=4&output=json&query=';
if(!empty($_POST['query']))
 echo file_get_contents($searchUrl . $_POST['query']);
?>

而js部分只要做个小小调整

[javascript]var searchUrl = ‘proxy.php’;

…………………………….

//查询
function searchIt(query) {
if(!query)
return;
resultWin.innerHTML = ‘查找ing…..
‘;
YAHOO.util.Connect.asyncRequest(‘POST’, searchUrl, callback, ‘query=’ + query);
}[/javascript]
最后就以这段简单的代码实现了本地搜索,你可以在此demo的基础上进一步完善,例如翻页,调整每页显示的数目等等,具体参数请参考http://developer.yahoo.net/search/local/V3/localSearch.html

解压密码:www.ooso.net
demo下载

参考文档:
http://developer.yahoo.net/yui/connection/index.html
http://developer.yahoo.net/php/howto-parseRestPhp.html