Η λογική και ο τρόπος κατά τον οποίο μπορούμε να επεξεργαστούμε τις οθόνες είναι πανομοιότυπος και γι’αυτό το λόγο οι οδηγίες που θα περιγραφούν μπορούν να εφαρμοστούν σε όλα τα παρακάτω κυκλώματα:
- Πωλήσεις/Αγορές
- Εισπράξεις/Πληρωμές
- Συναλλασσόμενοι (Πελάτες, Προμηθευτές, Πιστωτές, Χρεώστες)
- Είδη/Υπηρεσίες
Για την βέλτιστη κατανόηση της διαδικασίας σχεδίασης θα αναλυθούν τα παρακάτω:
Οθόνη σχεδίασης
Η οθόνη αποτελείται από 3 κομμάτια:
- Designer Description: Βρίσκεται στα δεξιά του Layout Designer.Με την χρήστη των CSS Elements που θα αναλυθούν παρακάτω, προβάλλουμε σε δενδροειδής μορφή την σχεδίαση της οθόνης και την επεξεργαζόμαστε κατά το δοκούν.
- Layout Properties: Βρίσκεται δεξιά κάτω από το Designer Description. Για κάθε στοιχείο που χρησιμοποιείται στο Designer Description, αντιστοιχούν κάποιες ιδιότητες, που το “καθοδηγούν” ώστε να έχει συγκεκριμένη συμπεριφορά.
- Visual: Βρίσκεται στα αριστερά, καταλαμβάνει το μεγαλύτερο κομμάτι της οθόνης και αφορά το οπτικό κομμάτι.Οι εργασίες & αλλαγές που πραγματοποιούνται στο Designer Description & και στα Layout Properties πραγματώνονται σε αυτό το σημείο και μπορούμε να κάνουμε “Ζωντανή Προεπισκόπηση” των αλλαγών δίχως να βγούμε από την οθόνη σχεδίασης.
CSS Elements
Τα εργαλεία που έχουμε στην διάθεσή μας μέσω της επιλογής add, είναι τα εξής:
Η επιλογή TabPage μας επιτρέπει να δημιουργούμε καρτέλες(tabs) εντός του TabHost.
Η πιο σημαντική επιλογή, καθώς τα Rows, συνδυάζονται μαζί με τα υπόλοιπα Css Elements και είναι αυτά εντός των οποίων τοποθετούμε τα πεδία.
Η επιλογή Panel μας δίνει τη δυνατότητα ενός εσωτερικού “παραθύρου” το οποίο μπορεί να ανοίγει και να κλείνει,(εμφάνιση και απόκρυψη), μέσω του βέλους που έχει στα δεξιά.
Η επιλογή Stack δημιουργεί μια περιοχή εντός της οποίας δημιουργείται μια στοίβα από τα πεδία ή τα Rows που χρησιμοποιούμε.
Παράδειγμα
Βλέπουμε πως με την χρήση της επιλογής stack εντός του Designer Description, ορίσαμε πως οι διευθύνσεις (Trader Addresses Component) θα τοποθετηθεί πάνω από το χρονοδιάγραμμα (Trader Timeline component).
Η επιλογή FieldSet ομαδοποιεί τα πεδία ή/και τα rows που βρίσκονται εντός.
Παράδειγμα
Βλέπουμε πως με την χρήση της επιλογής FieldSet εντός του Designer Description, ορίσαμε πως τα πεδία που ακολουθούν θα είναι ομαδοποιημένα υπό την ενότητα “Βασικά Στοιχεία”.
Layout Properties
Στην ενότητα Layout Properties βρίσκονται οι ιδιότητες των CSS Elements από τις οποίες ορίζεται η συμπεριφορά των πεδίων όπως:
- Θέση
- Στοίχιση
- Μέγεθος
- Οριζόντια/Κάθετη Παράθεση
Πιο αναλυτικά για τις επιλογές που υπάρχουν:
Σχεδίαση Οθόνης (Παράδειγμα)
Έστω πως θέλουμε να μετακινήσουμε το πεδίο “Κατηγορία 1” (Πελάτη) από το tab “Πρόσθετα Στοιχεία” στο tab “Γενικά”, στην ενότητα “Βασικά Στοιχεία”.
1. Επιλέγουμε από το κεντρικό μενού Πελάτες και στην συνέχεια από την λίστα επιλέγουμε μια οποιαδήποτε εγγραφή ώστε να ανοίξει η οθόνη που θέλουμε να επεξεργαστούμε. Θα πρέπει να ανοίξουμε το Layout Designer προκειμένου να ανοίξουμε την οθόνη σχεδίασης.
2. Από τις Ενέργειες→Παραμετροποίηση→myLayout και στην συνέχεια επιλέγοντας “Παραμετροποίηση” είτε στον χρήστη είτε στην ομάδα χρηστών ή στην επιλογή “Καθένας” (για να εφαρμοστούν οι αλλαγές σε όλους τους χρήστες) ανοίγει η οθόνη Layout Designer.
3. Λόγω του μεγάλου όγκου πληροφοριών & πεδίων στον Designer Description, το πιο εύκολο που μπορούμε να κάνουμε, είναι να πλοηγηθούμε στην οθόνη από τα δεξιά (Visual κομμάτι) και να επιλέξουμε την επικεφαλίδα του πεδίου ώστε να μας το εμφανίσει και στα αριστερά (Designer Description) όπως φαίνεται από κάτω.
4. Εφόσον το βρούμε, το “πιάνουμε” με αριστερό κλικ από το εικονίδιο με τις 3 γραμμές, χωρίς να αφήσουμε το αριστερό κλικ, χρησιμοποιούμε την ροδέλα για να βρούμε το TabPage “Γενικά” και το Row που θέλουμε να το τοποθετήσουμε εντός του Fieldset. Στην δική μας περίπτωση είναι το Row 28 που βρίσκεται εντός του Fieldset 5 όπως φαίνεται από κάτω.
5. Αν θέλουμε να αλλάξουμε το μέγεθος του πεδίου, αρκεί στα Layout Properties, να αλλάξουμε την τιμή του πεδίου “Size” όπως φαίνεται από κάτω.
6. Επιλέγουμε “Αποθήκευση”, κλείνει η οθόνη σχεδιασμού και αυτόματα γίνεται επαναφόρτωση της σελίδας πλέον βλέπουμε πως το πεδίο “Κατηγορία 1” βρίσκεται στην ενότητα “Βασικά Στοιχεία” του Πελάτη.
