Yahoo!用戶界面博客（YUIBlog）

耦合銳和YQL的建立動態構件

YUI有一個非常豐富的數據操縱和公用事業在其圖書館的UI列表，但同樣豐富有趣的數據，一般是作為實施者的責任。 YQL的同樣的道理，有豐富的數據抓取和互動的能力，但它缺乏YUI的可視化工具。 以YUI的可視化和控制功能和耦合YQL的原始數據管他們，我們可以建立無需創建任何可視化的數據存儲機制自己的令人難以置信的豐富的，互動的部件。

我給你一個建在這個崗位與YUI和YQL的兩個部件的巡演。 一個顯示公開可用的內容後，服務器端PHP組件通過使用OAuth認證用戶的私人數據顯示，與原有的部件和其他版本。

訪問公共數據

使用YUI的獲取效用 ，我們能夠向公眾請求YQL的疼痛，是不是對相同來源政策問題的處理，通常會阻止我們的XHR基於請求到服務器，而無需查詢網址同一域發起請求。 下面是一個小的展示你將如何調用YQL的使用YUI的獲取實用的代碼示例：

 <script type="text/javascript">
 VAR getYQLData =功能（查詢）
     / /準備YUI的GET請求的URL：
     VAR yqlPublicQueryURL =“htt​​p://query.yahooapis.com/v1/yql？”;
     VAR SURL = yqlPublicQueryURL +“Q =”查詢
         +“＆格式= json的回調= yqlWidget.getYQLDataCallback”;

     / /使GET請求提供查詢YQL
     transactionObj = YAHOO.util.Get.script（SURL，{
        的onSuccess：onYQLReqSuccess，
         onYQLReqFailure onFailure處：
        適用範圍：本
     }）;

    返回transactionObj;
 }
 </ SCRIPT>

查詢網址（ sURL ）幾個不同的部分組成，以彌補請求。 yqlPublicQueryURL變量包含要求YQL的公共URI。 也有三個查詢參數，我們傳遞這個URI。 q參數是YQL的查詢使用，我們在我們的要求（如select * from flickr.photos.search where text="YDN" ） format是我們想從請求返回（JSON或XML）的格式，如果我們要包裝的JSON返回一個函數中的數據（ JSONP ）使用callback參數，我們可以定義一個回調函數。 此功能運行時，獲取實用工具將一個請求query.yahooapis.com指定的查詢。 成功，調試消息將顯示在get工具，然後在YQL的查詢定義的回調將被稱為解析返回的JSON結果onSuccess回調。

設立自己的網站或博客上的部件，如下載代碼從github上的簡單js-yql-display在文件夾http://github.com/jonleblanc/yql-utilities/tree/master和實例部件如這樣的：

 <！ -  widget文件包括： - >
 <script type="text/javascript" src="yql_js_widget.js"> </ SCRIPT>

 <！ - 小部件樣式 - >
 <STYLE>
 div.imgCnt {邊界：1px固體RGB（96，96，96）;
    保證金：5PX 5PX 5PX 0pt;浮動：左;
	背景顏色：RGB（241，241，241）;寬度：100像素;
	高度：140px單擊;}
 div.imgCnt IMG {邊界：0;保證金：5PX;}
 div.imgCnt div.imgTitle {填充：5PX的字體大小：11px;
    文本對齊：中心;}
 </ STYLE>

 <script type="text/javascript">
 CONFIG = {'調試'：真};
 VAR格式=的<div class="imgCnt" ALIGN="CENTER">
     +“的<a href =”{雇主} / {id}的http://www.flickr.com/photos/ /“”
     +“目標=”_blank“> <IMG SRC =”http://farm3.static。
     + flickr.com / {服務器} / {id}的{秘密}。JPG？V = 0“
     +“寬度=”80“=”80“/> </ A>
     + <div class="imgTitle">“
     +“的<a href =”http://www.flickr.com/photos/ {業主} /
     + {ID} /“> {標題} </ A>
     +'</ DIV> </ DIV>';
 VAR yqlQuery =
     “選擇*從flickr.photos.search的文本=”YN系列“;
 insertEl ='widgetContainer“;
 yqlWidget.push（yqlQuery，配置，格式，insertEl）;
 </ SCRIPT>

可以使用上面的例子-如何配置腳本的作品，可以發現所有的文件github上任何公共YQL的查詢數量。 如果我們運行上面的代碼，我們可以很容易地顯示我們最新的Flickr照片：

那麼，為什麼這樣比使用YQL的和YUI一起上做文章？ 嗯，對我來說這些公​​用事業帶給我相當接近傳統的MVC（模型 - 視圖 - 控制器）設計模式的類型。 YQL是一個精彩的數據匯總和操縱的工具，但在這一天結束，它只是數據。 我們獲取實用程序或連接管理器使用YUI的公用事業，如插入控制器的功能，那麼我們就可以使用類似部件上建立我們的表現層數據表和圖表 。

訪問私有的用戶數據

讓我們來探討YUI和YQL的遠一點的配對，以建立公眾的JavaScript查詢部件的基礎和附加服務器端組件，驗證和存儲OAuth的會議。 使用的Y！操作系統的PHP SDK ，我們是能夠擴展的JavaScript小部件顯示更新流和原本身份驗證部件的用戶的個人徽章 ​​細節。 由於我們使用相同的域上為我們的部件，使我們的認證呼籲YQL的的PHP SDK，我們不再需要擔心的相同來源政策問題。 這意味著我們可以交換使用銳獲取實用 YUI連接管理 。 使用的效益連接管理器 ，我們可以使用一個標準的Ajax請求的事件處理程序和實用工具，而不是在YQL的查詢回調。 我們新的請求函數看起來像這樣：

 <script type="text/javascript">
 VAR getYQLData =功能（查詢）
     / /準備銳連接管理器POST URL後的數據：
     SURL =“private_data_fetch.php”;
     POSTDATA =“Q =”查詢;

     / /定義連接管理器事件回調
     VAR回調= {
        成功parseYQLResults，
        故障：onYQLReqFailure
     };

     / /使POST請求提供查詢YQL
     transactionObj = YAHOO.util.Connect.asyncRequest（'POST'，
	     SURL，回調，POSTDATA）;

    返回transactionObj;
 }
 </ SCRIPT>

連接管理器是用來使AJAX請求的PHP SDK（其安置引用private_data_fetch.php作為POST參數的查詢，在上面的代碼）。 SDK反過來使得用戶的個人數據和轉儲了JSON字符串作為請求返回的身份驗證的請求。 然後所有你需要做的是使用YUI JSON的實用解析JSON字符串;稱為YAHOO.util.JSON.parse()後，你的交易結果，您的數據可以以同樣的方式在數據處理第一個例子。

YQL的，因為被稱為請求時生成的結果，有沒有必要容納自己這個數據。 YQL的，能夠從任何可用的源數據，這樣你就可以建立這些部件如每次刷新顯示的動態結果。

在這篇文章中展示的部件都是自由github上可供下載和貢獻
http://github.com/jonleblanc/yql-utilities/tree/master 。 這些部件包括：

• js-yql-display ：JavaScript小部件顯示公眾YQL的數據
• php-yql-display的JavaScript / PHP部件顯示私人YQL的數據，

找到的談話： bloglines technorati

共享和擴展： 書籤del.icio.us Digg它！ | reddit！