User Interface Models

1. User Interface Models • Οι εφαρμογές οπτικού προγραμματισμού μπορούν να ακολουθούν ένα από τα παρα-κάτω τρία μοντέλα όσον αφορά το interface: • SDI εφαρμογές (Single Document Interface): εφαρμογές που έχουν μενού, toolbars, status bars κ.λ.π. και χειρίζονται ένα αντικείμενο δεδομένων (ένα κείμενο, μία εικόνα κ.λ.π.). • MDI εφαρμογές (Multiple Document Interface): εφαρμογές που έχουν μενού, toolbars, status bars κ.λ.π. και χειρίζονται πολλαπλά αντικείμενο δεδομένων που εμφανίζονται σε ξεχωριστά παράθυρα. • Dialog based εφαρμογές : εφαρμογές συνήθως χωρίς μενού που επιτρέπουν στον χρήστη να καταχωρήσει κάποια στοιχεία (π.χ. όνομα, password, κ.λ.π.) ή να πάρει αποφάσεις.

2. User Interface Models 2 • Οι εφαρμογές που δημιουργούνται με την επιλογή FileNew Applica-tion (κενή φόρμα) προορίζονται είτε για SDI είτε για Dialog Based. • Μπορούμε να δημιουργήσουμε μία SDI εφαρμογή με έτοιμα toolbars, status bars, μενού και διαλόγους με την επιλογή File-New και επιλέγοντας στη σελίδα Projects το “SDI Application”. File  New SDI Application

3. MDI Applications • Μπορούμε να δημιουργήσουμε μία MDI εφαρμογή με έτοιμα toolbars, status bars, μενού και διαλόγους καθώς και επιλογές διαχείρισης των επιμέρους παραθύρων των δεδομένων με την επιλογή FileNew και επιλέγοντας στη σελίδα Projects το “ΜDI Application”. • Εναλλακτικά μπορούμε να ξεκινήσουμε από ένα τυπικό project (κενή φόρμα) και να καθορίσουμε την ιδιότητα “FormStyle” της βασικής φόρμας σε “fsMDIForm”. • Πρέπει επίσης να δημιουργήσουμε άλλη μία φόρμα που θα φιλοξενεί τα δεδομένα (κείμενο, εικόνα, κ.λ.π.). Στη φόρμα αυτή θα καθορίσουμε την ιδιότητα “FormStyle” σε “fsMDIChild”. MDI Application

4. Κτίζοντας μία MDI εφαρμογή • Πρέπει να υλοποιηθούν τα ακόλουθα βήματα : • Δημιουργία της βασικής φόρμας ως MDI Parent. • Δημιουργία της φόρμας MDI Child που θα περιέχει τα δεδομένα. • Συγγραφή του απαραίτητου κώδικα για την διαχείριση των δεδομένων στην Child φόρμα. • Συγγραφή κώδικα για τις επιλογές FileNew, FileOpen και FileSave του μενού της βασικής φόρμας, για δημιουργία νέου (κενού) Child παραθύρου, για άνοιγμα υπάρχοντος αρχείου δεδομένων σε νέο Child παράθυρο και για αποθήκευση των δεδομένων του τρέχοντος Child παραθύρου. • Συγγραφή κώδικα για τις επιλογές Cascade, Tile, και Arrange All του υπομενού Window της βασικής φόρμας. • Επιπλέον δημιουργία και ενσωμάτωση μίας φόρμας About • Επιπλέον δημιουργία και ενσωμάτωση toolbars με πλήκτρα γρήγορης επιλογής ή και Status Bar για ένδειξη της τρέχουσας κατάστασης. • Υλοποίηση τυχόν άλλων επιλογών (Cut, Copy, Paste, Close All, κ.λ.π.)

5. Κτίζοντας μία MDI εφαρμογή • Δημιουργούμε την βασική φόρμα φροντίζοντας να θέσουμε την ιδιότητα “FormStyle” σε “fsMDIForm”. • Εισάγουμε ένα κυρίως μενού στη φόρμα (TMainMenu). Μπορούμε να ξεκινήσουμε από ένα ήδη έτοιμο μενού επιλογών ειδικό για MDI εφαρμογές. • Αυτό γίνεται μέσω του Menu Designer κάνοντας δεξί κλίκ και επιλέγοντας “Insert From Template” και στη συνέχεια επιλέγοντας “MDI Frame Menu” • Ενσωματώνουμε στην βασική φόρμα έναν έτοιμο διάλογο τύπου TOpenDialog και έναν τύπου TSaveDialog. • Δημιουργούμε την Child φόρμα που θα περιέχει τα δεδομένα φροντίζοντας να θέσουμε την ιδιότητα “FormStyle” σε “fsMDIChild”. • Εισάγουμε τα απαραίτητα components στην Child φόρμα για χειρισμό των δεδομένων (π.χ. ΤMemo component για κείμενο, TImage για εικόνα κ.λ.π.)

