Διεπαφή χρήστη
Διομήδης Σπινέλλης
Τμήμα Διοικητικής Επιστήμης και Τεχνολογίας
Οικονομικό Πανεπιστήμιο Αθηνών
dds@aueb.gr
Παράθυρα, εικονίδια, μενού, και δείκτης
Στο σύγχρονο περιβάλλον διεπαφής με το χρήστη βασίζεται
στα παράθυρα (windows),
τα εικονίδια (icons),
τα μενού (menus) και
το δείκτη (pointer).
Το περιβάλλον αυτό σχεδιάστηκε για πρώτη φορά στο Palo Alto Research Center
της Xerox (PARC) και υλοποιήθηκε με επιτυχία από την Apple για τους υπολογιστές
Macintosh και από τη Micosoft στην οικογένεια Windows.
Η επιφάνεια εργασίας χρησιμοποιεί ως βάση τη
μεταφορά του γραφείου (desktop metaphor).
Ο χρήστης μετακινεί πάνω στην οθόνη παράθυρα με τη χρήση του δείκτη
όπως θα κινούσε έγγραφα στο γραφείο με τα χέρια του.
Βασικά τεχνολογικά στοιχεία για τη λειτουργία του περιβάλλοντος αυτού
είναι η οθόνη χαρτογραφικής απεικόνισης (bitmap display)
και το ποντίκι (mouse) ή κάποιος άλλος αντίστοιχος μηχανισμός
που επιτρέπει στο χρήστη να δείχνει αντικείμενα στην οθόνη.
Με τη χρήση εικονιδίων ορισμένα στοιχεία του περιβάλλοντος μπορούν να
παρασταθούν με αμεσότητα, ενώ τα μενού κάνουν τις λειτουργίες του περιβάλλοντος
προσιτές χωρίς να χρειάζεται ο χρήστης να απομνημονεύει εντολές και τη σύνταξή
τους.
Εικονίδια στο περιβάλλον Windows
Εισαγωγή εικόνας στο κείμενο με τη χρήση μενού στο πρόγραμμα Microsoft Word
<img src="inspic.gif">
Εισαγωγή εικόνας στο κείμενο στη γλώσσα HTML
Εσωτερική δομή
Εσωτερικά τα συστήματα γραφικής διεπαφής που βασίζονται σε παράθυρα
λειτουργούν με βάση γεγονότα (events) τα οποία
στέλνονται στις εφαρμογές.
Το κάθε παράθυρο είναι μια (τυπικά ορθογώνια)
περιοχή της οθόνης η οποία σχεδιάζεται αυτόνομα
και λαμβάνει γεγονότα.
Κάθε εφαρμογή μπορεί να απαρτίζεται από ένα ή περισσότερα παράθυρα.
Γεγονότα μπορεί να είναι π.χ. η επιλογή μιας εντολής από το μενού,
η αλλαγή του κειμένου που γράφει ο χρήστης,
το πάτημα ενός πλήκτρου,
η κίνηση του ποντικιού ή,
η αλλαγή της ώρας.
Τα γεγονότα μπορεί να δημιουργούνται άμεσα από το χρήστη ή να συνθέτονται
από το σύστημα ως αποτέλεσμα εντολών του χρήστη, ή άλλων εξωτερικών διεπαφών.
Το κάθε γεγονός στέλνεται σε μια ή περισσότερες εφαρμογές.
Οι εφαρμογές με τη σειρά τους στέλνουν τα γεγονότα στα παράθυρα που
μπορούν να τα επεξεργαστούν.
Έτσι, αντί η εφαρμογή να ζητά στοιχεία από το χρήστη, τα στοιχεία από το χρήστη
στέλνονται ως γεγονότα στην εφαρμογή.
Στο περιβάλλον των Windows ορίζονται πάνω από 800 διαφορετικά γεγονότα.
Για την επιβολή συνέπειας στη διεπαφή με το χρήστη αλλά και
τη διευκόλυνση υλοποίησης των εφαρμογών τα παραθυρικά περιβάλλοντα ορίζουν
μια σειρά από όργανα (controls) (ή widgets) τα
οποία ενσωματώνουν και διαθέτουν ένα σύνολο από λειτουργίες που είναι
συχνά χρήσιμες.
Παραδείγματα τέτοιων οργάνων είναι
το πλαίσιο εισαγωγής κειμένου (edit box),
το πιεζόμενο κουμπί (push button) και
το πλαίσιο επιλογής αρχείου.
Η μεταφορά των γεγονότων από το σύστημα στις εφαρμογές και τα παράθυρά
τους βασίζεται συχνά στην κληρονομικότητα.
Έτσι, μια εφαρμογή μπορεί να δημιουργήσει υποκλάσεις για ένα όργανο που
να δίνουν στο όργανο πιο εξειδικευμένη λειτουργικότητα.
Αντίστοιχα, τα μηνύματα από το σύστημα κατεβαίνουν το δέντρο της
κληρονομικότητας μιας εφαρμογής μέχρι και το τελευταίο στην ιεραρχία
παράθυρο ή όργανο να δει το γεγονός και να έχει την ευκαιρία να το
χειριστεί.
Μια εφαρμογή πρέπει να παραλαμβάνει συνέχεια όλα τα μηνύματα που στέλνονται
σε αυτή, να τα διαχωρίζει και να τα προωθεί στους αντίστοιχους παραλήπτες.
Απεικόνιση της δομής στη Visual Basic
Το περιβάλλον προγραμματισμού Visual Basic επιτρέπει τη γραφική σχεδίαση
εφαρμογών με τη χρήση οργάνων και τον άμεσο ορισμό κώδικα που θα αποκρίνεται
σε συγκεκριμένα γεγονότα.
Για το σκοπό αυτό η Visual Basic απλοποιεί το περιβάλλον προγραμματισμού
που ορίζουν τα Windows δίνοντας στο χρήστη μια σειρά από εξειδικευμένα
όργανα (βασισμένα σε αυτά των Windows) και έναν τρόπο να ορίζει ο χρήστης
την εμφάνιση του κάθε οργάνου, τις λειτουργίες του και τον
τρόπο που αυτό ανταποκρίνεται σε γεγονότα.
Έτσι, κάθε όργανο παριστάνεται ως ένα αντικείμενο που διαθέτει:
- ιδιότητες όπως για παράδειγμα τη θέση και το χρώμα του,
- μεθόδους που μπορούν να κληθούν για εκτέλεση όπως για
παράδειγμα τη μέθοδο της επανασχεδίασης και
- γεγονότα στα οποία μπορεί ο χρήστης να συνδέσει κώδικα
π.χ. το γεγονός click.
Ο έλεγχος που έχει ο χρήστης πάνω στα όργανα διαφέρει ανάλογα με
την κατάσταση της εφαρμογής:
-
Κατά τη διάρκεια σχεδιασμού της εφαρμογής, ο χρήστης μπορεί να διαβάσει
και να αλλάξει τιμή στις περισσότερες ιδιότητες καθώς και να συνδέσει
κώδικα με όλα τα γεγονότα κάθε οργάνου.
-
Κατά τη διάρκεια εκτέλεσης της εφαρμογής, το πρόγραμμα μπορεί να διαβάσει
και να αλλάξει τιμή στις περισσότερες ιδιότητες και να καλέσει τις
μεθόδους του κάθε οργάνου.
Όταν παραλαμβάνεται από την εφαρμογή ένα γεγονός, αυτό προωθείται
αυτόματα στον κώδικα που έχει συνδεθεί με το αντίστοιχο όργανο.
Αν δεν υπάρχει τέτοιος κώδικας, τότε η εφαρμογή εκτελεί αυτόματα
κώδικα ο οποίος εκτελεί τη βασική λειτουργία για το αντίστοιχο γεγονός.
Όργανα
Όργανα τοποθετούνται μέσα στην εφαρμογή με γραφικό τρόπο κατά την
υλοποίησή της.
Κάθε όργανο διακρίνεται από το όνομά του.
Αν πολλά όργανα ίδιου τύπου έχουν το ίδιο όνομα τότε αυτά ορίζουν
έναν πίνακα οργάνων τον οποίο μπορούμε να διατρέξουμε με τη χρήση
ενός δείκτη (π.χ. txtTextBox(i).text = "hello").
Το περιβάλλον της Visual Basic ορίζει τα παρακάτω βασικά
όργανα:
- TextBox
-
Όργανο για είσοδο κειμένου
- Label
-
Εμφάνιση κειμένου
- PictureBox
-
Περιοχή για εμφάνιση και σχεδίαση γραφικών κατά τη διάρκεια εκτέλεσης
του προγράμματος.
- CheckBox
-
Επιλογή τύπου ναι/όχι (μπορούν να είναι αληθείς πολλαπλές τέτοιες επιλογές)
- OptionButton
-
Επιλογή τύπου ναι/όχι (δεν μπορούν να είναι αληθείς πολλαπλές τέτοιες επιλογές)
- CommandButton
-
Κουμπί για εντολές
- Image
-
Χαρτογραφική εικόνα που μπορεί να ορίσει ο χρήστης
- Shape
-
Σχήμα που μπορεί να οριστεί κατά τη σχεδίαση της εφαρμογής.
- Timer
-
Χρονόμετρο που δημιουργεί γεγονότα σε τακτά διαστήματα.
- ListBox
-
Λίστα με επιλογές.
- ComboBox
-
Λίστα με επιλογές σε συνδυασμό με περιοχή που μπορεί να γραφτεί κείμενο
- VScrollBar
-
Κάθετο όργανο ελέγχου της θέσης στο παράθυρο.
- HScrollBar
-
Οριζόντιο όργανο ελέγχου της θέσης στο παράθυρο.
- Frame
-
Περιοχή στην οποία μπορούν να ομαδοποιηθούν πολλά όργανα (ειδικά
OptionButton)
Εκτός από τα παραπάνω βασικά όργανα μπορεί κανείς να ορίσει ή να αγοράσει
πολλά άλλα όργανα που εκτελούν χρήσιμες λειτουργίες όπως π.χ. σύνδεση
με βάσεις δεδομένων και το Internet, εμφάνιση γραφημάτων και πινάκων.
Τα όργανα αυτά μπορούν να θεωρηθούν εξαρτήματα (components)
για την υλοποίηση εφαρμογών.
Γεγονότα
Κάθε όργανο έχει το δικό του σύνολο από γεγονότα τα οποία μπορεί να δεχτεί.
Ορισμένα από τα γεγονότα τα οποία αφορούν πολλά όργανα είναι τα παρακάτω:
- Click
- Click του ποντικιού πάνω στο όργανο.
- DblClick
- Διπλό click του ποντικιού πάνω στο όργανο.
- GotFocus
- Το όργανο γίνεται η εστία εισόδου.
- LostFocus
- Το όργανο παύει να είναι η εστία εισόδου.
- KeyDown
- Ένα πλήκτρο πατιέται πάνω από το όργανο.
- KeyUp
- Ένα πλήκτρο αφήνεται πάνω από το όργανο.
- KeyPress
- Ένας χαρακτήρας γράφεται πάνω από το όργανο.
- MouseDown
- Ένα πλήκτρο του ποντικιού πατιέται πάνω από το όργανο.
- MouseUp
- Ένα πλήκτρο του ποντικιού αφήνεται πάνω από το όργανο.
- MouseMove
- Το ποντίκι κινείται πάνω από το όργανο.
- Change
- Τα δεδομένα που περιέχει το όργανο άλλαξαν.
Η σύνδεση του γεγονότος με κώδικα της Visual Basic γίνεται με τον
ορισμό μιας συνάρτησης που έχει ως όρισμα παραμέτρους που αφορούν το
συγκεκριμένο όργανο.
Παράδειγμα:
Private Sub Check1_KeyPress(KeyAscii As Integer)
End Sub
Private Sub Check1_KeyUp(KeyCode As Integer, Shift As Integer)
End Sub
Private Sub Check1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
End Sub
Private Sub Command1_Click()
End Sub
Private Sub Text1_Change()
End Sub
Ιδιότητες
Οι ιδιότητες που αφορούν κάθε όργανο μπορούν να μεταβληθούν τόσο κατά το
σχεδιασμό, όσο και κατά την εκτέλεση της εφαρμογής.
Πρόσβαση στις ιδιότητες κατά την εκτέλεση της εφαρμογής έχουμε με τη
σύνταξη όργανο.ιδιότητα.
Μερικές ιδιότητες που εμφανίζονται σε πολλά όργανα είναι οι παρακάτω:
- Name
- Το όνομα του συγκεκριμένου οργάνου.
- BackColor
- Το χρώμα του φόντου.
- ForeColor
- Το χρώμα σχεδίασης.
- Enabled
- Αληθές αν το όργανο είναι ενεργό.
- Visible
- Αληθές αν το όργανο είναι ορατό.
- Text
- Το κείμενο που περιέχει το όργανο.
- Caption
- Το κείμενο που εμφανίζει το όργανο.
- Value
- Η τιμή που έχει το όργανο (π.χ. αληθές/ψευδές).
- ToolTipText
- Το αναδυόμενο κείμενο σύντομης βοήθειας.
- Height
- Το ύψος του οργάνου.
- Left
- Η θέση του οργάνου στη φόρμα από αριστερά.
- Top
- Η θέση του οργάνου στη φόρμα από πάνω.
- Width
- Το πλάτος του οργάνου.
Υλοποίηση προγραμμάτων
- Τα προγράμματα που υλοποιούν γραφική επαφή σε Visual Basic αποτελούνται
από μια ή περισσότερες φόρμες και τα όργανα που υπάρχουν πάνω σε αυτές.
- Για κάθε όργανο που τοποθετούμε στη φόρμα (αλλά και για την ίδια
τη φόρμα) ορίζουμε τις αρχικές ιδιότητές του από στην αντίστοιχη
περιοχή του περιβάλλοντος εργασίας:
- Στα προγράμματα που ορίζοτν διεπαφή με φόρμες
σπάνια ορίζουμε η εκτέλεση να αρχίζει από τη διαδικασία Main.
- Η λειτουργία του προγράμματος βασίζεται σε κώδικα που ανταποκρίνεται
σε συγκεκριμένα γεγονότα (π.χ. το click σε ένα κουμπί).
- Για παράδειγμα με ο παρακάτω κώδικας υλοποιεί
(λανθασμένα ως προς τη στρογγυλοποίηση)
το πρόγραμμα μετατροπής μεταξύ Ευρώ και δραχμών.
Private Sub cmdExit_Click()
End
End Sub
Private Sub cmdToGRD_Click()
txtGRD.Text = Format(Val(txtEUR.Text) * 340.57, "#")
End Sub
Private Sub cmdToEUR_Click()
txtEUR.Text = Format(Val(txtGRD.Text) / 340.75, ".##")
End Sub
Βιβλιογραφία
-
Microsoft Developer Network Library
Visual Studio Documentation -
Visual Basic -
Reference -
Controls Reference -
Intrinsic Controls
- Michael Halvorson
Visual Basic 6 Βήμα προς βήμα. Εκδόσεις Κλειδάριθμος, Αθήνα.
- Stuart K. Card, Thomas P.
Moran, and Allen Newell.
The
Psychology of Human-Computer Interaction.
Lawrence Erlbaum Associates, Publishers, New Jersey, USA, 1983.
- Adele Goldberg.
Smalltalk 80: The Language and its Implementation.
Addison Wesley, 1980.
- Brian W. Kernighan.
Experience with Tcl slash Tk for scientific and
engineering visualization.
In Proceedings of the Tcl slash Tk Workshop, pages 269–278,
Toronto, Ontario, Canada, July 1995.
- Microsoft Corp.
Windows Interface Guidelines for Software Design.
Microsoft Press, Redmond, WA, USA, 1995.
- Donald A. Norman.
The
Psychology of Everyday Things.
BasicBooks, New York, NY, USA, 1988.
- Donald A. Norman.
The
Invisible Computer.
MIT Press, 1998.
- John K. Ousterhout.
Tcl
and the Tk Toolkit.
Addison-Wesley, 1994.
- Diomidis Spinellis.
A critique of the Windows application programming interface (http://kerkis.math.aegean.gr/~dspin/pubs/jrnl/1997-CSI-WinApi/html/win.html).
Computer Standards & Interfaces, 20:1–8, November 1998.
- J. J. Thomas and
G. Hamlin.
Graphical input interaction technique workshop summary.
Computer Graphics, pages 5–30, January 1983.
- Edward R. Tufte.
The Visual Display of Quantitative Information.
Graphics Press, 1983.
Ασκήσεις
Διεπαφές
- Να υλοποιήσετε μια φιλική γραφική διεπαφή για ένα από τα προγράμματα
που έχετε γράψει στα πλαίσια του μαθήματος.