Κωδικοποίηση μιας απλής γραφικής διεπαφής χρήστη Java

Ένα γραφικό περιβάλλον εργασίας (GUI) χτισμένο χρησιμοποιώντας το Πλατφόρμα Java NetBeans αποτελείται από πολλά στρώματα δοχείων. Το πρώτο στρώμα είναι το παράθυρο που χρησιμοποιείται για τη μετακίνηση της εφαρμογής γύρω από την οθόνη του υπολογιστή σας. Αυτό είναι γνωστό ως δοχείο κορυφαίου επιπέδου και η δουλειά του είναι να δώσει σε όλα τα άλλα δοχεία και γραφικά στοιχεία ένα μέρος για να εργαστείτε. Συνήθως για μια εφαρμογή για επιτραπέζιους υπολογιστές, αυτό το κοντέινερ ανώτατου επιπέδου θα γίνει χρησιμοποιώντας το

τάξη.

Μπορείτε να προσθέσετε οποιοδήποτε αριθμό στρώσεων στο σχεδιασμό GUI, ανάλογα με την πολυπλοκότητα του. Μπορείτε να τοποθετήσετε γραφικά στοιχεία (π.χ. πλαίσια κειμένου, ετικέτες, κουμπιά) απευθείας στο

, ή μπορείτε να τα ομαδοποιήσετε σε άλλα δοχεία.

Τα στρώματα του GUI είναι γνωστά ως η ιεραρχία περιορισμού και μπορούν να θεωρηθούν ως οικογενειακό δέντρο. Αν το

είναι ο παππούς που κάθεται στην κορυφή, τότε το επόμενο δοχείο μπορεί να θεωρηθεί ως ο πατέρας και τα συστατικά που κατέχει ως παιδιά.

Για αυτό το παράδειγμα, θα χτίσουμε ένα GUI με ένα

που περιέχει δύο

και ένα

. Ο πρώτος

θα κρατήσει ένα

και

. Το δεύτερο

θα κρατήσει ένα

και ένα

. Μόνο ένα

(και συνεπώς τα γραφικά συστατικά που περιέχει) θα είναι ορατά τη φορά. Το κουμπί θα χρησιμοποιηθεί για να αλλάξει η ορατότητα των δύο

.

Υπάρχουν δύο τρόποι για να δημιουργήσετε αυτό το GUI χρησιμοποιώντας το NetBeans. Το πρώτο είναι να πληκτρολογήσετε με μη αυτόματο τρόπο τον κώδικα Java που αντιπροσωπεύει το GUI, το οποίο αναφέρεται σε αυτό το άρθρο. Το δεύτερο είναι να χρησιμοποιήσετε το εργαλείο NetBeans GUI Builder για την κατασκευή Swing GUI.

Για πληροφορίες σχετικά με τη χρήση του JavaFX αντί για το Swing για τη δημιουργία ενός GUI, δείτε Τι είναι το JavaFX?

Σημείωση: Ο πλήρης κώδικας για αυτό το έργο είναι στο Παράδειγμα κώδικα Java για την κατασκευή μιας απλής εφαρμογής GUI.

Δημιούργησε ένα νέο Ιάβα Εφαρμογή έργου σε NetBeans με κύρια κατηγορία Θα καλέσουμε το έργο

Check Point: Στο παράθυρο Έργα του NetBeans θα πρέπει να υπάρχει ένας φάκελος GuiApp1 ανώτατου επιπέδου (αν το όνομα δεν είναι με έντονη γραφή, κάντε δεξί κλικ στο φάκελο και επιλέξτε

). Κάτω από το

φάκελος θα πρέπει να είναι φάκελος πηγαίων πακέτων με

που ονομάζεται GuiApp1. Αυτός ο φάκελος περιέχει την κύρια κλάση που ονομάζεται

.Ιάβα.

Πριν προσθέσουμε οποιοδήποτε κώδικα Java, προσθέστε τις ακόλουθες εισαγωγές στο επάνω μέρος του

class, μεταξύ των

γραμμή και το

:

Αυτές οι εισαγωγές σημαίνουν ότι όλες οι κλάσεις που χρειαζόμαστε για να κάνουμε αυτή την εφαρμογή GUI θα είναι διαθέσιμες για να χρησιμοποιήσουμε.

Στο πλαίσιο της κύριας μεθόδου, προσθέστε αυτή τη γραμμή κώδικα:

Αυτό σημαίνει ότι το πρώτο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε ένα νέο

αντικείμενο. Πρόκειται για ένα ωραίο πρόγραμμα για παράδειγμα για προγράμματα, καθώς χρειαζόμαστε μόνο μία τάξη. Για να λειτουργήσει αυτό, χρειαζόμαστε έναν κατασκευαστή για το

class, προσθέστε μια νέα μέθοδο:

