דף זה תורגם על ידי Cloud Translation API.

CalVis: Creating a customized AJAX UI for your Google Calendar

אוסטין צ'או, תוכניות Google למפתחים
יוני 2008

מבוא
שימוש ב-CalVis
התאמה אישית של העיצוב
הדגמה
תרומה
מקורות מידע

הערה – זהו פרויקט קוד פתוח שהתחיל על ידי עובד Google, ולא ספרייה שנתמכת באופן רשמי. כל מי שמעוניין מוזמן להצטרף ולתרום :)

מבוא

האם אי פעם רציתם ליצור חוויית יומן מותאמת אישית באתר שלכם באמצעות נתונים מיומן Google, אבל לא ידעתם איך להציג את נתוני היומן בצורה ויזואלית? נראה שיש מספר לא מבוטל של מפתחים שמתמודדים עם הדילמה הזו. ‫Google Calendar Data API הוא ממשק API רב-עוצמה של שירות אינטרנט, כי הוא מאפשר לכם לגשת לכל הנתונים ביומן Google. עם זאת, הוא נשאר ממשק API לנתונים של קריאה/כתיבה בלבד, בלי אפשרות להצגת נתונים חזותית.

במאמר הזה אציג ספרייה לדוגמה שכתבתי כדי לפתור את הבעיה הזו. התחלתי את פרויקט הקוד הפתוח, Calendar Visualization (CalVis), שמטרתו לספק ממשק משתמש (UI) קל להתאמה אישית להצגת נתונים מחשבון יומן Google. הנתונים ב-CalVis נמשכים ישירות מחשבון יומן Google שלכם באמצעות Google Calendar Data API. (הערת העורך: החל מגרסה 3, יומן Google כבר לא משתמש בפורמט הנתונים של Google). הוא מסתמך על ספריית הלקוח של Google Data JavaScript כדי לתקשר עם יומן Google, והוא מיועד למקסם את הגמישות בהתאמה אישית.

הכלי CalVis נועד לחסוך למפתחים את הצורך ליצור מחדש את חוויית המשתמש העשירה בממשק המשתמש של היומן. המפתחים יכולים להשתמש בו כמאגר תבניות שניתן להתאמה אישית כדי להציג נתונים של Google Calendar. מפתחים יכולים להשתמש ב-CalVis כדי להציג נתונים מהיומן ולבצע שילוב מותאם אישית ברמה גבוהה באתרים שלהם. כפי שתראו, ממשק שמבוסס על CalVis ניתן להתאמה אישית מלאה באמצעות JavaScript, ‏ HTML ו-CSS. מפתחים יוכלו לפרוס במהירות ובקלות ממשק יומן מותאם אישית עם קבוצה של רכיבי בקרה חיוניים של היומן, כדי להציג את נתוני היומן.

שימוש ב-CalVis

השלבים הבאים יעזרו לכם להתחיל להשתמש ב-CalVis לפיתוח.

שלב 1 – טוענים את ספריית התצוגה החזותית של היומן

קודם צריך לכלול את ה-loader בקובץ ה-HTML. הטוען הזה טוען באופן דינמי את מחלקות הליבה של CalVis ואת הספריות התלויות שלה (כמו ספריית הלקוח של Google Data JavaScript).

<script src="//gcal.appspot.com/calvis/calvis.js" type="text/javascript"></script>

שלב 2 – שימוש בגיליון סגנונות CSS לתיאור מאפייני הסגנון.

קובץ ה-CSS שמוגדר כברירת מחדל ייצור מראה ותחושה שמוגדרים כברירת מחדל, כמו בדוגמה הזו. אתם יכולים להוריד את קובץ ה-CSS הזה ולהתאים אותו אישית כדי ליצור מראה ותחושה שונים לחלוטין.

<link rel="stylesheet" type="text/css" href="//gcal.appspot.com/calvis/default.css" />

שלב 3 – הגדרת המבנה החזותי של ממשק היומן באמצעות HTML

ל-CalVis יש כמה רכיבים חזותיים מוגדרים מראש שמרכיבים את ממשק היומן. הסידור המבני של רכיבי הממשק האלה מוגדר על ידי פריסת ה-HTML.

רכיבי ממשק המשתמש של CalVis הם:

Login Control (רק ליומנים פרטיים)
זהו רכיב ה-HTML שמספק את הקישור להתחברות או ליציאה מהחשבון.
Status Control
רכיב ה-HTML שמספק מידע על סטטוס או שגיאות.
רכיב הניווט
זהו רכיב ה-HTML שמציג את הניווט ביומן בהתאם לתצוגה הנוכחית.
View Control
זהו רכיב ה-HTML שמעבד את הבחירה של תצוגת היומן. בגרסה הזו זמינות רק תצוגות חודשיות או שבועיות.
‫Calendar Body
זהו רכיב ה-HTML שמעבד את היומן בפועל. עם רשתות שמציינות תאים של תאריכים ספציפיים.
‫Event Display
זהו רכיב ה-HTML שמציג את פרטי האירוע כשמופעל טריגר של אירוע. בגרסה הזו יש תמיכה רק בטריגרים של האירועים click (קליק) ו-mouseover (העברת העכבר).

