1 / 16

GUI ב java

GUI ב java. תכנות מתקדם 89-210 תרגול מספר 8 תש"ע 2009-2010. אליהו חלסצ'י. Awt - Abstract Windowing Toolkit (1995) ה GUI הראשון שעבדו איתו ב java . כבד - מפעיל את רכיבי מעה"פ, בעיית המכנה המשותף הנמוך ביותר. יעיל אך מכוער. Swing/JFC (1998)

owena
Télécharger la présentation

GUI ב java

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GUI ב java תכנות מתקדם 89-210תרגול מספר 8 תש"ע 2009-2010 אליהו חלסצ'י

  2. Awt - Abstract Windowing Toolkit (1995) ה GUI הראשון שעבדו איתו ב java. כבד - מפעיל את רכיבי מעה"פ, בעיית המכנה המשותף הנמוך ביותר. יעיל אך מכוער. Swing/JFC (1998) עשיר ברכיבים, נוספה גם ספריית גרפיקה java2D. קל משקל במובן שאת הרכיבים ציירו בעצמם. (חיקוי של מעה"פ) לכן זה אמנם יעבוד בכל מעה"פ, אך ה look & feel וזמני התגובה שונים. SWT - Standard Widget Toolkit (IBM, 2001) מנסה ליהנות משני העולמות, להשתמש בפונקציונאליות של מעה"פ כשאפשר, ובמימוש של java כשאי אפשר. עובד עם המראה וההתנהגות של מעה"פ. יעבוד בכל מערכת שמימשו את SWT עבורה. (וכבר ממשו בכל הנפוצות) הקדמה

  3. בשיעור זה נתמקד בכתיבת קוד של SWT. ישנם עורכים גרפיים שכותבים את הקוד עבורנו. אנו נלמד לכתוב את הקוד, ע"י מס' דוגמאות. SWT אינו רכיב סטנדרטי של java ולכן יש להוסיפו לפרויקט באופן הבא: (SWT נמצא בכל eclipse) Project Properies JavaBuildPath Libraries Add Variable  Eclipse Home Extend יש למצוא את swt.jar (יכול להופיע בכמה ווריאציות שונות) ולצרף אותו לפרויקט. הקדמה

  4. יצירת חלון העבודה • כל תוכנית swt דורשת display ולפחות shell אחד (החלון). • כדי שהחלון יעלה צריך לקרוא ל open • ואז לבצע את לולאת ה events: • אירועים מגיעים ממעה"פ דרך ה display. • קבלת אירוע מעירה את היישום משינה. • בהינתן אירוע, readAndDispatch מברר לאיזה רכיב צריך להודיע על האירוע, ומודיע לו. • לבסוף יש לסגור את התצוגה ע"י dispose. • שחרור העצמים של מערכת ההפעלה. import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.Shell; publicclass GUI { publicstaticvoid main(String[] args) { Display display = new Display(); Shell shell = new Shell(display); shell.setText("Hello, world!"); 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(); } } בחלק זה בונים את התוכנית

  5. יצירת layout • מה שולט על סידור הכפתורים? • תשובה: ה layout. (מוגדר לפני הכל) • יש כמה סוגי layout, לדוגמא: • FillLayout – שם את כל ה widgets בשורה אחת או בטור אחד, ונותן לכולם גודל אחיד. • RowLayout – דומה לקודם, לא מכריח גודל אחיד, יכול לבצע wrap בהתאם לגודל החלון. • GridLayout – הכי נוח, למעשה מגדירים טבלת גריד, ומכניסים רכיבים בתאים שלה. • FormLayout – להגדרת תלויות פריסה יותר מורכבות. (דוגמא בשקף הבא) • ניתן גם לבצע בפשטות דברים מורכבים יותרבאמצעות Composite עליו נלמד בתרגיל הבית. shell.setSize(400, 300); new Button(shell, SWT.PUSH).setText("Push Button"); new Button(shell, SWT.CHECK).setText("Check Button"); new Button(shell, SWT.TOGGLE).setText("Toggle Button"); new Button(shell, SWT.RADIO).setText("Radio Button"); shell.pack(); shell.setLayout(new FillLayout(SWT.HORIZONTAL)); shell.setLayout(new RowLayout(SWT.HORIZONTAL)); shell.setLayout(new GridLayout(2,true));

  6. FormLayout באמצעות הטיפוס FormData ניתן להגדיר נקודות יחסיות לגודל החלון, או תלויות מיקום בין רכיבים שונים. shell.setLayout(new FormLayout()); Button button1 = new Button(shell, SWT.PUSH); button1.setText("button1"); FormData formData = new FormData(); formData.left = new FormAttachment(20); formData.top = new FormAttachment(20); button1.setLayoutData(formData); Button button2 = new Button(shell, SWT.PUSH); button2.setText("button number 2"); formData = new FormData(); formData.left = new FormAttachment(button1, 0, SWT.CENTER); formData.top = new FormAttachment(button1, 0, SWT.BOTTOM); button2.setLayoutData(formData);

  7. Widgets שדות Text ותוויות shell.setLayout(new GridLayout()); new Label(shell, SWT.NONE).setText("Enter your Name, Password"); new Text(shell, SWT.BORDER).setText("Name"); new Text(shell, SWT.PASSWORD | SWT.BORDER).setText("password"); new Text(shell, SWT.READ_ONLY).setText("type your comments"); new Text(shell, SWT.MULTI | SWT.V_SCROLL | SWT.WRAP | SWT.BORDER).setText("\n\n\n"); String[] items = "RV1 RV2 Aibo R2D2".split(" "); List list = new List(shell, SWT.SINGLE | SWT.BORDER); list.setItems(items); list.setLocation(10, 10); list.setSize(100, 80); list.select(2); רשימה String[] items = "RV1 RV2 Aibo R2D2".split(" "); Combo combo1 = new Combo(shell, SWT.DROP_DOWN); combo1.setItems(items); Combo combo2 = new Combo(shell, SWT.DROP_DOWN | SWT.READ_ONLY); combo2.setItems(items); Combo

  8. Widgets נניח שארצה לבחור בין האופציות 1-3 ובין האופציות 4-5 בדרך זו אוכל לבחור רק אחת מבין 1-5 for(int i = 0; i < 6; i++) new Button(shell, SWT.RADIO).setText("option " + (i + 1)); Group group1 = new Group(shell, SWT.SHADOW_OUT); Group group2 = new Group(shell, SWT.SHADOW_OUT); group1.setText("group 1"); group1.setLayout(new GridLayout(3, true)); for(int i = 0; i < 3; i++) new Button(group1, SWT.RADIO).setText("option " + (i + 1)); group2.setText("group 2"); group2.setLayout(new GridLayout(3, true)); for(int i = 3; i < 6; i++) new Button(group2, SWT.RADIO).setText("option " + (i + 1)); לכן נשתמש ברכיב Group. גם בתוכו ניתן להגדיר layout. נשייך את האופציות המתאימות לקבוצה המתאימה.

  9. Widgets • משטח ציור נוצר ע"י Canvas. • ל canvas צריך להוסיף אובייקט שמממש את PaintListener – ממשק עם המתודה paintControl(PainEvent e) שם מתבצעים הציורים בהתאם לאירוע, למשל שינוי גודל החלון. Canvas c=new Canvas(shell,SWT.BORDER); c.addPaintListener(new PaintListener() { publicvoid paintControl(PaintEvent e) { // Get the canvas and its size Canvas canvas = (Canvas) e.widget; int maxX = canvas.getSize().x; int maxY = canvas.getSize().y; int mx=maxX/2,my=maxY/2; int r=Math.min(maxX,maxY)/10; e.gc.drawOval(mx-r, r, 2*r, 2*r); e.gc.drawArc(mx-r/2, 2*r, r, r-r/3, 180, 180); e.gc.drawLine(mx, 3*r, mx, 6*r); e.gc.drawLine(mx, 3*r, mx/2, 5*r); e.gc.drawLine(mx, 3*r, mx+mx/2, 5*r); e.gc.drawLine(mx, 6*r, mx/2, 9*r); e.gc.drawLine(mx, 6*r, mx+mx/2, 9*r); e.gc.drawString("I love SWT!", mx+r+5, 2*r); } });

  10. Event Handling shell.setLayout(new GridLayout(2,true)); final Button b=new Button(shell,SWT.PUSH); b.setText("hello"); final Text t=new Text(shell, SWT.BORDER); Listener listener = new Listener() { publicvoid handleEvent(Event event) { if(event.widget==b) t.setText("hello"); } }; b.addListener(SWT.Selection, listener); • widgets יכולים להאזין לאירועים. • אירוע יכול להיות פעולה של המשתמש כגון תזוזה של עכבר, לחיצה על כפתור וכו', או דברים אחרים. • כדי לטפל באירוע, עלינו להגדיר מאזין – listener ובו לממש את המתודה handleEvent כרצוננו. • כעת יש להוסיף את ה listener ל widget הרצוי. • בדוגמא, יצרנו listener כללי, ובהינתן Event, אנו שואלים האם ה event הגיע מהכפתור שלנו, אם כן נשתנה את הטקסט של t ל “hello”. • כעת נראה דוגמא מורכבת יותר, עםmouse events – לחיצה ותנועה.

  11. Event Handling final Label l=new Label(shell,SWT.BORDER); l.setSize(100,20); final Canvas c=new Canvas(shell,SWT.BORDER); c.setSize(300,300); c.setLocation(0, 21); c.addPaintListener(new PaintListener() { publicvoid paintControl(PaintEvent e) { e.gc.drawOval(x-10, y-10, 20,20); } }); c.addMouseMoveListener(new MouseMoveListener(){ publicvoid mouseMove(MouseEvent e) { x=e.x; y=e.y; c.redraw(); } }); c.addMouseListener(new MouseListener(){ publicvoid mouseDoubleClick(MouseEvent e) { c.setBackground(display.getSystemColor(( new Random()).nextInt(36))); } publicvoid mouseDown(MouseEvent e) { l.setText("mouse down"); } publicvoid mouseUp(MouseEvent e) { l.setText("mouse up"); } });

  12. רכיבים מוכנים FileDialog fd=new FileDialog(shell,SWT.OPEN); fd.setText("open"); fd.setFilterPath("E:/workspace/89210 part3"); String[] filterExt = { "*.txt", "*.java", ".xml", "*.*" }; fd.setFilterExtensions(filterExt); String selected = fd.open(); • FileDialog לבחירה קובץ לשמירה או פתיחה. • דיאלוגים מוכנים נוספים: • FontDialig לבחירת הגופן. • ColorDialog לבחירת צבע. MessageBox messageBox = new MessageBox(shell, SWT.ICON_QUESTION| SWT.YES | SWT.NO); messageBox.setMessage("Do you really want to exit?"); messageBox.setText("Exiting Application"); int response = messageBox.open(); if (response == SWT.YES) System.exit(0);

  13. לא ניתן סתם כך לעדכן רכיב של SWT שלא מתוך ה thread הנוכחי שבו הוא רץ – זה יגרור שגיאה. כדי שיהיה בכל זאת אפשרי לעדכן כך יש לבחור בין syncExec() ל asyncExec() באופן הבא: עבודה עם threads Thread operationThread = new Thread() { publicvoid run() { display.asyncExec / syncExec(new Runnable() { publicvoid run() { // UI Updating procedures go here ... } }); } }; • יצרנו מופע thread המוגדר באופן מפורש. • בתוך ה run שלו קראנו ל display.asyncExec() • שמקבל מופע מפורש של Runnable שם נגדיר את הפעולות הגרפיות.

  14. http://www.eclipse.org/swt/ הרחבת ידע. http://www.java2s.com/Tutorial/Java/0280__SWT/Catalog0280__SWT.htm דוגמאות קוד והסברים נוספים. http://www.ibm.com/developerworks/opensource/library/os-ecvisual/ מדריך למשתמש ב eclipse visual editor. קישורים

  15. באמצעות האובייקט Browser ניתן להפעיל דפדפן בכתובת מסוימת. לכל widget ניתן להגדיר setLayoutData שם ניתן להכניס מופע של GridData ובו לכוון את ה widget בתוך הטבלה ואף להגדיר כמה תאים ייתפוס. צרו דפדפן פשוט עם שורת כתובת, וכפתור go. בלחיצה על go האתר הרצוי ייפתח. השתמשו ב selectionListener בשביל הכפתור. הטמעה

  16. הטמעה

More Related