GTK+ Widgets

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

ال Widgets هي الاحجار الاسايه لبناء الواجهات الرسوميه. علي مر السنين , بعض ال widgets قد اصبحت قياسيه في كل ال toolkits وكل منصات التشغيل . كمثال الزرار button , صندوق تحقق او حتي شريط الانتقال. فلسفة ال Gtk+ ان تجعل عدد ال widgets قليل . ال widgets المخصوصه والتي تطلبت مواصفات خاصه يتم انشائها علي انها widgets مخصصه (اي بالطلب) .

GtkButton

GtkButton هو مثال علي Widget بسيط يستخدم في بدأ حدث ما (trigger an action) .

#include <gtk/gtk.h>


int main( int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *fixed;
  GtkWidget *button;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_title(GTK_WINDOW(window), "GtkButton");
  gtk_window_set_default_size(GTK_WINDOW(window), 230, 150);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);

  fixed = gtk_fixed_new();
  gtk_container_add(GTK_CONTAINER(window), fixed);

  button = gtk_button_new_with_label("Quit");

  gtk_fixed_put(GTK_FIXED(fixed), button, 50, 50);
  gtk_widget_set_size_request(button, 80, 35);

  g_signal_connect(G_OBJECT(button), "clicked", 
      G_CALLBACK(gtk_main_quit), G_OBJECT(window));

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

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

هذا المثال يعرض زرار موضوع في وعاء ثابت (fixed container) . هذا التطبيق ينغلق عندما يتم نقر الزرار .

 button = gtk_button_new_with_label("Quit");

هذا الكود يقوم بانشاء زرار جديد بملصق عنواني.

  g_signal_connect(G_OBJECT(button), "clicked", 
      G_CALLBACK(gtk_main_quit), G_OBJECT(window));

هنا نقوم بربط الاشاره Clicked بالزرار . هذه الاشاره عندما تبعث سوف يتعامل معها الزرار باستدعاء الداله gtk_main_quit() التي سوف تنهي البرنامج .

GtkButton

Figure: GtkButton

GtkCheckButton

ال widget المسمي ب GtkCheckButton لديه حالتين . Checked/Unchecked اي معلم او غير معلم .

#include <gtk/gtk.h>


void toggle_title(GtkWidget *widget, gpointer window)
{
  if (gtk_toggle_button_get_active(GTK_TOGGLE_BUTTON(widget))) {
      gtk_window_set_title(window, "GtkCheckButton");   
  } else {
      gtk_window_set_title(window, "");
  }
}

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

  GtkWidget *window;
  GtkWidget *frame;
  GtkWidget *check;

  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), 230, 150);
  gtk_window_set_title(GTK_WINDOW(window), "GtkCheckButton");


  frame = gtk_fixed_new();
  gtk_container_add(GTK_CONTAINER(window), frame);


  check = gtk_check_button_new_with_label("Show title");
  gtk_toggle_button_set_active(GTK_TOGGLE_BUTTON(check), TRUE);
  GTK_WIDGET_UNSET_FLAGS(check, GTK_CAN_FOCUS);
  gtk_fixed_put(GTK_FIXED(frame), check, 50, 50);

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

  g_signal_connect(check, "clicked", 
          G_CALLBACK(toggle_title), (gpointer) window);

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

سوف نقوم بعرض عنوان علي حسب حالة ال GtkCheckButton .

 check = gtk_check_button_new_with_label("Show title");
 gtk_toggle_button_set_active(GTK_TOGGLE_BUTTON(check), TRUE);

يتم انشاء GtkCheckButton جديد ويتم تعليمه كحاله افتراضيه . لاننا نعرض عنوان بشكل افتراضي ايضا.

 GTK_WIDGET_UNSET_FLAGS(check, GTK_CAN_FOCUS);

هذا الكود يقوم بتعطيل التركيز علي ال widget . انا ببساطه لم يعجبني الشكل حول الزرار التحقيق (check button) .

 if (gtk_toggle_button_get_active(GTK_TOGGLE_BUTTON(widget))) {
    gtk_window_set_title(window, "GtkCheckButton");     
 } else {
    gtk_window_set_title(window, "");
 }

نقوم بعرض عنوان للنافذه علي حسب حالة الزرار.GtkCheckButton.

GtkCheckButton

Figure: GtkCheckButton

GtkFrame

هي نافذه باطار منسق وملصق عنواني .

