XML – הגדרות ראשוניות של הגאדג'ט
נחזור לתיקיה הראשית של הגאדג'ט (Scrollie.gadget) וניצור את הקובץ gadget.xml. קובץ זה מאפשר למשתמשים לדעת פרטים על הגאדג'ט כמו: שם, גרסה, תיאור הגאדג'ט וקישורים לקבצים כמו: קובץ ה-HTML, קובץ האייקון של הגאדג'ט ולוגו החברה שיצרה אותו. להלן מסמך ה-XML שלנו:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Scrollie</name>
<namespace>windows.sdk</namespace>
<version>1.0.0.0</version>
<author name="Shynet">
<info url="www.byshynet.com" />
<logo src="logo.png" />
</author>
<copyright>© Nemex Studios.</copyright>
<description>Write a sentence that will be moving like a digital sign!</description>
<icons>
<icon height="64" width="64" src="icon.png" />
</icons>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Scrollie.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
<defaultImage src="resources/images/background.png" />
</host>
</hosts>
</gadget>
מתוך מסמך זה Windows Sidebar שואב מידע על הגאדג'ט שלנו. נעבור על התגיות החשובות במסמך זה:
- Name – שם הגאדג'ט
- Version – גירסת הגאדג'ט (1.0.0.0, גירסה ראשונית במקרה שלנו)
- Author – שם היוצר, כתובת האתר שלו ולוגו החברה
- Copyright– מידע על זכויות היוצרים
- Description –תיאור הגאדג'ט
- Icons – מידע על האייקונים. בברירת המחדל גודל האייקון הוא 64 על 64 פיקסלים ונקרא בשם icon.png. את קובץ האייקון נעתיק לתיקיית הגאדג'ט
- Hosts – מכיל מידע חיוני על הגאדג'ט כמו מסמך ה-HTML הראשי של הגאדג'ט (Scrollie.html), תצלום הגאדג'ט (defaultImage) ועוד.
המסמך הראשי
כפי שציינו, מסמך זה הוא בעצם מה שיוצג למשתמש על שולחן העבודה (הגאדג'ט עצמו). מסמך זה מכיל את כל הקוד שיתאר לנו איך הגאדג'ט יראה. המסמך נראה כמו כל מסמך HTML רגיל רק עם מספר שינויים קטנים. בתור התחלה, ניצור את המסמך ככל מסמך 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>
</head>
<body>
</body>
</html>
בתגית ה-body נכתוב את הקוד העיקרי של הגאדג'ט. כפי שציינו, מסמך זה קצת שונה ממסמך אינטרנט רגיל. במסמך רגיל אנחנו לרוב עוטפים את כל העיצוב שלנו ב-Div מסויים, אך בגאדג'טים אנו עוטפים אותו באמצעות תגית ה-<g:background>. תגית זו בעצם תעטוף את הגאדג'ט (תוכן כל הגאדג'ט יופיע בתוכה) ותהווה את רקע הגאדג'ט (אשר עיצבנו בפוטושופ). את הקוד הבא נכניס בתוך תגית ה-body:
<g:background id="imgBackground" src="resources/images/background.png" style="position: absolute; top: 0px; left: 0px;">
<!–לכאן הולך תוכן הגאדג'ט –>
</g:background>
כפי שניתן לראות, התגית עוטפת לנו את תוכן הגאדג'ט ברקע שהכנו. תכונת ה-src מצביעה על מיקום תמונת הרקע של הגאדג'ט (resources/images/background.png). ה-id שנתנו לתגית זו היא imgBackground בכדי שנוכל להתייחס אליה באמצעות JavaScript (במקרה שנרצה לשנות את הרקע, למשל). תכונת ה-style מיישרת את הרקע למיקום השמאלי העליון שממנו מתחיל הגאדג'ט באמצעות CSS. אם כבר אנחנו מדברים על CSS, למה אנחנו מכניסים את תכונות העיצוב של אלמנט הרקע דווקא על האלמנט עצמו (באמצעות תגית ה-style) ולא כמסמך חיצוני בצורה נוחה יותר?התשובה לכך היא כי אלמנט ה-<g:background> בשילוב Windows Sidebar מכיל באג קטן אשר לא מאפשר לנו לערוך את תכונת ה-style שלו באמצעות מסמך CSS חיצוני ולכן רק באלמנט זה לא נשתמש במסמך חיצוני. בשאר האלמנטים של מסמך זה נשתמש במסמך CSS חיצוני אשר ניצור בתיקיית ה-resources/css ונקרא לו gadget.css. לאחר שיצרנו את מסמך זה, עלינו לייבא אותו למסמך הגאדג'ט (Scrollie.html) שלנו באמצעות הוספת השורה הבאה בתגית ה-head:
<link rel="stylesheet" href="resources/css/gadget.css" />
את מסמך ה-CSS נערוך מאוחר יותר.
כפי שאמרנו, הגאדג'ט שלנו יכיל טקסט נע מימין לשמאל. בנוסף על כך בחלק התחתון של הגאדג'ט נוסיף את התאריך והזמן הנוכחי. הגאדג'ט בסופו של דבר יתחלק בצורה הזו:
בכדי שנוכל לממש זאת עלינו לחלק את הגאדג'ט לשני חלקי div, עליון ותחתון ולכן הקוד שנכניס לתוך תגית ה-<g:background> יהיה הקוד הבא:
<div id="scrollText"><!– User's scrolling text goes into this div –>
Text
</div>
<div id="bottomInfo"><!– Current date & time goes into this div –>
12.12.2012 12:12
</div>
אלמנט ה-div הראשון יכיל את הטקסט הנגלל בתוכו. אלמנט ה-div השני יכיל את התאריך והזמן הנוכחי. כפי שניתן לראות, הוספנו טקסט, תאריך וזמן קבועים כדוגמה. זהו, סיימנו להגדיר את הפרמטרים הבסיסיים במסמך ה-HTML שלנו. נחזור למסמך זה מאוחר יותר. כעת, באמצעות CSS, נעצב את המסמך שלנו כך שה-div שיצרנו יתייצבו במקומם הנכון על גבי הרקע (background.png). נגדיר את הפונט שבו נשתמש בגאדג'ט, צבעו, גודלו, את מיקום האלמנטים וכו'. רגע לפני שנצלול לתוך מסמך ה-CSS נראה את מסמך ה-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" />
</head>
<body>
<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>
מסמך עיצוב הגאדג'ט
לאחר שמסמך ה-Scrollie.html שלנו כמעט מוכן עלינו להתאים את הגאדג'ט כך שיציג את הטקסט במקומות הנכונים. באמצעות CSS נוכל ליישר את הטקסט ולייצב את האלמנטים במקומות המתאימים על תמונת הרקע. הנה מסמך ה-CSS המוכן שלנו:
/* Clearing all default browser spaces by setting all elements margin, padding and border values to 0 */
* {
margin: 0;
padding: 0;
border: 0;
}
body {
width: 130px;
height: 80px;
background-image: url('../images/background.png');
background-repeat: no-repeat;
font-size: 10pt;
color: #FFF;
}
#scrollText {
position: absolute;
top: 13px;
left: 13px;
width: 105px;
height: 40px;
font-weight: bold;
font-size: 35px;
overflow: hidden;
filter: Shadow(Color=black, strength=2); /* Using IE's filter property to put some shadows around text */
}
#bottomInfo {
position: absolute;
top: 54px;
left: 13px;
font-weight: bold;
font-size: 11px;
width: 105px;
text-align: center;
filter: Glow(Color=black, strength=2);
}
סימן ה-* בתחילת המסמך מאפשר לנו לשנות את תכונות כל האלמנטים במסמך. השתמשנו באלמנט זה בכדי לבטל מרווחים המוגדרים כברירת מחדל על ידי הדפדפן. ראוי לציין שהשתמשנו בתכונת ה-Filter הייחודית לדפדפן ה-Internet Explorer המאפשרת לנו להוסיף צל ואפקטים שונים אחרים לטקסט. יש לשים דגש על ציון הרוחב והגובה של הגאדג'ט בתגית ה-body כך שממשק הגאדג'ט יווצר בגודל המתאים.
כעת נוכל לראות את הגאדג'ט בפעולה! נוסיף את הגאדג'ט שלנו לשולחן העבודה בדיוק כמו שאנו מוסיפים כל גאדג'ט (כניסה לחלון הוספת הגאדג'טים > דאבל קליק על הגאדג'ט או גרירתו לשולחן העבודה). הנה הגאדג'ט שלנו:
כפי שניתן לראות, הגאדג'ט סטטי. הגאדג'ט אינו עושה דבר מלבד להציג מידע שאינו מתעדכן. אז איך "נחייה" את הגאדג'ט? התשובה לכך היא JavaScript!
