קידוד ממשק משתמש גרפי פשוט של Java

ממשק משתמש גרפי (GUI) שנבנה באמצעות פלטפורמת Java NetBeans מורכב מכמה שכבות של מכולות. השכבה הראשונה היא החלון המשמש להעברת היישום סביב מסך המחשב. זה מכונה המכולה העליונה, ותפקידו לתת לכל שאר המכולות והרכיבים הגרפיים מקום לעבוד בו. בדרך כלל עבור יישום שולחן עבודה, מיכל ברמה העליונה הזו ייעשה באמצעות

מעמד.

אתה יכול להוסיף כל מספר שכבות לעיצוב ה- GUI שלך, תלוי במורכבותו. אתה יכול למקם רכיבים גרפיים (למשל, תיבות טקסט, תוויות, לחצנים) ישירות לתוך

או שתוכל לקבץ אותם במכולות אחרות.

השכבות של ממשק ה- GUI ידועות כהיררכיית הכלה וניתן לחשוב עליהן כעץ משפחה. אם

הוא הסבא שיושב בחלקו העליון, ואז אפשר לחשוב על המכולה הבאה כעל האבא והמרכיבים שהוא מכיל כילדים.

לדוגמה זו, נבנה ממשק משתמש GUI עם

המכיל שניים

ו

. הראשון

יקיים א

ו

. השני

יקיים א

ו

. רק אחד

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

.

ישנן שתי דרכים לבנות GUI זה באמצעות NetBeans. הראשון הוא להקליד באופן ידני את קוד ה- Java המייצג את ממשק המשתמש, עליו נדון במאמר זה. השני הוא להשתמש בכלי GUB Builder של NetBeans לבניית GUI של Swing.

למידע על השימוש ב- JavaFX ולא על Swing ליצירת ממשק משתמש, ראה מה זה JavaFX?

הערה: הקוד המלא לפרויקט זה הוא בכתובת דוגמה לקוד Java לבניית יישום GUI פשוט.

ליצור חדש ג'אווה פרויקט יישום ב- NetBeans עם מחלקה ראשונה נקרא לפרויקט

נקודת המחאה: בחלון הפרויקטים של NetBeans צריך להיות תיקיה GuiApp1 ברמה העליונה (אם השם אינו מודגש, לחץ באמצעות לחצן העכבר הימני על התיקיה ובחר

). מתחת ל

התיקיה צריכה להיות תיקיית חבילות מקור עם

קרא GuiApp1. תיקיה זו מכילה את המחלקה העיקרית הנקראת

.ג'אווה.

לפני שנוסיף קוד Java כלשהו, ​​הוסף את הייבוא ​​הבא לראש הדף

כיתה, בין

קו וה-

:

משמעות היבוא הזה היא שכל המחלקות הדרושות לנו ליישום GUI זה יהיו זמינות לשימושנו.

בתוך השיטה העיקרית, הוסף שורת קוד זו:

המשמעות היא שהדבר הראשון לעשות הוא ליצור חדש

חפץ. זה קיצור דרך נחמד למשל לתוכניות, מכיוון שאנחנו זקוקים רק לכיתה אחת. כדי שזה יעבוד, אנו זקוקים למבנה עבור

כיתה, אז הוסף שיטה חדשה:

בשיטה זו נניח את כל קוד ה- Java הדרוש ליצירת ה- GUI, כלומר כל שורה מעכשיו תהיה בתוך ה-

שיטה.

תו עיצוב: ייתכן שראית שפורסם קוד Java המציג את הכיתה (כלומר,

) הוארך מ

. לאחר מכן משתמשים בכיתה זו כחלון GUI הראשי עבור יישום. אין באמת צורך לעשות זאת עבור יישום GUI רגיל. הפעם היחידה בה תרצו להרחיב את

השיעור הוא אם אתה צריך להכין סוג ספציפי יותר של

(הבט ב

למידע נוסף על יצירת תת-סוג).

כאמור, השכבה הראשונה של ה- ממשק משתמש הוא חלון יישום העשוי מ

. ליצור

חפץ, התקשר ל-

בנאי:

בשלב הבא נקבע את התנהגות חלון היישום GUI שלנו, באמצעות ארבעת השלבים הבאים:

1. ודא שהיישום נסגר כשהמשתמש סוגר את החלון כך שהוא לא ימשיך לרוץ לא ידוע ברקע:

2. הגדר כותרת לחלון כך שלחלון אין סרגל כותרות ריק. הוסף שורה זו:

