Παρουσίαση Glade Νίκος Δεληγιάννης Α.Μ.: 1052. Τι είναι το Glade; Εφαρμογή για την αυτοματοποίηση της σχεδίασης ενός γραφικού περιβάλλοντος χρήστη (GUI).

Παρουσίαση με θέμα: "Παρουσίαση Glade Νίκος Δεληγιάννης Α.Μ.: 1052. Τι είναι το Glade; Εφαρμογή για την αυτοματοποίηση της σχεδίασης ενός γραφικού περιβάλλοντος χρήστη (GUI)."— Μεταγράφημα παρουσίασης:

1 Παρουσίαση Glade Νίκος Δεληγιάννης Α.Μ.: 1052

2 Τι είναι το Glade; Εφαρμογή για την αυτοματοποίηση της σχεδίασης ενός γραφικού περιβάλλοντος χρήστη (GUI). Τα στοιχεία που απαρτίζουν το GUI (παράθυρα, φόρμες, κουμπιά κλπ.) θα απεικονιστούν με τη βοήθεια της βιβλιοθήκης GTK. Δύο τρόποι εργασίας: 1. Αυτόματη παραγωγή του σχετικού με το GUI πηγαίου κώδικα. 2. Αποθήκευση του project σε αρχείο XML από το οποίο μπορεί να απεικονιστεί το GUI με τη χρήση της βιβλιοθήκης libglade.

3 Πλεονεκτήματα Μικρό σε μέγεθος. Χαμηλές απαιτήσεις σε πόρους. Είναι ένα πραγματικό RAD (Rapid Application Developement) εργαλείο, αφού επιτρέπει στον προγραμματιστή να αφιερώσει τον περισσότερο χρόνο του στην ανάπτυξη του backend της εφαρμόγης. Συμβατότητα με πολλές πλατφόρμες: Παρέχεται προς εγκατάσταση σε πολλά UNIX, UNIX-like περιβάλλοντα και σε Microsoft Windows. Είναι γραμμένο σε C και ανοιχτού κώδικα, οπότε είναι και απόλυτα μεταφέρσιμο. Επεκτάσιμο με custom widgets

4 Μειονεκτήματα Δεν είναι ολοκληρωμένο IDE (Integrated Developement Environment) σε αντίθεση με πιο γνωστές εμπορικές λύσεις από Microsoft, Borland κ.ά. Χρησιμοποιείται σε συνδυασμό με ένα υπάρχον IDE. Παράδειγμα: Σε Linux συνεργάζεται με το Anjuta IDE. Σε σχέση με τις λύσεις που αναφέρθηκαν παραπάνω, θεωρείται πιο δύσχρηστο (έλλειψη wizards και λοιπών αυτοματισμών). Στην έκδοση 3, αφαιρέθηκε η δυνατότητα αυτόματης παραγωγής κώδικα.

5 Περιβάλλον χρήσης Κύριο παράθυρο: Παράθυρο ιδιοτήτων(Properties Window):

6 Περιβάλλον χρήσης Παλέττα(Pallette): Tα βασικότερα widgets:

7 Δημιουργία project Για τη δημιουργία ενός παραθύρου: - πατάμε το κουμπί ”GTK window” και αμέσως ανοίγει ένα παράθυρο με όνομα window1.Την ύπαρξη του δηλώνει και το Glade main window.

8 Δημιουργία project Χρησιμοποιούμε τα κουμπιά ”Ηorizontal Box” & ”Vertical Box” για να χωρίσουμε το παράθυρο σε τόσα οριζόντια και κάθετα μέρη(containers) όσα στοιχεία θέλουμε να εισάγουμε. 'Οπως το παράδειγμα:Σε ορισμένες περιπτώσεις έχει σημασία η σειρά με την οποία θα τοποθετήσουμε τα widgets. π.χ τα frames... Aν σε κάποιο container θέλουμε να δημιουργήσουμε κάποιο frame μέσα στο οποίο θα έχουμε άλλα containers τότε θα ενεργήσω με αντίστοιχη σειρά

