GTK+ dialogs

في هذا الجزء من دورة البرمجه في GTK+ , سوف نقدم مربعات الحوار .

نافذة حوار او مربع الحوار هو جزء لاغني عنه في معظم تطبيقات الواجهات الرسوميه . فهو حوار بين شخصين او اكثر . ولكن في عالم الحاسب مربع الحوار هو نافذه تتحدث الي التطبيق . يستخدم مربع الحوار في ادخال البيانات , تعديلها , او تعديل خصائص البرنامج والي اخره . مربعات الحوار هو وسيلة مهمه للاتصالات بين المستخدم وبرنامج الحاسب.

Message dialogs

مربعات الرسائل هي مربعات حوار مناسبه لتقدم رساله لمستخدم التطبيق . تتكون تلك الرساله من بيانات نصيه وصوريه .

#include <gtk/gtk.h>

void show_info(GtkWidget *widget, gpointer window)
{
  GtkWidget *dialog;
  dialog = gtk_message_dialog_new(window,
            GTK_DIALOG_DESTROY_WITH_PARENT,
            GTK_MESSAGE_INFO,
            GTK_BUTTONS_OK,
            "Download Completed", "title");
  gtk_window_set_title(GTK_WINDOW(dialog), "Information");
  gtk_dialog_run(GTK_DIALOG(dialog));
  gtk_widget_destroy(dialog);
}

void show_error(GtkWidget *widget, gpointer window)
{
  GtkWidget *dialog;
  dialog = gtk_message_dialog_new(window,
            GTK_DIALOG_DESTROY_WITH_PARENT,
            GTK_MESSAGE_ERROR,
            GTK_BUTTONS_OK,
            "Error loading file");
  gtk_window_set_title(GTK_WINDOW(dialog), "Error");
  gtk_dialog_run(GTK_DIALOG(dialog));
  gtk_widget_destroy(dialog);
}

void show_question(GtkWidget *widget, gpointer window)
{
  GtkWidget *dialog;
  dialog = gtk_message_dialog_new(window,
            GTK_DIALOG_DESTROY_WITH_PARENT,
            GTK_MESSAGE_QUESTION,
            GTK_BUTTONS_YES_NO,
            "Are you sure to quit?");
  gtk_window_set_title(GTK_WINDOW(dialog), "Question");
  gtk_dialog_run(GTK_DIALOG(dialog));
  gtk_widget_destroy(dialog);
}

void show_warning(GtkWidget *widget, gpointer window)
{
  GtkWidget *dialog;
  dialog = gtk_message_dialog_new(window,
            GTK_DIALOG_DESTROY_WITH_PARENT,
            GTK_MESSAGE_WARNING,
            GTK_BUTTONS_OK,
            "Unallowed operation");
  gtk_window_set_title(GTK_WINDOW(dialog), "Warning");
  gtk_dialog_run(GTK_DIALOG(dialog));
  gtk_widget_destroy(dialog);
}

int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *table;

  GtkWidget *info;
  GtkWidget *warn;
  GtkWidget *que;
  GtkWidget *err;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 220, 150);
  gtk_window_set_title(GTK_WINDOW(window), "Message dialogs");

  table = gtk_table_new(2, 2, TRUE);
  gtk_table_set_row_spacings(GTK_TABLE(table), 2);
  gtk_table_set_col_spacings(GTK_TABLE(table), 2);

  info = gtk_button_new_with_label("Info");
  warn = gtk_button_new_with_label("Warning");
  que = gtk_button_new_with_label("Question");
  err = gtk_button_new_with_label("Error");

  gtk_table_attach(GTK_TABLE(table), info, 0, 1, 0, 1, 
      GTK_FILL, GTK_FILL, 3, 3);
  gtk_table_attach(GTK_TABLE(table), warn, 1, 2, 0, 1, 
      GTK_FILL, GTK_FILL, 3, 3);
  gtk_table_attach(GTK_TABLE(table), que, 0, 1, 1, 2, 
      GTK_FILL, GTK_FILL, 3, 3);
  gtk_table_attach(GTK_TABLE(table), err, 1, 2, 1, 2, 
      GTK_FILL, GTK_FILL, 3, 3);
  
  gtk_container_add(GTK_CONTAINER(window), table);
  gtk_container_set_border_width(GTK_CONTAINER(window), 15);

  g_signal_connect(G_OBJECT(info), "clicked", 
        G_CALLBACK(show_info), (gpointer) window); 

  g_signal_connect(G_OBJECT(warn), "clicked", 
        G_CALLBACK(show_warning), (gpointer) window); 

  g_signal_connect(G_OBJECT(que), "clicked", 
        G_CALLBACK(show_question), (gpointer) window); 

  g_signal_connect(G_OBJECT(err), "clicked", 
        G_CALLBACK(show_error), (gpointer) window); 

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

