Docstoc

' GUI

Document Sample
' GUI Powered By Docstoc
					                                     ‫תכנות מתקדם‬
                                   ‫פרויקט - תרגיל 4‬
                                                                              ‫הערה כללית:‬
‫כדי שההתחלה תהיה קלה ומהירה יותר, מופיע כאן קוד שמממש חלק מה ‪ ,GUI‬שאף מכיל בתוכו את כל‬
‫הרמזים הדרושים ליצירה של ‪ widgets‬וציורים על ‪ ,canvas‬אך באופן שעדיין יחייב אתכם להבין כיצד‬
                                                                                  ‫זה נעשה.‬
                  ‫‪ ‬תחילה יהיה עליכם יהיה להשלים את ה ‪( .GUI‬בהתאם לקוד שכבר מומש)‬
                              ‫‪ ‬את ההאזנה לפעולות המשתמש תבצעו בהתאם לנלמד בכיתה.‬
                                          ‫‪ ‬ההפעלה של החלק הקודם תלויה כבר רק בכם.‬

                                                                             ‫מטרות התרגיל:‬
                                                    ‫‪ ‬כתיבת רכיבי ‪ GUI‬שונים ב ‪.SWT‬‬
                                           ‫‪ ‬הפעלת הרכיבים, וחיבור הפעולות לקוד מוכן.‬

         ‫הפעם לא נוסיף תוכן חדש לסימולטור שלנו, אלא רק נייצג ונפעיל את הקיים באמצעות ‪.GUI‬‬

                                                         ‫משימה ראשונה : יצירת ה ‪.widgets‬‬

                                                                   ‫כל ‪ GUI‬מתחיל מסרטוט...‬




                                         ‫כי תמיד כדאי להחליט מה רוצים לפני שניגשים למימוש.‬

                                           ‫תחילה נחליט כיצד נתאר את ה ‪ layout‬של החלון שלנו:‬
  ‫‪ ‬אנו רוצים תפריט, מתחתיו 2 ‪ groups‬בהם יש כל מיני ‪ ,widgets‬ובסוף ‪ canvas‬בו נציג את‬
                                        ‫הסימולציה עצמה ע"י ציור הרובוטים והקופסאות.‬
  2 ‫ יתפסו‬canvas ‫ עם 2 עמודות, כאשר התפריט וה‬GridLayout ‫ אפשרי אחד יהיה‬Layout      
                 .‫ יתחלקו בשטח כל אחד בתא‬groups ‫תאים על רוחב החלון, לעומתם שני ה‬
            .‫ הימני יתפוס שטח קבוע, ואילו השמאלי יתפוס את שאר המקום‬group ‫נרצה שה‬   
            .‫ לתפוס יותר מתא אחד‬widget ‫נבחר בשיטה זו כדי שתלמדו איך אפשר לגרום ל‬   

             :‫ עם 3 עמודות‬GridLayout ‫, בשמאלי נשתמש ב‬groups ‫כעת נחליט על הפריסה בתוך ה‬

                               Label   (blank)    Lable

                               List     Button     List

                                                          .‫ השמאלי‬group ‫ ל‬Layout ‫תבחרו‬

            .‫ שהיה לנו עד כה‬main ‫, הוא יחליף את קובץ ה‬GUI.java ‫העתיקו את הקוד הבא לקובץ‬
   .‫הבינו מהקוד כיצד יצרנו את הרכיבים שבחלון, והשתמשו בזה כרמז להשלמת כל הרכיבים החסרים‬


import java.io.File;

import   org.eclipse.swt.SWT;
import   org.eclipse.swt.layout.GridData;
import   org.eclipse.swt.layout.GridLayout;
import   org.eclipse.swt.widgets.Button;
import   org.eclipse.swt.widgets.Canvas;
import   org.eclipse.swt.widgets.Display;
import   org.eclipse.swt.widgets.Group;
import   org.eclipse.swt.widgets.Label;
import   org.eclipse.swt.widgets.List;
import   org.eclipse.swt.widgets.Shell;

public class GUI {
       private static List robots,files;
       private static Canvas canvas;

