1. תכנות מכוון עצמים בשפת JAVA
הרצאה 06 – חלק א'
GUI בסיסי
© Keren Kalif

2. ביחידה זו נלמד: AWT לעומת SWING Look & Feel תכנון היררכי של ה- GUI
הגדרות של JFrame
הרצת Swing ב- Thread נפרד
הצגת Icon
הפקד JComboBox
Layout
הצגת נתונים בטבלה

3. דוגמא בסיסית של GUI באמצעות AWT
יש לרשת מהמחלקה Frame כדי שהתוכנית תיפתח בחלון
כב"מ, ה- Frame אינו מגיב ללחיצה על ה- X, ולכן צריך להוסיף אירוע (פירוט בהמשך)
יש להגדיר כיצד יסודרו הרכיבים בחלון (פירוט בהמשך)
הוספת 2 פקדי Label ופקד Button
כב"מ Frame אינו מוצג למסך, לכן צריך להפעיל את setVisible.
לכל שאר הפקדים הערך true הוא ב"מ.

4. היסטוריה (1) GUI הינו ממשק משתמש גרפי: Graphic User Interface
בעבר בשפת JAVA עבדו עם מנגנון ה- AWT (Abstract Window Toolkit)
מנגנון זה היה תלוי במערכת ההפעלה, ולכן הרצת התוכנית נראתה באופן שונה על מערכות הפעלה שונות
ה- JVM ביקש ממערכת ההפעלה לבצע את הציור בפועל (הפקדים), ומכאן נבע השוני בהופעה למסך
בגלל הפניות הרבות למערכת ההפעלה, שלמעשה הינן יציאה ממסגרת ה- JVM, השימוש במנגנון כבד
בגלל השוני בין מערכות ההפעלה השונות, לא ניתן לבצע קוסטומיזציה
למשל: אם ב- windows ניתן להציג תמונה על כפתור ובלינוקס לא, זה בעייתי

5. היסטוריה (2)
בגירסא 1.2 של JAVA יצא ה- SWING, העובד באופן שונה מאשר AWT:
ב- swing שכתבו חלק מהקומפוננטות (רכיבים) של AWT, ושמן יהיה זהה פרט לכך שיתחילו ב- J
למשל: Jframe במקום Frame.
ההבדל המהותי בין AWT ל- SWING הוא ש- SWING מציירת בעצמה את הרכיבים ולא מערכת ההפעלה. כלומר, swing יודע עפ"י מערכת ההפעלה שעליה הוא רץ כיצד להציג את הרכיב.
יתרונות:
התוכנית יותר קלה ומהירה כי אין פניות רבות למ"ה
ניתן לבצע קוסטימיזציה בקלות כי אין תלות במ"ה (ה- swing יודע לצייר את הרכיב ולא מתבסס על מ"ה, בניגוד ל- AWT

6. דוגמא בסיסית של GUI באמצעות SWING
הפעם יש לרשת מהמחלקה JFrame
כב"מ, ה- JFrame אינו מגיב ללחיצה על ה- X, אבל יש פקודה מובנית להגבת האירוע
שמות הפקדים מתחילים ב- J

7. התצוגה ב- AWT לעומת SWING

8. לא ניתן להוסיף פקד פעמיים

9. שינוי התצוגה באפליקציית swing
תצוגת Windows
משמע להתאים את גודל החלון לגודל הרכיבים בעקבות שינוי התצורה
כך יראה בלי theFrame.pack

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()); וזוהי אופציית ב"מ

11. במקום חלון. מאפשר לפתוח JAVA בדפדפן. כבר לא בשימוש.
קומפוננטות ב- SWING
מתחלקות ל- 3 סוגים:
JComponent: הרכיבים הבסיסים שניתן להציג.
למשל: JLabel, JText, JButton. יש כ- 35 רכיבים שכאלו.
Container: רכיב שיכול להכיל בתוכו רכיבים אחרים, סוג של לוח ציור.
JPanel, JTabbedPane, JSplitPane, JScrollPane
Top Level Container: יש רק אחד כזה באפליקציה והוא למעשה החלון של התוכנית, ה- Conatiner הראשי.
יכול להיות אחד מהבאים: JFrame, JDialog, JApplet, JWindow
הכי פופלארי
Pop Up
במקום חלון. מאפשר לפתוח JAVA בדפדפן. כבר לא בשימוש.

12. היררכיה נכונה ביצירת אפליקציה
למשל JFrame, JDialog
למשל Jbutton, JLabel
JFrame
JPanel
JLabel
JTextBox
JButton
למשל JPanel
הרכיב הראשי מציג ברקורסיה את כל הרכיבים שתחתיו

13. דוגמא לאפליקציה פשוטה יצירת Panel עם מסגרת וכותרת
יצירת כל הפקדים על panel ולא ישירות על ה- Frame
לכל container צריך לתת גודל, אחרת גודלו הוא 0

14. הוספת פקדים ל- Content Pane גם דרך ה- JFrame
הוספת הפקד ל- panel ולא ל- frame

15. הגדרות גודל ידני של Frame
כאשר מייצרים הוא נפתח בפינת המסך השמאלית העליונה ויש לקבוע את גודלו באמצעות השיטה setSize, אחרת הוא נפתח ללא גודל
כך יפתח החלון בלי השורה setSize

16. הגדרת גודל של Frame ביחס גודל המסך

