מסמך ה-JavaScript של הגאדג'ט (מנוע הגאדג'ט)
בכדי שנחייה את הגאדג'ט שלנו עלינו להכניס קצת קוד לתפריט. ניצור את המסמך gadget.js בתיקיית ה-resources/js ובתוך מסמך זה נגרום לגאדג'ט להזיז את הטקסט הנע ולעדכן את התאריך והשעה. לפני שנתחיל עם מסמך ה-JavaScript עלינו לייבא אותו למסמך ה-HTML שלנו – Scrollie.html. נוסיף את השורה הבאה בתגית ה-head:
<script type="text/javascript" src="resources/js/gadget.js"></script>
כעת ברגע שנעלה את הגאדג'ט, המסמך ייבא באופן אוטומטי את קוד ה-JavaScript. בכדי שנתחיל להזיז את הטקסט ברגע שהמסמך יעלה, עלינו להוסיף לאירוע ה-onLoad של אלמנט ה-body מתודה. נוסיף לתגית ה-body את הקוד הבא:
<body onload="pageLoad();">
ברגע שהמסמך יעלה, המתודה pageLoad() תקרא. מסמך ה-Scrollie.html המעודכן שלנו נראה כך:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Scrollie</title>
<link rel="stylesheet" href="resources/css/gadget.css" />
<script type="text/javascript" src="resources/js/gadget.js"></script>
</head>
<body onload="pageLoad();">
<g:background id="imgBackground" src="resources/images/background.png" style="position: absolute; top: 0px; left: 0px;">
<div id="scrollText"><!– User's scrolling text goes into this div –>
User's Text
</div>
<div id="bottomInfo"><!– Current date & time goes into this div –>
12.12.2012 12:12
</div>
</g:background>
</body>
</html>
כעת ניתן להתחיל ולכתוב את מסמך ה-JavaScript שלנו! ניכנס למסמך ה-gadget.js שייצרנו ממקודם ונוסיף את המתודה pageLoad:
//Enters this method when document loads
function pageLoad() {
}
נחזור למתודה זו בהמשך. בכדי שנוכל לגרום לטקסט שלנו לנוע עלינו לחשוב איך באמצעות DIV נוכל להזיז (או יותר נכון לגרור) את הטקסט? מה קורה כאשר אנו מכניסים ל-DIV טקסט ארוך יותר ממה שהוא יכול להכיל? יש לנו שני אפשרויות:
- אם הטקסט מכיל רווחים, הוא יורד שורה באופן אוטומטי
- אם הטקסט אינו מכיל רווחים הוא ממשיך לרוחב ומאפשר למשתמש לגלול באמצעות פסי גלילה
מפני שאלמנט ה-div שמכיל את הטקסט הנע (scrollText) בעל תכונת overflow: hidden, פסי גלילה אלה לא יופיעו (הסתכלו במסמך ה-gadget.css שיצרנו ושימו לב ששינינו את תכונה זו ל"מוחבא", אשר מעלימה את פסי הגלילה). כעת נוכל לנצל את תכונת הגלילה של ה-div על ידי כך שנגלול את הטקסט כל פרק זמן מסויים באמצעות כמה שורות קוד. אבל רגע, מה יקרה ברגע שהמשתמש יכניס משפט עם רווחים? הטקסט שלנו ירד שורה! בכדי שנוכל להמנע מירידות השורה המיותרות עלינו לשנות את הטקסט שהמשתמש הכניס ולהמיר את הרווחים למשהו אחר. "המשהו" הזה נקרא &nsbp;"". כתיבת קוד זה מאפשרת לנו להורות לדפדפן להמיר את הרווח לתו "שקוף", כך שבעצם המשפט: "Hello world!" לא יכיל רווח, אלא תו שקוף אשר גורם לדפדפן לחשוב שכל המשפט הנ"ל הוא מילה אחת, ואין צורך לרדת שורה. נוסיף את המתודות הבאות למסמך ה-JavaScript שלנו:
var scrollTimer; //A handler to the timer used to stop the timer (stop the text from scrolling)
//Starts the scrolling text
function startScrolling() {
scrollTimer = setInterval("scrollThread()", 20);
}
//Stops the scrolling text
function stopScrolling() {
clearInterval(scrollTimer);
}
//The text is being scrolled every 20 milliseconds
function scrollThread() {
var scrollText = document.getElementById("scrollText");
scrollText.scrollLeft += 2;
if (scrollText.scrollLeft == scrollText.scrollWidth – scrollText.offsetWidth)
scrollText.scrollLeft = 0;
}
שני המתודות הראשונות דיי פשוטות: המתודה הראשונה (startScrolling) מתחילה לנו Timer, או במילים אחרות, לולאה שחוזרת על עצמה כל 20 מאיות השנייה. המתודה השנייה (stopScrolling) מאפשרת לנו להפסיק את הטקסט מלנוע על ידי הפסקת ה-Timer. המתודה השלישית ((scrollThread גוללת את הטקסט ב-2 פיקסלים בכל פעם שנקרא לה. ברגע שהיא מגיעה לסוף (לא ניתן כבר לגלול), היא גוללת את הטקסט חזרה להתחלה. ברגע שנקרא למתודה זו כל 20 מאיות השנייה, ניצור אפקט של תנועה מתמשכת וחלקה. בכדי שנוכל לגרום לכך שהטקסט ינוע משמאל לימין ויחזור על עצמו, עלינו להוסיף רווחים "שקופים" (&nsbp;) בתחילתו ובסופו של הטקסט. עלינו להוסיף מספר מסויים של רווחים "שקופים" עד אשר יהיו שווים לגודלו של ה-div. דוגמה לכך היא הדוגמה הבאה:
ברגע שהטקסט מתחיל לנוע (להיגלל) הרווחים השקופים קודם כל זזים, אחר כך הטקסט מופיע ונעלם ברגע שהרווחים השקופים בקצהו השני של הטקסט תופסים את מקומו. ברגע שהגענו לרווח השקוף האחרון, הטקסט יגלל ישירות להתחלה, לרווח השקוף הבא. כך תיווצר לנו אנימציה מתמשכת כאשר הטקסט הנגלל נראה כאילו חוזר על עצמו. בכדי שנוכל לעשות זאת עלינו לשנות את הטקסט שהמשתמש הכניס באמצעות הפונקצייה הבאה:
//Returns a fixed string that will fit the LCD screen scroll effect
function fixText(text) {
var spacingText = " "; //The number of spaces required to hide the starting word
return (spacingText + text.replace(/ /gi, " ") + spacingText);
}
הפונקצייה הנ"ל ממירה את הטקסט שהמשתמש הכניס לטקסט אשר יתאים את עצמו לגאדג'ט שלנו. כל רווח שהפונקצייה תזהה, היא תמיר לקוד "&nsbp;", כך הטקסט שלנו לא ירד שורות והדפדפן יראה אותו כמילה אחת. לאחר מכן, בתחילת הטקסט ובסופו היא תוסיף מרווחים שקופים בכדי ליצור את האפקט שעליו דיברנו. מספר המרווחים השקופים הוא מספר קבוע שיוצר לנו רווחים בגודל השווה לגודל ה-div שבו הטקסט ינוע. נוסיף מתודה נוספת setScrollingText אשר מאפשרת לנו לשנות את הטקסט הנע לטקסט שאנחנו נקבע. מתודה זו תשתמש בפונקצייה fixText בכדי לתקן את הטקסט שיתאים לצרכים שלנו. מסמך ה-JavaScript המעודכן שלנו יראה כך:
//Enters this method when document loads
function pageLoad() {
setScrollingText("Example text!");
startScrolling();
}
//Sets the scrolling text
function setScrollingText(text) {
var scrollText = document.getElementById("scrollText");
scrollText.innerHTML = fixText(text);
}
var scrollTimer; //A handler to the timer used to stop the timer (stop the text from scrolling)
//Starts the scrolling text
function startScrolling() {
scrollTimer = setInterval("scrollThread()", 20);
}
//Stops the scrolling text
function stopScrolling() {
clearInterval(scrollTimer);
}
//The text is being scrolled every 20 milliseconds
function scrollThread() {
var scrollText = document.getElementById("scrollText");
scrollText.scrollLeft += 2;
if (scrollText.scrollLeft == scrollText.scrollWidth – scrollText.offsetWidth)
scrollText.scrollLeft = 0;
}
//Returns a fixed string that will fit the LCD screen scroll effect
function fixText(text) {
var spacingText = " "; //The number of spaces required to hide the starting word
return (spacingText + text.replace(/ /gi, " ") + spacingText);
}
כפי שניתן לראות במסמך המעודכן, הוספנו את המתודה setScrollingText ולמתודת ה-pageLoad הוספנו שתי שורות קוד. השורה הראשונה מציבה את הטקסט "Example text!" כטקסט נגלל בגאדג'ט שלנו. השורה השנייה מתחילה את גלילת הטקסט. ברגע שהמסמך שלנו יעלה, נוכל לראות את הטקסט "Example text!" נגלל על גבי הגאדג'ט! בכדי שנוכל לראות זאת, נשמור את המסמך הנ"ל (וכל מסמך אחר הקשור לגאדג'ט) ונוסיף את הגאדג'ט מחדש לשולחן העבודה. אם קיים לנו כבר גאדג'ט על שולחן העבודה, נסיר אותו ונוסיף אחד חדש. רגע, לא אמרנו שהמשתמש יכניס את הטקסט שהוא רוצה שיופיע? בכדי שנוכל לתת למשתמש לשנות את הטקסט בעצמו, עלינו ליצור תפריט הגדרות שבו המשתמש יכניס את הטקסט שהוא רוצה שיופיע. בהמשך המדריך נלמד איך אנו יוצרים תפריט הגדרות משלנו. הדבר הבא שנתמקד בו הוא עדכון השעון והתאריך. בכדי שנוכל לעדכן את השעון והתאריך עלינו לדעת קצת יותר על גאדג'טים.
כפי שהזכרנו, גאדג'ט הוא דף אינטרנט שפועל תחת Windows Sidebar והוא חשוף לשלוש מחלקות חדשות: Gadget, System ו-Presentation. ניתן לקרוא על כל אחת מהן ב-MSDN. במדריך זה נשתמש רק במחלקות Gadget ו-System. המחלקה System מכילה בתוכה פונקציות המשיגות לנו מידע על המערכת כמו: שימוש במעבד, קול, שעה וכו'. נשתמש במחלקה זו בכדי להשיג את השעה והתאריך הנוכחיים ועל ידי כך לעדכן את הגאדג'ט. בכדי שנוכל לעדכן את השעון באופן רציף, עלינו להריץ לולאה (או ליתר דיוק, טיימר) אשר תעדכן את הגאדג'ט כל פרק זמן מסויים, בדיוק כמו שעשינו עם הטקסט הנגלל. ניצור את לולאה זו כאשר המסמך שלנו עולה, וכך נתחיל את עדכון השעון מרגע העלייה. בכדי שנוכל לממש זאת, נשנה את המתודה pageLoad למתודה הבאה, ונוסיף מתודה אחרת מתחתיה:
function pageLoad() {
setScrollingText("Example text!");
startScrolling();
//Updates the gadget's Date & Time every 1 second
setInterval(
function() {
var timeString = "";
var dateObject = new Date(Date.parse(System.Time.getLocalTime(System.Time.currentTimeZone)));
timeString = fixTimeValue(dateObject.getDate()) + "." + fixTimeValue(dateObject.getMonth()) + "." + dateObject.getYear() + " " + fixTimeValue(dateObject.getHours()) + ":" + fixTimeValue(dateObject.getMinutes());
document.getElementById("bottomInfo").innerHTML = timeString;
}, 1000);
}
function fixTimeValue(value) {
if (value < 10)
return "0" + value ;
return value;
}
אנו כבר יודעים כי המתודה setInterval יוצרת לנו לולאה החוזרת על עצמה כל פרק זמן מסויים, פרק זמן זה הוא שנייה אחת. הפונקצייה שבתוך מתודה זו בעצם מכילה את הלולאה שתחזור על עצמה. ניתן לראות שבאמצעות מחלקת ה-System השגנו את הזמן הנוכחי של המחשב. על ידי שימוש במחלקת ה-Date הצלחנו להמיר את הזמן לפורמט מסויים (dd.mm.yyyy hh:mm). פונקציית ה-fixTimeValue פשוט מאוד מוסיפה לנו 0 לכל מספר שערכו קטן מ-10, וכך נוכל להציג את הזמן 2:8 כ- 02:08. נשמור את המסמך וניצור גאדג'ט חדש על שולחן העבודה. כפי שאנו רואים הזמן והתאריך התעדכנו לזמן והתאריך הנוכחיים.