#include <gtk/gtk.h>


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

  GtkWidget *window;
  GtkWidget *table;

  GtkWidget *frame1;
  GtkWidget *frame2;
  GtkWidget *frame3;
  GtkWidget *frame4;

  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), 250, 250);
  gtk_window_set_title(GTK_WINDOW(window), "GtkFrame");

  gtk_container_set_border_width(GTK_CONTAINER(window), 10);

  table = gtk_table_new(2, 2, TRUE);
  gtk_table_set_row_spacings(GTK_TABLE(table), 10);
  gtk_table_set_col_spacings(GTK_TABLE(table), 10);
  gtk_container_add(GTK_CONTAINER(window), table);


  frame1 = gtk_frame_new("Shadow In");
  gtk_frame_set_shadow_type(GTK_FRAME(frame1), GTK_SHADOW_IN);
  frame2 = gtk_frame_new("Shadow Out");
  gtk_frame_set_shadow_type(GTK_FRAME(frame2), GTK_SHADOW_OUT);
  frame3 = gtk_frame_new("Shadow Etched In");
  gtk_frame_set_shadow_type(GTK_FRAME(frame3), GTK_SHADOW_ETCHED_IN);
  frame4 = gtk_frame_new("Shadow Etched Out");
  gtk_frame_set_shadow_type(GTK_FRAME(frame4), GTK_SHADOW_ETCHED_OUT);


  gtk_table_attach_defaults(GTK_TABLE(table), frame1, 0, 1, 0, 1);
  gtk_table_attach_defaults(GTK_TABLE(table), frame2, 0, 1, 1, 2);
  gtk_table_attach_defaults(GTK_TABLE(table), frame3, 1, 2, 0, 1);
  gtk_table_attach_defaults(GTK_TABLE(table), frame4, 1, 2, 1, 2);

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

هذا المثال يعرض اربع انواع من الاطارات . الاطارات معلبه داخل وعاء جدول Table container .

 frame1 = gtk_frame_new("Shadow In");
 gtk_frame_set_shadow_type(GTK_FRAME(frame1), GTK_SHADOW_IN);

نقوم بانشاء اطارجديد من نوع GtkFrame ونقوم بوضع نوع الظل الخاص به .

GtkFrame

Figure: GtkFrame

GtkLabel

تعرضنا له من قبل , واظنك تعرف ماهو . هو widget مخصص لعرض النصوص.

#include <gtk/gtk.h>


int main( int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *label;

  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_title(GTK_WINDOW(window), "Nymphetamine");
  gtk_window_set_default_size(GTK_WINDOW(window), 350, 400);

  label = gtk_label_new("Cold was my soul\n\
Untold was the pain\n\
I faced when you left me\n\
A rose in the rain....\n\
So I swore to the razor\n\
That never, enchained\n\
Would your dark nails of faith\n\
Be pushed through my veins again\n\
\n\
Bared on your tomb\n\
I'm a prayer for your loneliness\n\
And would you ever soon\n\
Come above onto me?\n\
For once upon a time\n\
On the binds of your lowliness\n\
I could always find the slot for your sacred key ");

  gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER);
  gtk_container_add(GTK_CONTAINER(window), label);

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

  gtk_widget_show_all(window);

  gtk_main();

  return 0;
}

هذا المثال يعرض كلمات من اغنيه . "استمع اليها" .

  label = gtk_label_new("Cold was my soul\n\
Untold was the pain\n\
...

نقوم بانشاء GtkLabel جديد. يمكنا ان نقوم باضافة نص متعدد السطور .

 gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER);

نقوم بمحورة الملصق النصي في وسط النافذه.

GtkLabel

Figure: GtkLabel

في ملصق عناوني يمكنا ان نستخدم ايضا لغات markup مثل ال HTML. في المثال القادم نعرض ذلك.

#include <gtk/gtk.h>


int main( int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *label;

  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_title(GTK_WINDOW(window), "markup label");

  char *str = "<b>ZetCode</b>, Knowledge only matters";

  label = gtk_label_new(NULL);
  gtk_label_set_markup(GTK_LABEL(label), str);

  gtk_label_set_justify(GTK_LABEL(label), GTK_JUSTIFY_CENTER);
  gtk_container_add(GTK_CONTAINER(window), label);
  gtk_widget_show(label);

  gtk_window_set_default_size(GTK_WINDOW(window), 300, 100);

  g_signal_connect(window, "destroy",
      G_CALLBACK (gtk_main_quit), NULL);

  gtk_widget_show(window);

  gtk_main();

  return 0;
}

هذا المثال يقوم بعرض جزء من النص بصورة BOLD .

 char *str = "<b>ZetCode</b>, Knowledge only matters";

هذا هو النص الذي سوف نقوم بعرضه .

  label = gtk_label_new(NULL);
  gtk_label_set_markup(GTK_LABEL(label), str);

نقوم بانشاء ملصق جديد ونضع النص بداخله ويتم عرضه بهذا الشكل.

markup label

Figure: markup label

Home Contents Top of Page