Demo of using multiple gtk combo boxes

Using glade I made a window with multiple combo boxes

What I’m doing is I’m storing day, month or year depending upon what is selected in the combo box which is right above the show button, into a text file. 

If you are not able to make window, see my window hierarchy in below image.

I’m not putting validation if nothing is selected or if texts boxes are empty this is the rough code I’ve written you can make changes according to your comfort.

#include <stdlib.h>

#include <gtk/gtk.h>

#include <string.h>

//a structure for the widgets of the window.

struct settings_window

{

   GtkEntry *e3;

   GtkComboBox *cb1;

   GtkEntry *e4;

   GtkComboBox *cb2;

   GtkComboBox *cb3;

   GtkEntry *e5;

   GtkComboBox *cb4;

};

typedef struct settings_window Widgets6;

G_MODULE_EXPORT void on_save_button_clicked ( GtkButton *button,Widgets6 *widg6)

{

    GtkWidget *dialog=NULL;

    int i,j,k;

    FILE *fp;

/*getting text from text boxes and combo boxes*/

     const gchar *text1 = gtk_entry_get_text( widg6->e3 );

     const gchar *text2 = gtk_combo_box_get_active_text( widg6->cb1 );

     const gchar *text3 = gtk_entry_get_text( widg6->e4 );

     const gchar *text4 = gtk_combo_box_get_active_text( widg6->cb2 );

     const gchar *text5 = gtk_combo_box_get_active_text( widg6->cb3 );

     const gchar *text6 = gtk_entry_get_text( widg6->e5 );

     const gchar *text7 = gtk_combo_box_get_active_text( widg6->cb4 );

//opening file you know why.. J

fp=fopen("save.txt","w");

if(fp==NULL)

 {

  puts("Cannot open file.\n");

  exit(1);

 }

//checking which option is selected in the combo box which is above the show button

   i=strcmp(text7,"Day");

   j=strcmp(text7,"Month");

   k=strcmp(text7,"Year");

//according to selected option putting the text into the file see below if conditions.

   if(i==0)

    {

     fputs(text4,fp);

     fputc('-',fp);

     fputs(text5,fp);

     fputc('-',fp);

     fputs(text6,fp);

     fclose(fp);

puts("hello");

    }

   else if(j==0)

    {

     fputs(text2,fp);

     fputc('-',fp);

     fputs(text3,fp);

     fclose(fp);

    }

   else if(k==0)

    {

     fputs(text1,fp);

     fclose(fp);

    }

   else

   {

  dialog = gtk_message_dialog_new (GTK_WINDOW (dialog), GTK_DIALOG_MODAL, GTK_MESSAGE_INFO, GTK_BUTTONS_CLOSE, "not selected any mode please select one");

  gtk_window_set_position (GTK_WINDOW (dialog), GTK_WIN_POS_CENTER);

  gtk_dialog_run (GTK_DIALOG (dialog));

  gtk_widget_destroy (dialog);

   }

}

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

{

    GtkBuilder *gtkBuilder;

    GtkWidget  *win;

    Widgets6 widg6;

    gtk_init(&argc, &argv);

    gtkBuilder = gtk_builder_new();

    gtk_builder_add_from_file(gtkBuilder, "combobox.glade", NULL);

/ *I have used widge6 which is a variable of our structure type and connecting each widget to its appropriate structure member.*/

    win = GTK_WIDGET( gtk_builder_get_object( gtkBuilder, "window1") );

   widg6.e3 = GTK_ENTRY( gtk_builder_get_object( gtkBuilder, "year_entry" ) );

   widg6.cb1 = GTK_COMBO_BOX( gtk_builder_get_object( gtkBuilder, "combobox1" ) );

   widg6.e4 = GTK_ENTRY( gtk_builder_get_object( gtkBuilder, "month_year_entry" ) );

   widg6.cb2 = GTK_COMBO_BOX( gtk_builder_get_object( gtkBuilder, "combobox2" ) );

   widg6.cb3 = GTK_COMBO_BOX( gtk_builder_get_object( gtkBuilder, "combobox3" ) );

   widg6.e5 = GTK_ENTRY( gtk_builder_get_object( gtkBuilder, "date_month_year_entry" ) );

   widg6.cb4 = GTK_COMBO_BOX( gtk_builder_get_object( gtkBuilder, "combobox4" ) );

    gtk_builder_connect_signals( gtkBuilder,&widg6 );

    g_object_unref(G_OBJECT(gtkBuilder));

    gtk_widget_show(win);

    gtk_main();

    return 0;

}

How to use gtk combo box

You know that how to place widgets on the window in glade. So I will demonstrate to setup combo box directly.

Step 1:

Step 2:

After clicking new glade will add liststore in your window

See example below