في مقالنا , قمنا بعرض اربع انواع من مربعات الرسائل . وهي علي التوالي "مربع معلومات" "مربع تحذير" "مربع سؤال" ومربع لاظهاء الخطأ .

 GtkWidget *dialog;
 dialog = gtk_message_dialog_new(window,
           GTK_DIALOG_DESTROY_WITH_PARENT,
           GTK_MESSAGE_QUESTION,
           GTK_BUTTONS_YES_NO,
           "Are you sure to quit?");

في دالة show_question() , نقوم بعرض مربع رساله . هذا المربع تم انشائه بواسطة استدعاء الداله gtk_message_dialog_new() . الparameter الممرر الي الداله يحدد اي نوع من انواع مربعات الرسائل سوف يتم خلقه . النوع GTK_MESSAGE_QUESTION يقوم بانشاء مربع رسائل لعرض سؤال . بينما الثابت GTK_BUTTONS_YES_NO سوف تضع زرارين NO و YES في المربع الحواري . بينما الparameter الاخير يحدد النص الذي نريده ان يظهر في المربع الحواري .

 gtk_window_set_title(GTK_WINDOW(dialog), "Warning");
 gtk_dialog_run(GTK_DIALOG(dialog));
 gtk_widget_destroy(dialog);

هنا نفوم بوضع عنوان لمربع الرسائل , واخيرا نقوم بتشغيل المربع واظهاره. يتم تدمير المربع الحواري يدويا وليس تلقائيا. ويجب ان تدمرها والا سوف تظل ظاهره .

Information message dialog Warning message dialog Question message dialog Error message dialog

GtkAboutDialog

المربع الحواري GtkAboutDialog يظهر معلومات حور التطبيق (About) . يمكنه ان يظهر شعار و اسم التطبيق واصداره وحقوق نسخه و اسم موقعه الخ . ويمكنك ايضا ان تضع معلومات حول المؤلف او الموثق او حتي المترجم.

#include <gtk/gtk.h>


void show_about(GtkWidget *widget, gpointer data)
{

  GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file("battery.png", NULL);

  GtkWidget *dialog = gtk_about_dialog_new();
  gtk_about_dialog_set_name(GTK_ABOUT_DIALOG(dialog), "Battery");
  gtk_about_dialog_set_version(GTK_ABOUT_DIALOG(dialog), "0.9"); 
  gtk_about_dialog_set_copyright(GTK_ABOUT_DIALOG(dialog), 
      "(c) Jan Bodnar");
  gtk_about_dialog_set_comments(GTK_ABOUT_DIALOG(dialog), 
     "Battery is a simple tool for battery checking.");
  gtk_about_dialog_set_website(GTK_ABOUT_DIALOG(dialog), 
      "http://www.batteryhq.net");
  gtk_about_dialog_set_logo(GTK_ABOUT_DIALOG(dialog), pixbuf);
  g_object_unref(pixbuf), pixbuf = NULL;
  gtk_dialog_run(GTK_DIALOG (dialog));
  gtk_widget_destroy(dialog);

}


int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *about;
  GdkPixbuf *battery;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 220, 150);
  gtk_window_set_title(GTK_WINDOW(window), "Battery");

  gtk_container_set_border_width(GTK_CONTAINER(window), 15);
  gtk_widget_add_events(window, GDK_BUTTON_PRESS_MASK);

  battery = gtk_image_get_pixbuf(GTK_IMAGE(
      gtk_image_new_from_file("battery.png")));

  g_signal_connect(G_OBJECT(window), "button-press-event", 
        G_CALLBACK(show_about), (gpointer) window); 

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), G_OBJECT(window));

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

في هذا المثال قمنا باستخدام GtkAboutDialog مع خصائص اخري . لكي نظهر هذا المربع الحواري يجب ان نضغط علي الجزء الخالي من النافذه. في اي مكان خالي بها .

 GtkWidget *dialog = gtk_about_dialog_new();

نقوم بانشاء مربع حواري GtkAboutDialog جديد.

 gtk_about_dialog_set_name(GTK_ABOUT_DIALOG(dialog), "Battery");
 gtk_about_dialog_set_version(GTK_ABOUT_DIALOG(dialog), "0.9"); 
 gtk_about_dialog_set_copyright(GTK_ABOUT_DIALOG(dialog), 
      "(c) Jan Bodnar");

هذه الدوال تقوم بوضع الاسم والاصدار وحقوق النسخ . كما هو واضح من اسماء الدوال set_name , set_version .

 GdkPixbuf *pixbuf = gdk_pixbuf_new_from_file("battery.png", NULL);
 ...
 gtk_about_dialog_set_logo(GTK_ABOUT_DIALOG(dialog), pixbuf);
 g_object_unref(pixbuf), pixbuf = NULL;

هذا الكود يقوم بوضع شعار . كما تلاحظ استخدمنا ال GdkPixbuf كما سبق وان نوهنا لكي نقوم باستخلاص صوره جديده من ملف موجود .

GtkAboutDialog

Figure: GtkAboutDialog

GtkFontSelectionDialog

هذا المربع الحواري مخصص لكي يختار المستخدم اي خط يريد ان يستخدمه . يتم استخدام هذا المربع الحواري بشكل نموذجي في التطبيقات التي تقوم بعمل تحريرات للنصوص .

#include <gtk/gtk.h>


void select_font(GtkWidget *widget, gpointer label)
{

  GtkResponseType result;

  GtkWidget *dialog = gtk_font_selection_dialog_new("Select Font");
  result = gtk_dialog_run(GTK_DIALOG(dialog));

  if (result == GTK_RESPONSE_OK || result == GTK_RESPONSE_APPLY)
  {

    PangoFontDescription *font_desc;
    gchar *fontname = gtk_font_selection_dialog_get_font_name(
                            GTK_FONT_SELECTION_DIALOG(dialog));

    font_desc = pango_font_description_from_string(fontname);

    gtk_widget_modify_font(GTK_WIDGET(label), font_desc);

    g_free(fontname);
   }


  gtk_widget_destroy(dialog);
}


int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *label;
  GtkWidget *vbox;

  GtkWidget *toolbar;
  GtkToolItem *font;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 280, 200);
  gtk_window_set_title(GTK_WINDOW(window), "Font Selection Dialog");

  vbox = gtk_vbox_new(FALSE, 0);
  gtk_container_add(GTK_CONTAINER(window), vbox);


  toolbar = gtk_toolbar_new();
  gtk_toolbar_set_style(GTK_TOOLBAR(toolbar), GTK_TOOLBAR_ICONS);

  gtk_container_set_border_width(GTK_CONTAINER(toolbar), 2);

  font = gtk_tool_button_new_from_stock(GTK_STOCK_SELECT_FONT);
  gtk_toolbar_insert(GTK_TOOLBAR(toolbar), font, -1);

  gtk_box_pack_start(GTK_BOX(vbox), toolbar, FALSE, FALSE, 5);

  label = gtk_label_new("ZetCode");
  gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER);
  gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, FALSE, 5);


  g_signal_connect(G_OBJECT(font), "clicked", 
        G_CALLBACK(select_font), label);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), NULL);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

هنا نقوم بوضع ملصق عنوان بسيط (label) بداخل منتصف النافذه . ثم نعرض مربع اختيار خط عندما نضغط علي شريط الادوات .

  GtkWidget *dialog = gtk_font_selection_dialog_new("Select Font");
  result = gtk_dialog_run(GTK_DIALOG(dialog));

