תכנות לחלונות 8 – יצירת קורא RSS חלק ראשון

20 בדצמבר 2011

תגיות: , , , , ,
2 תגובות

אפליקציית HTML5 בחלונות 8 היא קודם כל HTML וג’אווה סקריפט רגילים, שלהם אפשר להוסיף אינטראקציה עם WinJS ו WinRT.
כדוגמא, נפתח אפליקציית קורא RSS פשוטה, ולאט לאט נוסיף לה יכולות של הספריות הנ”ל.
פוסט זה הוא חלק מסדרת הפוסטים “תכנות לחלונות 8 בHTML5”.

ניצור אפליקציה חדשה, ונשנה את הHTML ב-default.html כך שיכיל את הקוד הבא:

<body>

 <div id="container">

  <h1 class="title">

   קורא RSS

  </h1>

  <div id="downloadStatus">

  </div>

  <div id="posts">

  </div>

 </div>

</body>

הdiv עם ה-id=posts יהיה האלמנט אליו נוסיף את הכותרות של המאמרים בפיד ה-RSS שנירשם אליו.

בנוסף, הdiv שמעליו – id=downloadStatus – יהיה האלמנט בו נרשום את מצב ההורדה. תוך כדי הורדה/הושלם/שגיאה.

ה- HTML סמנטי ופשוט, ונמשיך לקובץ “code-behind” – הג’אווה סקריפט ב default.js:

(function () {

    'use strict';

    // Uncomment the following line to enable first chance exceptions.

    // Debug.enableFirstChanceException(true);

 

    WinJS.Application.onmainwindowactivated = function (e) {

        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

         // TODO: startup code here

 

 

        }

    }

 

    WinJS.Application.start();

})();

בשלב הראשון, כפי שראינו בפוסט “שלום עולם” אין כאן יותר מדי קוד. רק פונקציה אוטומאטית על מנת לסגור את הקוד שלנו, ובנוסף רישום לאירוע onmainwindowactivated של winJS שמקביל לאירוע onload הרגיל של הדפדפן. על מנת שנקבל אירועים מהסוג הזה יש לאתחל את אירועי האפליקציה של winJS כפי שאכן מתבצע בשורה האחרונה.

בתוך האירוע נכתוב את השורות הבאות:

document.getElementById("downloadStatus").innerText= "downloading posts...";

 

WinJS.xhr({ url: "http://blogs.microsoft.co.il/blogs/eladkatz/rss.aspx" }).

       then(processPosts, downloadError);

 

 

בשורה הראשונה ניגשים ל-div הרלוונטי ורושמים בו שאנו מורידים את הפוסטים, ובשורה השניה אנו מבצעים קריאה ל xhr שהיא למעשה קריאת Ajax לכתובת בה יש RSS פיד שנוכל להוריד. 
חתימת המתודה xhr מחזירה אובייקט שקוראים לו promise – זו הדרך בה בחרו בwinJS לממש תכנות א-סינכרוני. על אובייקט promise מוגדרת המתודה then שמאפשרת לנו לתת שתי מתודות callback. אחת להצלחה, ואחת במידה והפעולה נכשלה.

הקוד יכול להיראות קצת מוזר בהתחלה – אני לא זוכר מתי הייתה הפעם האחרונה שניגשתי לאלמנט ע”י document.getElementById ולא ע”י jQuery, וזה קצת מציק בעין בהתחלה. בפוסט הבא נתקן זאת.

האירוע במלואו יראה כך:

 

    WinJS.Application.onmainwindowactivated = function (e) {

        if (e.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {

         // TODO: startup code here

 

 

         //$('#downloadStatus').text("downloading posts...");

         document.getElementById("downloadStatus").innerText= "downloading posts...";

 

         WinJS.xhr({ url: "http://blogs.microsoft.co.il/blogs/eladkatz/rss.aspx" }).

                then(processPosts, downloadError);

        }

 

 

לא נותר לנו אלא להגדיר את הפונקציות processPosts ואת downloadError:

function processPosts(request)

{

    // clear the progress indicator

    document.getElementById("downloadStatus").innerText = "";

 

    // parse the RSS

    var items = request.responseXML.selectNodes("//item");

    if (items.length == 0) { downloadStatus.innerText = "error downloading posts"; }

 

    for (var i = 0, len = items.length; i < len; i++)

    {

        var item = items[i];

        // append data to #posts div

        var parent = document.createElement("div");

        appendDiv(parent, item.selectNodes("title")[0].text, "postTitle");

        appendDiv(parent, item.selectNodes("pubDate")[0].text, "postDate");

 

        document.getElementById("posts").appendChild(parent);

    }

}

הפונקציה מקבלת כפרמטר את את התשובה של ה-RSS פיד, ומפרסרת אותו. על מנת לבנות את הHTML היא משתמשת בפונקציית עזר נוספת בשם appendDiv שפשוט יוצרת אלמנטים של HTML בצורה הכי פרימיטיבית:

function appendDiv(parent, html, className) {

 var div = document.createElement("div");

 div.innerHTML = html;

 div.className = className;

 parent.appendChild(div);

}

 

ולבסוף downloadError שפשוט מציגה למשתמש שאירעה תקלה:

 

  function downloadError() {

   downloadStatus.innerText = "download error";

  }

וסיימנו.

נלחץ F5 ונריץ את האפליקציה, ונקבל את המסך הבא:

 

image_thumb2

וקיבלנו את קורא הRSS הפרימיטיבי ביותר בעולם.

בפוסט הבא נוסיף את jQuery ונראה כמה מהקוד שלנו הוא באמת cross-platform, וכמה לא.

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

2 תגובות

  1. איל שושן21 בדצמבר 2011 ב 11:55

    מצוין אך שאלתי היא
    מדוע גוגל כרום מתלבש על אקספלורר ואין אפשרות להסירו ולחזור לאקפלורר

    הגב
  2. choroshin8 בספטמבר 2012 ב 21:30

    פוסט מעולה!

    הגב