06a- gui basics

‫תכנות מכוון עצמים בשפת ‪JAVA‬‬
‫הרצאה ‪ – 06‬חלק א'‬
‫‪ GUI‬בסיסי‬
‫‪© Keren Kalif‬‬
:‫ביחידה זו נלמד‬
SWING ‫ לעומת‬AWT
Look & Feel
GUI -‫תכנון היררכי של ה‬
JFrame ‫הגדרות של‬
‫ נפרד‬Thread -‫ ב‬Swing ‫הרצת‬
Icon ‫הצגת‬
JComboBox ‫הפקד‬
Layout
‫הצגת נתונים בטבלה‬

© Keren Kalif
2








‫דוגמא בסיסית של ‪ GUI‬באמצעות‬
‫יש לרשת מהמחלקה ‪Frame‬‬
‫כדי שהתוכנית תיפתח בחלון‬
‫כב"מ‪ ,‬ה‪ Frame -‬אינו מגיב ללחיצה על ה‪-‬‬
‫‪ ,X‬ולכן צריך להוסיף אירוע (פירוט בהמשך)‬
‫יש להגדיר כיצד יסודרו הרכיבים‬
‫בחלון (פירוט בהמשך)‬
‫הוספת ‪ 2‬פקדי ‪ Label‬ופקד ‪Button‬‬
‫כב"מ ‪ Frame‬אינו מוצג למסך‪ ,‬לכן צריך‬
‫להפעיל את ‪.setVisible‬‬
‫‪3‬‬
‫הפקדים הערך ‪ true‬הוא ב"מ‪.‬‬
‫שאר‬
‫‪© Keren‬‬
‫לכל‪Kalif‬‬
‫‪AWT‬‬
‫היסטוריה (‪)1‬‬
‫‪ GUI ‬הינו ממשק משתמש גרפי‪Graphic User Interface :‬‬
‫‪ ‬בעבר בשפת ‪JAVA‬עבדו עם מנגנון ה‪Abstract ( AWT -‬‬
‫‪)Window Toolkit‬‬
‫‪ ‬מנגנון זה היה תלוי במערכת ההפעלה‪ ,‬ולכן הרצת התוכנית נראתה‬
‫באופן שונה על מערכות הפעלה שונות‬
‫‪ ‬ה‪ JVM -‬ביקש ממערכת ההפעלה לבצע את הציור בפועל (הפקדים)‪,‬‬
‫ומכאן נבע השוני בהופעה למסך‬
‫‪ ‬בגלל הפניות הרבות למערכת ההפעלה‪ ,‬שלמעשה הינן יציאה‬
‫ממסגרת ה‪ ,JVM -‬השימוש במנגנון כבד‬
‫‪ ‬בגלל השוני בין מערכות ההפעלה השונות‪ ,‬לא ניתן לבצע‬
‫קוסטומיזציה‬
‫‪ ‬למשל‪ :‬אם ב‪ windows -‬ניתן להציג תמונה על כפתור ובלינוקס לא‪ ,‬זה בעייתי‬
‫‪4‬‬
‫‪© Keren Kalif‬‬
‫היסטוריה (‪)2‬‬
‫‪ ‬בגירסא ‪ 1.2‬של ‪JAVA‬יצא ה‪ ,SWING -‬העובד באופן שונה‬
‫מאשר ‪:AWT‬‬
‫‪ ‬ב‪ swing -‬שכתבו חלק מהקומפוננטות (רכיבים) של ‪ ,AWT‬ושמן יהיה‬
‫זהה פרט לכך שיתחילו ב‪J -‬‬
‫‪ ‬למשל‪ Jframe :‬במקום ‪.Frame‬‬
‫‪ ‬ההבדל המהותי בין ‪ AWT‬ל‪ SWING -‬הוא ש‪ SWING -‬מציירת‬
‫בעצמה את הרכיבים ולא מערכת ההפעלה‪ .‬כלומר‪ swing ,‬יודע עפ"י‬
‫מערכת ההפעלה שעליה הוא רץ כיצד להציג את הרכיב‪.‬‬
‫‪ ‬יתרונות‪:‬‬
‫‪ ‬התוכנית יותר קלה ומהירה כי אין פניות רבות למ"ה‬
‫‪ ‬ניתן לבצע קוסטימיזציה בקלות כי אין תלות במ"ה (ה‪ swing -‬יודע לצייר את‬
‫הרכיב ולא מתבסס על מ"ה‪ ,‬בניגוד ל‪AWT -‬‬
‫‪5‬‬
‫‪© Keren Kalif‬‬
‫דוגמא בסיסית של ‪ GUI‬באמצעות‬
‫הפעם יש לרשת מהמחלקה ‪JFrame‬‬
‫כב"מ‪ ,‬ה‪ JFrame -‬אינו מגיב ללחיצה על ה‪-‬‬
‫‪ ,X‬אבל יש פקודה מובנית להגבת האירוע‬
‫שמות הפקדים מתחילים ב‪J -‬‬
‫‪6‬‬
‫‪© Keren Kalif‬‬
‫‪SWING‬‬
SWING ‫ לעומת‬AWT -‫התצוגה ב‬
© Keren Kalif
7
‫לא ניתן להוסיף פקד פעמיים‬
‫‪8‬‬
‫‪© Keren Kalif‬‬
‫שינוי התצוגה באפליקציית ‪swing‬‬
‫תצוגת ‪Windows‬‬
‫‪9‬‬
‫כך יראה בלי‬
‫‪theFrame.pack‬‬
‫‪© Keren Kalif‬‬
‫משמע להתאים את גודל‬
‫החלון לגודל הרכיבים‬
‫בעקבות שינוי התצורה‬
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());
‫וזוהי אופציית ב"מ‬
© Keren Kalif 10
‫קומפוננטות ב‪SWING -‬‬
‫‪ ‬מתחלקות ל‪ 3 -‬סוגים‪:‬‬
‫‪ :JComponent .1‬הרכיבים הבסיסים שניתן להציג‪.‬‬
‫‪ ‬למשל‪ .JLabel, JText, JButton :‬יש כ‪ 35 -‬רכיבים שכאלו‪.‬‬
‫‪ :Container .2‬רכיב שיכול להכיל בתוכו רכיבים אחרים‪ ,‬סוג של לוח‬
‫ציור‪.‬‬
‫‪JPanel, JTabbedPane, JSplitPane, JScrollPane ‬‬
‫‪ :Top Level Container .3‬יש רק אחד כזה באפליקציה והוא למעשה‬
‫החלון של התוכנית‪ ,‬ה‪ Conatiner -‬הראשי‪.‬‬
‫‪ ‬יכול להיות אחד מהבאים‪JFrame, JDialog, JApplet, :‬‬
‫‪JWindow‬‬
‫במקום חלון‪ .‬מאפשר לפתוח ‪JAVA‬‬
‫הכי פופלארי‬
‫‪Pop Up‬‬
‫‪© Keren Kalif 11‬‬
‫בדפדפן‪ .‬כבר לא בשימוש‪.‬‬
‫היררכיה נכונה ביצירת אפליקציה‬
JFrame, JDialog ‫למשל‬
JLabel ,Jbutton ‫למשל‬
JFrame
JPanel
JPanel
JLabel
JPanel ‫למשל‬
JPanel
JTextBox
‫הרכיב הראשי מציג ברקורסיה‬
‫את כל הרכיבים שתחתיו‬
JButton
© Keren Kalif 12
‫דוגמא לאפליקציה‬
‫פשוטה‬
‫יצירת ‪ Panel‬עם מסגרת וכותרת‬
‫יצירת כל הפקדים על ‪ panel‬ולא‬
‫ישירות על ה‪Frame -‬‬
‫‪© Keren Kalif 13‬‬
‫לכל ‪ container‬צריך לתת‬
‫גודל‪ ,‬אחרת גודלו הוא ‪0‬‬
JFrame -‫ גם דרך ה‬Content Pane -‫הוספת פקדים ל‬
panel -‫הוספת הפקד ל‬
frame -‫ולא ל‬
© Keren Kalif 14
‫הגדרות גודל ידני של ‪Frame‬‬
‫‪ ‬כאשר מייצרים הוא נפתח בפינת המסך השמאלית העליונה ויש‬
‫לקבוע את גודלו באמצעות השיטה ‪ ,setSize‬אחרת הוא נפתח‬
‫ללא גודל‬
‫כך יפתח החלון בלי‬
‫השורה ‪setSize‬‬
‫‪© Keren Kalif 15‬‬
‫הגדרת גודל של ‪ Frame‬ביחס גודל המסך‬
‫‪© Keren Kalif 16‬‬
‫הגדרת מיקום פתיחת החלון‬
‫‪ ‬כב"מ‪ ,‬החלון נפתח בפינה העליונה השמאלית‪.‬‬
‫‪ ‬ניתן לשנות הגדרה זו באמצעות השיטה ‪:setBounds‬‬
‫במקום ‪ setBounds‬ניתן להשתמש ב‪-‬‬
‫‪ setSize‬וב‪ setLocation -‬בנפרד‬
‫‪© Keren Kalif 17‬‬
‫פתיחת החלון במרכז המסך‬
‫במקום ‪ null‬ניתן לתת חלון אחר של‬
‫התוכנית‪ ,‬ואז חלון זה יפתח במרכזו‪.‬‬
‫‪© Keren Kalif 18‬‬
‫קישורים להסברים על הפקדים השונים‬
 http://download.oracle.com/javase/tutorial/ui/features/co
