מסמך העיצוב של חלון ההגדרות
באמצעות מסמך זה נוכל לעצב את מסמך ה-settings.html. אם נחזור, נראה שייבאנו את מסמך זה, אך עדיין לא ממש יצרנו אותו. אומנם המסמך אינו מעוצב במיוחד אך הוא מכיל מידע חשוב כמו: גודל החלון, המרווח ועוד. ניצור את המסמך resources/css/settings.css ונכתוב בו את הקוד הבא:
* {
margin: 0;
padding: 0;
border: 0;
}
body {
width: 285px;
height: 50px;
}
input {
border: 1px solid #000;
padding: 2px;
}
table td {
padding-right: 5px;
}
#settings_wrapper {
padding: 1px;
}
כפי שעשינו עם מסמך ה-CSS הקודם, לא נסביר לעומק שורה שורה. באמצעות המסמך הנ"ל קבענו את גודל המסמך, המרווחים והצורה שבה יוצגו דברים במסמך.
סגירת קצוות – טעינת ההגדרות לגאדג'ט
לאחר שסיימנו לערוך את הגדרות הגאדג'ט נוכל לנצל את פונקציות ה-settings_manager.js שייבאנו במסמך ה-Scrollie.html וכך לעלות את הגדרות הגאדג'ט. נערוך את מסמך ה-gadget.js,נוסיף את השורות הבאות בתחילת פונקציית ה-pageLoad כך שתעלה את ההגדרות השמורות:
if (firstLoaded()) //If it's the first time our gadget loads…
setDefaults(); //Gadget first loaded, set settings to default
System.Gadget.settingsUI = "settings.html"; //Append the settings.html file as the gadget settings form
System.Gadget.onSettingsClosed = settingsClosed; //Attach an event to the settings close event
ההתניה הראשונה בודקת אם הגאדג'ט כבר עלה לפני (היה קיים לפני, או שנוסף על ידי המשתמש). אם זאת הפעם הראשונה שהגאדג'ט עולה, נעלה את הגדרות ברירת המחדל של הגאדג'ט. לאחר מכן, סיפחנו לגאדג'ט שלנו את מסמך ההגדרות שהכנו – settings.html. ברגע שסיפחנו את מסמך ההגדרות, הגאדג'ט באופן אוטומטי יוסיף את כפתור עריכת ההגדרות. לבסוף, הוספנו מתודה בשם settingsClosed שתגיב לאירוע ה-onSettingsClosed, הגאדג'ט קורא לאירוע זה ברגע שחלון ההגדרות נסגר. נוסיף את המתודה settingsClosed למסמך ה-gadget.js:
//Settings window closed
function settingsClosed(event) {
if (event.closeAction == event.Action.commit) //User accepeted
setScrollingText(getScrollTextSetting()); //Load the new settings
}
ברגע שמסמך ההגדרות נסגר (settings.html), הגאדג'ט שלנו יקרא למתודה זו. ההתניה בודקת אם המשתמש אישר את ההגדרות (לחץ על כפתור האישור). אם כן, הוא יעדכן את הטקסט הנגלל לטקסט החדש שנשמר בהגדרות המסמך.
אייקון הגאדג'ט
בכדי לתת לגאדג'ט שלנו קצת אופי, עלינו ליצור אייקון, מין סמל שייצג את הגאדג'ט שלנו בחלון הוספת הגאדג'טים. גודל האייקון הוא בדרך כלל 64 על 64 פיקסלים. על האייקון להביע את הרעיון הכללי של הגאדג'ט, כך שהמשתמשים יוכלו לזהות אותו בקלות. הנה אייקון לדוגמה שבו נשתמש בגאדג'ט שלנו:
השתמשו ב-Vector Shapes בכדי לשמור על איכות התמונה גם ברזולוציות שונות. ניתן לקרוא על Vector Graphics כנגד Raster Graphics בעמוד הבא. לאחר שייצרנו את האייקון, נשמור אותו בפורמט PNG בשם icon.png. שימו לב כי רקע האייקון שקוף ולא לבן בכדי שיתאים לאפקט הזכוכית שבחלון הוספת הגאדג'טים. לבסוף, הנה תמונה של הגאדג'ט שלנו מתוך חלון הוספת הגאדג'טים: