Upangaji wa C - Kiolesura cha Mchoro cha Mtumiaji (KMM) - Zoezi

on February 24, 2024

GTK ni zana ya majukwaa mengi ya kuunda violesura vya picha vya mtumiaji. [2]
Tutafanya kazi na gtk-3.0. Fuata maagizo kwenye ukurasa huu kwa usakinishaji.
Nyaraka hutoa habari zaidi kuhusu wijeti za maktaba na mifano ya kimsingi.

Maelezo ya zoezi:

Unda KMM ambayo jina la kwanza, jina la mwisho, anwani ya barua pepe na tarehe ya kuzaliwa ya mtumiaji inaweza kukusanywa.
Zoezi hii hutekeleza tu dirisha la msingi lenye maingizo manne ya maandishi ambayo data yake hukusanywa na kuandikwa kwenye faili ya maandishi.

Fuata hatua hizi ili kuunda KMM yako:

Programu kuu ya kuzindua KMM yako inatekelezwa kama ifuatavyo:

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);
}

Rejelea ukurasa wa nyaraka kwa maelezo ya kina ya muundo wa programu kuu iliyo hapo juu.
Utekelezaji wa zoezi hii unategemea mfano wa hello world.

// entries
GtkWidget* entry_firstname;
GtkWidget* entry_lastname;
GtkWidget* entry_email;
GtkWidget* entry_date_of_birth;

// file manager
FileManager* ptr_fm;

Kazi ya activate() imetangazwa kama ifuatavyo:

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

Dirisha la programu hutangazwa na kuanzishwa kama ifuatavyo:

// 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

Dirisha imegawanywa katika safulalo moja na safuwima mbili. Safu wima ya kushoto ni chombo cha maingizo, lebo na kitufe, huku safu wima ya kulia ni picha.
Sanduku la kushoto linatangazwa kama ifuatavyo:

 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

Ingizo la jina la kwanza na lebo yake huanzishwa kama ifuatavyo:

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);

Ingizo na lebo iliyo hapo juu inaweza kuongezwa kwenye kontena la kisanduku kama ifuatavyo:

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

Gridi sanidi wijeti za watoto kwa safu mlalo na safu wima. Kwa upande wetu, tunaitumia kugawanya KMM kwenye safu moja na safu mbili.
Gridi kuu imeongezwa kwenye dirisha kuu kama ifuatavyo:

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);

Kitufe cha kuwasilisha na kidhibiti chake huanzishwa kama ifuatavyo:

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

Kitufe kilicho hapo juu kinaweza kuongezwa kwenye chombo cha sanduku kama ifuatavyo:

gtk_container_add (GTK_CONTAINER (input_box), button);

Utekelezaji wa kazi display_message() umetolewa kama ifuatavyo:

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);

}