ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ Η/Υ Ενότητα: Χρήση TextBoxes ΚΥΡΟΠΟΥΛΟΣ ΚΩΝΣΤΑΝΤΙΝΟΣ Τμήμα Διοίκηση Επιχειρήσεων (Κοζάνη)
Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative Commons. Για εκπαιδευτικό υλικό, όπως εικόνες, που υπόκειται σε άλλου τύπου άδειας χρήσης, η άδεια χρήσης αναφέρεται ρητώς. Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στα πλαίσια του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο TEI Δυτικής Μακεδονίας και στην Ανώτατη Εκκλησιαστική Ακαδημία Θεσσαλονίκης» έχει χρηματοδοτήσει μόνο τη αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 2
Περιεχόμενα 1. Εισαγωγή δεδομένων Εργαλεία Εισόδου... 4 2. ΑΣΚΗΣΗ... 18 3. Παράρτημα... 18 3
1. Εισαγωγή δεδομένων Εργαλεία Εισόδου Χρήση «TextBoxes» Μέχρι τώρα έχομε δει πώς να εξάγουμε πληροφορίες και αποτελέσματα. Στα πλοηγούμενα τρία μαθήματα είχαμε χρησιμοποιήσει το εργαλείο της ετικέτας για να τυπώσουμε πληροφορίες, ή να δείξουμε κάποια πληροφορία πάνω στην οθόνη. Σε αυτά τα μαθήματα θα μάθουμε πώς να ζητήσουμε και να πάρουμε δεδομένα από τους χρήστες ενός προγράμματος. Ας υποθέσουμε ότι μας έχει ζητηθεί να γράψουμε ένα πρόγραμμα τα οποίο να τυπώνει στην οθόνη μέσα σε μια ετικέτα το μετεωρολογικό δελτίο της ημέρας. Ο χρήστης θα πρέπει να γράφει το όνομα του, μετά να επιλέγει μεταξύ 5 διαφορετικών αλλά σταθερών τύπων καιρού (Καταιγίδες, Αίθριος, Συννεφιά, Χιόνια, Βροχή). Το Όνομα του χειριστή θα τυπώνετε σε μία ετικέτα, στα δεξιά του μηνύματος «Χειριστής», και το δελτίο καιρού σε άλλη ετικέτα στα δεξιά του μηνύματος «Μετεωρολογικό Δελτίο» Το πρώτο πράγμα που θα πρέπει να κάνουμε πριν αρχίσουμε τον προγραμματισμό, είναι να σχεδιάσουμε το όλο πρόγραμμα σαν ένα λογικό διάγραμμα. Για να μπορέσουμε να το επιτύχουμε αυτό, θα ήταν καλό να γράψουμε τις ενέργειες που θα κάνει ο χρήστης σε μια λίστα. (1) Ο χρήστης γράφει το όνομα του (2) Το σύστημα δείχνει τους 5 τύπους καιρού (3) Ο χρήστης επιλέγει τύπο καιρού (4) Το σύστημα τυπώνει τον τύπο καιρού με το όνομα του χρήστη στην ετικέτα Αν μετατρέψουμε αυτά τα βήματα σε λογικό διάγραμμα θα έχουμε το αποτέλεσμα που φαίνετε στο σχήμα 1. 4
Σχήμα 1 Το επόμενο βήμα είναι να σχεδιάσουμε την οθόνη φόρμα μας. Μέχρι τώρα δεν έχομε συναντήσει κανένα εργαλείο το οποίο να δίδει στον χρήστη την δυνατότητα να εισάγει δεδομένα. Σε αυτό το πρώτο στάδιο θα μάθουμε το εργαλείο «Text Box». Η φόρμα που έχομε σκοπό να δημιουργήσουμε μπορεί να έχει την εμφάνιση του σχήματος 2 5
(1) Εκκινήστε την Visual Basic (2) Επιλέξτε μια καινούργια, κενή φόρμα (3) Στο σχήμα 2 εμείς έχομε υποθέσει τα αντικείμενα που μπορεί να χρειαστούμε, καθώς προχωρούμε όμως στην δημιουργία της φόρμας, μπορεί να χρειαστούμε επιπρόσθετα εργαλεία, ή ακόμη και να αφαιρέσουμε εργαλεία. Δημιουργήστε μία ετικέτα, τοποθετήστε την πάνω αριστερά και αλλάξτε την ιδιότητα «Name» σε «lblname», και την ιδιότητα «Caption» σε «Παρακαλώ Πληκτρολογήστε το Όνομα σας». Είναι πολύ σημαντικό στον προγραμματισμό, να καθοδηγούμε τους χρήστες στο τι τους περιμένουμε να κάνουνε σε κάθε βήμα της χρήσης του προγράμματος. Αλλάξετε το μέγεθος των γραμμάτων σε 12, και να είναι σε έντονη γραφή «Bold» (4) Από την εργαλειοθήκη σας επιλέξετε το εργαλείο «Text Box» (Σχήμα 3) Το εργαλείο «Text Box» επιτρέπει στους χρήστες να γράψουν κείμενο το οποίο γίνεται δεκτό και φυλάγεται από το σύστημα. Αυτό το εργαλείο, μπορεί να θεωρηθεί σαν εργαλείο εισόδου. Η ιδιότητα «Name» παίρνει την τιμή «Text1» για το πρώτο εργαλείο που δημιουργείτε, «Text2» για το δεύτερο κ.τ.λ. Είναι καλύτερα να ονομάζουμε τα δημιουργηθέντα εργαλεία μας για να αντιλαμβανόμαστε τον σκοπό τους απλώς διαβάζοντας το όνομα τους. Ονομάστε (αλλάξτε την τιμή της ιδιότητας «Name») το εργαλείο «Text1» σε «txtname». Το εργαλείο «Text Box» Σχήμα 3 Βρείτε την ιδιότητα «Text» και διαγράψετε την λέξη «Text1» που υπάρχει μέσα. Αφήστε την κενή. 6
(5) Δημιουργήστε μια δεύτερη ετικέτα στο κάτω αριστερό μέρος της φόρμας σας, ονομάστε την «lblnamemessage», και γράψετε στην ιδιότητα «caption» το μήνυμα «Το όνομα σου είναι:». Κάνετε το μέγεθος της γραμματοσειράς 12, και σε έντονη γραφή (6) Δημιουργήστε μια Τρίτη ετικέτα, στα δεξιά της προηγούμενης, ονομάστε την «lblmessage», και αφήστε κενή την ιδιότητα «caption» (Σχήμα 4). Ξανά αλλάξτε το μέγεθος της γραμματοσειράς σε 12, και με έντονη γραφή. lblname txtname lblnamemessag e lblmessage η ετικέτα που είναι κενή Σχήμα 4 (7) Δημιουργήστε ένα κουμπί (Command Button) στην κάτω δεξιά γωνία. Ονομάστε το «cmdview», αλλάξτε την ιδιότητα «caption» σε «Εκτέλεση» (Σχήμα 5). 7
Σχήμα 5 Διπλό-πατήστε το κουμπί «Εκτέλεση» για να ανοίξει το παράθυρο κώδικα, και γράψετε: lblmessage.caption = txtname.text (Σχήμα 6) Σχήμα 6 Ας πάρουμε την γραμμή κώδικα κομματάκι κομματάκι: Η εντολή lblmessage.caption σημαίνει, από το εργαλείο ετικέτας «lblmessage» χρησιμοποιείστε την ιδιότητα «caption». Η εντολή txtname.text σημαίνει, από το εργαλείο «TextBox» με το όνομα «txtname» χρησιμοποιείστε την ιδιότητα «Text» Τι θα κάνουμε τώρα με τις ιδιότητες «caption» και «Text»; Αν παρατηρείσετε την γραμμή του κώδικα έχει στα αριστερά την ετικέτα και στα δεξιά το «TextBox», lblmessage.caption = txtname.text Στον προγραμματισμό αυτό σημαίνει, ότι το σύστημα θα πρέπει να πάρει την τιμή του αντικειμένου στα δεξιά και να την βάλει μέσα στο αντικείμενο στα αριστερά. Αν θέλετε μπορούμε να πούμε να κάνουμε τα δύο αντικείμενα ίσα, δηλαδή, αν το αντικείμενο στα δεξιά περιέχει την τιμή «ΜΙΚΕ», τοτε με την εκτέλεση αυτής της γραμμής και το αντικείμενο στα αριστερά θα περιέχει την τιμή «ΜΙΚΕ». Είναι κάτι παρόμοιο με τα μαθηματικά, αν είχαμε την εξίσωση, «Χ=1+2», τότε θα ξέραμε ότι όπου φωνάζαμε το Χ αυτό θα αντιπροσώπευε την τιμή «3». Στην πληροφορική αυτός είναι ένας απλός τρόπος μεταφοράς μιας τιμής από ένα αντικείμενο (η ιδιότητα εργαλείου) σε άλλο. Να θυμάστε μόνο, ότι η δεξιά τιμή πάει στην αριστερή και όχι το αντίθετο. (8) Τρέξτε το πρόγραμμα σας, Πληκτρολογήστε το όνομα σας στο κουτί «txtname» και ακολούθως πατήστε το κουμπί «Εκτέλεση» το αποτέλεσμα φαίνεται στο σχήμα 7. 8
Σχήμα 7 Το τι συνέβηκε είναι πολύ απλό, εσείς πληκτρολογήσατε το όνομα σας (είσοδος δεδομένων) και με το που πατήσατε το κουμπί «Εκτέλεση», το όνομα σας αντιγράφηκε και τυπώθηκε στη ετικέτα «lblmessage» (Έξοδος Δεδομένων) ακολουθώντας κατά γράμμα τον κώδικα του κουμπιού «Εκτέλεση» { lblmessage.caption = txtname.text }. Σταματήστε το πρόγραμμα σας και επιστρέψτε στο σχεδιαστικό περιβάλλον της φόρμας σας. Αυτό γίνεται αυτόματα μόλις πατήσετε το κουμπί Τα εργαλεία επιλογής «option buttons» Εάν έχομε να επιλέξουμε μία επιλογή ανάμεσα μιας σειράς από επιλογές, όπως π.χ. Ποια ποδοσφαιρική ομάδα θα πάρει το πρωτάθλημα ποδοσφαίρου την περίοδο 2005-2006; Η απάντηση σε αυτή την ερώτηση θα είναι μόνο μία, μια και δεν μπορούν περισσότερες από μία ομάδες να πάρουν το πρωτάθλημα σε μία χρονική περίοδο, τότε χρειάζεται να χρησιμοποιήσουμε το εργαλείο εισόδου «option buttons». Θα χρησιμοποιήσουμε τα «option buttons» για την επιλογή του καιρού (1) Επιλέξτε το εργαλείο «option buttons» από την εργαλειοθήκη σας (Σχήμα 8). Δημιουργήστε ένα ορθογώνιο στην αριστερή πλευρά της φόρμας σας. Θα πρέπει να βλέπετε τον κύκλο καθώς επίσης και το μήνυμα «option 1». 9
Εργαλείο «option buttons» Εργαλείο «Ειδώλου Image» Σχήμα 8 (2) Στο παράθυρο ιδιοτήτων «option button» αφήστε την ιδιότητα «Name» ως έχει (option 1), και αλλάξτε την ιδιότητα «Caption» σε «Αίθριος Καιρός» (Σχήμα 9). Το εργαλείο «option button» όταν επιλεχθεί παίρνει την τιμή «True», δηλαδή γίνεται ενεργό, και εκτελεί τον κώδικά που του δίνετε. Σχήμα 9 10
(3) Επαναλάβετε την πιο πάνω διαδικασία και δημιουργήστε ακόμη 4 «option buttons», ένα για τον «Συννεφιασμένο» καιρό, ένα για τον «Βροχερό», ένα για τον καιρό μα «Καταιγίδες» και τέλος ένα για τον καιρό με «Χιόνια». Το τελικό αποτέλεσμα φαίνεται στο σχήμα 10. Τα εργαλεία «option buttons» με τις τιμές της ιδιότητας «caption» Σχήμα 10 Θα προσέξετε ότι το σύστημα από μόνο του δίδει διαφορετικό όνομα σε κάθε εργαλείο «option button» που δημιουργείτε. Έτσι αν προσέξετε την ιδιότητα «Name» του κάθε εργαλείου θα δείτε τα ονόματα «option 2». «option 3», «option 4», «option 5» που αντιπροσωπεύουν και την σειρά που τα έχετε δημιουργήσει. Επιπρόσθετα θα είναι καλό το κάθε αντικείμενο να έχει το ίδιο μέγεθος, και να αρχίζουν όλα από το ίδιο σημείο. Χρησιμοποιείστε το τι μάθατε στο προηγούμενο μάθημα για την ομοιομορφία αντικειμένων φόρμας. 11
Σε αυτό το στάδιο δεν θα βάλουμε κώδικα στα εργαλεία «option button», αντίθετα θα προχωρήσουμε ακόμα ένα βήμα πιο κάτω και θα βάλουμε τις εικόνες που θα θέλουμε να εμφανίζονται όταν επιλεχθεί ένα αντικείμενο «option button». Η διαδικασία αυτή είναι και πάλι παρόμοια με την διαδικασία που ακολουθήσατε στο προηγούμενο μάθημα όταν εισάγατε τις εικόνες των σημαιών κάθε χώρας. (4) Επιλέξτε το αντικείμενο «Ειδώλου-Image», δημιουργήστε ένα τετράγωνο στα αριστερά του αντικειμένου «option button» «Αίθριος Καιρός» (Σχήμα 11). Μην αλλάξετε την ιδιότητα «Name» αφήστε την να έχει την τιμή «Image1», αλλά αλλάξτε την ιδιότητα «Stretch» σε «True», και την ιδιότητα «visible» σε «False». Θέλουμε τα εικονίδια να είναι αόρατα αρχικά, και να εμφανίζονται όταν επιλέγει το αντικείμενο «option button» που τα αντιπροσωπεύει. Δηλαδή θα θέλαμε να εμφανίζεται η εικόνα του «Ήλιου» μόνο όταν επιλεγεί το αντικείμενο «Αίθριος καιρός». Στην ιδιότητα «picture» είσαστε υπόχρεοι να βρείτε την εικόνα που θέλετε να εικονίζεται στο αντικείμενο σας. Πλοηγήστε το σύστημα σας να παίρνει τις εικόνες από την θέση «C:\Program Files\Microsoft Visual Studio\Common\Graphics\Icons\Elements». Στο δικό σας σύστημα αυτές οι εικόνες μπορεί να βρίσκονται κάπου αλλού, για αυτό μην επιμείνετε στην διεύθυνση που σας δίδουμε. (5) Επαναλάβετε την ίδια διαδικασία για όλους τους τύπους του καιρου (Συννεφιασμένος, Βροχερός, Καταιγίδα, Χιόνια) (Σχήμα 11) 12
Σχήμα 11 (6) Δημιουργήστε μία μεγάλη ετικέτα στα αριστερά των εικόνων. Αλλάξετε την ιδιότητα «Name» σε «lblweathermessage», και την ιδιότητα «caption» αφήστε την κενή (Σχήμα 11) Το τι ζητούμε τώρα είναι να εμφανίζεται η εικόνα και το κατάλληλο μήνυμα να τυπώνεται στην ετικέτα όταν ένα από τα αντικείμενα «option button» έχει επιλεχθεί. Ο κατάλληλος κώδικάς πρέπει να γραφτεί (7) Διπλό-Πατήστε το «option button» «Αίθριος Καιρός», το παράθυρο κώδικα ανοίγει για το συγκεκριμένο αντικείμενο. Γράψετε τον κώδικα που βλέπετε στο σχήμα 12 13
Σχήμα 12 Στον κώδικα του σχήματος 12 δεν υπάρχει τίποτε καινούργιο, όλες οι εντολές είναι γνωστές και έχουν εξηγηθεί στα προηγούμενα μέρη του παρόντος κεφαλαίου και στα προηγούμενα κεφάλαια. Το εργαλείο «option button» όταν επιλεχθεί παίρνει την τιμή «True», δηλαδή γίνεται ενεργό, και εκτελεί τον κώδικά που του δίνετε Αν προσέξετε, μόνο ένα είδωλο πρέπει να είναι ορατό κάθε φορά, έτσι ανάλογα με το ποιο αντικείμενο «option button» έχει επιλεχθεί. Σε αυτή την περίπτωση έχει επιλεχθεί το αντικείμενο «Αίθριος Καιρός» και κατά προέκταση το είδωλο του «Ήλιου» θα πρέπει να είναι ορατό. Το είδωλο του «Ήλιου» έχει όνομα «Image1» στην ιδιότητα «Name». Έτσι για να χρησιμοποιήσουμε τις άλλες ιδιότητες αυτού του αντικειμένου θα πρέπει να το καλέσουμε με το όνομα του, την τελεία σαν διαχωριστικό, και μετά την ιδιότητα την οποία θέλουμε. Η εντολή «Image1.Visible=True» θα βάλει την τιμή «True» στην ιδιότητα «visible» του ειδώλου «image1». Αυτό θα κάνει το είδωλο Ορατό. Όλα τα άλλα είδωλα παίρνουν την τιμή «False», και θα μείνουν ή θα γίνουν Αόρατα. Η εντολή «lblweathermessage.caption= Ο καιρός σήμερα θα είναι Αίθριος», τυπώνει το μήνυμα «Ο καιρός σήμερα θα είναι Αίθριος» στην ετικέτα «lblweathermessage». Μην ξεχάσετε να βάλετε το μήνυμα μέσα σε 14
εισαγωγικά αν αυτό δεν γίνει το σύστημα θα σας ειδοποιήσει ότι έχετε κάνει «Συντακτικό Λάθος» (Σχήμα 13) Το σύστημα ειδοποιεί για ύπαρξη λάθους στον κώδικα σας. Το σημείο του λάθους εμφανίζεται σε κόκκινο χρώμα Σχήμα 13 Αν ποτέ σας συμβεί αυτό τότε θα χρειαστεί να βάλετε τα εισαγωγικά στην αρχή και τέλος του μηνύματος που θέλετε να τυπώσετε. (8) Επαναλάβετε τον ίδιο κώδικα για όλα τα αντικείμενα «option button», αλλά να είστε προσεκτικοί στο να κάνετε κάθε φορά διαφορετικό είδωλο Ορατό, και να κάνετε όλα τα άλλα Αόρατα. (9) Αφού έχετε τελειώσει με τον κώδικα σας κλείστε το παράθυρο κώδικα και τρέξτε το πρόγραμμα σας. Πληκτρολογήστε το όνομα σας και μετά πατήστε με την σειρά σε όλα τα «option button». Θα δείτε την ανάλογη εικόνα να εμφανίζεται με το ανάλογο μήνυμα για τον καιρό (Σχήματα14-18). Το όνομα σας εμφανίζεται όπως προηγουμένως στην ετικέτα «lblmessage». Ο λόγος είναι διότι έχομε μεταφέρει την εντολή lblmessage.caption = txtname.text στον κώδικα όλων των αντικειμένων «option button» Μια και ο κώδικας υπάρχει δεν χρειαζόμαστε το κουμπί «Εκτέλεση» και μπορούμε να το τροποποιήσουμε στο να σταματά το πρόγραμμα. 15
Σχήμα 14 Αίθριος Σχήμα 15 - Συννεφιασμένος Σχήμα 16 Βροχερός Σχήμα 17 Καταιγίδα 16
Σχήμα 18 - Χιόνια (10) Επιλέξτε το κουμπί «Εκτέλεση», αλλάξτε την ιδιότητα «caption»στην τιμή «Έξοδος», μην αλλάξετε την τιμή της ιδιότητας «Name». (11) Διπλό-πατήστε το κουμπί «Έξοδος» τώρα για να ανοίξετε το παράθυρο κώδικα (Σχήμα 19) Σχήμα 19 (12) Σβήστε την γραμμή κώδικα, και γράψετε την εντολή «End» που υποχρεώνει το σύστημα να σταματήσει την λειτουργία του (Σχήμα 20) Σχήμα 20 (13) Αποθηκεύστε την φόρμα σας με το όνομα «Weather» και το «Project» σας με το όνομα «Weather» επίσης 17
2. ΑΣΚΗΣΗ Δημιουργήστε ένα πρόγραμμα στην Visual Basic το οποίο θα επιτρέπει του χρήστη να επιλέξει μεταξύ 5 διαφορετικών γλωσσών και ανάλογα από την επιλογή του να τυπώνει το μήνυμα «Καλωσόρισες» στην ανάλογη γλώσσα καθώς και την σημαία της χώρας. Ελληνικά Αγγλικά Γαλλικά Ισπανικά Ιταλικά Καλωσόρισες welcome bienvenue recepción benvenuto 3. Παράρτημα Σημείωμα Αναφοράς. Copyright ΤΕΙ Δυτικής Μακεδονίας, ΚΥΡΟΠΟΥΛΟΣ ΚΩΝΣΤΑΝΤΙΝΟΣ. «ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ Η/Υ». Έκδοση: 1.0. Κοζάνη 2015. Σημείωμα Αδειοδότησης. Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο. που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο. που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο. Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. Διατήρηση Σημειωμάτων. Οποιαδήποτε αναπαραγωγή ή διασκευή του υλικού θα πρέπει να συμπεριλαμβάνει: το Σημείωμα Αναφοράς. 18
το Σημείωμα Αδειοδότησης. τη δήλωση Διατήρησης Σημειωμάτων. το Σημείωμα Χρήσης Έργων Τρίτων (εφόσον υπάρχει). μαζί με τους συνοδευόμενους υπερσυνδέσμους. 19