6. Κτίζοντας μία MDI εφαρμογή 2 • Γράφουμε κώδικα για events χειρισμού δεδομένων στην Child φόρμα (π.χ. OnCreate, OnClose, OnClick, OnMouseMove, OnDragDrop κ.λ.π.). • Γράφουμε κώδικα για τις επιλογές : • FileNew : π.χ. TChild* child = new TChild(this); child->Show(); • FileOpen : π.χ. If (OpenDialog->Execute()) {TChild* child = new TChild(this); child->Image->Picture-> LoadFormFile (OpenDialog ->Filename); child->Show();} • FileSave : π.χ. TChild* child= (TChild*)ActiveMDIChild; If (SaveDialog->Execute()) {child->Image->Picture->SaveToFile (SaveDialog ->Filename);} • Για τις επιλογές WindowTile, Cascade και Arrange Icons καλούμε αντίστοιχα τις μεθόδους Tile(), Cascade(), και ArrangeIcons() της βασικής MDI φόρμας.

7. Κτίζοντας μία MDI εφαρμογή 3 • Το Project από μόνο του δημιουργεί και την Child φόρμα γεγονός που είναι ανεπιθύμητο • Για να μην συμβαίνει αυτό θα πρέπει να πάμε στην επιλογή ProjectOptions και να αφαιρέ-σουμε την Child φόρμα από τη λίστα με τις Auto-create forms. • Έτσι οι Child φόρμες θα δημιουργούνται κάθε φορά με “new”. • Επίσης όταν πατάμε το κουμπί “X” σε μία Child φόρμα αντί αυτή να κλείνει γίνεται minimized! • Για να διορθωθεί αυτό στην ρουτίνα για το OnClose event της Child φόρμας εισάγουμε την εντολή : Action = caFree; η οποία οδηγεί το πρόγραμμα στο να κλείσει την φόρμα και να απελευθερώσει την μνήμη που δεσμεύει ως αντικείμενο.

8. Ιδιότητες και Μέθοδοι σχετικές με MDI Ιδιότητες : • ActiveMDIChlid (TForm*) : η Child φόρμα που έχει το focus. • MDIChildCount (int) : ο αριθμός των ανοικτών Child παραθύρων σε μία MDIForm βασική φόρμα. • MDIChildren[I] (TForm*) : πίνακας με τα Child παράθυρα. Μέθοδοι : • ArrangeIcons() : τακτοποιεί τα minimized εικονίδια από τις Child φόρμες στο client area μίας MDIForm βασικής φόρμας. • Cascade() : τακτοποίηση των Child παραθύρων έτσι ώστε να επικαλύπτονται ελαφρά. • Tile() : τακτοποίηση των Child παραθύρων έτσι ώστε να έχουν όλα το ίδιο μέγεθος. • Next(), Previous() : μεταφέρουν το focus μεταξύ των Child παραθύρων.

9. Η Μπάρα Εργαλείων Additional • BitBtn : Bitmap Button, κουμπί που μπορεί να περιέχει και εικόνα bitmap (μία για κάθε κατάσταση, up, down, stay down). • SpeedButton : παρόμοιο με το BitBtn αλλά ενδείκνυται για χρήση σε ομάδες (groups). Χρησιμοποιείται για κατασκευή toolbars. • MaskEdit : παρόμοιο με το Edit control αλλά μπορεί να χρησιμοποιηθεί για εισαγωγή password ή formatted text όπως οι ημερομηνίες. • StringGrid : χρησιμοποιείται για απεικόνιση ενός πίνακα από strings σε μορφή excel worksheet. • DrawGrid : παρόμοιο με το StringGrid αλλά μπορεί να εμφανίζει και εικόνες (bitmaps). • Image : χρησιμοποιείται για εμφάνιση και διαχείριση εικόνων (bitmaps, icons, metafiles). • Shape : χρησιμοποιείται για εμφάνιση γεωμετρικών σχημάτων.

