Transcript JAVA
© Keren Kalif
GUI
קרן כליף
© Keren Kalif
2
:ביחידה זו נלמד
SWING לעומתAWT
Look & Feel
GUI -תכנון היררכי של ה
אירועים
Layout
MVC
דוגמא בסיסית של GUIבאמצעות
יש לרשת מהמחלקה Frame
כדי שהתוכנית תיפתח בחלון
כב"מ ,ה Frame -אינו מגיב ללחיצה על ה-
,Xולכן צריך להוסיף אירוע (פירוט בהמשך)
יש להגדיר כיצד יסודרו הרכיבים
בחלון (פירוט בהמשך)
הוספת 2פקדי Labelופקד Button
כב"מ Frameאינו מוצג למסך ,לכן צריך
להפעיל את .setVisible
לכל שאר הפקדים הערך trueהוא ב"מ.
© Keren Kalif
AWT
3
היסטוריה ()1
© Keren Kalif
4
GUI הינו ממשק משתמש גרפיGraphic User Interface :
בעבר בשפת JAVAעבדו עם מנגנון הAbstract ( AWT -
)Window Toolkit
מנגנון זה היה תלוי במערכת ההפעלה ,ולכן הרצת התוכנית נראתה
באופן שונה על מערכות הפעלה שונות
ה JVM -ביקש ממערכת ההפעלה לבצע את הציור בפועל (הפקדים),
ומכאן נבע השוני בהופעה למסך
בגלל הפניות הרבות למערכת ההפעלה ,שלמעשה הינן יציאה
ממסגרת ה ,JVM -השימוש במנגנון כבד
בגלל השוני בין מערכות ההפעלה השונות ,לא ניתן לבצע
קוסטומיזציה
למשל :אם ב windows -ניתן להציג תמונה על כפתור ובלינוקס לא ,זה בעייתי
היסטוריה ()2
© Keren Kalif
5
בגירסא 1.2של JAVAיצא ה ,SWING -העובד באופן שונה
מאשר :AWT
ב swing -שכתבו חלק מהקומפוננטות (רכיבים) של ,AWTושמן יהיה
זהה פרט לכך שיתחילו בJ -
למשל Jframe :במקום .Frame
ההבדל המהותי בין AWTל SWING -הוא ש SWING -מציירת
בעצמה את הרכיבים ולא מערכת ההפעלה .כלומר swing ,יודע עפ"י
מערכת ההפעלה שעליה הוא רץ כיצד להציג את הרכיב.
יתרונות:
התוכנית יותר קלה ומהירה כי אין פניות רבות למ"ה
ניתן לבצע קוסטימיזציה בקלות כי אין תלות במ"ה (ה swing -יודע לצייר את
הרכיב ולא מתבסס על מ"ה ,בניגוד לAWT -
דוגמא בסיסית של GUIבאמצעות
הפעם יש לרשת מהמחלקה JFrame
כב"מ ,ה JFrame -אינו מגיב ללחיצה על ה-
,Xאבל יש פקודה מובנית להגבת האירוע
שמות הפקדים מתחילים בJ -
© Keren Kalif
SWING
6
© Keren Kalif
7
SWING לעומתAWT -התצוגה ב
לא ניתן להוסיף פקד פעמיים
© Keren Kalif
8
שינוי התצוגה באפליקציית swing
תצוגת Windows
כך יראה בלי
theFrame.pack
משמע להתאים את
גודל החלון לגודל
הרכיבים בעקבות שינוי
התצורה
© Keren Kalif
9
© Keren Kalif
10
L&F -ערכים שונים ל
UIManager.setLookAndFeel("com.sun.java.swing.plaf.motif.MotifLookAndFeel");
UIManager.setLookAndFeel("com.sun.java.swing.plaf.gtk.GTKLookAndFeel");
UIManager.setLookAndFeel("com.sun.java.swing.plaf.windows.WindowsLookAndFeel");
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
במקרה שליWindows ,יקח את הגדרות מערכת ההפעלה
UIManager.setLookAndFeel(UIManager.getCrossPlatformLookAndFeelClassName());
וזוהי אופציית ב"מ
קומפוננטות בSWING -
© Keren Kalif
11
מתחלקות ל 3 -סוגים:
:JComponent .1הרכיבים הבסיסים שניתן להציג.
למשל .JLabel, JText, JButton :יש כ 35 -רכיבים שכאלו.
:Container .2רכיב שיכול להכיל בתוכו רכיבים אחרים ,סוג של לוח
ציור.
JPanel, JTabbedPane, JSplitPane, JScrollPane
:Top Level Container .3יש רק אחד כזה באפליקציה והוא למעשה
החלון של התוכנית ,ה Conatiner -הראשי.
יכול להיות אחד מהבאיםJFrame, JDialog, JApplet, :
JWindow
במקום חלון .מאפשר לפתוח
Pop Up
הכי פופלארי
JAVAבדפדפן .כבר לא בשימוש.
© Keren Kalif
12
היררכיה נכונה ביצירת אפליקציה
JFrame, JDialog למשל
JLabel ,Jbutton למשל
JFrame
JPanel
JPanel
JPanel למשל
JLabel
JPanel
JTextBox
הרכיב הראשי מציג ברקורסיה
את כל הרכיבים שתחתיו
JButton
דוגמא לאפליקציה
פשוטה
יצירת Panelעם מסגרת וכותרת
יצירת כל הפקדים על panelולא
ישירות על הFrame -
13
© Keren Kalif
לכל containerצריך לתת
גודל ,אחרת גודלו הוא 0
JFrame - גם דרך הContent Pane -הוספת פקדים ל
-הוספת הפקד ל
frame - ולא לpanel
© Keren Kalif
14
הגדרות גודל ידני של Frame
© Keren Kalif
כאשר מייצרים הוא נפתח בפינת המסך השמאלית העליונה ויש
לקבוע את גודלו באמצעות השיטה ,setSizeאחרת הוא נפתח
ללא גודל
כך יפתח החלון בלי
השורה setSize
15
© Keren Kalif
הגדרת גודל של Frameביחס גודל המסך
16
הגדרת מיקום פתיחת החלון
כב"מ ,החלון נפתח בפינה העליונה השמאלית.
ניתן לשנות הגדרה זו באמצעות השיטה :setBounds
במקום setBoundsניתן להשתמש ב-
setSizeוב setLocation -בנפרד
© Keren Kalif
17
פתיחת החלון במרכז המסך
במקום nullניתן לתת חלון אחר של
התוכנית ,ואז חלון זה יפתח במרכזו.
© Keren Kalif
18
אירועים
© Keren Kalif
19
נרצה לקשר את הפעולה על הפקד (למשל לחיצה על כפתור או
בחירת )CheckBoxלפעולה כלשהי
כלומר ,המתכנת אינו יודע מראש מה סדר הפעולות שיופעל ,אבל
הוא מכין אוסף פעולות שסדר הפעלתן יקבע ע"י האירועים שיפעלו
ע"י המשתמש
תזכורת :מחלקה פנימית
המחלקה הפנימית יכולה
לגעת בתכונות ובשיטות של
המלחקה החיצונית
יצירת אובייקט מהמחלקה
הפנימית יהייה אך ורק באמצעות
אובייקט של המחלקה החיצונית,
מאחר והוא צריך גישה לאובייקט
חיצוני ספציפי
20
© Keren Kalif
יצירת אירוע
הפעולה שתופעל עם
הלחיצה על הכפתור
נשים לב :בתוך המחלקה הפנימית ניתן
לגעת בשיטות ובתכונות של המחלקה
החיצונית ,ללא אובייקט מפעיל
מקבל כפרמטר אובייקט המממש
את הממשק ActionListener
המחלקה המממשת את הממשק מוגדרת
כמחלקה פנימית בתוך מחלקה זו
21
© Keren Kalif
main -הפעלת האירוע ב
© Keren Kalif
22
יצירת אירוע באמצעות
אובייקט אנונימי
באובייקט אנונימי אין צורך לייצר
מחלקה נפרדת ,אלא להגדיר אותה
בשימוש וכן לממש את כל שיטותיה
23
© Keren Kalif
האזנה ללא
אובייקט אנונימי
24
© Keren Kalif
האזנה ליותר
מאירוע אחד
25
© Keren Kalif
האזנה לאירועים
לכל פקד יש אוסף של שיטות שכל אחת מאפשרת להאזין
לאירועים מקבוצה מסויימת (למשל פעולות עכבר ,פעולות מקלדת
וכד')
כאשר אנחנו מעבירים כפרמטר לשיטה new XXXListenerאנחנו
מעבירים אובייקט המממש את הממשק המוגדר ,ולכן עלינו לספק
מימושים לכל המתודות המוגדרות ,אפילו מימוש ריק
26
במקום להעביר new XXXListenerניתן להעביר
שהיא מחלקה המממשת את הממשק עם מימושים ריקים ,וכך
ניתן לספק מימוש רק לשיטות שאנחנו בוחרים
new XXXAdapter
© Keren Kalif
האזנה לאירועים ע"י מימוש ממשק לעומת
מימוש מחלקה
ממשק יסתיים ב Listener -ויש
חובה לספק מימוש לכל המתודות
מחלקה תסתיים בAdapter -
וניתן לספק מימוש רק לחלק
מהמתודות
27
© Keren Kalif
האזנה לאירועים באמצעות AbstractAction
יש מקרים בהם נרצה שכמה פקדים יגיבו בצורה זהה ,בלי לשכפל
את הקוד.
למשל :תפריט ,כפתור וכד'
גם הטקסט וגם הפעולה ActionPerformedתהייה זהה
ישנם פקדים שה c’tor -שלהם מקבל אובייקט מהמחלקה
AbstractActionהמגדיר את הטקסט שיוצג על הפקד ואת
הפעולה שתבוצע באת לחיצה/בחירה
28
© Keren Kalif
- AbstractAction
דוגמא
כמובן שבאפליקציה בה כל רכיב נמצא
במחלקה אחרת ,גם המחלקה שלנו שיורשת
מ AbstractAction -תשב בקובץ נפרד
29
© Keren Kalif
דריסת פעולת סגירת החלון
לא חובה לציין פקודה זו .ב"מ היא
HIDE_ON_CLOSEכך שלא יקרה כלום אם נשאיר
אותה ,כי בכל מקרה אנו דורסים את פעולת הסגירה.
הפרמטר הראשון של JOptionPaneמקבל הוא החלון
שבמרכזו נציג את התיבה ( nullעבור מרכז המסך(.
נרצה שהתיבה תפתח במרכז ה.JFrame -
מאחר ואנו בתוך ,InnerClassכדי לקבל את המחלקה
החיצונית נשתמש ב<outer class name>.this -
© Keren Kalif
30
אבחנה לוגית בין שיטות הרכיבים
© Keren Kalif
:Properties .1שיטות המגדירות כיצד הרכיב יראה ,למשל
.setBackgroundColor, setPrefferedSizeאין קשר למידע
שיוצג עליו.
:Methods .2שיטות המאפשרות אינטראקציה עם המידע.
:Event .3מתודה המאפשרת לתת lisetenerלכל מיני אירועים.
31
© Keren Kalif
32
הדוגמא של שינוי התצוגה
מקובץ הזיפSimpleLookAndFeelExample הדוגמא
לינק עם הצגה של כל הפקדים
http://download.oracle.com/javase/tutorial/ui/features/co
mpWin.html
הפעלת ה swing -ב thread -נפרד
© Keren Kalif
את ה swing -גם נריץ ב thread -נפרד כדי שנוכל להריץ את
הלוגיקה שלנו במקביל בלי תקיעויות
כלומר ,שאם קורה אירוע בזמן ציור ה ,GUI -התוכנית לא "תתקע"
Thread זה נקרא )EDT( Event Dispatch Thread
באפליקציות גדולות'thread ,ים אחרים ירצו לעדכן את ה,GUI -
וכדי למנוע "תקיעות" וכדי שהעבודה תיעשה במקביל
33
© Keren Kalif
34
הקוד- נפרדthread - בswing -הפעלת ה
הצגת תמונה
יש לשים לב שהמסלול הוא יחסי
ביחס לתיקיית ה src -ולכן ישתנה
מפרוייקט לפרוייקט .כמובן שניתן
גם להעביר את המסלול כפרמטר.
מחלקה זו מספקת שיטה המקבלת
את שם ה Icon -ומחזירה אותו
35
© Keren Kalif
)2( הצגת תמונה
© Keren Kalif
36
© Keren Kalif
Layout Manager
נכתוב תוכנית המוסיפה 10רכיבים לחלון .כיצד הם יסודרו?
יסודרו ברצף אחד ליד השני.
שינוי גודל החלון יארגן אותם מחדש.
37
© Keren Kalif
FlowLayout
כב"מ JAVAמסדרת לנו את הרכיבים בFlowLayout -
כלומר ,סידור הרכיבים אחד ליד השני ומעבר לשורה הבאה כאשר
נגמר המקום
אלא אם נתנו מיקום מדויק לרכיב
מתן מיקום מדויק אינו טוב ,מאחר וכבר לא תהייה פרופורציה
כאשר נשנה את גודל החלון
JAVA מספקת לנו כל מיני אלגוריתמי סידור ( ,)Layoutוהם גם
יודעים לחשב את הפרופרציות עם שינוי גודל החלון
בשימוש ב Layout -ניתן לקבוע את המרחק בין הרכיבים השונים
38
© Keren Kalif
39
Layout סקירת
http://www.docstoc.com/docs/33446046/Java-Swing
לקוח מתוך
© Keren Kalif
BorderLayout
מאפשר סידור רכיבים בצורת מסגרת .כב"מ שם את הפקד בתוך
החלק של ה ,CENTER -ולכן בדוגמא זו רואים רק את הפקד
האחרון:
40
- BorderLayoutהכיוונים
שינוי בגודל החלון משנה רק את
גודל הרכיב המרכזי:
גובה הצפון והדרום נשארים קבועים,
ורוחב המזרח והמערב נשארים
קבועים.
רק השטח של ה CENTER -משתנה.
© Keren Kalif
41
© Keren Kalif
BoxLayout
– סידור הרכיבים בשורה או בעמודה
בניגוד ל,FlowLayout -
הרכיבים לא יעברו לשורה הבאה.
42
- Spring Layout
סידור רכיבים במיקום
יחסי
ה west -של ה label -יהיה במרחק 50
פיקסלים מה west -של הpanel -
ה west -של הtextField -יהיה במרחק
5פיקסלים מה east -של הlabel -
43
© Keren Kalif
Layoutנוספים
© Keren Kalif
44
:CardLayout הצגת רכיב אחד כל פעם ,אחד מעל השני
:GridLayout מגדיר טבלה .יש לספק כמות שורות וכמות עמודות.
אם כמות השורות היא ,0אז מסתמך על כמות העמודות ,והפוך
כל הגדלים של התאים זהים
הוספת רכיבים היא לפי הסדר ,לא ניתן לדלג על תאים
:ComplexLayout כאשר layoutאחד מכיל layoutאחר באחד
הרכיבים שלו
כאשר הראשי עושה ,resizeזה משפיע גם על הפנימיים
מדריך מצויין ל'layout -ים:
http://download.oracle.com/javase/tutorial/uiswing/layout
/visual.html
עדכון יזום של התצוגה
© Keren Kalif
45
– repaint נפעיל אותה כאשר יש לצייר את ה container -מחדש,
לאחר הוספת/הסרת פקד
– validate גוררת סידור מחדש של הרכיבים ב,container -
נפעיל לרוב על TopLevelContainerלאחר הוספה והסרה של
פקד .הפקודה תחלחל רקורסיבית לכל הרכיבים המוכלים .יגרור
repaintבמקרה הצורך.
לכן בהוספה ובהסרה נפעיל את repaint+validate
הדוגמאRepaintAndValidateExample :
הדוגמא Survivorsמהזיפ:
© Keren Kalif
46
כבר קיים בדוגמא:
JSplitPane בין שני השבטים
JPanel לכל שבט ובתוכו JScrollPaneלהצגת השורדים
הוספת שורד לשבט באמצעות כפתור ובאמצעות תפריט
העברת שורדים משבט לשבט באמצעות כפתור ובאמצעות DC
עליכם להוסיף:
JPanel לאי המתים בתוך JScrollPane
JSplitPane בין החלק העליון של השבטים לאי המתים
העברת שורד לאי המתים באמצעות כפתור
מחיקת שורד מאי המתים ,יהיה באמצעות דאבל קליק על השורד עם
הודעת אישור
© Keren Kalif
47
swing -דוגמאות לרכיבים ב
+ פלט:SWING - בלינק הבא יש דוגמאות לקוד המשתמש ב
source code
http://java.sun.com/products/jfc/jws/SwingSet2.jnlp
דוגמא לעבודה עם טבלה
© Keren Kalif
בעבודה עם טבלה יש אובייקט שנקרא AbstractTableModel
המחזיק את המידע שבטבלה
המחלקה המובנית DefaultTableModelמהווה מימוש למחלקה
אבסטרקטית זו:
הדוגמא JTableWithDefaultTabelModelExample
ניתן לרשת מממשק זה:
הדוגמא JTableWithAbstractTabelModelExample
48
הפרדה בין ה BL -לGUI -
© Keren Kalif
בתכנות נכון יש להפריד בין הלוגיקה (שכבת הBussiness -
)Logicלעומת התצוגה (שכבת ה.)UI -
הסיבה היא שה UI -הוא דרך להצגת המידע ,ואת הלוגיקה ניתן
להציג בדרכים שונות ,ללא שיכפול של קוד הלוגיקה.
בפרוייקט גדול ,יש צוות יעודי ללוגיקה וצות יעודי לממשק
המשתמש ויש הפרדה ברורה.
לכן לא נשים הודעות שגיאה/לוגים המדפיסים למסך בקוד שלנו,
אלא נשתמש במנגנון החריגות כדי ליידע על בעיות.
49
MVC – Model-View-Controller
© Keren Kalif
50
מנגנון ההפרדה נקרא MVC
ה Model -מכיל את המידע ,לא מעניין אותו כיצד יראה המידע
ה View -מתעניין רק בתצוגה ,לא מעניין אותו כיצד המידע נשמר
תפקיד ה Controller -הוא לקשר בין 2השכבות
2
4
1
3
התמונה לקוחה מhttp://www.oracle.com/technetwork/articles/javase/index-142890.html :
© Keren Kalif
51
MVC – Model-View-Controller
יהיה באמצעות אירועיםView - לModel - העדכון בין ה
שיודיע לכל המאזינים עם כלlistener יהיהView - ולModel - ל
עדכון
: סגנונות המקובלים לשיטה זו
fireXXXChanged
fireXXXEvent
הזיפMVCBusExample.simple הדוגמא
© Keren Kalif
52
Renderer
משמש כ controller -המובנה בשפה
תפקידו לקשר בין אובייקט מה BL -ל UI -וכן להציגו
DefaultListCellRendererהוא סוג של JLabelוישנם
'rendererים נוספים ,למשל טבלה
יש לדרוס את השיטה getListCellRendererComponentאשר
קובעת כיצד תראה תצוגת האובייקט
הדוגמא MVCBusExample.rendererהזיפ
עורך GUI
© Keren Kalif
53
ניתן להוריד plug-inלאקליפס המאפשר יצירת GUIבצורת Drag
& Drop
בסביבת העבודה של ה NetBeans -כבר יש תשתית built-inלכך
יש לשים לב ,שאם יוצרים GUIבאמצעות drag&dropברוב
התוכנות מתווסף קוד שלא יעבוד בסביבה אחרת
© Keren Kalif
54
:ביחידה זו למדנו
SWING לעומתAWT
Look & Feel
GUI -תכנון היררכי של ה
אירועים
Layout
MVC