Programming C - Graphic User Interface (GUI) - Exercise

Nous avons besoin de vos commentaires. Cliquez ici!

• GTK est un outil multiplateforme permettant de créer des interfaces utilisateur graphiques. [2]
• Nous travaillerons avec gtk-3.0. Suivez les instructions sur cette page pour l'installation.
• La documentation fournit plus d’informations sur les widgets de la bibliothèque et des exemples de base.

Détails de l'exercice

• Créez un GUI dans lequel le prénom, le nom, l’adresse e-mail et la date de naissance de l’utilisateur peuvent être collectés.
• Cet exercice implémente simplement une fenêtre de base avec quatre entrées de texte dont les données sont collectées et écrites dans un fichier texte.

Suivez ces étapes pour créer votre GUI:

• Le programme principal pour lancer votre GUI s’exécute comme suit:

int main(int argc, char *argv[]){
    GtkApplication *app;
    int status;
    app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
    g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
    status = g_application_run (G_APPLICATION (app), argc, argv);
    g_object_unref (app);
}

Reportez-vous à la page de documentation pour une description détaillée de la structure principale du programme ci-dessus.

• La mise en œuvre de cet exercice est basée sur l’exemple de hello world.

// entries
GtkWidget* entry_firstname;
GtkWidget* entry_lastname;
GtkWidget* entry_email;
GtkWidget* entry_date_of_birth;
 
// file manager
FileManager* ptr_fm;

• La fonction activate() est déclarée comme suit:

static void
activate (GtkApplication *app,
          gpointer user_data)
{ ... // add your code here (implementation on the next slides) }

• La fenêtre du programme est déclarée et initialisée comme suit:

// window
GtkWidget *window;
static FileManager fm = {"data",  "day30_data.txt"};
ptr_fm = &fm;
// initialize the file manager
init(ptr_fm); 
// initialize the file titles
add_content_in_file(ptr_fm, "First name\t\tLast name\t\tEmail address\t\tDate of birth\n");
window = gtk_application_window_new(app);
gtk_window_set_title(GTK_WINDOW (window), "Challenge XIV - GUI");  
gtk_window_set_default_size(GTK_WINDOW (window), 400, 250); // width: 400px - height: 250px
gtk_window_set_resizable(GTK_WINDOW(window), 0);            // the window can not be resized
gtk_container_set_border_width(GTK_CONTAINER(window), 10);  // spacing on the window border

• La fenêtre est divisée en une ligne et deux colonnes. La colonne de gauche est le conteneur d’entrée, l’étiquette et le bouton, tandis que la colonne de droite est l’image.
• La case de gauche est déclarée comme suit:

input_box = gtk_box_new (GTK_ORIENTATION_VERTICAL, 10);
 gtk_widget_set_margin_start(input_box, 5); // margin left 
 gtk_widget_set_margin_end(input_box, 5); // margin right

• La saisie du prénom et de son libellé s’établit comme suit:

entry_firstname = gtk_entry_new(); // entry
gtk_entry_set_placeholder_text(GTK_ENTRY(entry_firstname), "Enter your first name");
gtk_entry_set_max_length(GTK_ENTRY(entry_firstname), 50);
label_firstname = gtk_label_new("First Name:"); // entry label
gtk_label_set_xalign(GTK_LABEL(label_firstname), 0);

• Une entrée avec l’étiquette ci-dessus peut être ajoutée au conteneur box comme suit:

gtk_container_add (GTK_CONTAINER (input_box), label_firstname);
gtk_container_add (GTK_CONTAINER (input_box), entry_firstname);

• La grille configure les widgets enfants avec des lignes et des colonnes. Dans notre cas, nous l’utilisons pour diviser GUI en une couche et deux couches.
• La grille principale est ajoutée à la fenêtre principale comme suit:

main_grid = gtk_grid_new();
gtk_grid_set_column_spacing(GTK_GRID(main_grid), 25);
gtk_grid_set_column_homogeneous(GTK_GRID(main_grid), 1);
// add the components to the main grid
// attach at position (0,0) for 1 row and 1 column
gtk_grid_attach(GTK_GRID(main_grid), input_box, 0, 0, 1, 1);
// attach img_display on the right of input_box for 1 row and 1 column
gtk_grid_attach_next_to(GTK_GRID(main_grid), img_display, input_box, 1, 1, 1);
// add the grid to the main window
gtk_container_add (GTK_CONTAINER(window), main_grid);

• Le bouton de soumission et son gestionnaire sont initialisés comme suit:

button = gtk_button_new_with_label("Submit");
 // When the button receives the "clicked" signal, it will call the
 // display_message() method 
 g_signal_connect (button, "clicked", G_CALLBACK (display_message), NULL);
 gtk_widget_set_margin_top(button, 10); // margin top

• Le bouton ci-dessus peut être ajouté à la boîte à outils comme suit:

gtk_container_add (GTK_CONTAINER (input_box), button);

• L’implémentation de la fonction display_message() est donnée comme suit:

static void
display_message (GtkWidget *widget,
                 gpointer   data)
{
  const gchar* entry_fname_txt, entry_lname_txt, entry_email_txt, entry_dofb_txt;
  // get the texts from the entries
  entry_fname_txt = gtk_entry_get_text (GTK_ENTRY (entry_firstname));
  entry_lname_txt = gtk_entry_get_text (GTK_ENTRY (entry_lastname));
  entry_email_txt = gtk_entry_get_text (GTK_ENTRY (entry_email));
  entry_dofb_txt  = gtk_entry_get_text (GTK_ENTRY (entry_date_of_birth));
  g_print("> Submit button clicked!\n");
  g_print("\n*** Displaying collected entries' values  ***\n");
  g_print("> First name: %s\n", entry_fname_txt);
  g_print("> Last name: %s\n", entry_lname_txt);
  g_print("> Email address: %s\n", entry_email_txt);
  g_print("> Date of birth (mm-dd-yyyy): %s\n", entry_dofb_txt);
}

• Tous les widgets ajoutés à une fenêtre doivent être affichés avec gtk_widget_show_all(window).

Here are the results of your program

Notre entreprise propose des formations C en ligne et en personne. Inscrivez-vous maintenant et rejoignez la communauté.

References:

[1] 'Gtk': https://www.gtk.org/ [2] 'Gtk': https://gitlab.gnome.org/GNOME/gtk