9 Δημιουργία project 'Ετσι επιλέγουμε τα containers στα οποία θέλουμε να εισάγουμε τα widgets. Επιλέγουμε από την παλέττα το κουμπί ”Text Entry” και με το ποντίκι επιλέγουμε το container στο οποίο θέλουμε να το τοποθετήσουμε.Σε αυτά ο χρήστης θα εισάγει τα δεδομένα του προγράμματος. Όμοια με το κουμπί ”Radio Button” εισάγουμε δύο κουμπιά ”συνθήκης” τα οποία δίνουν τα αντίστοιχα αποτελέσματα.

10 Δημιουργία project Στην περίπτωση που θέλουμε να εισάγουμε περισσότερα από ένα widgets σε ένα container...Επιλέγουμε το κουμπί ”Fixed position” προτού να επιλέξουμε το widget που θέλουμε και στη συνέχεια ”σέρνουμε” με το ποντίκι το widget στον καμβά του παραθύρου που δημιουργούμε. Εφόσον έχουμε ορίσει τις θέσεις πάνω στο παράθυρό μας...αυτές δεν θα αλλάξουν αν κάνουμε resize το παράθυρο, είτε αυτο σημαίνει maximize είτε minimize.

11 Δημιουργία project Τέλος μπορούμε να εισάγουμε ένα button (απλό ή με pressed/depressed εμφάνιση) που θα εκτελεί το αντίστοιχο τμήμα κώδικα του backend με την προυπόθεση ότι έχει εισαχθεί το απαραίτητο input για τους υπολογισμούς.

12 Δημιουργία project Χρήση του Properties Window: κάνοντας κλικ σε ένα από τα widgets εμφανίζεται στο P.W. ένα σύνολο από ρυθμίσεις. Βασικές αλλαγές: -αλλαγή του name και του label καθώς και των signals και των handlers Το name:Eίναι το όνομα του widget το οποίο δεν φαίνεται στο παράθυρο που δημιουργούμε αλλά στον κώδικα που θα δημιουργήσουμε. Το label:Είναι ο τίτλος που θα εμφανίζεται στο παράθυρο που δημιουργήσαμε. Τα signals:είναι μια σειρά από default επιλογές για οποιοδήποτε τύπο widget και δηλώνουν το αίτιο το οποίο θα προκαλέσει την αποστολή σήματος στον κώδικα που θα εκτελεστεί.

13 Δημιουργία project

14 Τέλος για να προσθέσουμε κώδικα σε αυτό το frontend πρέπει να καθορίσουμε ποια widgets θέλουμε να συνδεθούν με callback functions που θα εκτελεστούν όταν σταλεί ένα σήμα.Αυτή τη δουλειά την καθορίζουν οι handlers. Oι handlers:είναι μια σειρά από default επιλογές ονομάτων συναρτήσεων. Oι handlers:είναι μια σειρά από default επιλογές ονομάτων συναρτήσεων. Στην περίπτωση των buttons επιλέγουμε συνήθως τις προκαθορισμένες callback functions που μας δίνει το Properties Window.Αν π.χ. είναι κουμπί εξόδου του προγράμματος τότε επιλέγουμε την gtk_main_quit Στην περίπτωση των buttons επιλέγουμε συνήθως τις προκαθορισμένες callback functions που μας δίνει το Properties Window.Αν π.χ. είναι κουμπί εξόδου του προγράμματος τότε επιλέγουμε την gtk_main_quit

15 Δημιουργία project Αφού προσθέσουμε και τους handlers πατάμε Add για ενεργοποίηση των επιλογών. Αφού προσθέσουμε και τους handlers πατάμε Add για ενεργοποίηση των επιλογών. 'Ομοια επιλέγουμε τις ρυθμίσεις για όλα τα widgets και έχουμε: 'Ομοια επιλέγουμε τις ρυθμίσεις για όλα τα widgets και έχουμε:

16 Δημιουργία project Στο Main Window του Glade επιλέγουμε το παράθυρο που δημιουργήσαμε και θέτουμε τις ρυθμίσεις Στη συνέχεια πατάμε στο Project-Options...

17 Δημιουργία project Ρυθμίζουμε το Project Directory: /home/ /Projects/country Επιλέγουμε τη γλώσσα στην οποία θα γράψουμε τον κώδικα. OK-Save

18 Σύνδεση κώδικα Στο Project Directory /home/ /Projects/country Δημιουργήθηκε ένας υποκατάλογος με το όνομα src.Μέσα σε αυτόν τον κατάλογο υπάρχουν τέσσερα αρχεία ”.c”. Ενα από αυτά είναι το callbacks.c Σε έναν editor ”φορτώνουμε”: /home/ /Projects/country/src/callbacks.c Εδώ συντάσουμε τον κώδικα που θέλουμε να εκτελέσουμε μετά την αποστολή κάποιου σήματος.Οι συναρτήσεις που θα δημιουργήσουμε στον κώδικα θα είναι αυτές που ορίσαμε στους handlers.

19 Σύνδεση κώδικα gboolean gb_currency=TRUE; gboolean gb_capital=FALSE; void on_rad_currency_toggled (GtkToggleButton *togglebutton, gpointer user_data)‏ { gb_currency=TRUE; gb_capital=FALSE; } void on_rad_capital_toggled (GtkToggleButton *togglebutton, gpointer user_data)‏ { gb_currency=FALSE; gb_capital=TRUE; }

20 Σύνδεση κώδικα void on_ok_button_clicked (GtkButton *button, gpointer user_data)‏ { GtkWidget *entry = lookup_widget(GTK_WIDGET(button), "entry1"); GtkWidget *info_entry = lookup_widget (GTK_WIDGET(button), "info_entry"); GtkWidget *rad_currency = lookup_widget(GTK_WIDGET(button), "rad_currency"); GtkWidget *rad_capital = lookup_widget(GTK_WIDGET(button), "rad_capital"); GtkWidget *info_label = lookup_widget(GTK_WIDGET(button), "info_label"); gchar *entry_text = gtk_entry_get_text(GTK_ENTRY(entry)); gchar *countries[2], *capitals[2], *currencies[2]; GtkWidget *dialog, *dg_label, *dg_OK; gint x; countries [0] = "India"; countries [1] = "France"; capitals [0] = "Delhi"; capitals [1] = "Paris"; currencies [0] = "Rupees"; currencies [1] = "Francs"; for (x=0; x<2; x++)‏ { if(!strcmp(entry_text, countries[x]) == 1)‏ { gtk_widget_show (info_entry); gtk_widget_show (info_label); if (gb_currency == TRUE)‏ { gtk_entry_set_text (GTK_ENTRY(info_entry), currencies[x]); gtk_label_set_text(GTK_LABEL(info_label), "Currency:"); } if (gb_capital == TRUE)‏ { gtk_entry_set_text (GTK_ENTRY(info_entry), capitals[x]); gtk_label_set_text(GTK_LABEL(info_label), "Capital:"); } break; }

21 Σύνδεση κώδικα if(!strcmp(entry_text, countries[x]) == 0 && x == 1)‏ { dialog = gtk_dialog_new(); dg_label = gtk_label_new ("Entry not found!"); dg_OK = gtk_button_new_with_label("OK"); gtk_signal_connect_object(GTK_OBJECT (dg_OK), "clicked", gtk_widget_destroy, GTK_OBJECT(dialog)); gtk_container_add (GTK_CONTAINER (GTK_DIALOG(dialog)->action_area), dg_OK); gtk_container_add (GTK_CONTAINER (GTK_DIALOG(dialog)->vbox), dg_label); gtk_widget_show_all (dialog); gtk_widget_grab_focus(dialog); }