mpWin.html
+ ‫ פלט‬:SWING -‫ בלינק הבא יש דוגמאות לקוד המשתמש ב‬
)?‫ (לא זמין באופן זמני‬source code
 http://java.sun.com/products/jfc/jws/SwingSet2.jnlp
© Keren Kalif 19
‫הפעלת ה‪ swing -‬ב‪ thread -‬נפרד‬
‫‪ ‬את ה‪ swing -‬גם נריץ ב‪ thread -‬נפרד כדי שנוכל להריץ את‬
‫הלוגיקה שלנו במקביל בלי תקיעויות‬
‫‪ ‬כלומר‪ ,‬שאם קורה אירוע בזמן ציור ה‪ ,GUI -‬התוכנית לא "תתקע"‬
‫‪ Thread ‬זה נקרא ‪)EDT( Event Dispatch Thread‬‬
‫‪ ‬באפליקציות גדולות‪'thread ,‬ים אחרים ירצו לעדכן את ה‪,GUI -‬‬
‫וכדי למנוע "תקיעות" וכדי שהעבודה תיעשה במקביל‬
‫‪© Keren Kalif 20‬‬
‫ הקוד‬- ‫ נפרד‬thread -‫ ב‬swing -‫הפעלת ה‬
© Keren Kalif 21
‫הצגת תמונה‬
‫יש לשים לב שהמסלול הוא יחסי‬
‫ביחס לתיקיית ה‪ src -‬ולכן ישתנה‬
‫מפרוייקט לפרוייקט‪ .‬כמובן שניתן‬
‫גם להעביר את המסלול כפרמטר‪.‬‬
‫מחלקה זו מספקת שיטה המקבלת‬
‫את שם ה‪ Icon -‬ומחזירה אותו‬
‫‪© Keren Kalif 22‬‬
)2( ‫הצגת תמונה‬
© Keren Kalif 23
ComboBox ‫הפקד‬
© Keren Kalif 24
‫‪Layout Manager‬‬
‫‪ ‬נכתוב תוכנית המוסיפה ‪ 10‬רכיבים לחלון‪ .‬כיצד הם יסודרו?‬
‫יסודרו ברצף אחד ליד השני‪.‬‬
‫שינוי גודל החלון יארגן אותם מחדש‪.‬‬
‫‪© Keren Kalif 25‬‬
‫‪FlowLayout‬‬
‫‪ ‬כב"מ ‪ JAVA‬מסדרת לנו את הרכיבים ב‪FlowLayout -‬‬
‫‪ ‬כלומר‪ ,‬סידור הרכיבים אחד ליד השני ומעבר לשורה הבאה כאשר‬
‫נגמר המקום‬
‫‪ ‬אלא אם נתנו מיקום מדויק לרכיב‬
‫‪ ‬מתן מיקום מדויק אינו טוב‪ ,‬מאחר וכבר לא תהייה פרופורציה‬
‫כאשר נשנה את גודל החלון‬
‫‪ JAVA ‬מספקת לנו כל מיני אלגוריתמי סידור (‪ ,)Layout‬והם גם‬
‫יודעים לחשב את הפרופרציות עם שינוי גודל החלון‬
‫‪ ‬בשימוש ב‪ Layout -‬ניתן לקבוע את המרחק בין הרכיבים השונים‬
‫‪© Keren Kalif 26‬‬
Layout ‫סקירת‬
http://www.docstoc.com/docs/33446046/Java-Swing
‫ לקוח מתוך‬
© Keren Kalif 27
‫‪BorderLayout‬‬
‫‪ ‬מאפשר סידור רכיבים בצורת מסגרת‪ .‬כב"מ שם את הפקד בתוך‬
‫החלק של ה‪ ,CENTER -‬ולכן בדוגמא זו רואים רק את הפקד‬
‫האחרון‪:‬‬
‫‪© Keren Kalif 28‬‬
‫‪ - BorderLayout‬הכיוונים‬
‫שינוי בגודל החלון משנה רק את גודל‬
‫הרכיב המרכזי‪:‬‬
‫גובה הצפון והדרום נשארים קבועים‪,‬‬
‫ורוחב המזרח והמערב נשארים קבועים‪.‬‬
‫רק השטח של ה‪ CENTER -‬משתנה‪.‬‬
‫‪© Keren Kalif 29‬‬
‫‪BoxLayout‬‬
‫– סידור הרכיבים בשורה או בעמודה‬
‫בניגוד ל‪,FlowLayout -‬‬
‫הרכיבים לא יעברו לשורה הבאה‪.‬‬
‫‪© Keren Kalif 30‬‬
‫‪- Spring Layout‬‬
‫סידור רכיבים במיקום‬
‫יחסי‬
‫ה‪ west -‬של ה‪ label -‬יהיה במרחק ‪50‬‬
‫פיקסלים מה‪ west -‬של ה‪panel -‬‬
‫ה‪ west -‬של ה‪textField -‬יהיה במרחק‬
‫‪ 5‬פיקסלים מה‪ east -‬של ה‪label -‬‬
‫‪© Keren Kalif 31‬‬
‫‪ Layout‬נוספים‬
‫‪ :CardLayout ‬הצגת רכיב אחד כל פעם‪ ,‬אחד מעל השני‬
‫‪ :GridLayout ‬מגדיר טבלה‪ .‬יש לספק כמות שורות וכמות עמודות‪.‬‬
‫‪ ‬אם כמות השורות היא ‪ ,0‬אז מסתמך על כמות העמודות‪ ,‬והפוך‬
‫‪ ‬כל הגדלים של התאים זהים‬
‫‪ ‬הוספת רכיבים היא לפי הסדר‪ ,‬לא ניתן לדלג על תאים‬
‫‪ :ComplexLayout ‬כאשר ‪ layout‬אחד מכיל ‪ layout‬אחר באחד‬
‫הרכיבים שלו‬
‫‪ ‬כאשר הראשי עושה ‪ ,resize‬זה משפיע גם על הפנימיים‬
‫‪ ‬מדריך מצויין ל‪'layout -‬ים‪:‬‬
‫‪http://download.oracle.com/javase/tutorial/uiswing/layout‬‬
‫‪/visual.html‬‬
‫‪© Keren Kalif 32‬‬
‫דוגמא לעבודה עם טבלה‬
‫‪ ‬בעבודה עם טבלה יש אובייקט שנקרא ‪AbstractTableModel‬‬
‫המחזיק את המידע שבטבלה‬
‫‪ ‬המחלקה המובנית ‪ DefaultTableModel‬מהווה מימוש למחלקה‬
‫אבסטרקטית זו‪:‬‬
‫‪ ‬הדוגמא ‪JTableWithDefaultTabelModelExample‬‬
‫‪ ‬ניתן לרשת מממשק זה‪:‬‬
‫‪ ‬הדוגמא ‪JTableWithAbstractTabelModelExample‬‬
‫‪© Keren Kalif 33‬‬
:‫ביחידה זו למדנו‬
SWING ‫ לעומת‬AWT
Look & Feel
GUI -‫תכנון היררכי של ה‬
JFrame ‫הגדרות של‬
‫ נפרד‬Thread -‫ ב‬Swing ‫הרצת‬
Icon ‫הצגת‬
JComboBox ‫הפקד‬
Layout
‫הצגת נתונים בטבלה‬









© Keren Kalif 34