7. Ανάπτυξη GUI σε Java

7. Ανάπτυξη GUI σε Java Όταν ολοκληρώσετε αυτό το κεφάλαιο, θα μπορείτε: Να περιγράφετε το πακέτο AWT και τις συνιστώσες του. Να εξηγείτε τους containers (περιέκτες), components (συνιστώσες) και layout managers (διαχειριστές μορφής) και πώς δουλεύουν για να δημιουργηθεί ένα GUI. Να περιγράφετε και να χρησιμοποιείτε layout managers: flow, border, grid και card για να πετύχετε το επιθυμητό δυναμικό layout Να χρησιμοποιείτε τους κατάλληλους containers frame και panel. Να τοποθετείτε panels μέσα σε άλλους containers ώστε να δημιουργείτε σύνθετα layouts 7.1 Το πακέτο java.awt Το πακέτο java.awt περιέχει κλάσεις για την παραγωγή widgets και συνιστωσών GUI. Μία βασική επισκόπηση του πακέτου παρουσιάζεται στο πιο κάτω διάγραμμα. Οι κλάσεις που παρουσιάζονται με έντονα γράμματα τονίζουν τα ζητήματα που θα μας απασχολήσουν σε αυτό το κεφάλαιο. 1

7.2 Ανάπτυξη γραφικών διεπαφών με το χρήστη 7.2.1. Containers και Components Βασικά στοιχεία του AWT της Java είναι τα components (συνιστώσες) και τα containers (περιέκτες), τα οποία είναι και αυτά components. Components είναι τα γενικά ορατά στοιχεία ενός GUI, όπως ένα Button ή ένα Label (ετικέτα). Τα components τοποθετούνται σε μία «οθόνη» «προσθέτοντάς» τα σε ένα container. Γενικά ένα container περιέχει ένα ή περισσότερα components και, αν το επιθυμούμε, μπορεί να περιέχει άλλα containers. Σημείωση Το γεγονός ότι ένα container μπορεί να διατηρεί όχι απλά components, αλλά και containers είναι κρίσιμο και βασικό στη δημιουργία layouts που είναι ρεαλιστικής πολυπλοκότητας. 7.2.2. Τοποθέτηση components Η θέση ενός component σε ένα container καθορίζεται από το layout manager. Ένα container διατηρεί μία αναφορά σε ένα συγκεκριμένο στιγμιότυπο ενός LayoutManager. Όταν ένα container χρειάζεται να τοποθετήσει ένα component καλεί το layout manager για να το κάνει. Η ίδια εξουσιοδότηση (delegation) συμβαίνει και όταν θέλει να αποφασίσει το μέγεθος του component. 7.2.3. Μέγεθος component Επειδή ο layout manager γενικά είναι υπεύθυνος για το μέγεθος και τη θέση των components στον container του, δε θα πρέπει κανονικά να προσπαθήσετε να θέσετε το μέγεθος ή τη θέση των components μόνοι σας. Αν προσπαθήσετε να κάνετε κάτι τέτοιο (χρησιμοποιώντας οποιαδήποτε από τις μεθόδους setlocation(), setsize() ή setbounds()), ο layout manager υπερβαίνει την απόφασή σας. Αν πρέπει να ελέγχετε το μέγεθος ή τη θέση των components με τρόπο που δεν μπορεί να γίνει με κάποιον από τους συνήθεις layout managers είναι δυνατό να απενεργοποιήσετε το layout manager δίνοντας την ακόλουθη κλήση μεθόδου στον container σας: setlayout(null); Μετά αυτό το βήμα θα πρέπει να χρησιμοποιήσετε τα setlocation(), setsize() ή setbounds() σε component για να τα τοποθετήσετε σε container. Προσέξτε ότι η προσέγγιση αυτή οδηγεί σε layouts που εξαρτώνται από την πλατφόρμα εξ αιτίας των διαφορών ανάμεσα στο παραθυρικό σύστημα και των μεγεθών των γραμματοσειρών. Μία καλύτερη προσέγγιση είναι να δημιουργήσετε μία νέα κλάση του LayoutManager. 7.3 Frames Ένα Frame είναι μία υποκλάση του Window. Είναι ένα Window με τίτλο και γωνίες από τις οποίες μπορούμε να αλλάξουμε το μέγεθός του frame. 2

