Αντικειμενοστραφής Προγραμματισμός I (5 ο εξ) Διάλεξη #9 η : Μικρο εφαρμογές (Applets), Γραφικά Γαβαλάς Δαμιανός dgavalas@aegean.gr Μικροεφαρμογές (Applets) Γενικά στην πληροφορική, ένα applet είναι μια μικρή εφαρμογή που εκτελεί μια πολύ συγκεκριμένη λειτουργία Συχνά χρησιμοποιείται στο πλαίσιο ενός ςμεγαλύτερου προγράμματος, ίσως ως plug in Παραδείγματα: Flash movie players, Windows Media Player applets που αναπαράγουν αρχεία video στον Internet Explorer Ο όρος Applet αναφέρεται επίσης στα Java applets, δηλαδή σε προγράμματα που είναι γραμμένα στην γλώσσα προγραμματισμού Java και περιλαμβάνονται σε μια ιστοσελίδα Τα applets, σε συνδυασμό με το χαρακτηριστικό της ανεξαρτησία από την πλατφόρμα εκτέλεσης (platform independence) ήταν που κατέστησαν τη Java πολύ δημοφιλή 1
Java applets Τα Java Applets παρέχουν web εφαρμογές με αλληλεπιδραστικά χαρακτηριστικά τα οποία δεν μπορεί να δώσει η (X)HTML Καθώς το Java bytecode είναι ανεξάρτητο πλατφόρμας, τα Java applets μπορούν να εκτελεστούν από περιηγητής (browsers) που τρέχουν σε πολλές πλατφόρμες (π.χ. Windows, Unix, Mac OS και Linux) Όταν ένα Java «συμβατός»web browser επεξεργάζεται μια σελίδα που περιέχει ένα applet, ο κώδικας του applet μεταφέρεται από τον web διακομιστή στο σύστημα του πελάτη (client) δηλαδή του browser και εκτελείταιαπό τη Java Virtual Machine (JVM) του browser Java applets Πως εκτελούμε/ελέγχουμε την εκτέλεση ενός Java applet; 1. Ανοίγοντας (σε έναν browser) την ιστοσελίδα στην οποία ενσωματώνεται 2. Με έναν ειδικό διερμηνευτή applets (appletviewer) 1. Τον appletviewer που «έρχεται» (αποτελεί μέρος) με το JDK 2. Τον appletviewer που είναι ενσωματωμένος σε ένα περιβάλλον ανάπτυξης (IDE) Java, π.χ. το NetBeans 2
Διαφορές εφαρμογών μικροεφαρμογών Java (applets vs. applications) Οι μικροεφαρμογές (applets) δεν έχουν μέθοδο main() όπως συμβαίνει με τις αυτόνομες Java εφαρμογές (applications) αλλά ένα σύνολο μεθόδων προερχόμενων από την κλάση Applet. Τα applets, λόγω της web φύσης τους, υπακούουν σε ένα σύνολο περιορισμών που δεν ισχύουν για τα Java applications Τα applets υποχρεωτικά κληρονομούν την κλάση java.applet.applet public class MyApplet extends java.applet.applet { Διαδικασία υλοποίησης applets Συγγραφή του πηγαίου κώδικα σε ένα αρχείο με επέκταση.java Με χρήση text editor ή ενός περιβάλλοντος ανάπτυξης όπως το NetBeans Μεταγλώττιση του πηγαίου κώδικα σε bytecode (προκύπτει ένα.class αρχείο) Δημιουργία (X)HTML σελίδας με αναφορά στο παραγόμεν0.class αρχείο Εκτέλεση του applet με άνοιγμα του applet σε έναν browser 3
Περιορισμοί ασφαλείας σε applets Τα applets εκτελούνται «τοπικά», στον Η/Υ του χρήστη μέσω web πρόσβασης σε έναν απομακρυσμένο web διακομιστή από τον οποίο μεταφορτώνεται (download) το applet Για αυτό το λόγο τίθενται αυστηροί περιορισμοί ως προς το τι επιτρέπεται να κάνει ένα applet Διαφορετικά, ένας κακόβουλος προγραμματιστής θα μπορούσε π.χ. να διαγράψει τα αρχεία ενός χρήστη Περιορισμοί ασφαλείας σε applets Ένα applet δεν μπορεί να: Διαβάσει ήγράψει/δημιουργήσει ργή αρχεία στο σύστημα αρχείων του χρήστη (local filesystem) Επικοινωνήσει με άλλη Internet τοποθεσία εκτός αυτής που φιλοξενεί την ιστοσελίδα στην οποία περιλαμβάνεται το applet Εκτελέσει προγράμματα στο σύστημα του χρήστη Φορτώσει προγράμματα αποθηκευμένα στο σύστημα του χρήστη 4
Παραδείγματα applets Ψηφιακό ρολόι (ενημερώνεται κάθε sec) Lake applet (γραφικά εφέ) Παραδείγματα applets Κυλιόμενο κείμενο που κινείται σε «ημιτονοειδή» μορφή Java web games 5
Παραδείγματα applets Προσομοιώσεις που μπορούν να χρησιμοποιηθούν ως online εκπαιδευτικό λογισμικό Δομή applets Μέθοδοι που περιέχει αντί για main(): public void init() { κώδικας που εκτελείται πριν ξεκινήσει public void start() { κώδικας που εκτελείται μετά την αρχικοποίηση ή αν ξεκινήσει πάλι μετά από διακοπή του public void stop() { κώδικας που εκτελείται όταν διακοπεί η εκτέλεσή του public void destroy() { κώδικας που εκτελείται μόλις πριν κλείσουμε τον browser αν (σπανιότατα) επιθυμούμε χειροκίνητα να απελευθερώσουμε δεσμευμένη μνήμη public void paint(graphics g) { εδώ ο κώδικας που τυπώνει / ζωγραφίζει πράγματα στο παράθυρο της μικροεφαρμογής Η ΠΙΟ ΣΗΜΑΝΤΙΚΗ! 6
Ένα πρώτο παράδειγμα applet import java.applet.*; import java.awt.*; public class FirstApplet extends Applet { public void paint(graphics g) { g.drawstring("hello World", 25, 50); Εκτέλεση στον appletviewer του NetBeans Εκτέλεση απευθείας σε browser Ένα πρώτο παράδειγμα applet Σε ένα απλό αρχείο κειμένου γράφουμε τις παρακάτω εντολές HTML και αποθηκεύουμε το αρχείο με προέκταση.html (ή.htm) Κώδικας HTML (ιστοσελίδα) <APPLET CODE= FirstApplet.class" WIDTH=600 HEIGHT=100> </APPLET> Για να «κρεμάσουμε» ρμ μ μια ιστοσελίδα με μικροεφαρμογή ρμ σε ένα διακομιστή πρέπει να αντιγράψουμε σε αυτόν: Την ιστοσελίδα μας (αρχείο.html) Τη μεταγλωττισμένη μικροεφαρμογή μας (αρχείο.class) π.χ. FirstApplet.class 7
Java applets σε ιστοσελίδες Όταν ιστοσελίδες που περιέχουν applets εμφανίζονται σε web browsers, τότε «φορτώνονται» και εκτελούνται και τα applets Τα applets στέλνονται στον web client (browser) με ξεχωριστή HTTP αίτηση/απόκριση Χρησιμοποιούμε τα ειδικά Applet tags που υποστηρίζονται από την (X)HTML (<applet> </applet> Η «έξοδος» του applet εμφανίζεται σε ένα υποσύνολο της περιοχής εμφάνισης πληροφοριών του browser Εκτέλεση applet Παραλλαγές HTML <applet code= FirstApplet.class" width=600 height=100> <align=left vspace=50 hspace=10> </applet> ALIGN: Στοίχιση applet στην ιστοσελίδα VSPACE και HSPACE: Αριθμός pixels που να απέχει το applet καθέτως/οριζοντίως από το κείμενο που μπορεί να την περιβάλλει σε μια ιστοσελίδα Προσοχή! Αν ένα applet ανήκει στο πακέτο mypackage, τότε το applet αποθηκεύεται σε έναν υποφάκελο του φακέλου όπου βρίσκεται η HTML σελίδα και γράφουμε τον HTML κώδικα: <applet code= mypackage\firstapplet.class" width=600 height=100> 8
Διαδικασία εκτέλεσης Applet Web server page.html Web browser HTML κώδικας 1 <HTML> Hello!!! <APPLET code= welcome.class"> </APPLET> An applet is running above! </BODY> </HTML> welcome.class Κενός χώρος (εδώ θα εμφανιστεί το Αpplet) HTML κώδικας 2 $%@#$$#@bgdb 234#$%#%^#^& 4$%#%pgb$f#@$ 23%^^565^&&m(!@#$6432 Είσοδος χρήστη σε Java Applets: Παράμετροι Αρχικές τιμές που περνάμε στο applet Απ αυτές εξαρτώνται τα αποτελέσματα που θα πάρουμε Τρέχω το ίδιο πρόγραμμα, κάθε φορά με διαφορετικές ρυθμίσεις, άρα και αποτελέσματα Επανάχρηση προγραμμάτων (ο χρήστης του applet δεν είναι απαραίτητα ο προγραμματιστής, απλά έχει το *.class αρχείο και γνωρίζει με ποιο τρόπο χρησιμοποιούνται οι παράμετροι 9
Παράμετροι: Πως δηλώνονται & πως ανακτούνται οι τιμές τους Εμφανίζονται ανάμεσα στα <APPLET> και </APPLET> tags Έχουν δύο ιδιότητες: NAME και VALUE Παραδείγματα: <PARAM NAME="speed" VALUE= "100"> <PARAM NAME="duration" VALUE="long"> Αν, για παράδειγμα, το applet ορίζεται ως εξής: <applet code="clock.class" width=50 height=50> <param name= Color value="blue"> </applet> τότε η κλήση της μεθόδου: String s = getparameter("color") θα αποθηκεύσει στη μεταβλητή s την τιμή "blue". Το όνομα της παραμέτρου ΔΕΝ είναι case sensitive. Παράδειγμα παραμετροποίησης <HTML> <HEAD> <TITLE>Using the Applet Tag</TITLE> </HEAD> <BODY> <H1>An Applet that Displays Text at a Designated Location</H1> <APPLET CODE="SampleApplet.class" HEIGHT=300 WIDTH=300> <PARAM NAME="text" VALUE="Applets are fun!"> <PARAM NAME="x" VALUE="50"> <PARAM NAME="y" VALUE="50"> </APPLET> </BODY> </HTML> 10
Παράδειγμα παραμετροποίησης (συνέχεια) public class SampleApplet extends java.applet.applet { String text = "error"; int x = 0; int y = 20; public void init() { text = getparameter("text"); try { x = Integer.parseInt(getParameter("x")); y = Integer.parseInt(getParameter("y")); catch(numberformatexception ex){ public void paint(java.awt.graphics g){ g.drawstring(text,x,y); (graphics) 11
Γραφικά Τα γραφικά μπορούν να προσαρτηθούν σε προγράμματα που υποστηρίζουν γραφικό περιβάλλον εργασίας: Σε applets Σε παραθυρικές εφαρμογές (application GUIs) ΟΧΙ σε εφαρμογές γραμμής εντολών Ο πρωταρχικός και απλούστερος τρόπος για εισαγωγή γραφικών γίνεται με χρήση των μεθόδων της κλάσης java.awt.graphics awt και γενικότερα με τις κλάσεις του πακέτου java.awt.* Παρακάτω θα μελετήσουμε τα γραφικά μέσα από applets Παράδειγμα χρήσης γραφικών import java.applet.*; import java.awt.*; public class Map extends Applet { public void paint(graphics screen) { // Ορισμός Γραμματοσειράς (Τύπος, Στύλ, Μέγεθος) Font f = new Font("TimesRoman", Font.BOLD, 36); screen.setfont(f); /* Ορισμός χρώματος της τρέχουσας πένας που ζωγραφίζουμε, χρησιμοποιούμε το έτοιμο χρώμα Color.red (ιδιότητα red της κλάσης Color)*/ screen.setcolor(color.red); /* Ζωγραφίζεται το String Florida στη θέση (185, 75) του καμβά της μικροεφαρμογής μας */ screen.drawstring("florida", 185, 75); /* Ορισμός χρώματος της τρέχουσας πένας που ζωγραφίζουμε, χρησιμοποιούμε χρώμα της επιλογής μας με (Red, Green, Blue) */ Color c1 = new Color(255, 204, 102); screen.setcolor(c1); 12
Παράδειγμα χρήσης γραφικών Αντίστοιχα, μέσα στην paint() θα μπορούσαμε να καλέσουμε κι άλλες μεθόδους ζωγραφικής όπως: Ορισμός χρώματος καμβά (υπόβαθρο) screen.setbackground(color.white); g ( Ζωγραφική γραμμής από (x1,y1) σε (x2,y2) screen.drawline(x1,y1,x2,y2); Ζωγραφική ορθογωνίου screen.drawrect(x1,y1,width,height); Ζωγραφική γεμάτου ορθογωνίου screen.fillrect(x1,y1,width,height); Ζωγραφική στρογγυλεμένου ορθογωνίου screen.drawroundrect(x1,y1,width,height); Ζωγραφική ελλείψεων screen.drawoval(x1,y1,width,height); Ζωγραφική γεμάτων ελλείψεων screen.filloval(x1,y1,width,height); Παράδειγμα χρήσης γραφικών Αντίστοιχα, μέσα στην paint() θα μπορούσαμε να καλέσουμε κι άλλες μεθόδους ζωγραφικής όπως: Ζωγραφική τόξων (κομμάτι έλλειψης) screen.drawarc(x1,y1,width,height,start_angle,arcs_degrees); Ζωγραφική γεμάτων τόξων screen.drawarc(x1,y1,width,height,start_angle,arcs_degrees); Πολύγωνα δίδοντας τα σημεία των γωνιών του σε ξεχωριστούς πίνακες int x[] = { 10, 20, 30, 40; int y[] = { 15, 25, 35, 45; int points = x.length; Polygon p = new p(x, y, points); 13
Παράδειγμα χρήσης γραφικών Παράδειγμα: screen.setcolor(color.red); screen.fillrect(10, 30, 300, 150); Ολοκληρωμένο παράδειγμα import java.applet.*; import java.awt.*; public class cassmap extends etedsapplet { public void paint(graphics screen) { screen.drawstring("florida", 185, 75); screen.drawline(185,80,222,80); screen.drawrect(2, 2, 345, 345); screen.drawroundrect(182,61,43,24,10,8); int x[] = { 10, 234, 253, 261, 344, 336, 295, 259, 205, 211, 195, 191, 120, 94, 81, 12, 10 ; int y[] = { 12, 15, 25, 71, 209, 278, 310, 274, 188, 171, 174, 118, 56, 68, 49, 37, 12 ; int pts = x.length; Polygon poly = new Polygon(x, y, pts); screen.drawpolygon(poly); 14
Ολοκληρωμένο παράδειγμα screen.filloval(235,140,15,15); screen.filloval(225,130,15,15); screen.filloval(245,130,15,15);, 5); for (int ax = 50; ax < 150; ax += 10) for (int ay = 120; ay < 320 ; ay += 10) screen.drawarc(ax, ay, 10, 10, 0, 180); Ασκήσεις για το σπίτι 1. Δημιουργήστε ένα applet που όταν εκτελείται θα «ζωγραφίζει» τα γεωμετρικά σχήματα της διπλανής εικόνας 2. Δημιουργήστε ένα applet που όταν εκτελείται θα παρουσιάζει την τρέχουσα ώρα σε «αναλογική» και ψηφιακή μορφή 15
Ενημέρωση του παραθύρου του applet (Repainting) Ένα applet γράφει στο παράθυρό του μόνο όταν καλείται η μέθοδος paint() από το AWT (δηλαδή από το λειτουργικό σύστημα. Πως μπορεί το applet μόνο του να ενημερώσει το παράθυρό του όταν η πληροφορία αλλάζει; Π.χ. όταν εμφανίζει ένα κυλιόμενο κείμενο, ποιο μηχανισμό έχει το applet για να ενημερώνει το παράθυρο κάθε φορά που μετακινείται το παράθυρο (δυστυχώς δεν μπορούμε νε έχουμε ένα βρόγχο μέσα στο applet Ο μηχανισμός παρέχεται από τη μέθοδο repaint() που καλείται όποτε το applet χρειάζεται να ενημερώσει την πληροφορία που εμφανίζεται στο παράθυρό του Δηλαδή γράφουμε repaint() και εκτελείται η paint() Ενημέρωση του παραθύρου του applet (Repainting) // Αυτή η μέθοδος εκτελείται όταν γίνει ένα click private void formmouseclicked (java.awt.event.mouseevent evt) { x = evt.getx(); // κρατάμε το (x,y) του τελευταίου click y = evt.gety(); repaint(); // ξανα ζωγραφίζουμε το παράθυρο int x= 1,y= 1; public void paint(graphics screen) { screen.setcolor(color.black); // ζωγραφίζει έναν ακόμα κύκλο if (x>=0) screen.filloval(x, y, 10, 10); 16
Άσκηση για το σπίτι Προγραμματίστε ένα applet που χρησιμοποιείται για ελεύθερη ζωγραφική με το mouse Κοιτάξτε στη σελίδα: http://www.dgp.toronto.edu/~mjmcguff/learn/java/08 painting/ Άσκηση για το σπίτι Δημιουργήστε ένα applet που να εμφανίζει ένα κυλιόμενο (από δεξιά προς τα αριστερά κείμενο) π.χ. δείτε τη σελίδα: http://www.ericharshbarger.org/cgibin/j.cgi?scrollingtext/index.html Θα σας φανεί χρήσιμη η κλάση FontMetrics που δίνει το πλάτος (stringwidth) μιας συμβολοσειράς panel getheight() stringascent stringwidth Welcome to Java getwidth() 17
Άσκηση για το σπίτι public void init() { Timer timer = new Timer(20, new TimerListener()); timer.start(); private class TimerListener implements ActionListener { public void actionperformed(actionevent e) {// αυτή εκτελείται κάθε 20 msec repaint(); // repaint the applet public void paint(graphics g) { g.clearrect(0, 0, this.getsize().width, this.getsize().height); //Καθάρισε το applet Font f = new Font("Times New Roman", Font.BOLD, 36); g.setfont(f); String msg = "Scrolling text"; // το κείμενο που θα εμφανιστεί java.awt.fontmetrics fm = g.getfontmetrics(); g.drawstring(msg, x, y); // μετακίνηση του κειμένου κατά ένα pixel αριστερά if (x + fm.stringwidth(msg) < 0) x = this.getsize().width; // ξανά εμφάνιση δεξιά Προχωρημένα Γραφικά Πιο ωραία γραφική σχεδίαση μπορεί να επιτευχθεί με τις κλάσεις Java2D Περιλαμβάνονται: Ειδικά μοτίβα σχεδίασης Πένες διαφορετικού πλάτους και στύλ Εξομάλυνση των πλευρών των σχεδιαζομένων σχημάτων (anti aliasing) Προσοχή! Τα ορίσματα των σχημάτων π.χ. Συντεταγμένες ορίζονται στη Java2D με ακρίβεια float ή double π.χ. Ellipse2D.Float(x1,y1,width,height); 18
Χρήση των Κλάσεων Java2D Πρόβλημα: Η paint(graphics p screen) λαμβάνει ως όρισμα το αντικείμενο screen της κλάσης Graphics Εμείς για να σχεδιάσουμε με τις κλάσεις Java2D πρέπει να χρησιμοποιήσουμε την κλάση Graphics2D αντί για τη Graphics Γι αυτό χρησιμοποιούμε μετατροπή cast: Graphics2D screen2d = (Graphics2D)screen; Χρήση των Κλάσεων Java2D: Παράδειγμα import java.awt.*; public class Map2D extends java.applet.applet { public void paint(graphics screen) { Graphics2D screen2d = (Graphics2D)screen; setbackground(color.blue); // Draw waves screen2d.setcolor(color.white); /*Ορισμός της τρέχουσας πένας μέσω της κλάσης BasicStroke η οποία λαμβάνει ως ορίσματα τα εξής: floatπλάτος γραμμής π.χ. 2F int τελείωμα γραμμής π.χ. CAP_BUTT int στύλ ενώματος δύο ευθυγράμμων τμημάτων π.χ. JOIN_ROUND */ BasicStroke pen = new BasicStroke(2F, BasicStroke.CAP_BUTT, BasicStroke.JOIN_ROUND); screen2d.setstroke(pen); 19
Χρήση των Κλάσεων Java2D: Παράδειγμα // Ζωγραφική έλλειψης με ακρίβεια float // Η Ellipse2D ανήκει στο πακέτο java.awt.geom.* Ellipse2d.Float ee = new Ellipse2D.Float(113F, 25F, 5, 22F, 40F); // Ζωγραφική γεμάτης έλλειψης screen2d.fill(ee); // Ζωγραφική άδειας έλλειψης screen2d.draw(ee); Άνοιγμα Εικόνας από Αρχείο Άνοιγμα εικόνας.gif ή.jpg σε applets Mέθοδος Κατασκευάζουμε ένα applet Διαβάζουμε την εικόνα με τη μέθοδο getimage() της κλάσης Applet και αποθηκεύεται ως αντικείμενο Image Εμφανίζουμε το αντικείμενο Image με τη μέθοδο drawimage() της κλάσης Graphics 20
Άνοιγμα Εικόνας από Αρχείο Η μέθοδος getimage() Image i= getimage(μονοπάτι_στο_δίσκο, όνομα_αρχείου_εικόνας); ό ) Image i= getimage(getcodebase(), myimage ); τρέχον μονοπάτι κώδικα Image i= getimage(getdocumentbase(), myimage ); τρέχον μονοπάτι ιστοσελίδας Η μέθοδος drawimage() Graphics screen.drawimage(image i, int x, int y, this); Graphics screen.drawimage(image i, int x, int y, int width, int height, this); Άνοιγμα Εικόνας από Αρχείο: Παράδειγμα import java.awt.graphics; import java.awt.image; public class Fillmore extends java.applet.applet { Image whig; public void init() { whig = getimage(getcodebase(), "images/fillmore.jpg"); 21
Άνοιγμα Εικόνας από Αρχείο: Παράδειγμα (συνέχεια) public void paint(graphics screen) { int iwidth = whig.getwidth(this); int iheight= i whig.getheight(this); i h (hi) int xpos = 10; // 25% screen.drawimage(whig, xpos, 10, iwidth / 4, iheight / 4, this); // 100% xpos += (iwidth / 4) + 10; screen.drawimage(whig, xpos, 10, this); 22