שני כלים שלאחרונה מצאתי כנוחים מאוד, הינם מונו (mono) וגלייד (glade). הניסיון שלי בשני הכלים האלו בשבוע האחרון היו מהנים ביותר ולכן, כאן אנסה לתת הסבר כיצד כל אחד (עם מעט רצון) יכול לבנות ממשקים גראפיים משלו.
דבר ראשון, glade הינו כלי WYSIWYG, לעיצוב ממשקים גראפיים. הוא יודע ליצור קוד בשפת C++, C וADA, אבל מה שמאפיין אותו יותר מכל, זה העובדה שהוא שומר את המידע בקובץ XML פשוט יחסית. בצורה כזו, ניתן לקרוא את הקובץ ובזמן ריצה לבנות את הממשק הגראפי, דבר שאני מניח שאולי בעל חסרונות כמו זמן עליה של הממשק, אבל מקל מאוד על העיצוב עצמו.
מונו, היא סביבת פיתוח בעלת אותן רעיונות של הסביבה הקניינית של מיקרוסופט, .net. כאן אני אסביר כיצד ניתן לשלב בין מונו וגלייד ליצירת ממשקים גראפיים פשוטים, ברובו המידע נלקח מהאתר של מונו, אבל שונה מעט בכך שהוספתי עוד כל מיני דברים.
דרישות מקדימות:
- גלייד
- מונו
- את הרכיבים: #glade# gtk
שלב ראשון: בנית הממשק עצמו עם גלייד
נתחיל עם בניית הממשק הבסיסי:
נפתח את גלייד, ונוסיף חלון חדש <IMG src="http://sijp.no-ip.info/art/gladeNmono/win.png" >
נוסיף לחלון תיבה מאונכת (vbox) <IMG src="http://sijp.no-ip.info/art/gladeNmono/vbox.png" > יש לבחור 2 שורות.
אנחנו אמורים לקבל חלון המחולק לשני חלקים, שורה עליונה ושורה תחתונה:
<IMG src="http://img228.imageshack.us/img228/8590/aaa8sc.png">
בשורה העליונה נשים לחצן <IMG src="http://sijp.no-ip.info/art/gladeNmono/button.png" > ובשורה השניה נשים תוית <IMG src="http://sijp.no-ip.info/art/gladeNmono/label.png" >
אמור לצאת משהו כזה:
<IMG src="http://img286.imageshack.us/img286/2156/bbb4rg.png">
נשמור את הפרוייקט בשם gui.glade (אל תסגרו את גלייד עדיין).
אם תפתחו את הקובץ שנוצר, תגלו קובץ XML פשוט למדי.
אבל כרגע, אנחנו לא יכולים לעשות הרבה עם מה שיצרנו. וכאן בא החלק התיכנותי בנושא.
שלב שני: בנית תוכנית קצרה ב#C שתטפל ביצירת הממשק הגראפי
באמצעות עורך הטקסט החביב עליכם, נכתוב תוכנית קצרה שקוראת את הקובץ שיצרנו ובונה באופן אוטומטי את הממשק.
ראשית נבנה מחלקה שתכיל את המידע הדרוש, נקרא לה GuiMaker, בה נבנה בנאי שיאתחל את המשתנים הדרושים ויטפל בבניית הממשק.
- public GuiMaker()
- {
- Application.Init();
- Glade.XML windowXml= new Glade.XML(null,"gui.glade","window1",null);
- windowXml.Autoconnect(this);
- Application.Run();
- }
שורה 5: מקשרים בין קובץ הglade ובין המחלקה שאנחנו בונים. המחלקה שלנו תאולץ להכיל את כל המידע הדרוש, אחרת נקבל שגיאה.
לכן, נוסיף משתנים שייצגו את הרכיבים הגראפיים שהוספנו (תיבה אנכית, לחצן ותוית).
המחלקה תראה כעת כך (יש לדאוג ששמות המשתנים יהיו זהים לשמות שהגדרנו בגלייד):
public class GuiMaker
{
public GuiMaker()
{
Application.Init();
Glade.XML windowXml= new Glade.XML
(null,"gui.glade","window1",null);
windowXml.Autoconnect(this);
Application.Run();
}
[Widget]
Button button1;
[Widget]
Label label1;
[Widget]
VBox vbox1;
public static void Main(string [] s)
{
new GuiMaker ();
}
}
הערה: הוספתי פונקציה ראשית.
נשמור את הקובץ בשם GuiMaker.cs וכעת ניתן לקמפל את התוכנית באמצעות הפקודה:
mcs -pkg:gtk-sharp -pkg:glade-sharp -pkg:gnome-sharp -resource:gui.glade GuiMaker.cs
נריץ ע"י
mono GuiMaker.exe
בשביל לסגור את התוכנית יש להרוג אותו ע"י צירוף המקשים ctrl+c במסוף.
שלב שלישי: תכנות הפקדים
יש לנו לחצן בממשק שלנו, אבל הוא לא עושה כלום. בגלייד (זוכרים שאמרתי לא לסגור אותו?), נסמן את הלחצן. יש לדאוג שתיבת המאפיינים פתוחה (view->show property editor), יש לבחור בטאב Signals. נוסיף ללחצן אות ע"י לחיצה על "..." ליד תיבת signal. נבחר clicked.
התוצאה אמורה להיות כך:
<IMG src="http://img114.imageshack.us/img114/8976/clicked9lq.png" >
יש ללחוץ על Add ולשמור את הפרוייקט.
בתוכנית שלנו, נוסיף מתודה שתטפל במקרה של לחיצה (שימו לב שהשם שלה חייב להיות זהה לזה שהוגדר בגלייד):
- public void on_button1_clicked( object o, EventArgs e)
- {
- Console.WriteLine("Button press");
- label1.Text = "Mono";
- Label l2=new Label("cool");
- vbox1.PackStart(l2,false,false,0);
- l2.Show();
- }
נתחיל בשורה 3: אנחנו מדפיסים למסוף את המחרוזת Button press
4: אנחנו משנים את הטקסט שבתוית label1 להיות Mono
5: אנחנו יוצרים תגית חדשה שבה יהיה כתוב cool . שמה של התגית יהיה l2.
6: אנחנו מוסיפים לתיבה האנכית את התגית החדשה.
7: דואגים שהתגית החדשה תהיה מוצגת.
נקמפל שוב באותה דרך, ונריץ. לאחר לחיצה הנה התוצאה:
<IMG src="http://img120.imageshack.us/img120/9630/s16qg.png">
לאחר לחיצה נוספת:
<IMG src="http://img120.imageshack.us/img120/5903/s21io.png">
קישורים:
למי שרוצה להוריד את הקבצים המוכנים: gnm.tar.gz
פרויקט מונו - #GTK למתחילים | |
|
28/07/2005 - 07:55 · 
