ΑΛΛΗΛΕΠΙ ΡΑΣΗ ΑΝΘΡΩΠΟΥ ΜΗΧΑΝΗΣ ΕΙΣΑΓΩΓΗ Προγραµµατισµός µε Γραφικά (Εισαγωγή στη JavaSwing και γνωριµία µε το εργαλείο NetBeans) Εξαιρετικό παράδειγµα που συνδυάζει όλες τις έννοιες του αντικειµενοστρεφή προγραµµατισµού Όλες οι γλώσσες προγραµµατισµού (π.χ., JAVA:swing-awt, C#:System.Drawing, Visual Basic: System.Drawing, C++:OpenGL) περιέχουν βιβλιοθήκες για την δηµιουργία γραφικών διαπροσωπειών που εξελίσσονται ραγδαία µε κάθε ανανέωση του API! Υποστηρίζουν προγραµµατισµό γραφικών για διαπροσωπείες υπολογιστή και διαδικτυακές εφαρµογές (π.χ., JAVA:applets, servlets, jsp) Βιβλιοθήκες Γραφικών (javax.swing vs. java.awt ) JTextField JΒutton JLabel Θα χρησιµοποιήσουµε αντικείµενα µε όνοµα J, π.χ., JLabel Αυτά τα αντικείµενα ανήκουν στην βιβλιοθήκη javax.swing Γιατί δεν ονοµάστηκε απλά Label η κλάση; Επειδή ήδη υπάρχει η κλάση Label στην βιβλιοθήκη java.awt Η βιβλιοθήκη java.awt (Abstract Windows Toolkit) ήταν η πρώτη βιβλιοθήκη που δηµιουργήθηκε για γραφικά στην JAVA Μέσα στo Frame υπάρχουν 1 TextField πεδίο που γράφουµε κείµενο 1 Button κουµπί για εκτέλεση εντολής 2 Label ετικέτες εµφάνιση κειµένου Παράδειγµα Γραφικών στην JAVA // Create a text field with text "Type Name Here" JTextField temptextfield=new JTextField("0"); // Create a button with text OK JButton convertbutton = new JButton("Convert"); // Create a label with text "Celsius " JLabel celsiuslabel = new JLabel("Celsius "); Τα αντικείµενα της AWT συνδέονται αυτόµατα µε τα συστατικά της πλατφόρµας στην οποία τρέχει Πρόβληµα: Tα προβλήµατα της πλατφόρµας ανάγονται στο πρόγραµµα Με την έκδοση της JAVA 2 ενσωµατώθηκε η βιβλιοθήκη Swing η οποία επιτρέπει τον σχεδιασµό αντικειµένων απευθείας µε java κώδικα (εκτός από java.awt.window or java.awt.panel που πρέπει να σχεδιαστούν από την πλατφόρµα/λειτουργικό) Πλεονέκτηµα 1: µεγάλη ανεξαρτησία από την πλατφόρµα Πλεονέκτηµα 2: χρήση πιο λίγων πόρων από την πλατφόρµα Τα πιο πολλά αντικείµενα της Swing αναφέρονται σαν lightweight (ελαφρά) components (συστατικά), ενώ της AWT σαν heavyweight (βαριά) Tα πακέτα που αρχίζουν µε το πρόθεµα javax.swing είναι ευέλικτα και ισχυρά εργαλεία ανάπτυξης GUI (Graphical User Interface ) Κάθε γραφική διεπαφή τύπου Swing πρέπει να έχει τουλάχιστον ένα top-level Swing container (υποδοχέα), που παρέχει την απαραίτητη υποστήριξη που χρειάζονται τα Swing components για την εµφάνισή τους και την διαχείριση των γεγονότων που αυτά παράγουν. Υπάρχουν τρία top-level Swing containers: το JFrame, το JDialog, και (για applets) το JApplet. VK -14/10/2016 Σελίς 1
https://docs.oracle.com/javase/tutorial/uiswing/learn/index.html Μετατροπή βαθµών Κελσίου σε Φαρενάιτ ( o C σε o F): Τ F=32 o +1,8 Τ C όπου T C µε θερµοκρασία σε βαθµούς Κελσίου και Τ F θερµοκρασία σε βαθµούς Φαρενάϊτ Open NetBeans IDE.. για ηµιουργία Project επιλέγουµε File / New Project Java -> Java Application Στο επόµενο βήµα και θα δώσουµε όνοµα Project : Mε κλικ στο Next > και Project Name ίνω όνοµα στο project (ότι θέλουµε) π.χ. CelciusConverterProject Καθορίζουµε σε ποιο σηµείο/location θέλουµε να αποθηκευτεί : Browse Ξετσεκάρω το "Create Main Class" checkbox (αν είναι τσεκαρισµένο). Μπορώ να την δηµιουργήσω αργότερα. Αν όλα ΟΚ πατάω το "Finish" button VK -14/10/2016 Σελίς 2
Add a JFrame Form : ηµιουργία µιας φόρµας Πλαίσιο µε όνοµα CelciusConverterGUI Το frame είναι ένα είδος παραθύρου, στο οποίο δεν περιέχεται σε άλλο παράθυρο Το frame είναι container: µπορεί να περιέχει άλλα αντικείµενα εξί κλικ στο CelsiusConverterProject name και επιλέγουµε New -> JFrame Form (Το πλαίσιο αυτό θα είναι η Swing main class της εφαρµογής) ώστε όνοµα κλάσης πχ CelsiusConverterGUI και πχ learn για όνοµα package. Αν όλα ΟΚ πατάω το "Finish" button public class CelsiusConverterGUI extends javax.swing.jframe { // Ο KΩ ΙΚΑΣ, που δηµιουργείται αυτόµατα //δοµητής public CelsiusConverterGUI () { initcomponents(); private void initcomponents() { //αρχικοποιήσεις public static void main(string args[]) { java.awt.eventqueue.invokelater(new Runnable() { public void run() { new CelsiusConverterGUI().setVisible(true); ); // Variables declaration - do not modify Υπάρχουν κοµµάτια κώδικα που δεν µπορούν να αλλαχθούν (uneditable blue sections ) γνωστά ως «guarded blocks», που θα τις λέµε ΓΚΡΙ ΖΩΝΕΣ. Το frame CelsiusConverterGUI Ετσι, θα εµφανιστεί µια designtime, graphical view του πλαισίου CelsiusConverterGUI. Πάνω σε αυτό το πλαίσιο θα σχεδιαστούν µε drag /drop, και θα διαχειριστούν τα διάφορα Swing components που θα προσθέσουµε. εξιά φαίνονται -η παλέτα και -οι ιδιότητες (Properties) VK -14/10/2016 Σελίς 3
Η Περιοχή Σχεδίασης - Design Area Εχουµε 2 views για το Πλαίσιο : design view (σχέδιο) και source view (κώδικας) Στον source κώδικα βλέπουµε ότι το IDE δηµιούργησε την private method «initcomponents», που αρχικοποιεί τα διάφορα components του GUI. Θέτει το "exit on close", εκτελεί layout-specific εργασίες και τέλος πακετάρει όλα τα components µαζί. Η design view είναι η default. Μπορούµε να αλλάζουµε views όποτε θέλουµε από την σχεδίαση στον κώδικα πχ µε τα tab ή µε View/Editors/Source ή µε δεξί κλίκ στο αρχείο και edit. Η Παλέτα- Palette Η Παλέτα περιέχει όλα τα components του Swing API έτσι π.χ. JLabel είναι µια text label, JList είναι µια drop-down list κτλ. Θα προσθέσουµε µέσα στο πλαίσιο, δυο JLabel (ετικέτες µε κείµενα Celsius και Fahrenheit ), ένα JTextField (όπου ο χρήστης θα βάζει την θερµοκρασία), και ένα JButton (για µετατροπή της θερµοκρασίας από Celsius σε Fahrenheit.) // Variables declaration - do not modify private javax.swing.jlabel celsiuslabel; private javax.swing.jlabel fahrenheitlabel; private javax.swing.jbutton convertbutton; private javax.swing.jtextfield temptextfield; Ιδιότητες - Property Editor Ο Property Editor επιτρέπει να ορίζονται οι ιδιότητες κάθε component. Έτσι για το JFrame θα µπορούσαµε να ορίσουµε background color, foreground color, font, κτλ : VK -14/10/2016 Σελίς 4
Θέτουµε Title στο πλαίσιο : "Celsius Converter (Θα φανεί µόνο στο run time) Κατόπιν επιλέγουµε από την Παλέτα τα τέσσερα components του πλαισίου και ένα ένα τα σύρουµε πάνω στο πλαίσιο στα σηµεία που θέλουµε. Προσθέτοντας JTextField JLabel JButton Προσθέτουµε και άλλο ένα JLabel Με δεξί κλικ σε κάθε στοιχείο και Properties/text αλλάζουµε τα κείµενα: Κείµενο: κενό Ετικέτες:Celsius και Fahrenheit. Κουµπί: Convert ιορθώνουµε τα µεγέθη τους (ώστε τα στοιχεία να ευθυγραµµίζονται κτλ) Στις 4 µεταβλητές αν θέλουµε, δίνουµε κατάλληλα ονόµατα: Inspector επιθεώρηση Ο Inspector δίνει µια γραφική αναπαράσταση των components (σε νεότερες εκδόσεις είναι ενοποιηµένος µε τον Νavigator). Σε design view θα έχω: Νavigator/Inspector µε τις 4 µεταβλητές. ίνουµε κατάλληλα ονόµατα (δεξί κλικ refractor/rename) : ήλωση στους Event Listeners Όταν ένας τελικός χρήστης αλληλεπιδρά με ένα στοιχείο του Swing GUI (όπως κλικ στο κουμπί Μετατροπή), το στοιχείο αυτό θα δημιουργήσει ένα ιδιαίτερο είδος αντικειμένου - που ονομάζεται αντικείμενο γεγονότος/event - που στη συνέχεια θα μεταδοθεί σε όλα τα άλλα αντικείμενα που έχουν δηλωθεί προηγουμένως ως ακροατές για αυτό το γεγονός. Το NetBeans IDE για τα events, χρησιμοποιεί εξαιρετικά απλό μηχανισμό: VK -14/10/2016 Σελίς 5
Επιλογή στο κουµπί Convert. εξί-click στο κουµπί και επιλογή Events -> Action -> ActionPerformed Αυτό θα δηµιουργήσει το κατάλληλο σώµα κώδικα, που θα συµπληρώσουµε µε την λειτουργικότητα: //Parse degrees Celsius as a double and convert to Fahrenheit. int tempfahr =(int) ( 32 + 1.8 *( Double.parseDouble (temptextfield.gettext()))); Και την υπολογισθείσα τιµή θα την εµφανίσουµε στην 2 η ετικέτα fahrenheitlabel.settext (tempfahr + " Fahrenheit"); Τελικό βήµα: Tρέξιµο της Application επιλέγοντας Run -> Run Project (F6) VK -14/10/2016 Σελίς 6