         private static void initLists(Group g){
                // headlines:
                new Label(g,SWT.NONE).setText("Robots List");
                new Label(g,SWT.NONE);     // blank
                new Label(g,SWT.NONE).setText("Files List");

               // list button list
               robots=new List(g,SWT.BORDER | SWT.V_SCROLL);
               robots.setLayoutData(new GridData(150,80));
               Button b=new Button(g,SWT.PUSH);
               b.setText("<-");
               files=new List(g,SWT.BORDER | SWT.V_SCROLL);
               files.setLayoutData(new GridData(150,80));
               File f=new File(".");
               files.setItems(f.list());
         }

         public static void main(String[] args) {
             Display display = new Display();
             Shell shell = new Shell(display);
             shell.setLayout(new GridLayout(2,false));
             shell.setText("Advanced Programming exercise 1");
             shell.setSize(700, 600);

             // -------- Main window parts------------
           /*
            * enter here a Menu that will take the 2 cells,
            * over the entire width of the window.
            * look at the canvas to get a hint.
            */

           // ==== Group 1
           //set the group of create robot
           Group group1=new Group(shell,SWT.SHADOW_IN);
           group1.setText("Create Robot");
           // makes it to take as much space it can:
           group1.setLayoutData(new
GridData(SWT.FILL,SWT.CENTER,true,false));
           // set the group layout to be ???
           group1.setLayout(new ???);
           /* call an "init" method to insert components into group1,
            * see what happens in group2, to get a hint on how to do it.
            */

           // ==== Group 2
           //set the group of the lists
           Group group2=new Group(shell,SWT.SHADOW_IN);
           // set the group layout to be 3 cols
           group2.setLayout(new GridLayout(3,false));
           // init the group components
           initLists(group2);     // init the lists into group2

           // ==== the big drawing Canvas
           canvas=new Canvas(shell,SWT.BORDER);
           // set the canvas to take 2 cells
           canvas.setLayoutData(new
GridData(SWT.FILL,SWT.FILL,false,true,2,1));
           canvas.setBackground(display.getSystemColor(1));
           canvas.addPaintListener(new DrawEnvironment());

           // --------- end of main window part --------

           shell.open();
           // Set up the event loop.
           while (!shell.isDisposed()) {
             if (!display.readAndDispatch()) {
               // If no more entries in the event queue
               display.sleep();
             }
           }
           display.dispose();
       }
}

                                           "
                                  .‫ השמאלי עפ הסרטוט‬group ‫הוסיפו את הרכיבים שבתוך ה‬
                                                              :‫הוסיפו את התפריט הבא‬
File                       Box
  Start Simulation          Add Box
  Stop Simulation
  Exit




                               .canvas ‫משימה שנייה : ציור הרובוטים ושאר העצמים על ה‬
