Coder.gr

Μέρος 1 - Ξεκινώντας

Πριν αποφασίσουν κάποιοι να προσπεράσουν το άρθρο αυτό λόγω τίτλου, να αναφέρω ότι η εφαρμογή αυτή μπορεί να χρησιμοποιηθεί για την ηλεκτρονική αρχειοθέτηση οποιασδήποτε εικόνας κι όχι μόνο συνταγών. Η εφαρμογή προσφέρει αναζήτηση με χρήση λέξεων-κλειδιών και εμφάνιση πλήρους οθόνης μιας εικόνας! Για μένα αυτές οι εικόνες ήταν συνταγές, μπορεί να είναι οτιδήποτε άλλο για κάποιον άλλον. Τα σχετικά αρχεία του project αυτού αρχεία θα τα ανεβάσω στο σχετικό μέρος του coder.gr στο τέλος των άρθρων. Όπως και να έχει αποτελεί, πιστεύω, ένα καλό παράδειγμα για κάποιον που θέλει να ξεκινήσει στο περιβάλλον αυτό ανάπτυξης.

Α. Πως ξεκίνησαν όλα

Πρόσφατα λοιπόν έχοντας αποθηκεύσει εκατοντάδες αποκόμματα συνταγών ήθελα ένα απλό και γρήγορο τρόπο να τα ψηφιοποιήσω προκειμένου να έχω την δυνατότητα γρήγορης αναζήτησης και κατά συνέπεια άμεσης εύρεσης. Αυτό πέρα από το πρακτικό του θέματος, την εξοικονόμηση χώρου δηλαδή, μελλοντικά μπορεί με μια οθόνη touch στην κουζίνα να γίνει ο "ηλεκτρονικός βοηθός μαγειρικής"(!) μια και όσο περνάει ο καιρός οι τιμές του σχετικού εξοπλισμού πέφτουν.

Β. Επιλογή περιβάλλοντος ανάπτυξης

Ας αφήσουμε τα μελλοντικά σχέδια, και με το σκεπτικό ότι δεν είναι τίποτα εξεζητημένο σαν πρόγραμμα προχώρησα στην επιλογή γλώσσας ανάπτυξης. Σκέφτηκα να μην εμπλακώ σε πολύωρη αναζήτηση μια και θα ήταν 1-2 φόρμες οι οποίες θα απαιτούσαν μια σύνδεση με βάση δεδομένων. Σε σύγχρονα περιβάλλοντα κάτω από Windows η επιλογή είναι κάποιο Java ή .ΝΕΤ IDE. Συγγνώμη αν αφήνω κάποιο RAD απέξω (Delphi) αλλά αυτά γνωρίζω, οπότε καθαρά από θέμα προτίμησης στα δύο επέλεξα την C#. Αν ήταν κάτι εξεζητημένο θα πήγαινα σε C++ αλλά τώρα είναι κάτι που πρέπει να τελειώσει γρήγορα και όμορφα όπως έγραψα ήδη (sorry Java people out there!). Επίσης νομίζω ότι θα μπορούσα να χρησιμοποιήσω web services αλλά δεν είχα αυτό στο μυαλό μου, ίσως κάποιος από σας προχωρήσει σε μια τέτοια υλοποίηση, μια και η εικόνα θα μπορούσε να streamάρεται για τον client.

Γ. Επιλογή βάσης δεδομένων

Σαν βάση δεδομένων μπορεί να χρησιμοποιηθεί οποιαδήποτε (εγώ χρησιμοποιώ SQL Server Express) αλλά για το παράδειγμα αυτό προτίμησα την Microsoft Access. Έχει το πλεονέκτημα της "μεταφερσιμότητας" μια και κάνοντας αντιγραφή το αρχείο συνεχίζει να παίζει χωρίς να θες εγκατάσταση έστω του SQL Server Express ή MySQL. Μια και "παίζουμε" με Visual Studio 2008 Εxpress οι επιλογές μας στην βάση δεδομένων περιορίζονται (αν και υπάρχει .ΝΕΤ τρόπος για την MySQL εκτός των εγγενών επιλογών που προσφέρονται).

