Υλοποίηση διεπαφών σε Visual Basic

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

Η μεταφορά των γεγονότων από το σύστημα στις εφαρμογές και τα παράθυρά τους βασίζεται συχνά στην κληρονομικότητα. Έτσι, μια εφαρμογή μπορεί να δημιουργήσει υποκλάσεις για ένα όργανο που να δίνουν στο όργανο πιο εξειδικευμένη λειτουργικότητα. Αντίστοιχα, τα μηνύματα από το σύστημα κατεβαίνουν το δέντρο της κληρονομικότητας μιας εφαρμογής μέχρι και το τελευταίο στην ιεραρχία παράθυρο ή όργανο να δει το γεγονός και να έχει την ευκαιρία να το χειριστεί. Μια εφαρμογή πρέπει να παραλαμβάνει συνέχεια όλα τα μηνύματα που στέλνονται σε αυτή, να τα διαχωρίζει και να τα προωθεί στους αντίστοιχους παραλήπτες. Ο παρακάτω κώδικας αποτελεί τυπικό παράδειγμα του βρόχου που παραλαμβάνει και προωθεί μηνύματα σε εφαρμογές Windows:

        MSG             msg;

        while (GetMessage(&msg, NULL, 0, 0)) {
                if (!IsDialogMessage(hWnd, &msg)) {
                        TranslateMessage(&msg);
                        DispatchMessage(&msg);
                }
        }
Αντίστοιχα ο παρακάτω κώδικας αποτελεί ένα απλό παράδειγμα για το πως μπορεί να γίνει απλοϊκά η επεξεργασία των μηνυμάτων:
long
WdInWndProc(HWND hWnd, UINT iMessage, WPARAM wParam, LPARAM lParam)
{
        static BOOL     fFirstPaint;
        static HWND     hWndList;
        static HWND     hWndEdit;
        HWND            focus;
        int i;

        switch (iMessage) {
        case WM_CREATE:
                fFirstPaint = TRUE;
                break;
        case WM_PAINT:
                if (fFirstPaint) {
                        fFirstPaint = FALSE;
                        /* Set focus to the input string box */
                        hWndEdit = GetDlgItem(hDlgWnd, ID_STRINGEDIT);
                        hWndList = GetDlgItem(hDlgWnd, ID_LISTBOX);
                        /* Blank all lines so that we start from the bottom */
                        for (i = 0; i < HLEN; i++)
                                (void)SendMessage(hWndList, LB_INSERTSTRING,
                                        (WPARAM)-1, (LPARAM)(LPCSTR)"");
                        SetFocus(hWndEdit);
                }
                return (DefWindowProc(hWnd, iMessage, wParam, lParam));
        case WM_DESTROY:
                PostQuitMessage(0);
                break;
        case WM_COMMAND:
                switch (wParam) {
                case IDOK:                      /* Enter key */
                        focus = GetFocus();
                        if (focus == hWndEdit)
                                newline(hWndEdit, hWndList);
                        else if (focus == hWndList)
                                histline(hWndList, hWndEdit);
                        else
                                goto aka_default;
                        break;
                case ID_LISTBOX:
                        if (HIWORD(lParam) == LBN_DBLCLK)
                                histline(hWndList, hWndEdit);
                        else
                                goto aka_default;
                        break;
                default:
                        goto aka_default;
                }
                break;
        default:
        aka_default:
                return (DefWindowProc(hWnd, iMessage, wParam, lParam));
        }
        return 0L;
}
Είναι φανερό πως το παραπάνω μοντέλο δε μπορεί να εφαρμοστεί αποτελεσματικά σε εφαρμογές με εκατοντάδες εντολές και αντίστοιχα μηνύματα.

Απεικόνιση της δομής στη 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
Το πλάτος του οργάνου.

Ολοκληρωμένο περιβάλλον ανάπτυξης

Μια εφαρμογή Visual Basic υλοποιείται με βάση διάφορες φόρμες (forms) που ορίζουν τα περιεχόμενα για αντίστοιχα παράθυρα. Κάθε φόρμα έχει, όπως και τα όργανα, ιδιότητες και μεθόδους.