17. הגדרת מיקום פתיחת החלון
כב"מ, החלון נפתח בפינה העליונה השמאלית.
ניתן לשנות הגדרה זו באמצעות השיטה setBounds:
במקום setBounds ניתן להשתמש ב- setSize וב- setLocation בנפרד

18. במקום null ניתן לתת חלון אחר של התוכנית, ואז חלון זה יפתח במרכזו.
פתיחת החלון במרכז המסך
במקום null ניתן לתת חלון אחר של התוכנית, ואז חלון זה יפתח במרכזו.

19. קישורים להסברים על הפקדים השונים
mpWin.html
בלינק הבא יש דוגמאות לקוד המשתמש ב- SWING: פלט + source code (לא זמין באופן זמני?)

20. הפעלת ה- swing ב- thread נפרד
כלומר, שאם קורה אירוע בזמן ציור ה- GUI, התוכנית לא "תתקע"
Thread זה נקרא Event Dispatch Thread (EDT)
באפליקציות גדולות, thread'ים אחרים ירצו לעדכן את ה- GUI, וכדי למנוע "תקיעות" וכדי שהעבודה תיעשה במקביל

21. הפעלת ה- swing ב- thread נפרד - הקוד

22. מחלקה זו מספקת שיטה המקבלת את שם ה- Icon ומחזירה אותו
הצגת תמונה
יש לשים לב שהמסלול הוא יחסי ביחס לתיקיית ה- src ולכן ישתנה מפרוייקט לפרוייקט. כמובן שניתן גם להעביר את המסלול כפרמטר.
מחלקה זו מספקת שיטה המקבלת את שם ה- Icon ומחזירה אותו

23. הצגת תמונה (2)

24. הפקד ComboBox

25. יסודרו ברצף אחד ליד השני. שינוי גודל החלון יארגן אותם מחדש.
Layout Manager
נכתוב תוכנית המוסיפה 10 רכיבים לחלון. כיצד הם יסודרו?
יסודרו ברצף אחד ליד השני.
שינוי גודל החלון יארגן אותם מחדש.

26. FlowLayout כב"מ JAVA מסדרת לנו את הרכיבים ב- FlowLayout
כלומר, סידור הרכיבים אחד ליד השני ומעבר לשורה הבאה כאשר נגמר המקום
אלא אם נתנו מיקום מדויק לרכיב
מתן מיקום מדויק אינו טוב, מאחר וכבר לא תהייה פרופורציה כאשר נשנה את גודל החלון
JAVA מספקת לנו כל מיני אלגוריתמי סידור (Layout), והם גם יודעים לחשב את הפרופרציות עם שינוי גודל החלון
בשימוש ב- Layout ניתן לקבוע את המרחק בין הרכיבים השונים

27. סקירת Layout
לקוח מתוך

28. BorderLayout
מאפשר סידור רכיבים בצורת מסגרת. כב"מ שם את הפקד בתוך החלק של ה- CENTER, ולכן בדוגמא זו רואים רק את הפקד האחרון:

29. BorderLayout - הכיוונים
שינוי בגודל החלון משנה רק את גודל הרכיב המרכזי:
גובה הצפון והדרום נשארים קבועים, ורוחב המזרח והמערב נשארים קבועים.
רק השטח של ה- CENTER משתנה.

30. BoxLayout – סידור הרכיבים בשורה או בעמודה
בניגוד ל- FlowLayout, הרכיבים לא יעברו לשורה הבאה.

31. Spring Layout - סידור רכיבים במיקום יחסי
ה- west של ה- label יהיה במרחק 50 פיקסלים מה- west של ה- panel
ה- west של ה- textFieldיהיה במרחק 5 פיקסלים מה- east של ה- label

32. Layout נוספים CardLayout: הצגת רכיב אחד כל פעם, אחד מעל השני
GridLayout: מגדיר טבלה. יש לספק כמות שורות וכמות עמודות.
אם כמות השורות היא 0, אז מסתמך על כמות העמודות, והפוך
כל הגדלים של התאים זהים
הוספת רכיבים היא לפי הסדר, לא ניתן לדלג על תאים
ComplexLayout: כאשר layout אחד מכיל layout אחר באחד הרכיבים שלו
כאשר הראשי עושה resize, זה משפיע גם על הפנימיים
מדריך מצויין ל- layout'ים: /visual.html

33. דוגמא לעבודה עם טבלה
בעבודה עם טבלה יש אובייקט שנקרא AbstractTableModel המחזיק את המידע שבטבלה
המחלקה המובנית DefaultTableModel מהווה מימוש למחלקה אבסטרקטית זו:
הדוגמא JTableWithDefaultTabelModelExample
ניתן לרשת מממשק זה:
הדוגמא JTableWithAbstractTabelModelExample

34. תרגיל 1
יצרו את החלון הבא שמכיל שם, חיה אהובה (כלב, חתול, סוס או דג), האם נקבה וכפתור לבצגת הנתונים:

35. תרגיל 2
הגדירו את המחלקה מזון עם הנתונים הבאים: שם המזון, מספר קלוריות ל- 100ג' ומחיר.
צרו חלון ובו טבלה המציגה 3 סוגים של מאכלים
יש להשתמש ב- AbstractTableModel

36. ביחידה זו למדנו: AWT לעומת SWING Look & Feel תכנון היררכי של ה- GUI
הגדרות של JFrame
הרצת Swing ב- Thread נפרד
הצגת Icon
הפקד JComboBox
Layout
הצגת נתונים בטבלה