Δ. Ας αρχίσουμε!

Όσοι γνωρίζουν το περιβάλλον του Visual Studio C#, μπορούν να συνεχίσουν στο επόμενο (Ε) γιατί θα το πάρουμε από την αρχή εδώ. Εντάξει, υποθέτω ότι υπάρχει το Visual Studio 2008 Express για C# εγκατεστημένο ήδη (υπάρχει διαφορετική εγκατάσταση για κάθε Express Edition περιβάλλον από όσο γνωρίζω κι όχι κοινή εγκατάσταση όπως το VS Prο για παράδειγμα).

Ξεκινάμε λοιπόν το Visual Studio και επιλέγουμε File/New Project... και στο παράθυρο που ανοίγει στο αριστερό μέρος διαλέγουμε Windows εκεί που λέει Visual C#. Στην συνέχεια επιλέγουμε δεξιά Windows Forms Application και προχωράμε στο κάτω μέρος του παραθύρου. Δίνουμε Name "Recipes" ή ότι άλλο θέλουμε, στο Location επιλέγουμε τον φάκελο του project και στην επιλογή Solution φροντίζουμε να δείχνει "Create new Solution". Δεν επιλέγω συνήθως το Create directory for solution αλλά επιλέξτε ότι θέλετε εκεί. Στην συνέχεια πατάμε το OK και περιμένουμε (το καλό πράγμα αργεί να γίνει, έτσι;) να εμφανιστεί η οθόνη του Solution που μόλις δημιουργήσαμε.

Έχουμε δημιουργήσει το solution και βρίσκουμε το Solution Explorer pane. Πατάμε δεξί κλικ πάνω στο όνομα του project (Recipes) και επιλέγουμε το Add/New item... για να δημιουργήσουμε την πρώτη φόρμα μας. Στο παράθυρο που ανοίγει διαλέγουμε δεξιά το Windows Form και στο Name δίνουμε fRecipes.cs και πατάμε Add. Με τον ίδιο τρόπο δημιουργούμε και την δεύτερη φόρμα με όνομα fRecipeImage.cs.

Ε. Δημιουργώντας τις οθόνες.

Το project μας με όνομα Recipes περιέχει 2 φόρμες με ονόματα fRecipes και fRecipeImage. Εκτός από τις 2 αυτές φόρμες θα πρέπει να περιέχει τους φακέλους Properties, References και τα αρχεία app.config και Program.cs στην δενδροειδή απεικόνιση πάντα στο Solution Explorer.

Η 1η φόρμα που δημιουργήσαμε (fRecipes) θα χρησιμοποιηθεί για την αναζήτηση μιας συνταγής από την βάση δεδομένων αλλά και για την καταχώρηση μιας συνταγή. Τα αποτελέσματα της αναζήτησης θα εμφανίζονται αριστερά σε datagridview και δεξιά σε pictureview (σε στυλ προεπισκόπησης).

Η 2η (fRecipeImage) είναι η φόρμα εμφάνισης της εικόνας που επιλέγουμε να δούμε με βάση την αναζήτηση που έχουμε κάνει και την εικόνα που έχει εμφανιστεί δεξιά από το datagridview. Η φόρμα αυτή θα ανοίγει με το κλικ του ποντικιού πάνω στην εικόνα προεπισκόπησης και θα καταλαμβάνει όλη την οθόνη με την εικόνα μόνο σε όλη την φόρμα (χωρίς άλλο control).

Αυτή είναι η περιγραφή ως τώρα. Φυσικά δεν είναι η σχεδίαση που θα απαιτούνταν σε μια επιχείρηση αλλά για την περίπτωσή μας, μας καλύπτει.

ΣΤ. Ώρα για controls και properties

Σε αυτό το σημείο είμαστε σε θέση να τοποθετήσουμε τα controls και να ορίσουμε την παραμετροποίηση που θέλουμε. Ξεκινάμε από την φόρμα fRecipes.