3. הגדר את גודל החלון כך שהחלון יהיה בגודל כך שיוכל להכיל את הרכיבים הגרפיים שאתה מציב בתוכו.

תו עיצוב: אפשרות חלופית להגדרת גודל החלון היא להתקשר אל

שיטת ה-

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

שיטה.

4. מרכז את החלון כדי להופיע באמצע מסך המחשב כך שהוא לא יופיע בפינה הימנית העליונה של המסך:

שתי השורות כאן יוצרות ערכים בשביל ה

ו

אובייקטים שתיצור תוך זמן קצר, בעזרת שניים

מערכים. זה מקל על אכלוס רשומות דוגמה עבור רכיבים אלה:

כעת, בואו ניצור את הראשון

חפץ. זה יכיל א

ו

. שלושתם נוצרים בשיטות הבנאי שלהם:

הערות לשלוש השורות לעיל:

• ה

  JPanel

  משתנה מוצהר סופי. המשמעות היא שהמשתנה יכול להחזיק רק את ה-

  JPanel

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

  JLabel

  ו

  JComboBox

  עברו להם ערכים לקביעת המאפיינים הגרפיים שלהם. התווית תופיע כ"פירות: "ועתה לקומבוקס יש את הערכים הכלולים בתוך

  פרי אופציות

  מערך שהוכרז קודם לכן.
• ה

  הוסף ()

  שיטת ה-

  JPanel

  מכניס לתוכו רכיבים גרפיים. א

  JPanel

  משתמש ב- FlowLayout כברירת מחדל מנהל פריסה. זה בסדר עבור יישום זה, מכיוון שאנחנו רוצים שהתווית תשב ליד הקומבוקס. כל עוד נוסיף את ה-

  JLabel

  ראשית, זה ייראה בסדר:

השני

עוקב אחר אותה דפוס. נוסיף א

ו

ולהגדיר את הערכים של אותם רכיבים להיות "ירקות:" והשני

מערך

. ההבדל הנוסף היחיד הוא השימוש ב-

שיטה להסתרת

. אל תשכח שיהיה א

שליטה על הנראות של השניים

. כדי שזה יעבוד, צריך להיות בלתי נראה בהתחלה. הוסף שורות אלה כדי להגדיר את השנייה

:

שורה אחת שכדאי לציין בקוד לעיל היא השימוש ב-

שיטת ה-

. ה

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

המרכיב האחרון הדרוש הוא ה-

כדי לשלוט על הנראות של

s. הערך שהועבר ב-

בנאי מגדיר את תווית הכפתור:

זהו המרכיב היחיד שיוגדר מאזין לאירועים. "אירוע" מתרחש כאשר משתמש מתקשר עם רכיב גרפי. לדוגמה, אם משתמש לוחץ על כפתור או כותב טקסט לתיבת טקסט, אירוע מתרחש.

מאזין לאירועים אומר לאפליקציה מה לעשות כאשר האירוע מתרחש.

משתמש בכיתת ActionListener כדי "להאזין" ללחיצת כפתור על ידי המשתמש.

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

זה אולי נראה כמו קוד מפחיד, אבל אתה פשוט צריך לפרק אותו כדי לראות מה קורה:

• ראשית, אנו קוראים ל-

  addActionListener

  שיטת ה-

  ג'בטון

  . שיטה זו מצפה מופע של ה-

  ActionListener

  כיתה, שהיא הכיתה שמאזינה לאירוע.
• בשלב הבא, אנו יוצרים את המופע של

  ActionListener

  בכיתה על ידי הצהרת אובייקט חדש באמצעות

  ActionListener חדש ()

  ואז לספק מעמד פנימי אנונימי - שהוא כל הקוד בתוך הסוגריים המתולתלים.
• בתוך המעמד הפנימי האנונימי, הוסף שיטה שנקראת

  actionPerformed ()

  . זו השיטה הנקראת כאשר לוחצים על הכפתור. כל מה שצריך בשיטה זו הוא להשתמש

  setVisible ()

  כדי לשנות את הנראות של

  JPanel

  s.

לבסוף, עלינו להוסיף את השניים

s ו

אל ה

. כברירת מחדל, א

משתמש במנהל הפריסה של BorderLayout. פירוש הדבר שיש חמישה אזורים (על פני שלוש שורות) של ה-

שיכול להכיל רכיב גרפי (צפון, {מערב, מרכז, מזרח}, דרום). ציין אזור זה באמצעות

שיטה:

לבסוף, כל הקוד שלמעלה לא היה דבר לחינם אם לא נקבע את ה-

להיות גלוי:

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