Yahoo! User Interface Blog (YUIBlog)

Pagkabit Yui at YQL sa Bumuo ng mga Dynamic Widgets

Yui ay isang kamangha-mangha rich listahan ng pagmamanipula ng data at UI utilities sa kanyang library, ngunit pagdating up sa pantay rich at kagiliw-giliw na data ay karaniwang ang iyong responsibilidad bilang isang implementer. Sa parehong token, YQL ay rich pagkuha ng data at mga kakayahan sa pakikipag-ugnayan, ngunit ito ay walang mga gamit visualization ng Yui. Tumatagal ang visualization at kontrol ng mga tampok ng Yui at pagkabit sa mga ito sa raw data ng pipe ng YQL, maaari kaming bumuo ng mga hindi mapaniniwalaan o kapani-paniwala rich, interactive na mga widgets na walang ang kailangan upang lumikha ng anumang ng ang visualizations o imbakan ng mga data mekanismo ating sarili.

Bibigyan kita ng isang tour ng dalawang mga widget na binuo sa Yui at YQL sa post na ito. Isa ay nagpapakita ng publiko na nilalaman at ang iba pang mga builds sa na orihinal na widget na may isang server-side na bahagi na PHP upang ipakita ang mga pribadong mga data ng gumagamit sa pamamagitan ng pagpapatunay sa OAuth.

Access sa mga Public Data

Gamit ang Yui Kumuha ng utility , hindi namin magagawang upang gumawa ng mga hiling sa publiko YQL query URL nang walang pagkakaroon ng sakit ng pagharap sa ang parehong patakaran ng isyu ng pinagmulan na normal maiwasan sa amin mula sa paggawa ng mga XHR-based na mga kahilingan sa isang server na hindi sa parehong domain bilang ang nanggagaling kahilingan. Nasa ibaba ang isang maliit na sample code na showcases kung paano mo tawagan YQL gamit ang Yui Kumuha ng utility :

 <script type="text/javascript">
 var getYQLData = function na (query) {
     / / Ihanda ang URL para sa Yui GET kahilingan:
     var yqlPublicQueryURL = "http://query.yahooapis.com/v1/yql?";
     var sURL = yqlPublicQueryURL + "q =" + query
         + "& Format = JSON & callback = yqlWidget.getYQLDataCallback";

     / / GET kahilingan sa YQL sa ibinigay query
     var transactionObj = YAHOO.util.Get.script (sURL, {
         onSuccess: onYQLReqSuccess,
         onFailure: onYQLReqFailure,
         saklaw: ito
     });

     bumalik transactionObj;
 }
 </ Script>

Ang query URL ( sURL ) ay binubuo ng ilang iba't-ibang bahagi upang gumawa ng up ang kahilingan. Ang yqlPublicQueryURL variable ay naglalaman ng pampublikong URI para sa paggawa ng mga kahilingan sa YQL. Mayroon ding tatlong mga parameter ng query na namin ang pagpasa kasama sa URI na ito. Ang q parameter ay ang YQL query na ginagamit namin sa aming kahilingan (hal. select * from flickr.photos.search where text="YDN" YDN " format , ang format ay ang format na gusto ibinalik namin (JSON o XML) mula sa kahilingan , at kung namin Gusto sa wrap JSON ang ibinalik ng data sa isang function (a la JSONP) maaari naming tukuyin ang isang callback function na gamit callback callback parameter . Kapag tumatakbo ang function na ito, ang Kumuha ng utility ay gumawa ng isang kahilingan query.yahooapis.com query.yahooapis.com gamit sa tinukoy na query . Sa tagumpay, isang debug na mensahe ay ipapakita onSuccess onSuccess callback para sa Kumuha ng utility pagkatapos ng callback na tinukoy sa YQL query ay tinatawag upang i-parse ang nagbalik ng mga resulta JSON.

Pagse-set up ang widget na ito sa iyong sariling site o blog ay bilang simpleng bilang-download ang code js-yql-display -display na folder sa github sa http://github.com/jonleblanc/yql-utilities/tree/master at instantiating ang widget gusto ito:

 <-! Widget file isama ->
 <script type="text/javascript" src="yql_js_widget.js"> </ script>

 <-! Widget estilo ->
 <style>
 div.imgCnt {border: 1px solid rgb (96, 96, 96);
     margin: 5px 5px 5px 0pt; karosa: kaliwa;
	 background-kulay: rgb (241, 241, 241); lapad: 100px;
	 taas: 140px;}
 div.imgCnt img {border: 0; margin: 5px;}
 div.imgCnt div.imgTitle {padding: 5px; font-size: 11px;
     text-ihanay: center;}
 </ Style>

 <script type="text/javascript">
 var config = {'debug': true};
 var format = '<div class="imgCnt" align="center">'
     + '<A href = "http://www.flickr.com/photos/ {ari} / {id} /"'
     + 'Target = "_blank"> <img src = "http://farm3.static.'
     + 'Flickr.com / {server} / {id} _ {lihim}. Jpg? V = 0 "'
     + 'Lapad = "80" na taas = "80" /> </ a>'
     + '<div Class="imgTitle">'
     + '<A href = "http://www.flickr.com/photos/ {ari} /'
     + '{Id }/">{ pamagat} </ a>'
     + '</ Div> </ div>';
 var yqlQuery =
     'Piliin ang * mula sa flickr.photos.search kung saan teksto = "YDN";
 var insertEl = 'widgetContainer';
 yqlWidget.push (yqlQuery, config, format, insertEl);
 </ Script>