Step 3: click on the liststore1

After doing this you will see like you see in below image

 

Step 4:

Step 5:

Step 6:

When you click add button in the above window

Then do like in below image

Now close this window and save the work.

Now the coding part.

#include <stdlib.h>

#include <gtk/gtk.h>

#include <string.h>

struct window

{

   GtkComboBox *cb;

   GtkLabel *l;

};

typedef struct window Widgets;

Widgets Widg;

G_MODULE_EXPORT void on_GetAndSet_clicked ( GtkButton *button,Widgets *widg)

{

   const gchar *text = gtk_combo_box_get_active_text( widg->cb );   // getting text from the combo box

gtk_label_set_text(Widg.l,text); /*setting or you can say putting text on the label so that you can se                                                                                                                                                                         

                                                           what you have selected in the combo box*/    

}

// and till from the beginning of gtk tutorial now you obviously know what to do in the main now I will not comment below code. J

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

{

    GtkBuilder *gtkBuilder;

    GtkWidget  *win;

    gtk_init(&argc, &argv);

    gtkBuilder = gtk_builder_new();

    gtk_builder_add_from_file(gtkBuilder, "cb.glade", NULL);

    win = GTK_WIDGET( gtk_builder_get_object( gtkBuilder, "window1") );

    Widg.cb = GTK_COMBO_BOX( gtk_builder_get_object( gtkBuilder, "combobox1" ) );

    Widg.l = GTK_LABEL( gtk_builder_get_object( gtkBuilder, "label" ) );

    gtk_builder_connect_signals( gtkBuilder,&Widg );

    g_object_unref(G_OBJECT(gtkBuilder));

    gtk_widget_show(win);

    gtk_main();

    return 0;

}

how to display huge content in a window in #gtk

below is the image,  i have created a window and placed a button in it.i have placed an 

on_ button1_clicked handler in its signal properties. 

 until now you know how to create this, then i will not paste the code for the button. 

now i have created a window and placed a text view in it. for this i have not used glade UI designer.

you should know how to make it without glade. only for the knowledge purpose.

#text view is a widget that is used when we want to display huge content. it only support text files. we can not display .rtf or any other kind of files.

G_MODULE_EXPORT void on_button1_clicked ()

{

    char *contents;

    GtkWidget *window;

    GtkWidget *scrolledwindow;

    GtkWidget *textview; 

g_file_get_contents("buffer.txt", &contents, NULL, NULL);/*pointer contents will point to the                                                                                         buffer which this api will get from owr text file*/

window = gtk_window_new (GTK_WINDOW_TOPLEVEL); // creating a new window

gtk_window_set_default_size (GTK_WINDOW (window), 400, 300); /*setting default size when                                                                                                                         the window is displayed                                                                                                                              you can resize it.*/

gtk_window_set_title(GTK_WINDOW(window), "text view"); //setting the tittle

scrolledwindow = gtk_scrolled_window_new (NULL, NULL);//making window scroll able

gtk_widget_show (scrolledwindow);

gtk_container_add (GTK_CONTAINER (window), scrolledwindow); // adding scroll to window

gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolledwindow),

GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);

textview = gtk_text_view_new (); creating a text view

gtk_widget_show (textview);

gtk_container_add (GTK_CONTAINER (scrolledwindow), textview); /*adding it in the window                                                                                                                 you can do same when you want                                                                                                    to add buttons,text box,label and etc...*/

gtk_text_buffer_set_text (gtk_text_view_get_buffer(GTK_TEXT_VIEW (textview)),contents,-1); /*passing the pointer of that buffer to this api. so that this api can set it to                                               text view. instead of making pointer for gtk_text_view_get_buffer() and                                             passing pointer to gtk_text_buffer_set_text() api. i am directly passing it so                                           that what gtk_text_view_get_buffer() will return will be taken                                                                 by  gtk_text_buffer_set_text () directly. this technique i have also used in                                                  previous post*/

gtk_widget_show(window); // at last displaying window

g_free(contents);

}

when you click the button window will appear.below is the image of text view window. 

last post continued.

i have extracted the code of login window from my project. see the code below and sorry for my bad explanation (what i will write in comments) in advance. :) please post comments if you have questions.

#include <gtk/gtk.h>
#include<stdio.h>
#include<stdlib.h>
#include <string.h>

struct login_window
   {
     GtkEntry *e1;
     GtkEntry *e2;
    GtkLabel *l1;
    GtkLabel *l2;
   }; /*i have grouped all the widgets in one structure. this technique will help if you have huge number of  windows in your project. as the number of window will increase the variable we declare will increase and the declared variables can have same name of different windows */

    typedef struct login_window widgets; /*so that i dont have to write struct login_window to                                                                                   declare variable. i will just write widgets*/


