Εργαστήριο Δομημένος Προγραμματισμός (C#) Τμήμα Μηχανολογίας Νικόλαος Ζ. Ζάχαρης Καθηγητής Εφαρμογών Σκοπός Να αναπτύξουν ένα πρόγραμμα όπου θα επαναλάβουν τα βήματα ανάπτυξης μιας παραθυρικής εφαρμογής. Να χρησιμοποιήσουν τα βασικά ελεγκτήρια (controls) της εργαλειοθήκης, Κουτί Κειμένου (Box), Ετικέτα (Label), Κουμπί Εντολών (Button). Να κατανοήσουν τους βασικούς τύπους δεδομένων και την ανάγκη μετατροπή του κειμένου σε αριθμητικό τύπο. Να χρησιμοποιήσουν τους βασικούς τελεστές. Να χρησιμοποιήσουν την δομή if και switch. Εκφώνηση Nα δημιουργήσετε μια εφαρμογή υπολογιστή, που θα κάνει τις βασικές μαθηματικές πράξεις. Επίλυση Η ολοκλήρωση της εφαρμογής θα γίνει σε διακριτά βήματα ώστε να γίνει κατανοητή η όλη διαδικασία. Βήμα 1 - Έναρξη του περιβάλλοντος εργασίας Βήμα 2 - Η δημιουργία της εφαρμογής Βήμα 3 - Σχεδίαση της διεπαφής της εφαρμογής Βήμα 4 - Σύνταξη του κώδικα της εφαρμογής Βήμα 5 - Ο έλεγχος των σφαλμάτων Βήμα 6 -Η εκτέλεση της εφαρμογής Βήμα 7 - Διορθώσεις στο κώδικα Βήμα 8 Επεκτάσεις στον κώδικα Βήμα 9 Βελτίωση της λειτουργικότητας Βήμα 1 - Έναρξη του περιβάλλοντος εργασίας Το πρώτο βήμα είναι να ξεκινήσετε το περιβάλλον ανάπτυξης της εφαρμογής. Από το κουμπί Έναρξη (στην αγγλική έκδοση των XP είναι Start) επιλέγετε Ολα τα Προγράμματα (στην αγγλική έκδοση των XP είναι All Programs) και τέλος το εικονίδιο Microsoft Visual C# Express Edition, εικόνα 1.
Εικόνα 1. Η έναρξη της εφαρμογής Κατόπιν εμφανίζετε το περιβάλλον ανάπτυξης της εφαρμογής. Εικόνα 2. Η εναρκτήρια οθόνη της εφαρμογής
Βήμα 2 - Η δημιουργία της εφαρμογής Θα πρέπει να κατασκευάσετε ένα project (έργο) το οποίο θα περιλαμβάνει τα αρχεία και τις φόρμες που υλοποιούν την λειτουργικότητα της εφαρμογής σας. Εικόνα 3. Η δημιουργία ενός νέου έργου Από το μενού File επιλέγετε New Project... και εν συνεχεία επιλέγετε παραθυρική εφαρμογή (Windows Application) Εικόνα 4. Επιλογή του είδους της εφαρμογής
Αλλάξτε το όνομα του έργου σε Calculator και πατήστε το πλήκτρο ΟΚ. Εμφανίζετε η φόρμα της εφαρμογής καθώς και τα παράθυρα Properties και Solution Explorer. Εικόνα 5. Επιλογή φακέλου για την αποθήκευση της εφαρμογής Από το μενού File επιλέγετε Save All και στη φόρμα που εμφανίζετε - διατηρείστε το προεπιλεγμένο όνομα Calculator, για το έργο και το Solution - επιλέγετε το φάκελο που θα αποθηκεύσετε την εφαρμογή σας - στο συγκεκριμένο παράδειγμα είναι o φάκελος Labs στο δίσκο C, και πατήστε το πλήκτρο Save. Ανά τακτά χρονικά διαστήματα, από το μενού File να επιλέγετε Save All για να αποθηκεύσετε τις τρέχουσες αλλαγές. Βήμα 3 - Σχεδίαση της διεπαφής της εφαρμογής Ο χρήστης στην συγκεκριμένη εφαρμογή θα πρέπει να έχει την δυνατότητα να πληκτρολογήσει δύο αριθμούς και εν συνεχεία να πατήσει ένα πλήκτρο για να εμφανιστεί το άθροισμα τους. Άρα στην φόρμα θα πρέπει να υπάρχει ένα τουλάχιστον κουμπί εντολών καθώς και 3 κουτιά κειμένου, όπου στα δύο πρώτα θα πληκτρολογήσει ο χρήστης τους αριθμούς και στο τρίτο θα εμφανιστεί το άθροισμα. Πατήστε το κουμπί ToolBox αν δεν το βλέπετε στο αριστερό μέρος της οθόνης τότε από το μενού View επιλέξτε Toolbox - για να εμφανιστούν τα χειριστήρια της εργαλειοθήκης. Τοποθετήστε πάνω στην φόρμα 3 ετικέτες, 3 κουτιά κειμένου και ένα κουμπί εντολών.
Εικόνα 5. H φόρμα της εφαρμογής Επιλέξτε ένα προς ένα τα αντικείμενα της φόρμας και στο παράθυρο Properties αλλάξτε τις παρακάτω ιδιότητες : Η φόρμα Form1 Name frmcalculate Το όνομα του Η εφαρμογή Υπολογιστής Η γραμμή τίτλου MaximizeButton False Για να μην FormBorderStyle FixedSingle αλλάζει το μέγεθος της φόρμας. Το πρώτο κουτί κειμένου textbox1 Name txtfirst Το όνομα του Το δεύτερο κουτί κειμένου textbox2 Name txtsecond Το όνομα του
Το τρίτο κουτί κειμένου textbox3 Name txtresult Το όνομα του ReadOnly True Για να μην μπορεί να γράψει ο χρήστης Το κουμπί εντολών button1 Name btncalculate Το όνομα του Υπολόγισε Η πρώτη ετικέτα label1 Name lblfirst Το όνομα του Πρώτος Αριθμός Η δεύτερη ετικέτα label1 Name lblsecond Το όνομα του Δεύτερος Αριθμός Η τρίτη ετικέτα label1 Name lblresult Το όνομα του Αποτέλεσμα Βήμα 4 - Σύνταξη του κώδικα της εφαρμογής
Επιλέξτε το κουμπί εντολών btncalculate και στο παράθυρο Properties κάντε κλικ στο εικονίδιο με το κεραυνό για να εμφανιστούν τα γεγονότα. Βρείτε το γεγονός Click κάντε διπλό κλικ πάνω για να εμφανιστεί το παράθυρο με το προγραμματισμό των γεγονότων. Μέσα στη μέθοδο btncalculate_click πληκτρολογείστε τις παρακάτω εντολές : private void btncalculate_click(object sender, EventArgs e) { txtresult. = txtfirst. + txtsecond.; } Βήμα 5 - Ο έλεγχος των σφαλμάτων Αφού ολοκληρώσετε την σύνταξη των εντολών θα πρέπει να ελέγξετε την εφαρμογή σας για τυχόν λάθη. Μέσα από το μενού Build επιλέγετε Build Solution ή διαφορετικά πατάτε το πλήκτρο F6. Βήμα 6 -Η εκτέλεση της εφαρμογής Για να τρέξετε την εφαρμογή θα πρέπει μέσα από το μενού Debug να επιλέξετε Start Debuging ή διαφορετικά πατάτε το πλήκτρο F5. Το παράθυρο της εφαρμογής εμφανίζετε στην οθόνη του υπολογιστή σας. Πληκτρολογείστε στα δύο πρώτα κουτιά κειμένου 9 και 5 αντίστοιχα και εν συνεχεία πατήστε το πλήκτρο Υπολόγισε. Εικόνα 6. Το παράθυρο της εφαρμογής
Για να επιστρέψετε στο περιβάλλον ανάπτυξης θα πρέπει να κλείσετε την εφαρμογή σας Βήμα 7 - Διορθώσεις στο κώδικα Η εφαρμογή εκτελείται κανονικά αλλά δεν εμφανίζει το αναμενόμενο αποτέλεσμα επειδή κάνει πρόσθεση κειμένου (συνένωση αλφαριθμητικών string concatenation) και όχι πρόσθεση αριθμών. Για να διορθώσουμε το πρόβλημα θα πρέπει να κάνουμε τις παρακάτω ενέργειες : α) Μετατροπή του περιεχόμενου των κουτιών κειμένου, txtfirst. και txtsecond. σε αριθμούς. β) Πρόσθεση των αριθμών γ) Μετατροπή του αθροίσματος των αριθμών σε κείμενο και απόδοση στο κείμενο του txtresult Οι υπολογιστές δεν αντιλαμβάνονται τους αριθμούς όπως εμείς οι άνθρωποι και για να τους διαχειρίζονται τους έχουν χωρίσει σε κατηγορίες όπου η καθεμία έχει συγκεκριμένο εύρος τιμών. Πίνακας 1 Οι αριθμητικοί τύποι δεδομένων στην C# Τύπος Εξήγηση Εύρος Τιμών byte Θετικός 0...255 ακέραιος sbyte Ακέραιος με -128...127 πρόσημο short Ακέραιος με -32768...32767 πρόσημο ushort Θετικός 0...65535 ακέραιος int Ακέραιος με -2147483,648... 2147483647
uint long ulong float double decimal πρόσημο Θετικός ακέραιος Ακέραιος με πρόσημο Θετικός ακέραιος Δεκαδικός με πρόσημο Δεκαδικός με πρόσημο Δεκαδικός με πρόσημο 0...4294967295-9,223,372,036,854,775,808... 9,223,372,036,854,775,807 0.. 18446744073709551615-3,402823E+38..3,402823E+38 ακρίβεια 7 ψηφίων -1,79769313486232E+308.. 1,79769313486232E+308 ακρίβεια 15 ψηφίων -79228162514264337593543950335.. 79228162514264337593543950335 ακρίβεια 28 ψηφίων, μικρότερο εύρος τιμών αλλά μεγαλύτερη ακρίβεια Η χρήση της κατάλληλης κατηγορίας ανάλογα με τις ανάγκες του προγράμματος, δεν επιβαρύνει το πρόγραμμα σε μνήμη και το κάνει πιο γρήγορο στην εκτέλεση του. Για παράδειγμα ο τύπος byte καταλαμβάνει 8 bit στην μνήμη του υπολογιστή ενώ ο τύπος long καταλαμβάνει 64 bit. Αν σε μια εφαρμογή θέλουμε να αποθηκεύσετε την ηλικία ενός μαθητή που σύμφωνα με τα ανθρώπινα δεδομένα δεν ξεπερνά τα 100 χρόνια - τότε μπορείτε να χρησιμοποιήσετε και τους δύο τύπους χωρίς κανένα σφάλμα στην εκτέλεση των εντολών. Το πρόβλημα θα είναι η κατανάλωση των πόρων του υπολογιστή γιατί καταλαμβάνει μνήμη που δεν του χρειάζεται και σε ταχύτητα αφού η διαχείριση μεγαλύτερου μήκους πληροφορίας επιβραδύνει την εκτέλεση των πράξεων. Εμφανίστε το κώδικα της εφαρμογής και στην μέθοδο btncalculate_click πληκτρολογείστε τις παρακάτω εντολές, χωρίς τους αριθμούς στην αρχή της κάθε γραμμής :
Πίνακας 2 Ο κώδικας της εφαρμογής 1 private void btncalculate_click(object sender, EventArgs e) 2 { 3 double x, y, sum; 4 5 x = double.parse(txtfirst.); 6 y = double.parse(txtsecond.); 7 sum = x + y; 8 txtresult. = sum.tostring(); 9 } Επεξήγηση του κώδικα Στην γραμμή 3 δηλώνουμε τρεις αποθηκευτικούς χώρους στην μνήμη του υπολογιστή με ονόματα x, y και z αντίστοιχα. Ο καθένας χώρος είναι ικανός να αποθηκεύσει ένα δεκαδικό αριθμό. Αυτοί οι αποθηκευτικοί χώροι ονομάζονται μεταβλητές γιατί μπορούμε να αλλάζουμε τις τιμές τους κατά την διάρκεια του προγράμματος. Στην γραμμή 5 μετατρέπουμε το κείμενο του txtfirst σε δεκαδικό αριθμό και εν συνεχεία το αποδίδουμε στη μεταβλητή x. Όλοι οι αριθμητικοί τύποι δεδομένων Πίνακας 1 είναι αντικείμενα που υποστηρίζουν την μέθοδο Parse, η οποία παίρνει ένα αλφαριθμητικό (string) και το μετατρέπει στον αντίστοιχο τύπο. Για παράδειγμα οι παρακάτω γραμμές δεν έχουν σχέση με το πρόγραμμα που επιλύουμε - μετατρέπουν το περιεχόμενο του txtfirst σε byte και ακέραιο αριθμό και το αποδίδουν στις μεταβλητές t και m αντίστοιχα. Παράδειγμα χρήσης της μεθόδου Parse byte t ; t = byte.parse(txtfirst.); int m ; m = int.parse(txtfirst.); Στην γραμμή 6 μετατρέπουμε το κείμενο του txtsecond σε δεκαδικό
αριθμό και εν συνεχεία το αποδίδουμε στη μεταβλητή y. Στην γραμμή 7 κάνουμε την πρόσθεση και αποδίδουμε το αποτέλεσμα στη μεταβλητή z. Στην γραμμή 8 κάνουμε μετατρέπουμε το περιεχόμενο της μεταβλητής z (δηλαδή τον αριθμό) σε αλφαριθμητική τιμή και την αποδίδουμε στο κείμενο του txtresult. Εικόνα 7. Το παράθυρο της εφαρμογής Πατήστε το πλήκτρο F6 για να κάνετε έλεγχο σφαλμάτων και εν συνεχεία τρέξτε την εφαρμογή επιλέγοντας Start Debuging από το μενού Debug ή πατώντας το πλήκτρο F5. Το παράθυρο της εφαρμογής εμφανίζετε στην οθόνη του υπολογιστή σας. Πληκτρολογείστε στα δύο πρώτα κουτιά κειμένου 1,3 και 3,9 αντίστοιχα και εν συνεχεία πατήστε το πλήκτρο Υπολόγισε. Το αποτέλεσμα υπολογίζεται σωστά. Βήμα 8 Επεκτάσεις στον κώδικα Το πρόγραμμα εκτελείται σωστά αλλά έχει περιορισμένη λειτουργικότητα αφού υποστηρίζει μόνο την πράξη της πρόσθεσης. Για να υποστηρίξετε και άλλες πράξεις χρειάζεται να κάνετε επεμβάσεις στην διεπαφή και στο κώδικα της εφαρμογής. Προσθέστε στην φόρμα της εφαρμογής, μια ετικέτα και ένα κουτί κειμένου όπως παρακάτω :
Εικόνα 8. Το παράθυρο της εφαρμογής Η ετικέτα label1 Name lbloperation Το όνομα του Πράξη Το πρώτο κουτί κειμένου textbox1 Name txtoperation Το όνομα του MaxLength 1 To μέγιστο μήκος του κειμένου Στο κώδικα του γεγονότος Click για το αντικείμενο btncalculate γράψτε το παρακάτω κώδικα, χωρίς τους αριθμούς στην αρχή της κάθε γραμμής : Πίνακας 3 Ο κώδικας της εφαρμογής 1 private void btncalculate_click(object sender, EventArgs e) 2 { 3 double x, y, sum; 4 5 x = double.parse(txtfirst.); 6 y = double.parse(txtsecond.); 7 8 if (txtoperation. == "+") 9 { 10 sum = x + y;
11 } 12 else if (txtoperation. == "-") 13 { 14 sum = x - y; 15 } 16 else if (txtoperation. == "*") 17 { 18 sum = x * y; 19 } 20 else if (txtoperation. == "/") 21 { 22 sum = x / y; 23 } 24 else 25 { 26 sum = 0; 27 } 28 29 txtresult. = sum.tostring(); 30 } 31 } Στο παραπάνω πρόγραμμα η δομή if σας επιτρέπει να ελέγχετε το περιεχόμενο του κειμένου στο αντικείμενο txtoperation και ανάλογα να εκτελείται η αντίστοιχη αριθμητική πράξη. Η γενική σύνταξη της if είναι : Πίνακας 4. H σύνταξη της if Περίπτωση 1 Περίπτωση 2 Περίπτωση 3 if(συνθήκη) { } if(συνθήκη) { } else { } if(συνθήκη1) { } else if (συνθήκη2) { } else if (συνθήκη3) { } else
{ } Αν η συνθήκη είναι αληθής τότε στην Περίπτωση 1 εκτελούνται όλες οι εντολές που εμπερικλείονται μέσα στα άγκιστρα του if διαφορετικά αγνοούνται και η ροή του προγράμματος συνεχίζει μετά το if. Στην Περίπτωση 2 αν η συνθήκη είναι αληθής τότε εκτελούνται όλες οι εντολές που εμπερικλείονται μέσα στα άγκιστρα του if διαφορετικά εκτελούνται όλες οι εντολές που εμπερικλείονται μέσα στα άγκιστρα του else. Στην Περίπτωση 3 ελέγχονται όλες οι συνθήκες με την σειρά και εκτελείται η πρώτη που είναι αληθής διαφορετικά εκτελούνται όλες οι εντολές που εμπερικλείονται μέσα στα άγκιστρα του τελευταίου else. Σαν συνθήκη είναι μια οποιαδήποτε λογική έκφραση η οποία είτε έχει προκύψει από την χρήση των τελεστών σύγκρισης : Τελεστής Σχέση == ισότητα < μικρότερο >= Μικρότερο ή ίσο > μεγαλύτερο <= μεγαλύτερο ή ίσο!= διάφορο ή είναι μια λογική τιμή. Στο Πίνακα 3, χρησιμοποιούμε την περίπτωση 3 σύνταξης του if και στις γραμμές 8, 12, 16 και 20 γίνεται σύγκριση της τιμής του txtoperation. με τους αντίστοιχους αριθμητικούς τελεστές και εάν η συνθήκη είναι αληθής τότε εκτελείται η αντίστοιχη πράξη. Η C# έχει λογικό τύπο δεδομένων, τον bool, όπου οι μεταβλητές αυτού του τύπου παίρνουν σαν τιμές true ή false. Για να καταλάβετε την χρήση του λογικού τύπου, ο ανωτέρω κώδικας στο Πίνακα 3, θα μπορούσε να γραφτεί όπως παρακάτω : Πίνακας 5 Ο κώδικας της εφαρμογής 1 private void btncalculate_click(object sender, EventArgs e) 2 {
3 double x, y, sum; 4 bool cond1, cond2, cond3, cond4; 5 6 x = double.parse(txtfirst.); 7 y = double.parse(txtsecond.); 8 9 cond1 = txtoperation. == "+"; 10 cond2 = txtoperation. == "-"; 11 cond3 = txtoperation. == "*"; 12 cond4 = txtoperation. == "/"; 13 14 if (cond1) 15 { 16 sum = x + y; 17 } 18 else if (cond2) 19 { 20 sum = x - y; 21 } 22 else if (cond3) 23 { 24 sum = x * y; 25 } 26 else if (cond4) 27 { 28 sum = x / y; 29 } 30 else 31 { 32 sum = 0; 33 } 34 35 txtresult. = sum.tostring();
36 } Στην γραμμή 4 ορίζονται τέσσερις μεταβλητές τύπου bool και στις γραμμές 9, 10,11 και 12 παίρνουν τιμές true ή false ανάλογα με το αποτέλεσμα της σύγκρισης. Για παράδειγμα στην γραμμή 9 η τιμή κειμένου txtoperation. συγκρίνεται με το αλφαριθμητικό "+" αν είναι ίδιες. Το αποτέλεσμα της σύγκρισης είναι αληθής (true) ή ψευδής (false). Το ίδιο γίνεται και με τις υπόλοιπες μεταβλητές στις γραμμές 10,11,12. Εν συνεχεία στην γραμμή 14 αν η τιμή της μεταβλητής cond1 είναι true τότε θα γίνει η πρόσθεση διαφορετικά θα συνεχίσει το πρόγραμμα στην επόμενη σύγκριση στην γραμμή 18. Η C# για να βοηθήσει τον προγραμματιστή υποστηρίζει εκτός από το if και την δομή switch η οποία είναι χρήσιμη για την σύγκριση της αριθμητικής ή αλφαριθμητικής τιμής μιας μεταβλητής με προκαθορισμένες τιμές. Η γενική σύνταξη του swich είναι : Πίνακας 6. H σύνταξη του switch switch(μεταβλητή) { case Τιμή_1 : break; case Τιμή_2 : break;. default: break; } Στο πίνακα 6, η Μεταβλητή εμπεριέχει την τιμή που θα συγκρίνει το switch αντίστοιχα με τις τιμές Τιμή_1, Τιμή_2 και ούτω καθεξής. Αν μια από όλες τις τιμές είναι ίδιες τότε θα εκτελεστούν οι αντίστοιχες εντολές μέχρι του σημείου που θα συναντήσει την εντολή break η οποία θα οδηγήσει την ροή του προγράμματος εκτός του switch. H τιμή default είναι προαιρετική και εκτελείται στην περίπτωση που δεν
υπάρχει ταίριασμα της τιμής της Μεταβλητής με κάποια από τις προηγούμενες περιπτώσεις. Και οι δύο δομές if και switch κάνουν την ίδια εργασία απλά σε ορισμένες περιπτώσεις, με το switch αποφεύγετε το μακροσκελή κώδικα. Για παράδειγμα ο κώδικας του Πίνακα 3 θα μπορούσε να γραφεί : Πίνακας 5 Ο κώδικας της εφαρμογής 1 private void btncalculate_click(object sender, EventArgs e) 2 { 3 double x, y, sum; 4 5 x = double.parse(txtfirst.); 6 y = double.parse(txtsecond.); 7 8 switch (txtoperation.) 9 { 10 case "+": 11 sum = x + y; 12 break; 13 case "-": 14 sum = x - y; 15 break; 16 case "*": sum = x * y; 17 break; 18 case "/": sum = x / y; 19 break; 20 default: sum = 0; 21 break; 22 } 23 24 txtresult. = sum.tostring(); 25 } Βήμα 9 Bελτίωση της λειτουργικότητας
Η πληκτρολόγηση του χαρακτήρα της πράξης είναι αρκετά κουραστική και ίσως δεν είναι κατανοητό από την πλευρά του χρήστη τι θα πρέπει να πληκτρολογήσει στο αντίστοιχο πεδίο. Η αντικατάσταση του κουτιού κειμένου με ένα πλαίσιο πολλαπλών επιλογών (combobox) θα έλυνε το πρόβλημα. Εικόνα 9. Το παράθυρο της εφαρμογής Το πλαίσιο πολλαπλών επιλογών combobox1 Name cmboperation Το όνομα του Items + - * / DropDownStyle DropDownList Οι τελεστές των πράξεων Για να περάσετε τις τιμές στο Items θα κάνετε αριστερό κλικ πάνω στο κουμπί με τις τρεις τελείες και στο παράθυρο διαλόγου με τίτλο String Collection Editor πληκτρολογείτε τις τιμές την μια μετά την άλλη πατώντας Enter και τέλος πατάμε το πλήκτρο ΟΚ να κλείσει το παράθυρο. Στο κώδικα της εφαρμογής στο Πίνακα 5 αλλάζουμε την γραμμή 8 και
πληκτρολογούμε το όνομα του combobox 8 switch (cmboperation.)