ממשק המשתמש Yahoo! בלוג (YUIBlog)

צימוד Yui ו YQL לבנות יישומונים דינמי

Yui יש רשימה עשירה להפליא של מניפולציה של נתונים ושירותים UI בספרייה שלה, אבל לבוא עם נתונים עשיר לא פחות מעניינת היא בדרך כלל האחריות שלך לפועל. באותה מידה, YQL יש להביא נתונים עשיר ויכולת אינטראקציה, אבל היא חסרה כלי ויזואליזציה של Yui. אם ניקח את הדמיית ותכונות שליטה Yui צימוד אותם עם צינור את הנתונים הגולמיים של YQL, אנו יכולים לבנות עשיר להפליא, יישומונים אינטראקטיביים ללא צורך ליצור כל אחד או נתונים חזותיים מנגנוני אחסון עצמנו.

אני אתן לך סיור של שני יישומונים בנוי עם Yui ו YQL בפוסט זה. אחת מציג תוכן זמין לציבור ואת בונה אחרים על יישומון כי המקורית עם מרכיב PHP בצד השרת כדי להציג נתונים על ידי המשתמש הפרטי לאימות עם OAuth.

גישה לנתונים אישי

שימוש Yui קבל השירות , אנו מסוגלים לבצע פניות הציבור YQL כתובת שאילתה מבלי הכאב של התמודדות עם סוגיית מדיניות מאותו מוצא שבדרך כלל מונעים מאיתנו לעשות XHR מבוססי בקשות לשרת זה לא על תחום זהה לבקשת מקוריים. להלן דוגמת קוד קטן אשר מציג כיצד אתם הייתם קוראים YQL באמצעות Yui קבלת השירות :

 <script type="text/javascript">
 var getYQLData = function (שאילתה) {
     / / להכין את ה-URL עבור Yui GET בקשה:
     var yqlPublicQueryURL = "http://query.yahooapis.com/v1/yql?";
     var sURL = yqlPublicQueryURL + "q =" + שאילתה
         + "& = פורמט JSON & callback = yqlWidget.getYQLDataCallback";

     / / לעשות GET בקשה YQL עם שאילתה ובלבד
     transactionObj var = YAHOO.util.Get.script (sURL, {
         onSuccess: onYQLReqSuccess,
         onFailure: onYQLReqFailure,
         היקף: זו
     });

     לחזור transactionObj;
 }
 </ Script>

כתובת האתר שאילתה ( sURL ) הוא מורכב מחלקים שונים כדי לפצות את הבקשה. yqlPublicQueryURL משתנה מכיל את URI הציבור להכנת בקשות YQL. ישנם גם שלושה פרמטרים שאילתה שאנו עוברים יחד לאורי הזה. q פרמטר היא שאילתה YQL כי אנו משתמשים ב לבקשתנו (למשל select * from flickr.photos.search where text="YDN" ), format הוא פורמט שאנחנו רוצים להחזיר (JSON או XML) של הבקשה, ואם אנחנו רוצה לעטוף JSON חזרו הנתונים פונקציה (a la JSONP ) אנו יכולים להגדיר פונקציה התקשרות באמצעות callback פרמטר. כאשר פונקציה זו מפעילה את השירות קבל יגרום בקשה query.yahooapis.com עם שאילתה שצוין. על הצלחה, מסר באגים יוצג onSuccess התקשרות עבור השירות קבל אז התקשרות מוגדר בשאילתה YQL ייקרא לנתח את התוצאות חזרו JSON.

הגדרת את זה יישומון באתר שלך או בבלוג הוא פשוט כמו להוריד את הקוד מ js-yql-display תיקייה github ב http://github.com/jonleblanc/yql-utilities/tree/master ו את הפעלת יישומון כמו זו:

 <- קובץ יישומון כוללים ->
 <script type="text/javascript" src="yql_js_widget.js"> </ script>

 <-! סגנונות יישומון ->
 <style>
 div.imgCnt {גבול: 1px solid rgb (96, 96, 96);
     שולי: 5px 5px 5px 0pt; לצוף: עזבו;
	 צבע הרקע: rgb (241, 241, 241); רוחב: 100px;
	 גובה: 140px;}
 div.imgCnt img {גבול: 0; שוליים: 5px;}
 div.imgCnt div.imgTitle {padding: 5px; font-size: 11px;
     text-align: מרכז;}
 </ Style>

 <script type="text/javascript">
 var config = {"באגים": נכון};
 var פורמט = '<div class="imgCnt" align="center"> "
     + "<A href =" http://www.flickr.com/photos/ {הבעלים} / {id} / "
     + "Target =" _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> "
     + '</ Span> </ p>';
 var yqlQuery =
     "SELECT * FROM flickr.photos.search שבו הטקסט =" YDN "';
 var insertEl = 'widgetContainer';
 yqlWidget.push (yqlQuery, config, פורמט, insertEl);
 </ Script>