Η φόρμα fRecipes είναι η φόρμα που εμφανίζεται κατά την εκκίνηση της εφαρμογής. Θα πρέπει να επιτρέπει:
α. την εισαγωγή λέξεων κλειδιών προς αναζήτηση
β. την εμφάνιση των αποτελεσμάτων της αναζήτησης
γ. την εμφάνιση βάσει επιλεγμένου αποτελέσματος μιας εικόνας
δ. την εισαγωγή νέας εγγραφής καταχώρησης
Συνεπώς "χωρίζεται" νοηματικά σε δύο περιοχές: την περιοχή αναζήτησης και την περιοχή καταχώρησης.

Πρώτα απ΄όλα ας δώσουμε διάσταση στην φόρμα μας. Αν δεν είναι ο Designer της φόρμας στην οθόνη μας, στο Solution Explorer pane, βρίσκουμε το fRecipes.cs και πατώντας δεξί κλικ πάνω του διαλέγουμε View Designer. Εμφανίζεται η φόρμα μας λοιπόν. Επιλέγουμε properties και στην ιδιότητα Size δίνουμε "800;600". Μπορούμε να αναπτύξουμε το Size πατώντας τον σταυρό [+] δίπλα του και να γράψουμε στο Width 800 και στο Height 600 - είναι το ίδιο πράγμα ακριβώς. Επέλεξα αυτό το μέγεθος για να καλύπτει τις περισσότερες οθόνες σαν "βασική" διάσταση φόρμας.

Όταν ανοίγει η φόρμα μας θέλουμε να εμφανίζεται στο κέντρο της οθόνης. Για αυτό τον λόγο βρίσκουμε το StartPosition στο Properties pane και διαλέγουμε CenterScreen. Στο Text γράφουμε κάτι σχετικό όπως "Αρχείο συνταγών". Επειδή θέλω η φόρμα να μην αλλάζει μέγεθος δίνω στο MaximizeBox την τιμή False και στο FormBorderStyle δίνω την τιμή FixedSingle. Τέλος στο (Name) δίνω την τιμή frmRecipesArchive για να γνωρίζω τι αφορά η φόρμα αργότερα στον κώδικα.

Ήρθε η ώρα να "ρίξουμε" το πρώτο μας control στην φόρμα. Από το Toolbox pane, τοποθετώ ένα TabControl στην φόρμα μου. Θα έχει δύο tabs: "Αναζήτηση" και "Εισαγωγή". Για αρχή εντοπίζω την ιδιότητα Dock του TabControl και δίνω την τιμή Fill. Αυτό θα προκαλέσει το TabControl να καταλάβει όλο τον διαθέσιμο χώρο της φόρμας. Στην συνέχεια δίνω στο (Name) την τιμή tcMain. Δεν έχω φτιάξει όμως τα tabs που έχω αναφέρει. Με δεξί κλικ στο tcMain διαλέγω από το μενού που εμφανίζεται Add Tab και το επαναλαμβάνω άλλη μια φορά. Στην συνέχεια επιλέγω το πρώτο tab και πατώ μέσα στην περιοχή του. Γράφω στο Text "Αναζήτηση" και (Name) tpSearch. Επαναλαμβάνω το ίδιο και στο δεύτερο tab και δίνω σαν Text "Εισαγωγή" και (Name) tpImport. Τώρα η φόρμα μας έχει αποκτήσει κάποια μορφή.

Μπαίνουμε στη τελευταία φάση της σχεδίασης τώρα γεμίζοντας τα tabs. Ξεκινάμε από αυτό της αναζήτησης. Τοποθετούμε ένα TextBox στο πάνω μέρος της οθόνης και δίνουμε (Name) tbSearch ενώ σαν Text τίποτα. Αριστερά, τοποθετούμε ένα Label με Text "Λέξεις κλειδιά" και (Name) lbSearch ενώ δεξιά, ένα button με (Name) btSearch και Text "Αναζήτηση". Θα χρησιμοποιηθούν τα controls αυτά για να εισάγουμε λέξεις προς αναζήτηση στο αρχείο της βάσης δεδομένων.

