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

Διομήδης Σπινέλλης
Τμήμα Διοικητικής Επιστήμης και Τεχνολογίας
Οικονομικό Πανεπιστήμιο Αθηνών
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) και έναν τρόπο να ορίζει ο χρήστης την εμφάνιση του κάθε οργάνου, τις λειτουργίες του και τον τρόπο που αυτό ανταποκρίνεται σε γεγονότα. Έτσι, κάθε όργανο παριστάνεται ως ένα αντικείμενο που διαθέτει: Ο έλεγχος που έχει ο χρήστης πάνω στα όργανα διαφέρει ανάλογα με την κατάσταση της εφαρμογής:

Όργανα

Όργανα τοποθετούνται μέσα στην εφαρμογή με γραφικό τρόπο κατά την υλοποίησή της. Κάθε όργανο διακρίνεται από το όνομά του. Αν πολλά όργανα ίδιου τύπου έχουν το ίδιο όνομα τότε αυτά ορίζουν έναν πίνακα οργάνων τον οποίο μπορούμε να διατρέξουμε με τη χρήση ενός δείκτη (π.χ. 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
Το πλάτος του οργάνου.

Υλοποίηση προγραμμάτων

Βιβλιογραφία

Ασκήσεις

Διεπαφές

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