نقوم بانشاء واظهار المربع GtkFontSelectionDialog .

 if (result == GTK_RESPONSE_OK || result == GTK_RESPONSE_APPLY)
 {
   PangoFontDescription *font_desc;
   gchar *fontname = gtk_font_selection_dialog_get_font_name(
                            GTK_FONT_SELECTION_DIALOG(dialog));

   font_desc = pango_font_description_from_string(fontname);

   gtk_widget_modify_font(GTK_WIDGET(label), font_desc);
   g_free(fontname);
  }

اذا ضغط المستخدم علي اي من الزرارين OK او Apply , نستمر ونحصل علي اسم الخط المطلوب . ثم نقوم باستبدال خط الملصق (label) بهذا الخط .

GtkFontSelectionDialog

Figure: GtkFontSelectionDialog

GtkColorSelectionDialog

مربع حواري لاختيار الالوان .

#include <gtk/gtk.h>


void select_font(GtkWidget *widget, gpointer label)
{

  GtkResponseType result;
  GtkColorSelection *colorsel;

  GtkWidget *dialog = gtk_color_selection_dialog_new("Font Color");
  result = gtk_dialog_run(GTK_DIALOG(dialog));

  if (result == GTK_RESPONSE_OK)
  {

    GdkColor color;

    colorsel = GTK_COLOR_SELECTION(
                   GTK_COLOR_SELECTION_DIALOG(dialog)->colorsel);
    gtk_color_selection_get_current_color(colorsel,
                   &color);

    gtk_widget_modify_fg(GTK_WIDGET(label),
                   GTK_STATE_NORMAL,
                   &color);
  } 

  gtk_widget_destroy(dialog);
}


int main( int argc, char *argv[])
{

  GtkWidget *window;
  GtkWidget *widget;
  GtkWidget *label;
  GtkWidget *vbox;

  GtkWidget *toolbar;
  GtkToolItem *font;


  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(window), 280, 200);
  gtk_window_set_title(GTK_WINDOW(window), "Color Selection Dialog");

  vbox = gtk_vbox_new(FALSE, 0);
  gtk_container_add(GTK_CONTAINER(window), vbox);


  toolbar = gtk_toolbar_new();
  gtk_toolbar_set_style(GTK_TOOLBAR(toolbar), GTK_TOOLBAR_ICONS);

  gtk_container_set_border_width(GTK_CONTAINER(toolbar), 2);

  font = gtk_tool_button_new_from_stock(GTK_STOCK_SELECT_COLOR);
  gtk_toolbar_insert(GTK_TOOLBAR(toolbar), font, -1);

  gtk_box_pack_start(GTK_BOX(vbox), toolbar, FALSE, FALSE, 5);

  label = gtk_label_new("ZetCode");
  gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER);
  gtk_box_pack_start(GTK_BOX(vbox), label, TRUE, FALSE, 5);


  g_signal_connect(G_OBJECT(font), "clicked", 
        G_CALLBACK(select_font), label);

  g_signal_connect_swapped(G_OBJECT(window), "destroy",
        G_CALLBACK(gtk_main_quit), NULL);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

هذا المثال مشابه للمثال السابق باستثناء اننا هنا نقوم بتغير اللون للملصق العنواني (label) .

 GtkWidget *dialog = gtk_color_selection_dialog_new("Font Color");
 result = gtk_dialog_run(GTK_DIALOG(dialog));

نقوم بانشاء واظهار المربع GtkColorSelctionDialog .

 if (result == GTK_RESPONSE_OK)
 {
   GdkColor color;

   colorsel = GTK_COLOR_SELECTION(
                  GTK_COLOR_SELECTION_DIALOG(dialog)->colorsel);
   gtk_color_selection_get_current_color(colorsel,
                  &color);

   gtk_widget_modify_fg(GTK_WIDGET(label),
                  GTK_STATE_NORMAL,
                  &color);
 }

اذا قمنا بضغط الزرار OK نحصل علي اللون ونستبدل اللون في الملصق (label) بهذا اللون .

GtkColorSelectionDialog

Figure: GtkColorSelectionDialog

Home Contents Top of Page