10. Η Μπάρα Εργαλείων Additional 2 • Bevel : χρησιμοποιείται για εμφάνιση «βυθισμένων» πλαισίων και διαχωριστικών γραμμών. • ScrollBox : χρησιμοποιείται για να δημιουργεί περιοχές που μπορούν να ολισθαίνουν μέσα σε μία φόρμα. • CheckListBox : παρόμοιο με το ListBox αλλά εμφανίζει ένα CheckBox δίπλα σε κάθε αντικείμενο της λίστας. • Splitter : χρησιμοποιείται όταν ένα control είναι anchored σε μία πλευρά του client area της φόρμας ώστε να μπορεί να μεταβάλλει το μέγεθος του αγκιστρωμένου control σε βάρος της υπόλοιπης ελεύθερης περιοχής της φόρμας. • StaticText : παρόμοιο με το Label. • ControlBar : docking site για toolbars με δυνατότητες μετακίνησης. • Application Events : χειρίζεται τα events της εφαρμογής. • Chart : χρησιμοποιείται για σχεδίαση γραφημάτων (μπάρες, πίτες, κ.λ.π)

11. Το Image Component • Κληρονομείται από την κλάση TImage. Χρησιμοποιείται για εμφάνιση και επεξεργασία εικόνων τύπου bitmap, icon ή windows metafile. Ιδιότητες (Properties) : • Center (bool) : κεντράρει την εικόνα στο component (true) ή στοιχίζει τις πάνω αριστερές γωνίες (false). • IncrementalDisplay (bool) : Κάνει τις μεγάλες εικόνες να εμφανίζονται σταδιακά (true) ή ολόκληρες μόλις φορτωθούν (false). • Stretch (bool) : όταν είναι true προκαλεί την μεταβολή του μεγέθους της εικόνας ώστε να καλύπτει το μέγεθος του component (όχι icons). • Transparent (bool) : όταν είναι true επιτρέπει να φαίνονται αντικείμενα πίσω από την εικόνα μέσω του background (transparent background) ενώ όταν είναι false το background είναι συμπαγές (opaque). • Picture (TPicture*) : object που περιέχει την εικόνα που εμφανίζεται και που έχει ιδιότητες και μεθόδους διαχείρισης της εικόνας. • Canvas (TCanvas*) : object που επιτρέπει απευθείας την επεξεργασία της εικόνας. Λειτουργεί όταν η εικόνα είναι bitmap.

12. To Picture object • Κληρονομείται από την κλάση TPicture. Είναι το αντικείμενο που κρατά μία εικόνα. Ιδιότητες (Properties) : • Height (int) : το αρχικό ύψος της εικόνας (χωρίς stretch). • Width (int) : το αρχικό πλάτος της εικόνας (χωρίς stretch). • Graphic (TGraphic*) : αφαιρετική κλάση που υπονοεί την εικόνα του Picture. Μέσω αυτής μπορούμε να καταλάβουμε τι είδους είναι η εικόνα (π.χ. if (Image1->Picture->Graphic->ClassNameIs(“TBitmap”)) {…}. Αν απευθυνθούμε στην ιδιότητα Bitmap ενώ η εικόνα είναι Metafile τότε η εικόνα καταστρέφεται και μας επιστρέφεται ένα άδειο Bitmap. • Bitmap (TBitmap*) : object με το οποίο χειριζόμαστε την εικόνα όταν είναι τύπου bitmap (.bmp). • Icon (TIcon*) : object με το οποίο χειριζόμαστε την εικόνα όταν είναι τύπου icon (.ico). • Metafile (TMetafile*) : object με το οποίο χειριζόμαστε την εικόνα όταν είναι τύπου windows metafile (.wmf, .emf).

13. To Picture object 2 Μέθοδοι (Methods) : • Assign() : αναθέτει μία υπάρχουσα εικόνα ως εικόνα του Picture Object. • LoadFromClipboardFormat() : φορτώνει μία εικόνα στο Picture Object από το clipboard. • SaveToClipboardFormat() : αποθηκεύει την εικόνα στο clipboard. • LoadFromFile() : φορτώνει μία εικόνα από αρχείο (bmp, ico, wmf, emf) • SaveToFile() : σώζει μία εικόνα σε αρχείο. Image Picture Bitmap Icon Metafile Canvas Graphic