Scrollie, הגאדג'ט הראשון שלנו
הערה: נדרש ידע קודם ב-JavaScript, HTML ו-CSS על-מנת לבנות את הגאדג'ט. לא נכנס לעקרונות השפות האלה במדריך זה ועל הקורא לקחת בחשבון כי לא נחתור ליסודות הדברים.
הגענו לחלק המעניין, החלק שבו נוכל ליצור סוף סוף גאדג'ט משלנו – שלט חוצות דיגיטלית שהמילים שנקליד לו ינועו מימין לשמאל, בדיוק כמו במבזקי החדשות. לגאדג'ט זה נקרא Scrollie. כאשר נסיים את הגאדג'ט, הוא אמור להראות פחות או יותר כך:
את הגאדג'ט עצמו נאחסן בתיקית הגאדג'טים של Windows Sidebar, או במילים אחרות, המקום בו כל שאר הגאדג'טים נמצאים: C:\Users\Username\AppData\Local\Microsoft\Windows Sidebar\Gadgets
נחליף את Username בשם של המשתמש שלנו (משתמש החלונות) וניגש אל תיקיה זו באמצעות חלון ההפעלה (Win+R) והקלדת השורה הבאה: %appdata%\..\Local\Microsoft\Windows Sidebar\Gadgets
פקודה זו תפתח לנו את תיקיית הגאדג'טים. לאחר מכן, עלינו ליצור תת תיקיה בתיקיה שפתחנו אשר תכיל את השם של הגאדג'ט אותו אנו יוצרים עם הסיומת .gadget לשם ההדגמה ניצור תיקיה לגאדג'ט בשם Scrollie.gadget, כאשר הגאדג'ט עצמו מורכב ממספר קבצים:
- קובץ XML: מסמכי XML נועדו ליצור פורמט מסויים להעברת מידע. הגאדג'ט שלנו מכיל קובץ XML אשר מכיל פרטים על הגאדג'ט כמו: שם, תיאור, מיקום שאר הקבצים, גרסה, יוצר הגאדג'ט ועוד. שמו של קובץ זה הוא: "gadget.xml".
- קובצי HTML: הגאדג'ט מכיל שני קובצי HTML, האחד הוא דף האינטרנט שיוצג למשתמש או במילים אחרות, ממשק הגאדג'ט עצמו שהמשתמש יראה בשולחן העבודה. שמו של קובץ זה הוא שמו של הגאדג'ט עם ".html". הקובץ השני הוא קובץ המכיל את תפריט ההגדרות שבעזרתו יוכל השתמש לשנות את הגדרות הגאדג'ט. קובץ זה נקרא "settings.html".
- קובציJS : קבצים אלה יכילו את תכנות ה-JavaScript. קבצים אלה בעצם מפרטים את אופן התגובה לאירועים המתרחשים על ידי המשתמש.
- קובצי CSS: קבצים אלה יאפשרו לנו לעצב את הצורה בה דברים יוצגו כגון: פונט, מיקום אובייקטים, מרווחים ותכונות עיצוביות נוספות.
- קובצי PNG: גאדג'ט מכיל מינימום 2 קובצי PNG: קובץ אחד מתאר את עיצוב הממשק של הגאדג'ט (מה שיוצג למשתמש על שולחן העבודה) וקובץ אחר הוא האייקון של הגאדג'ט. אייקון זה יוצג למשתמש בחלון הוספת הגאדג'טים. שמו של קובץ זה הוא icon.png"".
ספריית הגאדג'ט יכולה כמובן להכיל בתוכה קבצים נוספים אשר נחוצים לגאדג'ט (כמו תמונות של כפתורים, סקריפטים חיצוניים ועוד).
עיצוב הגאדג'ט
כאשר זה מגיע לעיצוב הבחירה היא כולה שלכם, אך כיוון שהמקום מוגבל במיוחד, נסו להיות יצירתיים. במחשבה ראשונה, אנחנו יכולים לתת למשתמש תיבת טקסט בה יקליד את הטקסט שיוצג, אך במחשבה שנייה, מדוע לבזבז מקום בממשק? אם נשים את תיבת הטקסט בחלון ההגדרות של הגאדג'ט נוכל ליצור עיצוב נקי יותר ולפנות מקום יקר בגאדג'ט. כיוון שהרוחב המקובל לגאדג'ט הוא 130 פיקסלים והגובה נתון לבחירתנו, נבחר בגאדג'ט מלבני שיהיה מיטבי להצגת טקסט. לאחר שהחלטנו כיצד הגאדג'ט שלנו יראה, נעצב אותו בפוטושופ. במקרה שלנו נשתמש בדוגמה מוכנה במיוחד בשביל המדריך.
הגאדג'ט אומנם נראה קטן בדוגמה זו, אולם ברגע שנהפוך אותו לגאדג'ט אמיתי נוכל לראות שהוא בדיוק כמו כל גאדג'ט אחר. לקובץ זה נקרא background.png.
תיקיית הגאדג'ט
בכדי שנוכל להמשיך עלינו להכין את התיקיה בה הגאדג'ט שלנו ימוקם. עלינו להיכנס לתיקיית הגאדג'טים (כפי שציינו בתחילת העמוד) וליצור תיקיה בשם: Scrollie.gadget. בתוך תיקיה זו ניצור את התת תיקיה resources אשר תכיל את כל המשאבים של הגאדג'ט (תמונות, סקריפטים, קובצי CSS ועוד). בתיקיה זו (resources) ניצור את התת תיקיות הבאות: css, js ו-images. הפרדנו אותם למספר תיקיות בקטגוריות שונות בכדי לשייך כל סוג קובץ לתיקיה המתאימה לו.
את קובץ ה-background.png שהכנו נשים בתיקיית ה-images, כך שנוכל לגשת אליו באמצעות המיקום הבא: Scrollie.gadget\resources\images\background.png.