7.3.1. Δημιουργία ενός απλού Frame Η μέθοδος δημιουργίας Frame(String) στην κλάση Frame δημιουργεί ένα νέο, αόρατο αντικείμενο Frame με τον τίτλο του να καθορίζεται από το String. Ένα Frame μπορεί να αλλάξει μέγεθος χρησιμοποιώντας τη μέθοδο setsize(), η οποία του κληροδοτείται από την κλάση Component. Σημείωση Για να γίνει το Frame ορατό θα πρέπει να κληθούν οι μέθοδοι setvisible() και setsize(). Το πιο κάτω πρόγραμμα δημιουργεί ένα απλό πλαίσιο (frame) με συγκεκριμένο τίτλο, μέγεθος και χρώμα φόντου (background color). public class MyFrame extends Frame { public static void main(string args[]) { MyFrame fr = new MyFrame( Hello Out There! ); // Component method setsize() fr.setsize(500, 500); fr.setbackground(color.blue); fr.setvisible(true); // Component method show() public MyFrame(String str) { super(str);... 7.3.2. Εκτέλεση προγράμματος $ javac MyFrame.java $ java MyFrame 3

7.4 Panels Τα Panels, όπως τα frames, σας παρέχουν χώρο για να προσκολλήσετε ένα GUI component, συμπεριλαμβανομένων άλλων panels. 7.4.1. Δημιουργία panels Τα Panels δημιουργούνται χρησιμοποιώντας τη μέθοδος δημιουργίας Panel(). Από τη στιγμή που δημιουργείται ένα αντικείμενο Panel, πρέπει να προστεθεί σε ένα αντικείμενο Window ή Frame για να μπορεί να γίνει ορατό. Αυτό γίνεται με τη μέθοδο add() στην κλάση Container. Το πιο κάτω πρόγραμμα δημιουργεί ένα μικρό κίτρινο panel, και το προσθέτει στο αντικείμενο Frame. public class FrameWithPanel extends Frame { // Constructor public FrameWithPanel (String str) { super(str); public static void main (String args[]) { FrameWithPanel fr = new FrameWithPanel( Frame with Panel ); Panel pan = new Panel(); fr.setsize(200,200); fr.setbackground(color.blue); fr.setlayout(null); // override default layout mgr pan.setsize(100,100); pan.setbackground(color.yellow);... Ιδού το αποτέλεσμα: fr.add(pan); fr.setvisible(true); 4

7.5 Container Layouts Το layout των components σε ένα container μπορεί να καθορίζεται από έναν layout manager. Κάθε container, όπως ένα panel ή ένα frame έχει έναν εξ ορισμού layout manager που σχετίζεται μαζί του, το οποίο μπορεί να αλλάξει από τον προγραμματιστή Java όταν δημιουργείται ένα στιγμιότυπο αυτού του container. 7.5.1. Layout Managers Στη γλώσσα Java υπάρχουν layout managers: FlowLayout Ο εξ ορισμού layout manager των Panels και Applets. BorderLayout Ο εξ ορισμού layout manager των Windows, Dialogs και Frames. GridLayout CardLayout GridBagLayout Δε θα ασχοληθούμε σε αυτό το κεφάλαιο με το GridBagLayout manager. 7.6 Ένα απλό παράδειγμα Ο πιο κάτω απλός κώδικας παρουσιάζει διάφορα ενδιαφέροντα σημεία και θα τον αναλύσουμε στη συνέχεια. public class ExGui { private Frame f; private Button b1; private Button b2; public static void main(string args[]) { ExGui that = new ExGui(); that.go(); public void go() { f = new Frame( GUI Example ); f.setlayout(new FlowLayout()); b1 = new Button( Press Me ); b2 = new Button( Don t press Me ); f.add(b1); f.add(b2); f.pack(); f.setvisible(true); 5

7.6.1. Η μέθοδος main() Η μέθοδος main() στο παράδειγμα αυτό κάνει δύο πράγματα, πρώτα δημιουργεί ένα στιγμιότυπο του αντικειμένου ExGui. Θυμηθείτε ότι μέχρι να υπάρξει ένα στιγμιότυπο, δεν υπάρχουν πραγματικά στοιχεία δεδομένων με τα ονόματα f, b1, και b2 προς χρήση. Όταν έχει δημιουργηθεί ο χώρος δεδομένων, η main() καλεί τη μέθοδο στιγμιοτύπου go() στα συμφραζόμενα αυτού του στιγμιοτύπου. Στην go() λαμβάνει χώρα η πραγματική δράση. 7.6.2. new Frame( GUI Example ) Αυτό δημιουργεί ένα στιγμιότυπο της κλάσης java.awt.frame. Ένα frame στη Java είναι ένα παράθυρο πρώτου επιπέδου, με τη μπάρα τίτλου η οποία ορίζεται από το όρισμα της μεθόδου δημιουργίας GUI Example στην περίπτωση αυτή και χειριστήρια αλλαγής μεγέθους και άλλα σχέδια (decoration) σύμφωνα με τις τοπικές συμβάσεις. Το frame έχει μηδενικό μέγεθος και δεν είναι προς το παρόν ορατό. 7.6.3. f.setlayout(new FlowLayout()) Αυτό δημιουργεί ένα στιγμιότυπο του flow layout manager, και το εγκαθιστά στο frame. Υπάρχει ένας εξ ορισμού layout manager για κάθε frame, αλλά δεν είναι κατάλληλος για τις ανάγκες μας στο παρόν παράδειγμα. Ο flow layout manager είναι ο απλούστερος στο AWT και τοποθετεί τα components περίπου όπως τις λέξεις σε μία σελίδα, γραμμή με γραμμή. Σημειώστε ότι ο flow layout στοιχίζει εξ ορισμού κάθε γραμμή στο κέντρο. 7.6.4. new Button( Press me ) Αυτό δημιουργεί ένα στιγμιότυπο της κλάσης java.awt.button. Ένα button είναι το σύνηθες push button που προέρχεται από την τοπική παραθυρική εργαλειοθήκη. Η ετικέτα του button ορίζεται από ένα όρισμα συμβολοσειράς στη μέθοδο δημιουργίας. 7.6.5. f.add(b1) Αυτό λέει στο frame f που είναι ένα container ότι πρόκειται να περιέχει το component b1. Τα buttons είναι παραδείγματα Java components. Το μέγεθος και η θέση του b1 είναι υπό τον έλεγχο του layout manager του frame από το σημείο αυτό και μετά. 7.6.6. f.pack() Η μέθοδος αυτή λέει στο frame να θέσει ένα μέγεθος που να «συμπεριλαμβάνει με ωραίο τρόπο» τα components που περιέχει. Για να πάρει τη σχετική απόφαση ρωτά το layout manager που είναι υπεύθυνος για το μέγεθος και τη θέση όλων όσων περιέχει το frame. 7.6.7. f.setvisible(true) Η μέθοδος αυτή προκαλεί το πλαίσιο (frame) και τα components του να γίνουν ορατά στο χρήστη. Το τελικό αποτέλεσμα του κώδικα αυτού σε περιβάλλον Windows δείχνει ως εξής: 6

7.7 Layout Managers 7.7.1. Flow Layout Managers Το flow layout που χρησιμοποιήθηκε στο πρώτο παράδειγμα τοποθετεί τα components με βάση γραμμή-γραμμή. Κάθε φορά που γεμίζει μία γραμμή ξεκινά μία άλλη. Σε αντίθεση με άλλους layout managers, ο flow layout δεν περιορίζει το μέγεθος του component που χειρίζεται, αλλά αντίθετα τους επιτρέπει να έχουν ένα προτιμώμενο μέγεθος. Σημείωση Όλα τα components έχουν μία μέθοδο που ονομάζεται setpreferredsize() η οποία χρησιμοποιείται από τους layout managers για να ρωτήσουν το component σχετικά με το μέγεθος που προτιμά να έχει. Οι επιλογές στο flow layout σας επιτρέπουν να στοιχίζετε τα components στα δεξιά ή τα αριστερά, αν προτιμάτε κάτι τέτοιο σε σχέση με την εξ ορισμού συμπεριφορά που τα στοιχίζει στο κέντρο. Αν θέλετε να δημιουργήσετε μεγαλύτερη περιοχή ορίων ανάμεσα σε κάθε component μπορείτε να καθορίσετε insets. Όταν αλλάξετε το μέγεθος μίας περιοχής που χειρίζεται ένας flow layout manager, τότε μπορεί να αλλάξει το layout. Μετά την αλλαγή μεγέθους Τα ακόλουθα είναι παραδείγματα του πώς μπορείτε να υλοποιήσετε το FlowLayout χρησιμοποιώντας τη μέθοδο setlayout() η οποία κληροδοτείται από το Component. setlayout(new FlowLayout(FlowLayout.RIGHT, 20, 40)); setlayout(new FlowLayout(FlowLayout.LEFT)); setlayout(new FlowLayout()); Το ακόλουθο παράδειγμα προσθέτει διάφορα buttons σε ένα flow layout σε ένα frame public class MyFlow { private Frame f; private Button button1, button2, button3; public static void main(string args[]) { MyFlow mflow = new MyFlow(); mflow.go(); 7

public void go() { f = new Frame( Flow Layout ); f.setlayout(new FlowLayout()); button1 = new Button( Ok ); button2 = new Button( Open ); button3 = new Button( Close ); f.add(button1); f.add(button2); f.add(button3); f.setsize(100, 100); f.setvisible(true); 7.7.2. Border Layout Manager Ο BorderLayout manager παρέχει ένα πιο σύνθετο σχήμα για την τοποθέτηση των components σας μέσα σε ένα panel ή window. Το BorderLayout περιέχει πέντε διακριτές περιοχές. North, South, East, West και Center. Η North καταλαμβάνει την κορυφή του panel, η East καταλαμβάνει τη δεξιά πλευρά κ.ο.κ. Η περιοχή Center αναπαριστά ό,τι έχει απομείνει από τη στιγμή που έχουν γεμίσει οι North, South, East, και West. Ο BorderLayout manager είναι ο εξ ορισμού layout manager για Dialogs και Frames. Στη συνέχεια παρουσιάζεται ο κώδικας που δίνει το ακόλουθο αποτέλεσμα. μετά την αλλαγή μεγέθους Σημείωση Οι σχετικές θέσεις των buttons δεν αλλάζουν καθώς αλλάζει το μέγεθος του παραθύρου, αλλά αλλάζουν τα μεγέθη των buttons. Ο ακόλουθος κώδικας είναι τροποποίηση του προηγούμενου παραδείγματος και παρουσιάζει τη συμπεριφορά του border layout manager. public class ExGui2 { private Frame f; 8

private Button bn, bs, bw, be, bc; public static void main(string args[]) { ExGui2 that = new ExGui2(); that.go(); public void go() { f = new Frame( Border Layout ); bn = new Button( B1 ); bs = new Button( B2 ); bw = new Button( B3 ); be = new Button( B4 ); bc = new Button( B5 ); f.add(bn, North ); f.add(bs, South ); f.add(bw, West ); f.add(be, East ); f.add(bc, Center ); f.setsize(200, 200); f.setvisible(true); Τα components πρέπει να προστίθενται στις ονοματισμένες περιοχές στο border layout manager, διαφορετικά δεν είναι ορατά. Προσέξτε να είναι ορθή η ορθογραφία των ονομάτων καθώς και τα κεφαλαία-πεζά. Μπορείτε να χρησιμοποιήσετε το border layout manager για να παράγετε layouts με στοιχεία που πρέπει να κάνουν stretch προς μία κατεύθυνση ή την άλλη, ή και τις δύο, όταν γίνεται αλλαγή μεγέθους. Αν αφήσετε μία περιοχή ενός border layout αχρησιμοποίητη συμπεριφέρεται σαν το προτιμητέο μέγεθος να ήταν μηδέν επί μηδέν. Συνεπώς η κεντρική περιοχή συνεχίζει να εμφανίζεται ως φόντο ακόμα και αν δεν περιέχει components, αλλά οι τέσσερις περιφερειακές περιοχές θα μειωθούν σε μία γραμμή μηδενικού πάχους και θα εξαφανιστούν. Πρέπει να προσθέτετε ένα μόνο component σε κάθε μία των πέντε περιοχών του border layout manager. Αν προσπαθήσετε να προσθέσετε περισσότερα από ένα, μόνο ένα από αυτά θα είναι ορατό. Θα δούμε στη συνέχεια πώς μπορείτε να χρησιμοποιήσετε ενδιάμεσους containers για να μπορέσετε να έχετε περισσότερα από ένα component στο χώρο μίας μόνο περιοχής ενός border layout manager. 9

7.7.3. Grid Layout Manager Ο grid layout manager παρέχει ευελιξία στην τοποθέτηση components. Δημιουργείτε το manager δίνοντας το πλήθος των γραμμών και των στηλών. Τα components θα γεμίσουν τα κελιά που ορίζει ο manager. Για παράδειγμα ένα grid layout με τρεις γραμμές και δύο στήλες, που δημιουργείται με την εντολή GridLayout(3,2) θα δημιουργήσει έξι κελιά όπως φαίνεται πιο κάτω: μετά την αλλαγή μεγέθους Όπως και με το BorderLayout manager, η σχετική θέση των components δεν αλλάζει όταν η περιοχή αλλάζει μέγεθος. Αλλάζουν μόνο τα μεγέθη των components. Παρατηρήστε ότι το πλάτος όλων των κελιών είναι το ίδιο και καθορίζεται ως η απλή διαίρεση του διαθέσιμου πλάτους δια το πλήθος των κελιών. Με παρόμοιο τρόπο το ύψος όλων των κελιών καθορίζεται απλά από το διαθέσιμο ύψος διαιρεμένο δια του πλήθους των γραμμών. Η σειρά με την οποία τοποθετούνται τα components στο grid καθορίζει το κελί που θα καταλάβουν. Οι γραμμές των κελιών γεμίζονται από τα αριστερά στα δεξιά, όπως το κείμενο, και η «σελίδα» γεμίζει με γραμμές από πάνω προς τα κάτω. Στη συνέχεια παρουσιάζεται ο κώδικας για το πιο πάνω παράδειγμα: public class GridEx { private Frame f; private Button b1, b2, b3, b4, b5, b6; public static void main(string args[]) { GridEx grid = new GridEx(); grid.go(); public void go() { f = new Frame( Grid Example ); f.setlayout(new GridLayout(3, 2)); b1 = new Button( 1 ); b2 = new Button( 2 ); b3 = new Button( 3 ); b4 = new Button( 4 ); b5 = new Button( 5 ); b6 = new Button( 6 ); 10

f.add(b1); f.add(b2); f.add(b3); f.add(b4); f.add(b5); f.add(b6); f.pack(); f.setvisible(true); 7.7.4. CardLayout Ο CardLayout manager σας επιτρέπει να αντιμετωπίζετε τη διεπαφή σαν μία σειρά από κάρτες, μόνο κάθε μία από τις οποίες είναι ορατή σε κάθε χρονική στιγμή. Για παράδειγμα, παρουσιάζεται ένα Frame με 5 κάρτες. Ένα κλικ με το ποντίκι στο Panel του Frame αλλάζει στην επόμενη κάρτα. πατώντας κλικ έχουμε Τμήμα του απαιτούμενου κώδικα παρουσιάζεται στη συνέχεια: import java.awt.event.*; public class CardTest implements MouseListener { Panel p1, p2, p3, p4, p5; Label l1, l2, l3, l4, l5; // Declare a CardLayout object // so I can call its methods CardLayout mycard; Frame f; public static void main(string args[]) { CardTest ct = new CardTest(); ct.init(); public void init() { f = new Frame( Card Test ); 11

mycard = new CardLayout(); f.setlayout(mycard); // create the panels that I want // to use as cards p1 = new Panel(); p2 = new Panel(); p3 = new Panel(); p4 = new Panel(); p5 = new Panel(); // create a label to attach to each panel, and // change the color of each panel, so they are // easily distinguishable l1 = new Label( This is the first Panel ); p1.setbackground(color.yellow); l2 = new Label( This is the second Panel ); p2.setbackground(color.green); l3 = new Label( This is the third Panel ); p3.setbackground(color.magenta); l4 = new Label( This is the fourth Panel ); p4.setbackground(color.white); l5 = new Label( This is the fifth Panel ); p5.setbackground(color.cyan); // Set up the event handling here... // It is missing we will see it later // add each panel to my applet s CardLayout f.add(p1, First ); f.add(p2, Second ); f.add(p3, Third ); f.add(p4, Fourth ); f.add(p5, Fifth ); // display the first panel mycard.show(f, First ); f.setsize(200, 200); f.show(); 12

7.7.5. Άλλοι Layout Managers Εκτός από τους flow, border, grid και card layout managers, το βασικό java awt παρέχει επίσης το GridBagLayout. Ο grid bag layout manager παρέχει σύνθετες διευκολύνσεις για το layout, το οποίο βασίζεται σε ένα grid (πλέγμα), αλλά επιτρέπει σε ένα component να λάβει το μέγεθος που προτιμά μέσα στο κελί, αντί να γεμίζει ολόκληρο το κελί. Επίσης στο grid bag layout επιτρέπεται σε ένα component να καταλαμβάνει περισσότερα από ένα κελιά. 7.8 Containers To AWT παρέχει αρκετά containers. Το κεφάλαιο αυτό παρουσιάζει τα δύο πιο σημαντικά. 7.8.1. Frames Έχουμε ήδη δει το frame σε χρήση στα προηγούμενα παραδείγματα. Αναπαριστά ένα παράθυρο στο «υψηλότερο επίπεδο» με τίτλο, όρια και γωνίες από τις οποίες μπορεί να αλλάξει μέγεθος σύμφωνα με τις συμβάσεις της τοπικής πλατφόρμας. Αν δε χρησιμοποιήσετε ρητά μία κλήση στη μέθοδο setlayout(), ένα πλαίσιο έχει ως εξ ορισμό layout manager, τον border. Οι περισσότερες εφαρμογές θα χρησιμοποιήσουν τουλάχιστον ένα frame ως το βασικό σημείο των περισσότερων GUI τους, αλλά είναι απόλυτα δυνατό να χρησιμοποιηθούν πολλαπλά frames σε ένα μόνο κομμάτι κώδικα. 7.8.2. Panels Τα panels είναι contains και σχεδόν τίποτε άλλο. Δεν έχουν δική τους παρουσίαση και δεν μπορούν να χρησιμοποιηθούν ως αυτοδύναμα παράθυρα. Εξ ορισμού ένα panel σχετίζεται με το flow layout manager αλλά αυτό μπορεί να αλλάξει με χρήση και πάλι της μεθόδου setlayout(). Τα panels δημιουργούνται και προστίθενται σε άλλους containers με τον ίδιο τρόπο όπως τα components σαν τα buttons. Όμως, όπου προστίθεται ένα panel σε ένα container, υπάρχουν δύο σημαντικά πράγματα που μπορείτε να κάνετε στο προκύπτον panel και αυτά είναι: Να του δώσετε ένα δικό του layout manager, επιβάλλοντας διαφορετική προσέγγιση layout στην περιοχή που παρουσιάζεται. Να προσθέσετε components στο panel, ακόμα και αν, για παράδειγμα, το ίδιο το panel αποτελεί το μοναδικό component που μπορεί να προστεθεί σωστά σε μία περιοχή border layout. 7.8.3. Δημιουργία panels και σύνθετων layouts Τα panels δημιουργούνται με χρήση της μεθόδου δημιουργίας Panel(). Από τη στιγμή που έχει δημιουργηθεί ένα αντικείμενο Panel πρέπει να προστεθεί σε έναν άλλο container. Αυτό γίνεται όπως και πριν με χρήση της μεθόδου add() του container. 13

Το πιο κάτω πρόγραμμα χρησιμοποιεί ένα panel για να επιτρέψει σε δύο buttons να τοποθετηθούν στην περιοχή North ενός border layout. Αυτού του είδους η ένθεση είναι ουσιώδης σε σύνθετα layouts. Σημειώστε ότι το panel αντιμετωπίζεται όπως οποιοδήποτε άλλο component σε ό,τι αφορά το ίδιο το frame. public class ExGui3 { private Frame f; private Panel p; private Button bw, bc; private Button bfile, bhelp; public static void main(string args[]) { ExGui3 gui = new ExGui3(); gui.go(); public void go() { f = new Frame( Gui Example 3 ); bw = new Button( West ); bc = new Button( Work space region ); f.add(bw, West ); f.add(bc, Center ); p = new Panel(); f.add(p, North ); bfile = new Button( File ); bhelp = new Button( Help ); p.add(bfile); p.add(bhelp); f.pack(); f.setvisible(true); Μετά την εκτέλεση του παραδείγματος, το αποτέλεσμα στην οθόνη είναι κάπως έτσι: Αν το παράθυρο αλλάξει μέγεθος θα φαίνεται κάπως έτσι: 14

Παρατηρήστε ότι η περιοχή North του border layout στην πράξη πλέον περιέχει δύο buttons. Στην πράξη περιέχει απλά μόνο ένα panel, αλλά το panel περιέχει δύο buttons. Το μέγεθος και η θέση του Panel καθορίζεται από το border layout, το επιθυμητό μέγεθος του pane καθορίζεται από το επιθυμητό μέγεθος των components που βρίσκονται μέσα στο panel. Το μέγεθος και η θέση των buttons στο panel καθορίζονται από το flow layout που σχετίζεται εξ ορισμού με το panel. 7.9 Εργασίες 7.9.1. Επίπεδο 1: Δημιουργείστε το GUI Δημιουργείστε ένα GUI για μία απλή αριθμομηχανή, περίπου όπως η επόμενη: 7.9.2. Επίπεδο 3: Δημιουργήστε το GUI για λογαριασμούς Δημιουργείστε ένα GUI που θα παρέχει την διεπαφή με τον τελικό χρήστη για την υπηρεσία ανοίγματος λογαριασμού που περιγράψαμε στο κεφάλαιο 6. Μπορεί να χρειαστείτε ορισμένα components που δεν έχουμε περιγράψει ακόμα (θα περιγραφούν στη συνέχεια). 15