Σε αυτήν τη μέθοδο, θα βάλουμε όλο τον κώδικα Java που απαιτείται για τη δημιουργία του GUI, που σημαίνει ότι κάθε γραμμή από εδώ και στο εξής θα βρίσκεται μέσα στο

μέθοδος.

Σχεδίαση Σημείωση: Μπορεί να έχετε δει κώδικα Java που δημοσιεύεται ότι δείχνει την κλάση (δηλ.

) επεκταθεί από ένα

. Αυτή η κλάση χρησιμοποιείται στη συνέχεια ως κύριο παράθυρο GUI για μια εφαρμογή. Δεν υπάρχει πραγματικά καμία ανάγκη να γίνει αυτό για μια κανονική εφαρμογή GUI. Η μόνη φορά που θα θέλατε να επεκτείνετε το

τάξη είναι εάν πρέπει να κάνετε ένα πιο συγκεκριμένο τύπο

(Ρίξε μια ματιά στο

για περισσότερες πληροφορίες σχετικά με την κατασκευή μιας υποκατηγορίας).

Όπως αναφέρθηκε προηγουμένως, το πρώτο στρώμα του GUI είναι ένα παράθυρο εφαρμογής που γίνεται από a

. Για να δημιουργήσετε ένα

αντικείμενο, καλέστε το

κατασκευαστής:

Στη συνέχεια, θα ορίσουμε τη συμπεριφορά του παραθύρου εφαρμογής GUI, χρησιμοποιώντας αυτά τα τέσσερα βήματα:

1. Βεβαιωθείτε ότι η εφαρμογή κλείνει όταν ο χρήστης κλείσει το παράθυρο έτσι ώστε να μην συνεχίζει να λειτουργεί άγνωστο στο παρασκήνιο:

2. Ορίστε έναν τίτλο για το παράθυρο έτσι ώστε το παράθυρο να μην έχει κενή γραμμή τίτλου. Προσθέστε αυτήν τη γραμμή:

3. Ορίστε το μέγεθος του παραθύρου, έτσι ώστε το παράθυρο να έχει μέγεθος για να φιλοξενήσει τα γραφικά στοιχεία που τοποθετείτε σε αυτό.

Σχεδίαση Σημείωση: Μια εναλλακτική επιλογή για τον καθορισμό του μεγέθους του παραθύρου είναι να καλέσετε το

μέθοδος του

τάξη. Αυτή η μέθοδος υπολογίζει το μέγεθος του παραθύρου βάσει των γραφικών στοιχείων που περιέχει. Επειδή αυτή η εφαρμογή δείγματος δεν χρειάζεται να αλλάξει το μέγεθος του παραθύρου της, θα χρησιμοποιήσουμε μόνο το

μέθοδος.

4. Τοποθετήστε το παράθυρο στο κέντρο της οθόνης του υπολογιστή ώστε να μην εμφανίζεται στην επάνω αριστερή γωνία της οθόνης:

Οι δύο γραμμές εδώ δημιουργούν αξίες για το

και

αντικείμενα που θα δημιουργήσουμε σύντομα, χρησιμοποιώντας δύο

συστοιχίες. Με αυτόν τον τρόπο διευκολύνεται η συμπλήρωση μερικών παραδειγμάτων για αυτά τα στοιχεία:

Τώρα, ας δημιουργήσουμε το πρώτο

αντικείμενο. Θα περιέχει a

και ένα

. Και οι τρεις δημιουργούνται μέσω των μεθόδων κατασκευής τους:

Σημειώσεις σχετικά με τις τρεις παραπάνω γραμμές:

• ο

  JPanel

  μεταβλητή δηλώνεται τελικός. Αυτό σημαίνει ότι η μεταβλητή μπορεί να κρατήσει μόνο το

  JPanel

  που δημιουργήθηκε σε αυτή τη γραμμή. Το αποτέλεσμα είναι ότι μπορούμε να χρησιμοποιήσουμε τη μεταβλητή σε μια εσωτερική κλάση. Θα καταστεί προφανές γιατί θέλουμε αργότερα στον κώδικα.
• ο

  JLabel

  και

  JComboBox

  έχουν τις τιμές που τους διαβιβάζονται για να ορίσουν τις γραφικές τους ιδιότητες. Η ετικέτα θα εμφανιστεί ως "Φρούτα:" και το combobox θα έχει τώρα τις τιμές που περιέχονται στο

  fruitOptions

  πίνακα που δηλώθηκε νωρίτερα.
• ο

  Προσθήκη()

  μέθοδος του

  JPanel

  τοποθετεί γραφικά στοιχεία σε αυτό. ΕΝΑ

  JPanel

  χρησιμοποιεί το FlowLayout ως προεπιλογή του διαχειριστής διάταξης. Αυτό είναι καλό για αυτή την εφαρμογή καθώς θέλουμε η ετικέτα να κάθεται δίπλα στο combobox. Όσο προσθέτουμε το

  JLabel

  Πρώτον, θα φανεί ωραία:

Το δεύτερο

ακολουθεί το ίδιο μοτίβο. Θα προσθέσουμε ένα

και ένα

και ορίστε τις τιμές των συστατικών αυτών ως "Λαχανικά:" και το δεύτερο

πίνακας

. Η μόνη άλλη διαφορά είναι η χρήση του

μέθοδος για την απόκρυψη του

. Μην ξεχνάτε ότι θα υπάρξει α

ελέγχοντας την ορατότητα των δύο

. Για να λειτουργήσει αυτό, πρέπει να είναι αόρατο στην αρχή. Προσθέστε αυτές τις γραμμές για να ρυθμίσετε τη δεύτερη

:

Μια γραμμή που αξίζει να σημειωθεί στον παραπάνω κώδικα είναι η χρήση του

μέθοδος του

. ο

η λίστα εμφανίζει τα στοιχεία που περιέχει σε δύο στήλες. Αυτό ονομάζεται "στυλ εφημερίδας" και είναι ένας καλός τρόπος να εμφανιστεί μια λίστα αντικειμένων και όχι μια πιο παραδοσιακή κάθετη στήλη.

Το τελευταίο στοιχείο που χρειάζεται είναι το

για τον έλεγχο της ορατότητας του

μικρό. Η τιμή που πέρασε στο

ο κατασκευαστής ορίζει την ετικέτα του κουμπιού:

Αυτό είναι το μόνο συστατικό που θα έχει οριστεί ακροατής ακροατηρίου. Ένα "συμβάν" εμφανίζεται όταν ένας χρήστης αλληλεπιδρά με ένα γραφικό στοιχείο. Για παράδειγμα, αν ένας χρήστης κάνει κλικ σε ένα κουμπί ή γράψει κείμενο σε ένα πλαίσιο κειμένου, τότε συμβαίνει ένα συμβάν.

Ένας ακροατής συμβάντος λέει στην εφαρμογή τι πρέπει να κάνει όταν συμβαίνει το συμβάν.

χρησιμοποιεί την κλάση ActionListener για να "ακούει" το κλικ ενός κουμπιού από το χρήστη.

Επειδή αυτή η εφαρμογή εκτελεί μια απλή εργασία όταν κάνει κλικ στο κουμπί, μπορούμε να χρησιμοποιήσουμε μια ανώνυμη εσωτερική κλάση για να ορίσουμε τον ακροατή της εκδήλωσης:

Αυτό μπορεί να μοιάζει με τρομακτικό κώδικα, αλλά απλά πρέπει να το σπάσετε για να δείτε τι συμβαίνει:

• Πρώτον, καλούμε το

  addActionListener

  μέθοδος του

  JButton

  . Αυτή η μέθοδος περιμένει μια εμφάνιση του

  ActionListener

  class, η οποία είναι η τάξη που ακούει για την εκδήλωση.
• Στη συνέχεια, δημιουργούμε την εμφάνιση του

  ActionListener

  κατηγορίας δηλώνοντας ένα νέο αντικείμενο χρησιμοποιώντας

  νέο ActionListener ()

  και στη συνέχεια παρέχοντας μια ανώνυμη εσωτερική τάξη - η οποία είναι όλος ο κώδικας μέσα στις σγουρές αγκύλες.
• Μέσα στην ανώνυμη εσωτερική τάξη, προσθέστε μια μέθοδο που ονομάζεται

  actionPerformed ()

  . Αυτή είναι η μέθοδος που καλείται όταν πατηθεί το κουμπί. Το μόνο που χρειάζεται σε αυτή τη μέθοδο είναι να χρησιμοποιήσετε

  setVisible ()

  για να αλλάξετε την ορατότητα του

  JPanel

  μικρό.

Τέλος, πρέπει να προσθέσουμε και τα δύο

s και

στο

. Από προεπιλογή, a

χρησιμοποιεί το διαχειριστή διάταξης BorderLayout. Αυτό σημαίνει ότι υπάρχουν πέντε περιοχές (σε τρεις σειρές) του

που μπορεί να περιέχει μια γραφική συνιστώσα (ΒΟΡΕΙΑ, {ΔΥΤΙΚΗ, ΚΕΝΤΡΟ, ΑΝΑΤΟΛΙΚΗ}, ΝΟΤΙΑ). Καθορίστε αυτήν την περιοχή χρησιμοποιώντας το

μέθοδος:

Τελικά, όλος ο παραπάνω κώδικας δεν θα είχε τίποτα, αν δεν το ορίσαμε

να είναι ορατό:

Τώρα είμαστε έτοιμοι να εκτελέσουμε το έργο NetBeans για να εμφανιστεί το παράθυρο της εφαρμογής. Κάνοντας κλικ στο κουμπί θα γίνει εναλλαγή μεταξύ της εμφάνισης του combobox ή της λίστας.