char pw[30];  //a globel variable to save password which we will get a from file.

//handlers of login_window buttons
G_MODULE_EXPORT void on_window1_destroy ()
  {
    gtk_main_quit ();//to safely close window when you hit the cross button of window.
  }

G_MODULE_EXPORT void on_button2_clicked ()
 {
   gtk_main_quit(); //window will close when quit button is clicked.
 }

void decrypt(int key)  /*the password i have stored in the file  is encrypted. i have used an                                                       encryption algorithm but i'm not pasting code here if you want the tell me.*/
{
    unsigned int i=0;
    FILE *fp;
    char temp;
    fp=fopen("password.txt","r"); // open file
    if(fp==NULL)                  // check if file is opened or not
     {
      printf("error");
      EXIT_FAILURE;
     }
    while((temp=fgetc(fp))!=EOF)  
     {
      pw[i++]=temp;  //copying content of file in an array
     }

    for(i=0;i<strlen(pw);++i)
    {
        pw[i] = pw[i] + key;  //decrypting with key i have used for encryption
    }
 fclose(fp);
}

/*code below is the handler for ok button. it is compulsory to prefix the handler with G_MODULE_EXPORT. otherwise you will get error that handler not found.*/

G_MODULE_EXPORT void on_button1_clicked ( GtkButton *button,widgets  *widg )
{
    char ch1[30],ch2[30],temp,un[30];
    int i=0,j=0,a;
    GtkWidget *dialog=NULL;

 const gchar *text1 = gtk_entry_get_text( widg->e2 ); /*e2 is a pointer of type get entry which i                                                                                                     have declared in the structure.widg is a                                                                                                     pointer of structure(widgets) type.
                                                                                             gtk_entry_get_text() is used to get text of                                                                                                  textbox */
  const gchar *text2 = gtk_entry_get_text( widg->e1 );

 strcpy(ch1,text1); //copying the text of textbox into an array
 strcpy(ch2,text2);

 FILE *fp1;
 fp1=fopen("user_name.txt","r");
 if(fp1==NULL)
  {
     printf("error");
     EXIT_FAILURE;
  }

  while((temp=fgetc(fp1))!=EOF)
  {
      un[i++]=temp;
  }

decrypt(0xFACA); 
  i=0;j=0;
  if((a=strcmp(un,ch1))==0)
  {
      printf("\nuser name is correct");
  }
  else
  {
      i++; //if name is not correct
  }
  if((a=strcmp(pw,ch2))==0)
  {
      printf("\npassword is correct");
  }
  else
  {
      j++; //if password is not correct
  }

  if(i>0||j>0)
  {                                 /*creating a dialog to display that username or password is wrong for more                                           info of these api's refer the website i have mentioned in the introduction part */                                         
  dialog = gtk_message_dialog_new (GTK_WINDOW (dialog), GTK_DIALOG_MODAL, GTK_MESSAGE_INFO, GTK_BUTTONS_CLOSE, "you have entered wrong user name or password");
  gtk_window_set_position (GTK_WINDOW (dialog), GTK_WIN_POS_CENTER);
  gtk_dialog_run (GTK_DIALOG (dialog));
  gtk_widget_destroy (dialog);
  }
  else
      {   // username and password is correct
   dialog = gtk_message_dialog_new (GTK_WINDOW (dialog), GTK_DIALOG_MODAL,  GTK_MESSAGE_INFO, GTK_BUTTONS_CLOSE, "login success");
  gtk_window_set_position (GTK_WINDOW (dialog), GTK_WIN_POS_CENTER);
  gtk_dialog_run (GTK_DIALOG (dialog));
  gtk_widget_destroy (dialog);

   }
}

int main(int argc, char *argv[])
{
    GtkBuilder *gtkBuilder; 
    widgets   widg;
    GtkWidget  *window;

    gtk_init(&argc, &argv);
    gtkBuilder = gtk_builder_new(); 

    gtk_builder_add_from_file(gtkBuilder, "login_window.glade", NULL);/*this api is used to                                                                build the glade file which we have created in glade UI designer.*/


    window = GTK_WIDGET( gtk_builder_get_object( gtkBuilder, "window1") );

//connecting each structure member to it appropriate gtkwidget
    widg.e1 = GTK_ENTRY( gtk_builder_get_object( gtkBuilder, "entry1" ) );
    widg.e2 = GTK_ENTRY( gtk_builder_get_object( gtkBuilder, "entry2" ) );
    widg.l1 = GTK_LABEL( gtk_builder_get_object( gtkBuilder, "label1" ) );
    widg.l2 = GTK_LABEL( gtk_builder_get_object( gtkBuilder, "label2" ) );

    gtk_builder_connect_signals( gtkBuilder, &widg ); /*connecting signals so that handlers can be                                                                                             called*/
    g_object_unref(G_OBJECT(gtkBuilder));
    gtk_widget_show(window);
    gtk_main(); //it is basically a loop to make window appear. if we not write it then window will                                   appear but disappear after few seconds automatically.*/
    return 0;
}

