GUI ב java

הקדמהLayout

WidgetsEvent Handlingרכיבים מוכנים

SWT וThreadsקישוריםהטמעה

תכנות מתקדם - תרגול 89-2108

GUIGUI ב ב javajava

אליהו חלסצ'י

89-21089-210תכנות מתקדם תכנות מתקדם 8תרגול מספר

2009-2010תש"ע

הקדמהLayout




הקדמה•Awt - Abstract Windowing Toolkit (1995)

.java הראשון שעבדו איתו ב GUIה –כבד - מפעיל את רכיבי מעה"פ, בעיית המכנה המשותף הנמוך ביותר.–יעיל אך מכוער.–

•Swing/JFC (1998).java2Dעשיר ברכיבים, נוספה גם ספריית גרפיקה –קל משקל במובן שאת הרכיבים ציירו בעצמם. (חיקוי של מעה"פ)– וזמני התגובה שונים.look & feelלכן זה אמנם יעבוד בכל מעה"פ, אך ה –

•SWT - Standard Widget Toolkit (IBM, 2001)מנסה ליהנות משני העולמות, להשתמש בפונקציונאליות של מעה"פ –

כשאי אפשר.javaכשאפשר, ובמימוש של עובד עם המראה וההתנהגות של מעה"פ.– עבורה. (וכבר ממשו בכל SWTיעבוד בכל מערכת שמימשו את –

הנפוצות)

הקדמהLayout




.SWTבשיעור זה נתמקד בכתיבת קוד של •ישנם עורכים גרפיים שכותבים את הקוד עבורנו.•

אנו נלמד לכתוב את הקוד, ע"י מס' דוגמאות.–

•SWT אינו רכיב סטנדרטי של java ולכן יש להוסיפו )eclipse נמצא בכל SWTלפרויקט באופן הבא: (

• Project Properies JavaBuildPath Libraries Add Variable Eclipse Home Extend

(יכול להופיע בכמה ווריאציות swt.jarיש למצוא את • שונות) ולצרף אותו לפרויקט.

הקדמה

הקדמהLayout




יצירת חלון העבודהimport org.eclipse.swt.widgets.Display;

import org.eclipse.swt.widgets.Shell;

public class GUI {

public static void 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();

}

}

shell ולפחות display דורשת swt כל תוכנית •אחד (החלון).

open כדי שהחלון יעלה צריך לקרוא ל •:events ואז לבצע את לולאת ה •

.display אירועים מגיעים ממעה"פ דרך ה • קבלת אירוע מעירה את היישום משינה.• מברר readAndDispatch בהינתן אירוע, •

לאיזה רכיב צריך להודיע על האירוע, ומודיע לו.

.dispose לבסוף יש לסגור את התצוגה ע"י • שחרור העצמים של מערכת ההפעלה.•

בחלק זהבונים אתהתוכנית

הקדמהLayout




layoutיצירת 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();

מה שולט על סידור הכפתורים?•. (מוגדר לפני הכל)layout תשובה: ה •, לדוגמא:layout יש כמה סוגי •

• FillLayout שם את כל ה – widgets בשורה אחת או בטור אחד, ונותן לכולם

גודל אחיד.• RowLayout דומה לקודם, לא מכריח –

בהתאם wrapגודל אחיד, יכול לבצע לגודל החלון.

• GridLayout הכי נוח, למעשה – מגדירים טבלת גריד, ומכניסים רכיבים

בתאים שלה.• FormLayout להגדרת תלויות פריסה –

יותר מורכבות. (דוגמא בשקף הבא) ניתן גם לבצע בפשטות דברים מורכבים •

יותר עליו נלמד בתרגיל Compositeבאמצעות

הבית.

shell.setLayout(new GridLayout(2,true));

shell.setLayout(new FillLayout(SWT.HORIZONTAL));

shell.setLayout(new RowLayout(SWT.HORIZONTAL));

הקדמהLayout




FormLayout

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);

ניתן FormDataבאמצעות הטיפוס להגדיר נקודות יחסיות לגודל החלון, או