Anumang bilang ng mga pampublikong YQL query ay maaaring ginawa gamit ang halimbawa sa itaas - ang lahat ng papeles para sa kung paano ang configuration script gumagana ay matatagpuan sa github. Kung nagpapatakbo namin ang code sa itaas madali maaari naming ipakita ang aming pinakabagong mga larawan Flickr:

Kaya, kung bakit ang lahat ng mga pagpapakaabala higit sa paggamit ng YQL at Yui-sama tulad nito? Well, para sa akin ang mga utilities na ito dalhin sa akin medyo malapit sa isang tradisyonal na uri ng MVC (Modelo Tingnan ang Controller) ng disenyo pattern. YQL ay isang kahanga-hangang mga data ng pagsasama-sama at manipulasyon tool, ngunit sa pagtatapos ng araw ito lang ang data. Namin ipasok ang controller pag-andar na gamit ng mga utilities Yui tulad Kumuha ng utility o manager ang Connection, pagkatapos ay maaari naming bumuo ng aming pagtatanghal layer sa itaas ng na ang paggamit ng mga widgets tulad ng DataTable at Tsart.

Access Pribadong Data ng Gumagamit

Hayaan ang galugarin ang pagpapares ng Yui at YQL kaunti karagdagang sa pamamagitan ng paglalaan ng pundasyon na binuo sa pampublikong JavaScript query widget at attach ang isang server-side na bahagi upang patotohanan at tindahan ng isang OAuth session. Paggamit ng Y! OS PHP SDK, hindi namin ma-extend ang JavaScript widget upang ipakita ang update na stream at personal na mga detalye ng badge ng gumagamit na orihinal na napatotohanan ng widget. Dahil kami gamit ang PHP SDK sa parehong domain bilang aming mga widget sa aming mga napatotohanan tawag sa YQL, hindi na namin kailangang mag-alala tungkol sa parehong pinagmulan isyu patakaran. Ito ay nangangahulugan na maaari naming palitan ang paggamit ng mga utility Yui Kumuha sa Yui Connection Manager . Ang benepisyo sa gamit ang Connection Manager dito ay na maaari naming gamitin ang isang karaniwang ajax kahilingan at ang mga kaganapan handlers ng utility sa halip ng isang callback sa loob ng YQL query. Ang aming bagong kahilingan function na magiging hitsura ng isang bagay tulad nito:

 <script type="text/javascript">
 var getYQLData = function na (query) {
     / / Maghanda ang mga data ng URL & post para sa Yui POST Connection Manager:
     var sURL = "private_data_fetch.php";
     var postData = "q =" + query;

     / / Tukuyin ang mga callbacks sa Connection Manager kaganapan
     var callback = {
         tagumpay: parseYQLResults,
         kabiguan: onYQLReqFailure
     };

     / / POST kahilingan sa YQL sa ibinigay query
     var transactionObj = YAHOO.util.Connect.asyncRequest ('POST',
	     sURL, callback, postData);

     bumalik transactionObj;
 }
 </ Script>

Ang Connection Manager ay ginagamit upang gumawa ng mga kahilingan AJAX sa PHP SDK (na ang mga private_data_fetch.php ay housed sa private_data_fetch.php sa loob ng code sa itaas) sa query bilang isang parameter ng ​​POST. Ang SDK naman ay gumagawa ng isang napatunayang na kahilingan para sa mga personal na data ng gumagamit at lungkot ang isang string JSON bilang bumalik ang kahilingan. Pagkatapos lahat ng kailangan mong gawin ay parse ng JSON string gamit ang utility Yui JSON; matapos YAHOO.util.JSON.parse() YAHOO.util.JSON.parse () sa mga resulta ng transaksyon, ang iyong data ay maaaring tratuhin sa parehong paraan tulad ng ang data sa unang halimbawa.

Dahil ang YQL bumubuo ng mga resulta kapag ang kahilingan ay tinatawag, hindi na kailangan sa bahay ang data na ito para sa iyong sarili. YQL maaaring pull ang mga data mula sa anumang magagamit na mapagkukunan upang maaari mong bumuo ng mga widgets tulad ng mga display ng mga dynamic na mga resulta sa bawat refresh.

Pareho ng mga widget na showcased sa post na ito ay malayang magagamit para sa download at kontribusyon sa github sa
http://github.com/jonleblanc/yql-utilities/tree/master . Mga widgets ay:

• js-yql-display : JavaScript widget upang ipakita ang mga pampublikong YQL data
• php-yql-display : JavaScript / PHP widget upang ipakita ang mga pribadong YQL data

Maghanap ng mga pag- uusap : Bloglines | Technorati

Ibahagi at i- extend: Bookmark sa del.icio.us | Digg ito ! | reddit!