Το περιβάλλον υλοποίησης της Visual Basic έχει την παρακάτω μορφή:

Για να ορίσουμε τον κώδικα που εκτελείται για κάποιο γεγονός κάνουμε διπλό κλικ σε κάποιο όργανο και αυτόματα δημιουργείται η δήλωση για τη συνάρτηση που αφορά το πιο χρήσιμο γεγονός για το αντίστοιχο όργανο. Από επιλογές στην κορυφή του παραθύρου μπορούμε να επιλέξουμε το όργανο και το γεγονός για τα οποία θέλουμε να γράψουμε κώδικα:

Η γλώσσα Visual Basic

Η γλώσσα Visual Basic είναι μια δομημένη γλώσσα με τύπους που υποστηρίζει, μερικώς, τον προγραμματισμό με αντικείμενα (δεν υποστηρίζει κληρονομικότητα). Στις επόμενες παραγράφους περιγράφουμε πολύ συνοπτικά ορισμένα βασικά στοιχεία της:

Ορισμός συναρτήσεων

function funcname(param1 as type1, param2 as type2) as returntype
end function
Παράδειγμα:
function square(x as double) as double
        square = x * x
end function
Διαδικασίες (συναρτήσεις που δεν επιστρέφουν τιμή) ορίζονται αντίστοιχα, αλλά με τη λέξη sub αντί για function.

Τύποι

Ορισμένοι βασικοί τύποι είναι οι boolean, integer, single, double, string.

Ορισμός μεταβλητών

Μεταβλητές ορίζονται με τη σύνταξη:
dim varname as type
Παράδειγμα:
        dim x as double
        dim k as integer

Εντολές

Οι εντολές τερματίζονται από το τέλος της γραμμής Παράδειγμα:
        x = 3
        txt.Text = "Hello"

Σχόλια

Τα σχόλια αρχίζουν με το χαρακτήρα '

Δομές ελέγχου

Η Visual Basic παρέχει τις παρακάτω δομές ελέγχου (σε σχόλιο η αντίστοιχη δομή της C). 
' if (...) { ... } else { ... }
if boolean then
	statement
	...
else
	statement
	...
end if

' for (v = start; v <= end; v++) { ... }
for variable = start to end
	statement
	...
next variable

' while (...) {  ... }
do while boolean
	statement
	...
loop

' do { ... } while (...)
do
	statement
	..
loop while boolean

' switch (c) { case ... default: }
Select Case testexpression
Case expressionlist
	statement
	...
Case Else
	statement
	...
End Select

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

Ασκήσεις

Άσκηση 7

  1. Να προδιαγράψετε ένα χρήσιμο και πρωτότυπο πρόγραμμα που να μπορείτε να υλοποιήσετε σε Visual Basic. Το πρόγραμμα πρέπει να χρησιμοποιεί τις δυνατότητες του περιβάλλοντος Windows και να είναι φιλικό προς το χρήστη. Η προδιαγραφή πρέπει να είναι πλήρης και δομημένη (μπορεί π.χ. να ακολουθεί τη δομή που έχει διδαχτεί στο μάθημα σχεδιασμός και υλοποίηση λογισμικού).
  2. Με βάση την προδιαγραφή αυτή να υλοποιήσετε το αντίστοιχο πρόγραμμα.
  3. Με την άσκηση θα παραδώσετε εκτυπωμένα την προδιαγραφή καθώς και τις βασικές οθόνες του προγράμματος.
Σημείωση: Μπορείτε να μεταφέρετε την εικόνα από ένα παράθυρο στο clipboard, για να την επικολλήσετε στον επεξεργαστή κειμένου, με το συνδυασμό πλήκτρων ALT-PrtSc.

Creative Commons License  Τελευταία αλλαγή: Δευτέρα, 2 Αυγούστου 2004 12:26 πμ
 Εκτός αν αναφέρεται κάτι διαφορετικό, όλο το πρωτότυπο υλικό της σελίδας αυτής του οποίου δημιουργός είναι ο Διομήδης Σπινέλλης παρέχεται σύμφωνα με τους όρους της άδειας «Creative Commons Attribution-Share Alike 3.0 Greece License».