‫נשים לב שהנקודה (0,0) האמיתית נמצאת בפינה השמאלית העליונה של ה ‪ ,canvas‬וכל נקודה‬          ‫‪‬‬
 ‫)‪ (x,y‬עליו נמצאת במרחק ‪ x‬משמאל ובמרחק ‪ y‬מלמעלה.(כאשר המרחקים תמיד אי שליליים)‬
‫ואילו אנו רוצים שהנקודה )0,0( תהיה במרכז ה ‪ ,canvas‬כך נוכל לראות גם נקודות עם ערכים‬       ‫‪‬‬
                                                                               ‫שליליים.‬
    ‫כמו בציר המספרים, ‪ x‬חיובי – מימין למרכז, ושלילי משמאלו, ‪ y‬חיובי מעל המרכז, ושלילי‬     ‫‪‬‬
                                                                                 ‫מתחתו.‬
 ‫הנק )0,0( תשתנה בהתאם לשינויים בגודל ה ‪ canvas‬כאשר מגדילים או מקטינים את החלון –‬         ‫‪‬‬
                                                                 ‫כלומר זו נקודה יחסית.‬
    ‫ה ‪ position‬של רובוט – נקודה )‪ (x,y‬מייצג את המרחקים בפיקסלים (נקודות מסך) מאותה‬        ‫‪‬‬
                                                                      ‫נקודה )0,0( שלנו.‬
‫המשמעות היא שמשחק עם גודל החלון לא משפיע על המרחק של הרובוט מהמרכז (המרחק לא‬              ‫‪‬‬
  ‫יחסי, אלא אבסולוטי), אבל כשהמרכז עצמו זז, כל הרובוטים מתעדכנים יחסית למרכז החדש.‬
                           ‫במיוחד בגלל דברים כאלו אנו מגדירים ‪ Listener‬לפעולת הציור.‬      ‫‪‬‬

                                                             ‫בשורה הבאה שכתבנו בתוכנית לעיל,‬
                                    ‫;))(‪canvas.addPaintListener(new DrawEnvironment‬‬
     ‫צריך להכניס מופע מימוש של הממשק ‪ PaintListener‬ואנו רואים שיצרנו מופע של מחלקה בשם‬
                                   ‫‪ ,DrawEnvironment‬כלומר היא מממשת את הממשק הזה.‬
             ‫שם צריך לממש את המתודה )‪public void paintControl(PaintEvent e‬‬
                                    ‫כך שנצייר שם כל רובוט ב ‪ Simulation‬וכן את הקופסאות.‬
‫מכיוון שפעולה זו עשויה להיות מורכבת נממש את זה במחלקה נפרדת ולא בהגדרת מופע מפורשת בתוך‬
                                                   ‫ה ‪ addPaintListener‬כמו שעשינו בכיתה.‬

  ‫חלוקת אחריות טובה תהיה שכל רובוט יהיה אחראי על הציור של עצמו, כי הוא מכיר את הנתונים שלו‬
                                ‫כגון שמו והמיקום שלו, והוא אפילו יכול לצייר את עצמו במיקום זה.‬
          ‫לכן נוסיף לממשק ‪ Robot‬שלנו את המתודה ;)‪public void paint(PaintEvent e‬‬
       ‫ונממש אותה (או נוסיף על מימוש קיים...) בכל מחלקה קונקרטית של רובוט באופן המתאים לה.‬

                                                      ‫דוגמא למימוש של ‪:DrawEnvironment‬‬
            ‫יצרנו ב ‪ CTOR‬שני רובוטים במיקומים שונים, (שבינתיים מדמים לנו את הרובוטים של‬
‫‪ )...Simnulation‬ובמתודה ‪ paintControl‬של ה ‪ PaintListener‬קיבלנו חזרה את ה ‪ canvas‬שאחראי‬
   ‫לאירוע, שלפנו ממנו את גודלו, חישבנו את המרכז, ציירנו סביבו מעגל קטן שיציין את מיקום המרכז‬
                                                       ‫ולבסוף קראנו לציור שני הרובוטים שלנו:‬

‫{‪public class DrawEnvironment implements PaintListener‬‬
       ‫;1‪Robot r,r‬‬
       ‫{)(‪public DrawEnvironment‬‬
              ‫:‪//init 2 robots just for an example‬‬
              ‫;)(‪r=new Aibo‬‬
              ‫;)"‪r.setName("Azit‬‬
              ‫;))0,05(‪r.setStartingPosition(new Position‬‬

                ‫;)(‪r1=new Aibo‬‬
                ‫;)"‪r1.setName("Kishta‬‬
                ‫;))05-,001-(‪r1.setStartingPosition(new Position‬‬
       ‫}‬

       ‫‪// the drawing implemented method‬‬
       ‫‪public void paintControl(PaintEvent‬‬          ‫{ )‪e‬‬
              ‫// ;‪Canvas c=(Canvas)e.widget‬‬         ‫‪get the canvas‬‬
              ‫// ;‪int maxX = c.getSize().x‬‬          ‫‪max size‬‬
              ‫;‪int maxY = c.getSize().y‬‬
              ‫;2/‪int mx=maxX/2,my=maxY‬‬   ‫//‬          ‫)0,0( ‪mid point as‬‬

                ‫.‪e.gc.drawOval(mx-2, my-2, 4, 4); // point at the middle‬‬
                 ‫.‪r.paint(e); // paint the robots‬‬
                 ‫;)‪r1.paint(e‬‬
         ‫}‬
‫}‬


                                         ‫כעת נראה את תחילת המימוש של מתודת ה ‪ paint‬לרובוט:‬