דוגמה לאופן הסידור החזותי של הרכיבים האלה באמצעות מבנה בסיסי של טבלת HTML –

  <table style="width: 800px;">
    <tr>
      <td colspan="2" valign="top">
        <div style="float: left;" id="loginControlDiv"></div>
        <div style="float: right;" id="statusControlDiv"></div>
      </td>
    </tr>      
    <tr>
      <td valign="top">
        <div id="navControlDiv"></div>
      </td>
      <td valign="top" align="right">
        <div id="viewControlDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="calendarBodyDiv"></div>
      </td>
    </tr>
    <tr>
      <td colspan="2" valign="top">
        <div id="eventDisplayDiv"></div>
      </td>
    </tr>
  </table>

שלב 4 – הפעלה והגדרה של CalVis באמצעות JavaScript

אפשר להתאים אישית את ההתנהגות או המראה באמצעות JavaScript. חשוב לזכור: כדי לשנות אובייקט ב-JavaScript, קודם צריך לטעון אותו בדפדפן. לכן, קודם צריך לחכות עד שכל הספריות התלויות ייטענו באמצעות הכלי CalVis Loader. הפעולה הזו מתבצעת באמצעות השיטה calvis.ready(). השיטה הזו מקבלת שיטת קריאה חוזרת שתופעל כשכל הספריות ייטענו ו-CalVis יהיה מוכן לשימוש.

window.onload = function() {
  calvis.ready(callback);
}

בתוך פונקציית הקריאה החוזרת, יוצרים מופע של האובייקט calvis.Calendar. עכשיו צריך להקצות את מזהי ה-CSS השונים (שמוגדרים מפריסת ה-HTML בשלב 3) למיפוי לרכיבי ממשק המשתמש המתאימים ביומן.

var calId = 'developer-calendar@google.com';

var calendar = new calvis.Calendar();

// set the CSS IDs for various visual components for the calendar container
calendar.setCalendarBody('calendarBodyDiv');
calendar.setStatusControl('statusControlDiv');
calendar.setNavControl('navControlDiv');
calendar.setViewControl('viewControlDiv');

עכשיו אפשר לציין מאיזה חשבון ביומן Google כדאי ל-CalVis לשלוף נתונים. כדי לציין יומן ציבורי –

// set the calenar to pull data from this Google Calendar account
calendar.setPublicCalendar(calId);

כדי לציין יומן פרטי, צריך לציין גם את רכיב ה-HTML שמתאים ללחצן הכניסה –

// set the calenar to pull data from this Google Calendar account
calendar.setPrivateCalendar(calId);
calendar.setLoginControl('loginControlDiv');

כדי להציג את פרטי האירוע, צריך לספק שיטת קריאה חוזרת (callback) כך שכאשר מופעלת רשימת אירועים ביומן (על ידי אירוע מסוג click או mouseover), הקריאה החוזרת תופעל כדי להציג את פרטי האירוע. דוגמה לקריאה חוזרת (callback) של הצגת אירוע:

calendar.setEventCallback('click', displayEvent);

function displayEvent(event) {    
  var title = event.getTitle().getText();  
  var date = event.getTimes()[0].getStartTime().getDate();
  var content = event.getContent().getText();  
  
  var eventHtml = [;
  eventHtml.push(date.toString());
  eventHtml.push('<br><br>');
  eventHtml.push('<b>Event title:</b> ');
  eventHtml.push(title);
  eventHtml.push('<br>');
  eventHtml.push('<br>');
  eventHtml.push('<b>Description:</b>');
  eventHtml.push('<p style="font-size: 11px;">');
  eventHtml.push(content); 
  eventHtml.push('</p>');
  eventHtml.push('<br>');

  document.getElementById('eventDisplayDiv').innerHTML = eventHtml.join('');
}

לבסוף, אפשר להגדיר את תצוגת ברירת המחדל של היומן (תצוגה חודשית או שבועית) ולהפעיל את השיטה render()‎ כדי להציג את ממשק המשתמש של היומן –

// set the default view to be "month"
calendar.setDefaultView('month');

// display the calendar
calendar.render();

התאמה אישית של העיצוב

כדי להתאים אישית את הגודל, הצבע או הסגנון של תא תאריך ספציפי, צריך לשנות את מאפייני הסגנון של CSS של כמה מחלקות CSS מוגדרות מראש. לדוגמה, אפשר לשנות את הרוחב והגובה של כל תא תאריך בתצוגה החודשית על ידי שינוי של מחלקות ה-CSS שמוגדרות כברירת מחדל: monthViewCell ו-contentCell.

הדגמה (דמו)

ההדגמה הזו מראה איך להשתמש ב-CalVis עם הסגנון שמוגדר כברירת מחדל.

בהדגמה הזו אפשר לראות איך משתמשים ב-CalVis עם התאמה אישית כדי ליצור מאש-אפ עם Google Maps ו-YouTube API.

הוספת תוכן

‫CalVis הוא פרויקט קוד פתוח, וקוד המקור שלו זמין להורדה דרך Subversion ב-Google Code Project Hosting.

CalVis: Creating a customized AJAX UI for your Google Calendar קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.