when running project, it will show window like in below image:

when username and password is correct below dialog will popup

when either username or password is wrong below dialog will popup

how to make log in window using #glade and #gtk.

1:open codeblocks and click on file and then new then click on project...

2:after clicking project below window will appear.
in this window click on gtk+ project and click on go.
after that a welcome window will appear just click next.

3: now give your project a title and click next.

4:now give the path of gtk. i have gtk in my c drive.(i have renamed the gtk folder to gtk default name of the downloaded folder was too long).click next.

5:in the next window click on finish.

after doing this process a project ill be created and a main.c file will be displayed on your codeblocks.

this main.c file contains a sample program of gtk.(do not close codeblocks  IDE).

now designing part comes.

1: open glade interface designer and click on window which you can see in below image.

on clicking window tool you will get a blank grey window as i have in below image. 

2:now click on vertical box which is under containers

    a window will appear like this

3: i have selected 4 . it means i am deviding  the window in 4 equal rows.

your window will look like below image of mine.

4: now click on label which you can find in control and display section and then click on the row  where you want to place the label.

now divide  each rest of the three rows in two parts using horizontal box.

your window will look like below image of mine.

5: now second row which you have divided into two parts. in the left part put a label and change  its text to user name which will appear on the label(assuming that you know how to put text on the label). 

in right part put a text box.

do same in third row.

in the last row put a button in both left and right part and do what i did. see the image below:

do the same on second button and save the work.

when this button is clicked a signal will be generated.and we have a handler on_button1_clicked.

now your final window should look like the below image of my window

now save this work where your codeblocks project folder is.(save under that folder).

(your glade files and main.c file should be in the same folder).

now your window is ready and now go into codeblocks.

i will write the code and you can copy paste it. :)

to  be continued on next post.

now we are all set with gtk and codeblocks.

i will be using snippets of code from my project to show you how things work in gtk.

there are two ways to work with gtk. either you use glade user interface designer tool or you can directly code in gtk to design user interface.

i will recommend you to use glade because by using it:-  

• Less code needs to be written.
• UI changes can be seen more quickly, so UIs are able to improve.
• Designers without programming skills can create and edit UIs.
• The description of the user interface is independent from the programming language being used.

The user interfaces designed in Glade are saved as XML, and by using the GtkBuilder GTK+ object these can be loaded by applications dynamically as needed.so no extra memory load will be generated.

By using GtkBuilder, Glade XML files can be used in numerous programming languages including C, C++, C#, Vala, Java, Perl, Python,and others.

i will be using c language, if you have read the last post, i have mentioned that.

my project was completed on time and i got good marks. :)

for more information about glade and gtk you can prefer glade.gnome.org and www.gtk.org .

this post was only for introduction. in the next post i will show how to make a log in window.

until happy coding. :)

 

 

today i am writing tutorial  that how to configure code-blocks to develop GUI using  gtk libraries.

(i was given a project called "budget monitoring system"  in the last summer holidays by my college and they said that i have to do this project using c language and project should completely GUI based, so i have searched on Google and found a way to develop GUI based applications using c language )


(1)  link to gtk:-
http://ftp.gnome.org/pub/gnome/binaries/win32/gtk+/2.24/gtk+-bundle_2.24.10-20120208_win32.zip
this link is a zip file of gtk. extract it in c drive

(2) link to glade:-
goto below link and log in and download   Glade Interface Designer Gtk+ 2 copy it in c drive.

link:->   https://my.pcloud.com/publink/show?code=kZJCiZm2wGcstvuyBN9m4mmdWmbmWwHzay

(3) code blocks:-
link:-> http://www.codeblocks.org/downloads/26  go to this link and
download   codeblocks-13.12mingw-setup.exe and install it.

(note:- if you already have code blocks with mingw installed then skip this)


now setup:-
step 1:- open codeblocks goto settings then click on compiler...
step2:-copy  `pkg-config --libs gtk+-2.0` and paste it in linker settings then in other linker options.
    example:

copy  `pkg-config --cflags gtk+-2.0` and  paste it in compiler settings then in other options
click ok and close the window.
 example:

 

step 3: now you have to setup environment variables
(note: according to windows 8)

right click on computer icon and  select properties.
now click on advanced system settings then click on environment variables.
 now find PATH in system variables then click on it and then click edit.
now add path's of bin directories of gtk and mingw separated by semicolon

example:

if you have any problem then write comment.

now you are ready to start enjoy :)