Εργαστήριο Δομημένος Προγραμματισμός (C#) Τμήμα Μηχανολογίας Νικόλαος Ζ. Ζάχαρης Καθηγητής Εφαρμογών Σκοπός Να γίνει εξοικείωση το μαθητών με τον ΗΥ και το λειτουργικό σύστημα. - Επίδειξη του My Computer (φάκελοι και αρχεία) - Αντιγραφή σε δισκέτα ή Usb Stick - Να τονίσετε ότι οι μαθητές θα πρέπει να φέρουν τα δικά τους αποθηκευτικά μέσα. Να γίνει εξοικείωση το μαθητών με το περιβάλλον ανάπτυξης των προγραμμάτων (Integrated Development Environment). Να αναπτύξουν την πρώτη τους εφαρμογή όπου θα γίνουν κατανοητά τα βήματα ανάπτυξης μιας παραθυρικής εφαρμογής. Πως θα κατασκευάσω το πρώτο πρόγραμμα; Αφού έχετε εγκαταστήσει την εφαρμογή C# Studio Express εν συνεχεία μπορείτε να κατασκευάσετε την πρώτη σας εφαρμογή, η οποία θα εκτελείται σε παραθυρικό περιβάλλον. Στην εφαρμογή θα πληκτρολογείται το όνομα σας, π.χ. Μαρία Παπαδοπούλου και πατώντας ένα κουμπί θα εμφανίζει το μήνυμα "Γεια σου, Μαρία Παπαδοπούλου". Η ολοκλήρωση της εφαρμογής θα γίνει σε διακριτά βήματα ώστε να γίνει κατανοητή η όλη διαδικασία. Βήμα 1 - Έναρξη του περιβάλλοντος εργασίας Βήμα 2 - Η δημιουργία της εφαρμογής Βήμα 3 - Σχεδίαση της διεπαφής της εφαρμογής Βήμα 4 - Σύνταξη του κώδικα της εφαρμογής Βήμα 5 - Ο έλεγχος των σφαλμάτων Βήμα 6 -Η εκτέλεση της εφαρμογής
Βήμα 1 - Έναρξη του περιβάλλοντος εργασίας Το πρώτο βήμα είναι να ξεκινήσετε το περιβάλλον ανάπτυξης της εφαρμογής. Από το κουμπί Έναρξη (στην αγγλική έκδοση των XP είναι Start) επιλέγετε Ολα τα Προγράμματα (στην αγγλική έκδοση των XP είναι All Programs) και τέλος το εικονίδιο Microsoft Visual C# Express Edition, εικόνα 1. Εικόνα 1. Η έναρξη της εφαρμογής Την πρώτη φορά που θα ξεκινήσετε την εφαρμογή θα καθυστερήσει λίγο η έναρξη και θα εμφανιστεί η εικόνα 2, Εικόνα 2. Η διαμόρφωση του περιβάλλοντος εργασίας όπου σας ενημερώνει ότι γίνεται διαμόρφωση του περιβάλλοντος εργασίας με σκοπό την βέλτιστη λειτουργία της εφαρμογής.
Εικόνα 3. Η οθόνη της εφαρμογής Αφού ολοκληρωθεί η διαμόρφωση εν συνεχεία εμφανίζεται η αρχική οθόνη της εφαρμογής η οποία αποτελείται από διαφορετικές περιοχές, οι οποίες ομαδοποιούν λειτουργίες και ενέργειες με σκοπό την ταχύτερη και αποδοτικότερη εργασία του προγραμματιστή. Για παράδειγμα στην περιοχή Recent Projects θα εμφανίζονται τα προγράμματα που κατασκευάσαμε στο πρόσφατο παρελθόν ώστε με ένα κλικ να τα ανοίξουμε και να συνεχίσουμε την εργασία μας, ενώ αν είμαστε συνδεδεμένοι στο διαδίκτυο στην περιοχή Visual C# Developer News θα εμφανίζονται προγραμματιστικά νέα από το δικτυακό τόπο της Microsoft. Βήμα 2 - Η δημιουργία της εφαρμογής Θα πρέπει να κατασκευάσετε ένα project (έργο) το οποίο θα περιλαμβάνει τουλάχιστον ένα αρχείο με τις εντολές που υλοποιούν την λειτουργικότητα της εφαρμογής σας. Το εργό συνήθως αποτελείται από πολλά αρχεία τα οποία στο τέλος θα δημιουργήσουν την εκτελέσιμη εφαρμογή σας.
Εικόνα 4. Η δημιουργία ενός έργου Από το μενού File επιλέγετε New Project... και εν συνεχεία επιλέγετε το είδος της εφαρμογής που θέλετε να κατασκευάσετε με τη C#. Εικόνα 5. Επιλογή του είδους της εφαρμογής
Το περιβάλλον της C# υποστηρίζει πολλά είδη εφαρμογών αλλά στην συγκεκριμένη περίπτωση θα επιλέξετε Windows Application δηλαδή εφαρμογή που εκτελείται σε παραθυρικό περιβάλλον. Το προτεινόμενο όνομα του έργου είναι το οποίο θα το αλλάξετε σε myfirstapplication. Δεν υπάρχει κάποιος ιδιαίτερος λόγος για την αλλαγή του ονόματος απλά θα πρέπει να συνηθίσετε στην πρακτική να χρησιμοποιείτε τα δικά σας ονόματα, τα οποία περιγράφουν καλύτερα την εργασία σας. Πατήστε το πλήκτρο ΟΚ. Εικόνα 6. Το περιβάλλον της εφαρμογής Ανάλογα με το είδος του έργου που επιλέξατε στην οθόνη της εικόνας 5, το εργαλείο ανάπτυξης των εφαρμογών, χωρίς την δική σας παρέμβαση, δημιουργεί το "σκελετό" της αντίστοιχης εφαρμογής. Στην δεξιά περιοχή βλέπετε το παράθυρο Solution Explorer το οποίο έχει ένα Solution, είναι η πρώτη γραμμή στο παράθυρο και αναφέρεται σε ολόκληρη την εφαρμογή σας, η οποία μπορεί να περιλαμβάνει ένα ή περισσότερα έργα. Στην συγκεκριμένη περίπτωση, η εφαρμογή σας έχει μόνο ένα έργο, το myfirstapplication, το οποίο έχει ιδιότητες (Properties), αναφορές (References), μια φόρμα (Form1.cs) και ένα αρχείο (Program.cs). Στην αριστερή πλευρά της οθόνης βλέπετε την φόρμα Form1.cs, η οποία αποτελεί το παράθυρο της εφαρμογής σας.
Πριν προχωρήσετε στο επόμενο βήμα θα πρέπει να αποθηκεύσετε ολόκληρη την εφαρμογή σε ένα φάκελο του υπολογιστή σας. Εικόνα 7. Αποθήκευση της εφαρμογής Από το μενού File επιλέγετε Save All και στη φόρμα που εμφανίζετε πληκτρολογείτε το όνομα του έργου - η προεπιλεγμένη τιμή είναι myfirstapplication, έπειτα επιλέγετε το φάκελο που θα αποθηκεύσετε την εφαρμογή σας - στο συγκεκριμένο παράδειγμα είναι o φάκελος Labs στο δίσκο C, και τέλος πληκτρολογείτε το όνομα του Solution - η προεπιλεγμένη τιμή είναι myfirstapplication. Αν το επιθυμείτε μπορείτε στην φόρμα της εικόνας 8, να διατηρήσετε τις προτεινόμενες τιμές. Τέλος πατάτε το πλήκτρο Save. Από εδώ και πέρα δεν χρειάζεται να ξαναπληκτρολογήσετε τιμές αλλά ανά τακτά χρονικά διαστήματα, από το μενού File να επιλέγετε Save All για να αποθηκεύσετε τις τρέχουσες αλλαγές.
Εικόνα 8. Επιλογή φακέλου για την αποθήκευση της εφαρμογής Βήμα 3 - Σχεδίαση της διεπαφής της εφαρμογής Μια εφαρμογή μπορεί να αποτελείται από μία ή περισσότερες φόρμες, πάνω στις οποίες υπάρχουν όλα εκείνα τα στοιχεία (κουτιά κειμένου, κουμπιά, εικόνες κ.λπ.) τα οποία έχει τοποθετήσει ο προγραμματιστής ώστε να τα χρησιμοποιήσει ο χρήστης για να αλληλεπιδράσει με την εφαρμογή. Στην προκειμένη περίπτωση ο χρήστης θα πρέπει να γράψει κάπου το όνομα του οπότε θα πρέπει να υπάρχει ένα κουτί κειμένου. Επίσης θα πρέπει να υπάρχει ένα ακόμη κουτί κειμένου για να εμφανιστεί το μήνυμα χαιρετισμού. Επίσης θα πρέπει να τοποθετήσετε ετικέτες πριν από το κάθε κουτί ώστε να καταλάβει ο χρήστης να γράψει το όνομα του, στο σωστό κουτί κειμένου. Τέλος θα πρέπει να υπάρχει ένα κουμπί που με το πάτημα του θα εμφανίζεται ο χαιρετισμός. Στην αριστερή πλευρά της οθόνης υπάρχει η εργαλειοθήκη, το μεγάλο κουμπί που γράφει Toolbox και περιέχει όλα τα στοιχεία - αναφέρονται και σαν ελεγκτήρια ή χειριστήρια (controls) - που μπορείτε να τοποθετήσετε πάνω σε μια φόρμα, εικόνα 10. Για την εμφάνιση της εργαλειοθήκης μπορείτε εναλλακτικά να επιλέξετε Toolbox από το μενού View, εικόνα 9.
Εικόνα 9. Εμφάνιση της εργαλειοθήκης
Εικόνα 10. H εργαλειοθήκη Κάντε αριστερό κλικ πάνω στο εικονίδιο TextBox της εργαλειοθήκης και εν συνεχεία κάντε ένα αριστερό κλικ πάνω στην φόρμα ώστε να σχεδιάσετε ένα κουτί κειμένου με προκαθορισμένες διαστάσεις, δες εικόνα 11. Με το ποντίκι μπορείτε να μετακινήσετε το κουτί κειμένου στην επιθυμητή θέση πάνω στην φόρμα ή/και να του αλλάξετε τις διαστάσεις.
Εικόνα 11. Ένα κουτί κειμένου πάνω στην φόρμα Επαναλάβετε την διαδικασία για να προσθέσετε στην φόρμα μια ετικέτα (Label). Στην κάτω δεξιά γωνία του περιβάλλοντος ανάπτυξης υπάρχει το παράθυρο Properties στο οποίο εμφανίζονται για το επιλεγμένο αντικείμενο οι ιδιότητες του και οι τιμές τους. Εναλλακτικά για να εμφανίσετε το παράθυρο Properties μπορείτε να επιλέξετε Properties Window από το μενού View, εικόνα 12
Εικόνα 12.Εμφάνιση του παραθύρου Properties Για να εμφανίσετε τις ιδιότητες του κουτιού κειμένου, δες εικόνα 13, θα πρέπει να το επιλέξετε κάνοντας μέσα στην φόρμα ένα κλικ πάνω στο κουτί κειμένου.
Εικόνα 13. Το παραθυρο των ιδιοτήτων Βρείτε την ιδιότητα Name και αλλάξτε την προκαθορισμένη τιμή TextBox1 σε txtusername. Θα πρέπει να θυμάστε ότι σε μια φόρμα δεν επιτρέπεται να υπάρχουν δύο ελεγκτήρια με το ίδιο όνομα. Το περιβάλλον ανάπτυξης της εφαρμογής είναι αρκετά "έξυπνο" ώστε όταν προσθέτετε ένα νέο ελεγκτήριο δεν σας υποχρεώνει να πληκτρολογήσετε τις τιμές από όλες τις ιδιότητες αλλά τους αποδίδει προκαθορισμένες τιμές. Τα ονόματα των ελεγκτηρίων είναι μια σύνθεση από το είδος τους (π.χ. TextBox, Label κ.λπ.) και τον επόμενο από το ένα, αύξων αριθμό (π.χ. 1, 2 κ.λπ), για παράδειγμα TextBox1. Οπότε δεν υπάρχει κάποιος ιδιαίτερος λόγος να αλλάξετε τα ονόματα των ελεγκτηρίων και θα μπορούσατε να ολοκληρώσετε την εφαρμογή διατηρώντας τις προτεινόμενες τιμές. Όμως σε αυτή την περίπτωση θα πρέπει να θυμάστε για όλα τα ελεγκτήρια της φόρμας, την χρήση του καθενός, για παράδειγμα ότι το TextBox1 το χρησιμοποιείτε για την εισαγωγή του ονόματος και ούτω καθεξής. Υπάρχει μια άλλη στρατηγική που χρησιμοποιούν οι επαγγελματίες προγραμματιστές για την σύνθεση των ονομάτων που σας αποδεσμεύει να θυμάστε το όνομα και την χρήση του ελεγκτηρίου στα πλαίσια του προγράμματος. Σύμφωνα με αυτή, χρησιμοποιούμε ονόματα που σχετίζονται με την εφαρμογή καθώς και ένα πρόθεμα για το είδος του ελεγκτηρίου. Για παράδειγμα, το κουτί κειμένου που θα γράψει το όνομα του ο χρήστης το ονομάζετε UserName και επειδή είναι κουτί κειμένου βάζετε το πρόθεμα txt ώστε να γίνει συνολικά txtusername. Στην ετικέτα που προσθέσατε να αλλάξετε τις τιμές των ιδιοτήτων Text και Name σε Όνομα Χρήστη και lblusername αντίστοιχα. Να προσθέσετε ένα ακόμη κουτί κειμένου και να αλλάξετε τις τιμές των ιδιοτήτων Name και ReadOnly σε txtgreeting και True αντίστοιχα. Να προσθέστε ένα κουμπί εντολών και να αλλάξετε τις τιμές των ιδιοτήτων Name και Text σε btncheers και Χαιρετισμός αντίστοιχα. Τέλος να κάνετε ένα κλικ πάνω στην φόρμα (σε περιοχή που δεν υπάρχει από κάτω κάποιο ελεγκτήριο) και εν συνεχεία να αλλάξετε τις τιμές της ιδιότητας Text σε H πρώτη μου εφαρμογή. Χρησιμοποιείστε το ποντίκι για να μετακινήσετε τα χειριστήρια πάνω στην φόρμα ώστε να φαίνονται όπως στην εικόνα 14.
Εικόνα 14. H φόρμα της εφαρμογής Βήμα 4 - Σύνταξη του κώδικα της εφαρμογής Μια εφαρμογή μπορεί να αποτελείται από μία ή περισσότερες φόρμες όπου η καθεμία έχει τις δικές τις λειτουργίες - εντολές που κωδικοποιούν ένα μέρος της εφαρμογής. Στο παραθυρικό περιβάλλον η "δράση" σε μια εφαρμογή επιτελείται κατά την αλληλεπίδραση ενός χρήστη με τα χειριστήρια της φόρμας, συνήθως με μια από τις συσκευές (π.χ. πληκτρολόγιο, ποντίκι). Αυτή η αλληλεπίδραση πυροδοτεί γεγονότα (events), όπως για παράδειγμα το πάτημα ενός κουμπιού, ή κίνηση του ποντικιού, το κλικ με το ποντίκι κ.λπ. Για να δείτε τα γεγονότα που υποστηρίζει ένα χειριστήριο θα πρέπει να κάνετε πάνω του ένα κλικ, για να το επιλέξετε, και εν συνεχεία στο παράθυρο των ιδιοτήτων να πατήσετε το εικονίδιο με τον κεραυνό. Η εικόνα 15 δείχνει τα γεγονότα του κουμπιού εντολών btncheers. Εικόνα 15. Τα γεγονότα ενός κουμπιού εντολών
Άρα ο προγραμματιστής θα πρέπει να πληκτρολογήσει τις εντολές που θα πρέπει να εκτελεστούν μετά την "πυροδότηση" ενός γεγονότος. Φυσικά δεν χρειάζεται να γράψει τον κώδικα για όλα τα γεγονότα αλλά μόνο για αυτά που σχετίζονται με την εφαρμογή του. Στην συγκεκριμένη περίπτωση θα υποστηρίξετε μόνο το γεγονός Click πάνω στο btncheers, για αυτό το λόγο κάντε διπλό κλικ μέσα στο παράθυρο Properties πάνω στο γεγονός Click. Στο δεξί παράθυρο, το οποίο λειτουργεί σαν κειμενογράφος εμφανίζετε ο κώδικας της φόρμας Form1.cs, εικόνα 16. Εικόνα 16. Ο κώδικας της φόρμας Form1.cs Η σύνταξη των εντολών στο περιβάλλον εργασίας είναι εύκολη υπόθεση, αφού κατά μεγάλο μέρος δεν χρειάζεστε να θυμάστε την πλήρη σύνταξη της εντολής ούτε να πληκτρολογείτε ολόκληρη την λέξη, αφού ο κειμενογράφος είναι αρκετά "έξυπνος" ώστε να παρουσιάζει μόνο τις εντολές που αρχίζουν από το συγκεκριμένο γράμμα. Για παράδειγμα όταν πατήσετε το πλήκτρο t θα εμφανιστεί ένα παράθυρο που δείχνει μόνο τις εντολές που αρχίζουν με το συγκεκριμένο γράμμα, δες εικόνα 17.
Εικόνα 17. H "έξυπνη" σύνταξη των εντολών Αν εντοπίσετε την επιθυμητή εντολή πατήστε το Enter για να συμπληρωθούν τα εναπομείναντα γράμματα της εντολής. Πατώντας εν συνεχεία. εμφανίζονται μόνο οι λειτουργίες που σχετίζονται με την προηγούμενη εντολή, δες εικόνα 18. Εικόνα 18. H "έξυπνη" σύνταξη των εντολών
Η εικόνα 19, δείχνει όλες τις εντολές που θα πληκτρολογήσουμε μέσα στο κώδικα της φόρμας για την διαχείριση του γεγονότος Click του κουμπιού εντολών btncheers. Εικόνα 19. Ο κώδικας της φόρμας Βήμα 5 - Ο έλεγχος των σφαλμάτων Αφού ολοκληρώσετε την σύνταξη των εντολών θα πρέπει να ελέγξετε την εφαρμογή σας για τυχόν λάθη. Μέσα από το μενού Build επιλέγετε Build Solution ή διαφορετικά πατάτε το πλήκτρο F6.
Εικόνα 20. Ο έλεγχος των σφαλμάτων Αν υπήρχαν σφάλματα, όπως για παράδειγμα στην εικόνα 21 λείπει το ελληνικό ερωτηματικό, τότε η διαδικασία του Build Solution θα εμφάνιζε στο κάτω μέρος της οθόνης όλα τα σφάλματα, τα οποία θα έπρεπε ένα προς ένα να τα διορθώσετε πριν "τρέξετε" την εφαρμογή σας. Εικόνα 21. Τα παράθυρα με τα σφάλματα στο κώδικα
Βήμα 6 -Η εκτέλεση της εφαρμογής Για να τρέξετε την εφαρμογή θα πρέπει μέσα από το μενού Debug να επιλέξετε Start Debuging ή διαφορετικά πατάτε το πλήκτρο F5. Εικόνα 22. Η εκτέλεση της εφαρμογής To παράθυρο της εφαρμογής εμφανίζετε στην οθόνη του υπολογιστή σας. Πληκτρολογείστε σαν όνομα χρήστη το Μαρία Παπαδοπούλου και εν συνεχεία πατήστε το πλήκτρο Χαιρετισμός. Εικόνα 23. Το παράθυρο της εφαρμογής Για να επιστρέψετε στο περιβάλλον ανάπτυξης θα πρέπει να κλείσετε την εφαρμογή σας