תלויות מיקום בין רכיבים שונים.

הקדמהLayout




Widgets

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");

Textשדות ותוויות

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

הקדמהLayout




Widgets

for(int i = 0; i < 6; i++)

new Button(shell, SWT.RADIO).setText("option " + (i + 1));

נניח שארצה לבחור

1-3בין האופציות 4-5ובין האופציות בדרך זו אוכל

לבחור רק אחת 1-5מבין

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גם בתוכו ניתן להגדיר

נשייך את האופציות המתאימות לקבוצה המתאימה.

הקדמהLayout




WidgetsCanvas c=new Canvas(shell,SWT.BORDER);

c.addPaintListener(new PaintListener() {

public void 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);

}

});

.Canvas משטח ציור נוצר ע"י • צריך להוסיף אובייקט שמממש canvas ל •

– ממשק עם המתודה PaintListenerאת paintControl(PainEvent e) שם מתבצעים

הציורים בהתאם לאירוע, למשל שינוי גודל החלון.

הקדמהLayout




Event Handlingshell.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() {

public void handleEvent(Event event) {

if(event.widget==b)

t.setText("hello");

}

};

b.addListener(SWT.Selection, listener);

• widgets.יכולים להאזין לאירועים אירוע יכול להיות פעולה של המשתמש כגון •

תזוזה של עכבר, לחיצה על כפתור וכו', או דברים אחרים.

כדי לטפל באירוע, עלינו להגדיר מאזין – •listener ובו לממש את המתודהhandleEvent כרצוננו.

widgetל listener כעת יש להוסיף את ה•הרצוי.

, Event כללי, ובהינתן listener בדוגמא, יצרנו • הגיע מהכפתור שלנו, eventאנו שואלים האם ה

.”hello“ ל tאם כן נשתנה את הטקסט של

כעת נראה דוגמא מורכבת יותר, עם• mouse events.לחיצה ותנועה –

הקדמהLayout




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() {

public void paintControl(PaintEvent e) {

e.gc.drawOval(x-10, y-10, 20,20);

}

});

c.addMouseMoveListener(new MouseMoveListener(){

public void mouseMove(MouseEvent e) {

x=e.x;

y=e.y;

c.redraw();

}

});

c.addMouseListener(new MouseListener(){

public void mouseDoubleClick(MouseEvent e) {

c.setBackground(display.getSystemColor((

new Random()).nextInt(36)));

}

public void mouseDown(MouseEvent e) {

l.setText("mouse down");

}

public void mouseUp(MouseEvent e) {

l.setText("mouse up");

}

});

Event Handling

הקדמהLayout




רכיבים מוכנים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);

הקדמהLayout




threadsעבודה עם

שלא SWTלא ניתן סתם כך לעדכן רכיב של • הנוכחי שבו הוא רץ – זה יגרור threadמתוך ה שגיאה.

כדי שיהיה בכל זאת אפשרי לעדכן כך יש •() באופן asyncExec() ל syncExecלבחור בין

הבא:

Thread operationThread = new Thread() {

public void run() {

display.asyncExec / syncExec(new Runnable() {

public void run() {

// UI Updating procedures go here ...

}

});

}

};

threadיצרנו מופע •המוגדר באופן מפורש.

שלו קראנו ל runבתוך ה •display.asyncExec()

שמקבל מופע מפורש של •Runnable שם נגדיר את

הפעולות הגרפיות.

הקדמהLayout




קישורים

•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למשתמש ב

הקדמהLayout




הטמעה ניתן להפעיל דפדפן Browserבאמצעות האובייקט •

בכתובת מסוימת.

setLayoutData ניתן להגדיר widgetלכל •

ובו לכוון את ה GridDataשם ניתן להכניס מופע של •widget בתוך הטבלה ואף להגדיר כמה תאים ייתפוס.

.goצרו דפדפן פשוט עם שורת כתובת, וכפתור •

האתר הרצוי ייפתח.goבלחיצה על •

בשביל הכפתור.selectionListenerהשתמשו ב •

הקדמהLayout




הטמעה

Documents

GUI ב java