Ακριβώς από κάτω θα τοποθετήσουμε 2 controls που καταλαμβάνουν τον υπόλοιπο χώρο του tab. Για αρχή τοποθετούμε ένα Label ακριβώς από κάτω από το προηγούμενο label με (Name) lbResults και Text "Αποτελέσματα". Τώρα, συνεχίζουμε με ένα DataGridView αριστερά με (Name) dgvData, στο RowHeadersVisible δίνουμε False για αρχή. Στήλες (columns) θα προσθέσουμε αργότερα όταν προσθέσουμε την βάση δεδομένων. Δεξιά του DataGridView στο χώρο που απομένει, τοποθετούμε ένα PictureBox με (Name) pbScan.

Πάμε τώρα στο δεύτερο tab που ονομάσαμε "Εισαγωγή". Ξεκινάμε με τρία Labels το ένα κάτω από το άλλο διαδοχικά με (Name) lbImportKeys, lbDescription και lbImage και Text "Λέξεις κλειδιά", "Περιγραφή" και "Εικόνα" αντίστοιχα. Τοποθετούμε δεξιά των labels τρία TextBoxes με καθαρό το Text και (Name) tbImportKeys, tbImportDescription και tbImportImage αντίστοιχα. Τέλος τοποθετούμε δύο Buttons, το ένα δίπλα στο tbImportImage με (Name) btImageFile και Text "..." το οποίο θα χρησιμοποιηθεί για την επιλογή του αρχείου εικόνας. Τέλος, τοποθετούμε κάτω από τα labels ένα ακόμα Button με (Name) btImport και Text "Εισαγωγή".

Πριν προχωρήσουμε στην σχεδίαση της επόμενης φόρμας, ας επιστρέψουμε στα properties της φόρμας (frmRecipesArchive). Επειδή θέλουμε όταν εισάγουμε κάποιες λέξεις-κλειδιά πατώντας το Enter να εκτελείται η αναζήτηση, μπορούμε να ορίσουμε στο AcceptButton την τιμή btSearch που αφορά το Button "Αναζήτηση". Έτσι, με το Enter θα εκτελείται ότι κώδικας εισαχθεί στο αντίστοιχο event του Button αυτού. Προχωράμε τώρα στην δεύτερη φόρμα.

Η φόρμα fRecipeImage είναι απλούστερη μια και περιέχει μόνο ένα PictureView για την εμφάνιση της εικόνας. Παρόλα αυτά κάνουμε την εξής παραμετροποίηση: (Name) frmRecipeImage, AutoScroll True, FormBorderStyle FixedDialog, MaximizeBox False, Size "800;600", StartPosition CenterParent, Text "Επιλεγμένη συνταγή", WindowState Maximized. Στην συνέχεια από το Toolbox τοποθετούμε ένα PictureView και δίνουμε (Name) pbRecipe και SizeMode AutoSize. Τόσο απλό!

Μέχρι στιγμής δεν έχουμε εισάγει καθόλου κώδικα, απλά κάναμε την βασική σχεδίαση των φορμών. Μια πρώτη εικόνα της εμφάνισης των φορμών σε αυτό το σημείο μπορείτε να δείτε κατεβάζοντας τα σχετικά screenshots από αυτό τον σύνδεσμο http://www.gcsoft.gr/team/RecipesArch...ppart1.zip ή απευθείας από το Downloads του coder.gr αναζητώντας την αντίστοιχη περιγραφή κάτω από το Microsoft/C#.Net. Στα επόμενα (κάποια στιγμή σύντομα) θα ολοκληρώσουμε την εφαρμογή με την εξής διάρθρωση των άρθρων:

Μέρος 2 - Σύνδεση με την βάση δεδομένων
Μέρος 3 - Γράφοντας λίγο κώδικα
Μέρος 4 - Έλεγχος της εφαρμογής - Βελτιώσεις