‫{)‪public void paint(PaintEvent e‬‬
       ‫;‪Canvas c=(Canvas)e.widget‬‬       ‫‪// get the canvas‬‬
       ‫;‪int maxX = c.getSize().x‬‬        ‫‪// max size‬‬
       ‫;‪int maxY = c.getSize().y‬‬
       ‫;2/‪int mx=maxX/2,my=maxY‬‬         ‫)0,0( ‪// mid point as‬‬
       ‫;‪int myX=mx+current.x‬‬            ‫‪// set the current position‬‬
       ‫;‪int myY=my-current.y‬‬            ‫‪// set the current position‬‬

         ‫;)02 ,02 ,01-‪e.gc.drawOval(myX-10, myY‬‬           ‫‪// the circle‬‬

         ‫*/‬
          ‫‪* draw the heading indicator here‬‬
          ‫‪* use e.gc.drawLine‬‬
          ‫/*‬

         ‫‪// the info‬‬
         ‫;)‪e.gc.drawString(name,myX+13, myY-13,true‬‬
         ‫;)‪e.gc.drawString("General",myX+13, myY,true‬‬
         ‫;)‪e.gc.drawString("("+current.x+","+current.y+")",myX+13, myY+13,true‬‬
‫}‬


    ‫נשים לב שכדי לתמוך בכל האמור לעיל בעניין המיקום הגרפי של הרובוט על ציר המספרים סביב הנק'‬
     ‫(0,0) אנו שוב שומרים את המרכז במשתנים ‪ mx,my‬ומחשבים את המיקום הגרפי במשתנים ‪ myX‬ו‬
                                    ‫‪ myY‬שהם ה"מרכז" בתוספת ה ‪ x,y‬הנוכחיים השמורים ברובוט.‬

‫מכיוון שמרחק ‪ y‬האמיתי נמדד מלמעלה, אז ככל שהוא גדול יותר הוא יופיע נמוך יותר ב ‪ canvas‬בניגוד‬
 ‫להתאמה על ציר המספרים, ולכן ‪ myY=my-current.y‬כך ככל ש ‪ y‬גדול יותר הוא יהיה יותר למעלה‬
                                                                                     ‫בציור.‬

                                                                ‫ציור הרובוטים ואלמנטים נוספים:‬

      ‫מציין הכיוון הוא קו היוצא ממרכז המעגל, באורך 03‬
  ‫פיקסלים, והוא נוטה ע"פ ה ‪ heading‬הנוכחי של הרובוט‬
‫(לפי אותה החוקיות 0 = צפון = למעלה וכו') החישוב דומה‬
 ‫מאד לזה של ‪ act‬בחלק א'. הוסיפו את הקו לציור הרובוט.‬

                         ‫רובוט שמחזיק קופסא:‬            ‫קופסא (מונחת):‬          ‫רובוט עם זרוע:‬




                                                                  ‫(לא צריך לשחק עם ה ‪font‬ים)‬

                         ‫יש להימנע מקוד כפול כעת מימוש המתודות של ציור הרובוטים השונים.‬

                     ‫כבר לאחר העתקת הקוד הכתוב (לפני ההשלמות) אפשר לקבל את התוצאה הבאה:‬
                                                                    ‫שימו לב שהרובוטים‬
                                                                     ‫צריכים להיות מסוג‬
                                                                        ‫‪ Aibo‬ולא מסוג‬
                                                                              ‫‪General‬‬




                    ‫לאחר השלמת החלקים החסרים אפשר להתחיל את מימוש הפעולות של ה ‪.GUI‬‬

                                                             ‫משימה שלישית: פעולות ה ‪.GUI‬‬

                                                                          ‫1. יצירת רובוט:‬
                  ‫‪ .a‬תתבצע ע"י מילוי השדות שב ‪ group‬השמאלי ולחיצה על ‪.Add‬‬
  ‫‪ .b‬השדות: ‪ text‬לשם הרובוט, ‪ combo‬לסוג הרובוט, כפתורי בחירה לתוספות הזרוע‬
                                                               ‫והערכה החכמה.‬
                              ‫‪ .c‬לאחר לחיצה על ‪ Add‬אפשר לממש אחד מהבאים:‬
      ‫‪ .i‬הופעת חלון שמאפשר הקלדה של המיקום הרצוי וכפתור ‪ – Ok‬לאחר‬
                     ‫האישור הרובוט החדש יופיע ב ‪ canvas‬במיקום זה.‬
‫‪ .ii‬הרובוט מייד יופיע בנקודה )0,0( ויהיה ניתן לגרור אותו ע"י העכבר למיקום‬
‫הרצוי על פני המסך – שכללו את הדוגמא שראינו בתרגול. מימוש זה מקנה‬
                                            ‫01 נקודות בונוס לחלק ד'.‬
    ‫‪ .d‬כשרובוט נוצר שמו מתווסף לרשימת הרובוטים – הרשימה השמאלית. (שבתוך ה‬
                                                                 ‫‪ group‬הימני)‬

                                                                    ‫2. יצירת קופסא:‬
                             ‫‪ .a‬תתבצע דרך התפריט ‪ ,Box‬בבחירה של ‪.Add Box‬‬
                   ‫‪ .b‬יופיע חלון קטן שמבקש שם ומיקום, עם כפתורי ‪ Ok‬ו ‪.Cancel‬‬
                              ‫‪ .c‬לאחר לחיצה על ‪ Ok‬הקופסא תופיע על ה ‪.canvas‬‬




                                                               ‫3. הקצאת תוכנית לרובוט:‬
                 ‫‪ .a‬לרשימה הימנית כבר הכנסנו את שמות הקבצים בתיקייה הנוכחית.‬
‫‪ .b‬לחיצה על כפתור החץ שבין הרשימות, תקצה את התוכנית שנבחרה ברשימה הימנית‬
                                            ‫לרובוט שנבחר ברשימה השמאלית.‬
    ‫‪ .c‬רובוט שהוקצתה לו תוכנית, לשמו ברשימה יתווסף שם הקובץ, לדוגמא לרובוט‬
      ‫‪ kishta‬הקוצתה התוכנית בקובץ ‪ program1.txt‬אז ברשימת הרובוטים יופיע‬
                                                   ‫"‪"kishta program1.txt‬‬

                                                                 ‫4. הפעלת הסימולציה:‬
                                                            ‫‪ .a‬אפשרות רגילה:‬
                               ‫‪ .i‬בחירה ‪ Start Simulation‬מתוך ‪.File‬‬
               ‫‪ .ii‬יופיע חלון קטן שמבקש את מספר השניות + כפתור ‪start‬‬
      ‫‪ .iii‬לחיצה עליו תפעיל את הסימולציה למספר השניות שהמשתמש בחר.‬
                                                  ‫‪ .b‬אפשרות בונוס 01 נקודות:‬
‫‪ .i‬לחיצה על ‪ Start Simulation‬מתוך התפריט תבצע את הסימולציה כל עוד‬
                       ‫לא לחצנו על ‪ Stop Simulation‬מתוך התפריט.‬
                  ‫‪ .c‬כשהסימולציה רצה הציור ב ‪ canvas‬כמובן מתעדכן כל שנייה.‬

                                                  ‫5. יציאה – ‪ Exit‬דרך תפריט ה ‪File‬‬

                                                                        ‫הודעות שגיאה:‬
                          ‫אותן הודעות השגיאה של קודם – הפעם יופיעו בחלון ‪.message box‬‬


                                                                               ‫בהצלחה!‬

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:16
posted:4/9/2010
language:Hebrew
pages:7
Jun Wang Jun Wang Dr
About Some of Those documents come from internet for research purpose,if you have the copyrights of one of them,tell me by mail vixychina@gmail.com.Thank you!