GUI שונה לDocked ול Undocked

אתמול בהרצאה הראיתי את ההבדל בין גאדג'טים כשהם במצב Docked (מוצמדים ל Sidebar) וכשהם במצב Undocked (צפים על הדסקטופ). ציינתי שההבדל הוא בגודל הגאדג'ט האפשרי בשני המצבים.
אז, איך באמצ משנים את הGUI בהתאם למצב של הגאדג'ט? כמו הרבה דברים התשובה נמצאת ב Gadget Object Model. וגם כן, בקלות רבה מאד.

בפונקציית ה init של הגאדג'ט, תגדירו (כדי שיהיה זמין מתחילת הפעולה של הגאדג'ט) handler ל event ששמו System.Gadget.onDock שנזרק כאשר נעשה Dock לגאדג'ט ו System.Gadget.onUndock שנזרק כאשר נעשה Undock לגאדג'ט.
תגדירו handler לאיזושהי פונקציה שתהיה אחראית על העברה לדף אחר של המשתמש בגאדג'ט, או על שינוי גודל הגאדג'ט ושינוי התמונות המוצגות בהתאם למה שנזרק.

דרך אגב, ככה מגדירים בכלל handler בJS.

אם אתם רוצים, אתם יכולים כל הזמן לקרוא ל Property System.Gadget.docked שמציין לפי true ו false אם הגאדג'ט במצב docked (זה ה true).

זה קוד לדוגמא  שאם תשימו אותו בתוך הפונקציה שתופעל עם הפעלת הגאדג'ט (תופעל באירוע onload של הדף הראשי בגאדג'ט) יקרא כל פעם שהיה unDock למתודה doUndoch ואם המשתמש עשה Dock יקרא ל doDock. הפונקציות האלה שמבצעות את הפעולה יכולות פשוט להחליף את האלמנטים הגרפיים, להגדיל את הגודל ע"י שינוי הCSS - מה שאתם רוצים.

הנה גם דוגמא לתנאי, שאיפה שלא תשימו אותו יגיד לכם אם הגאדג'ט במצב Docked או לא:

אני מאד ממליץ ליצור GUI שונה לגאדג'ט שלכם עבור כל מצב. תקלו על המשתמש, וכאתם על הדסקטופ, תנו לו ממשק יותר גדול. אפילו בלי יותר פונקציונאליות, רק תגדילו קצת (לא יותר מדי) את הממשק שיהיה לו יותר בולט ונוח.

בהצלחה.