Διεπαφή χρήστη

Διομήδης Σπινέλλης
Τμήμα Διοικητικής Επιστήμης και Τεχνολογίας
Οικονομικό Πανεπιστήμιο Αθηνών
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.

Ασκήσεις

Διεπαφές

Να υλοποιήσετε μια φιλική γραφική διεπαφή για ένα από τα προγράμματα που έχετε γράψει στα πλαίσια του μαθήματος.

Περιεχόμενα