Transcript 5η Εργαστηριακή Άσκηση

Αλληλεπίδραση Ανθρώπου Μηχανής - Ανάπτυξη Διεπιφανειών Χρήστη
ΑΛΛΗΛΕΠΙΔΡΑΣΗ ΑΝΘΡΩΠΟΥ ΜΗΧΑΝΗΣ
ΑΝΑΠΤΥΞΗ ΔΙΕΠΙΦΑΝΕΙΩΝ ΧΡΗΣΤΗ
ΧΕΙΜΕΡΙΝΟ ΕΞΑΜΗΝΟ 2016-2017
5η Εργαστηριακή Άσκηση
Σκοπός: Εξάσκηση µε χρήση του Tabbed Pane, Scroll Pane και ε̟ανάληψη των
συστατικών ̟ου χρησιµο̟οιήσαµε στα ̟ροηγούµενα εργαστήρια και το µοντέλο
α̟οστολής γεγονότων σε Java Swing µε χρήση του εργαλείου NetBeans.
Μέθοδος / Εργαλεία:
α) Χρήση του NetBeans
Ασκήσεις:
∆ηµιουργείστε την εφαρµογή «∆ιακο̟ές» σε Java Swing µε χρήση NetBeans,
χρησιµο̟οιώντας τις εικόνες ̟ου θα βρείτε στο moodle και ακολουθώντας τις
̟αρακάτω οδηγίες:
1.
2.
Η εφαρµογή θα σχεδιασθεί σε ένα εξωτερικό υ̟οδοχέα JFrame, ο ο̟οίος
θα έχει τίτλο «Holidays»,
Το̟οθετήστε στο frame τα συστατικά ό̟ως τα βλέ̟ετε στην ̟αρακάτω
εικόνα:
Δρ. Ευκλείδης Κεραμόπουλος
Σελίδα 1
Αλληλεπίδραση Ανθρώπου Μηχανής - Ανάπτυξη Διεπιφανειών Χρήστη
Αλλάξτε το text στα TABS µε δεξί click ̟άνω στο κάθε TAB και Edit
Text.
3. Στο ̟ρώτο TAB θα ̟αρουσιάσετε τρία Ξενοδοχεία, (α) το AL Arab, (β)
το Hilton και (γ) το Ice Hotel. Τα τρία ξενοδοχεία είναι radio buttons.
Φροντίστε να ανήκουν στο ίδιο button group και το ̟ρώτο να οριστεί
ως selected. Ε̟ίσης, φροντίστε:
a. Να οριστούν κατάλληλα οι εικόνες στις ιδιότητες icon,
pressedIcon, rolloverIcon και selectedIcon για να εµφανίζεται
η κατάλληλη εικόνα όταν εφαρµόζεται η αντίστοιχη
λειτουργία,
b. να ορίσετε ε̟εξηγηµατικό κείµενο (toolTipText) όταν το
̟οντίκι µ̟αίνει µέσα στην εικόνα ώστε να αναφέρει το όνοµα
του ξενοδοχείου, και
c. να εµφανίζεται στο τέταρτο Tab σε κατάλληλη ετικέτα ̟οιο
Ξενοδοχείο ε̟ιλέχτηκε.
Ορίστε τις ιδιότητες ό̟ως φαίνεται ̟αρακάτω:
Δρ. Ευκλείδης Κεραμόπουλος
Σελίδα 2
Αλληλεπίδραση Ανθρώπου Μηχανής - Ανάπτυξη Διεπιφανειών Χρήστη
Το Tab θα έχει την ̟αρακάτω εικόνα:
4. Στο δεύτερο TAB θα ̟αρουσιάσετε τις ε̟ιλογές ̟ου θα ̟ροτείνονται
στον ̟ελάτη ως ̟ροσφορά, δηλαδή αν θα ήθελε να ̟εριλαµβάνετε στο
̟ακέτο ̟ου θα ε̟ιλέξει (α) ̟ρωινό, (β) βραδινό και (γ) ένα κοντινό
ταξίδι. Φροντίστε να ενηµερώσετε την κατάλληλη ετικέτα στο τέταρτο
TAB µε τις ε̟ιλογές του ̟ελάτη. Το Tab θα έχει την ̟αρακάτω εικόνα:
Δρ. Ευκλείδης Κεραμόπουλος
Σελίδα 3
Αλληλεπίδραση Ανθρώπου Μηχανής - Ανάπτυξη Διεπιφανειών Χρήστη
5. Στο τρίτο TAB θα ̟αρουσιάσετε τις ε̟ιλογές ̟ου θα έχει ο ̟ελάτης, σε
τύ̟ο δωµατίου και θα εµφανίζετε την ε̟ιλογή του σε κατάλληλη
ετικέτα στο τέταρτο ΤΑΒ.
Ε̟ίσης, ̟ρογραµµατίσετε το κουµ̟ί «Show Icon» να δείχνει την
κατάλληλη εικόνα ανάλογα µε το ξενοδοχείο και το δωµάτιο ̟ου
ε̟ιλέχτηκε σε ετικέτα στο ίδιο ΤΑΒ. Για να έχουν σταθερό µέγεθος οι
εικόνες, α̟ό τις ιδιότητες της ετικέτας ορίστε στο Layout “Horizontal
size” 120 και “Vertical size” 100.
Τέλος, Ορίστε και ε̟εξηγηµατικό κείµενο στο συγκεκριµένο κουµ̟ί.
Το Tab θα έχει την ̟αρακάτω εικόνα:
6. Το τέταρτο ΤΑΒ θα έχει την ̟αρακάτω εικόνα:
Σηµείωση: Μέθοδοι ̟ου ̟ιθανώς θα σας φανούν χρήσιµες:
• setToolTipText(string);
• isSelected()
Δρ. Ευκλείδης Κεραμόπουλος
Σελίδα 4
Αλληλεπίδραση Ανθρώπου Μηχανής - Ανάπτυξη Διεπιφανειών Χρήστη
•
•
•
setText(string)
Κλάση ImageIcon για ̟ρογραµµατιστικό χειρισµό των
εικόνων
setIcon(ImageIcon)
Δρ. Ευκλείδης Κεραμόπουλος
Σελίδα 5