כל מספר של שאילתות YQL הציבור יכול להתבצע תוך שימוש בדוגמה לעיל - כל התיעוד עבור אופן את התסריט עובד תצורה ניתן למצוא באתר github . אם נריץ את הקוד הנ"ל אנחנו יכולים בקלות להציג את התמונות האחרונות שלנו Flickr:

אז למה כל הרעש הזה סביב השימוש YQL ו Yui יחד כזה? ובכן, לי הכלים הללו להביא לי די קרוב סוג המסורתית (Model View Controller) של תבנית העיצוב MVC. YQL היא צבירת נתונים נפלאים כלי מניפולציה, אבל בסוף היום זה רק נתונים. אנו להכניס את הפונקציונליות בקר באמצעות כלי עזר Yui כגון קבלת השירות או מנהל החיבורים , ואז נוכל לבנות שכבת המצגת שלנו על גבי זה באמצעות יישומונים כמו DataTable ו תרשימים .

גישה לנתונים משתמשים פרטיים

בואו לבחון את ההתאמה של Yui ו YQL עוד קצת על ידי לקיחת הבסיס נבנה יישומון ג'אווה סקריפט הציבור שאילתה הצמדת רכיב צד השרת כדי לאמת ולאחסן מושב OAuth. באמצעות Y! OS PHP SDK , אנו יכולים להרחיב את יישומון ג'אווה סקריפט כדי להציג את זרם לעדכן פרטים תג אישי של המשתמש מאומת במקור יישומון. מכיוון שאנחנו באמצעות SDK PHP על תחום זהה יישומון שלנו כדי לבצע שיחות מאומתים שלנו YQL, אנחנו כבר לא צריכים לדאוג לגבי אותו המוצא סוגיות מדיניות. משמעות הדבר היא כי אנחנו יכולים להחליף את השימוש של השירות Yui קבל עם מנהל החיבורים של Yui . היתרון לשימוש מנהל החיבורים כאן הוא שאנחנו יכולים להשתמש בקשת רגילה ajax ואת מטפלים באירועים של כלי התקשרות במקום בתוך השאילתה YQL. פונקציה בקשה חדשה שלנו היה נראה משהו כזה:

 <script type="text/javascript">
 var getYQLData = function (שאילתה) {
     / / להכין URL & לפרסם נתוני POST מנהל Yui חיבור:
     var sURL = "private_data_fetch.php";
     var postData = "q =" + השאילתה;

     / / להגדיר את מנהל החיבורים callbacks האירוע
     var התקשרות = {
         הצלחה: parseYQLResults,
         כישלון: onYQLReqFailure
     };

     / / להפוך את בקשת POST כדי YQL עם שאילתה ובלבד
     var transactionObj = YAHOO.util.Connect.asyncRequest ('POST',
	     sURL, התקשרות, postData);

     לחזור transactionObj;
 }
 </ Script>

מנהל הקשר משמש כדי להפוך את בקשות AJAX ל PHP SDK (שאת הפניות שוכנות private_data_fetch.php בתוך קוד לעיל) עם השאילתה כפרמטר POST. SDK בתורו גורם בקשת אימות עבור נתונים אישיים של המשתמש, מרוקן את מחרוזת כמו JSON להחזיר את הבקשה. אז כל מה שאתה צריך לעשות הוא לנתח את מחרוזת JSON באמצעות השירות JSON Yui , אחרי שאתה נקרא YAHOO.util.JSON.parse() על תוצאות העסקה, הנתונים יכולים להיות מטופלים באופן זהה את הנתונים first למשל.

מאז YQL מניב תוצאות כאשר את הבקשה מכונה, אין צורך בבית הזה נתונים על עצמך. YQL יכול למשוך נתונים מכל מקור זמין, כך שתוכל לבנות יישומונים כאלה להציג תוצאות דינמי עם כל רענון.

שניהם של יישומונים לראווה בהודעה זו זמינים באופן חופשי להורדה תרומה על github בבית
http://github.com/jonleblanc/yql-utilities/tree/master . יישומונים אלו הם:

• js-yql-display : יישומון ג'אווה סקריפט כדי להציג נתונים YQL הציבור
• php-yql-display : JavaScript / PHP יישומון כדי להציג נתונים YQL פרטית

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!