Dialogs

The main window of all programs will be Gtk.Window but there are other forms of windows that can be used in conjunction with Gtk.Window (although they can be used on their own). The most popular one is Gtk.Dialog or otherwise known as pop up Dialog. The most commonly used purpose of these Dialogs is to set changes.

Dialogs are split into two areas, the content area and action area. The Content area is a VBox widget where widgets are displayed like labels and entry's so data can be entered. The action area is where buttons are added to determine what should be done ie the normal Ok and Cancel buttons as seen in many applications.Adding buttons are easy but to add widgets to the content areas requires a few additional steps.

An Seed JavaScript example is as follows (Please note this just produces a Dialog box and behaves much in the same way as a normal Gtk.Window):

   1 #!/usr/bin/env seed
   2 
   3 var Gtk = imports.gi.Gtk;
   4 Gtk.init(null, null);
   5 
   6 var dialog = new Gtk.Dialog({title : “My Dialog”});
   7 var label = new Gtk.Label({label : “Hello World In Dialog!!”});
   8 dialog.signal.hide.connect(Gtk.main_quit);
   9 dialog.add_button(Gtk.STOCK_CANCEL, 0);
  10 dialog.add_button(Gtk.STOCK_OK, 1);
  11 var dialog_area = dialog.get_content_area();
  12 dialog_area.pack_start(label);
  13 dialog.show_all();
  14 dialog.signal.response.connect(function(w, response_id) {
  15     if (response_id == 1){
  16         Seed.print(“Ok Button was pressed”);
  17    }
  18    if (response_id == 0){
  19       Seed.print(“Cancel Button was pressed”)
  20 dialog.destroy();
  21    }
  22 });
  23 Gtk.main();
  24 
  25 A breakdown of this is as follows:
  26 
  27 {{{
  28 var dialog = new Gtk.Dialog({title : “My Dialog”});

This creates a Dialog window with title “My Dialog”

dialog.add_button(Gtk.STOCK_CANCEL, 0);
dialog.add_button(Gtk.STOCK_OK, 1);

}}}

This adds two buttons to the Dialog. There is two things to note here. Firstly, the parameters Gtk.STOCK_CANCEL and Gtk.STOCK_OK are pre-defined items used in menu or toolbar items. This displays the Cancel and OK icons, as seen in all Gnome Applications, as the buttons. They could be set to another other icon or as text if you use. Secondly, the number parameter is the response id set to each button eg the Cancel button is set to 0 and Ok button is set to 1. This is required later on.

var dialog_area = dialog.get_content_area();

As mentioned in the introduction, additional steps are requried to add widgets to the content area. This is done by getting the content area from the Dialog and putting it into a variable, dialog_area.

dialog_area.pack_start(label);

The content area, as mentioned is a Vbox and behaves exactly like one. To add widgets to it use the standard function pack_start()

dialog.signal.response.connect(function(w, response_id) {
if (response_id == 1){
   Seed.print(“Ok Button was pressed”);
}
if (response_id == 0){
   Seed.print(“Cancel Button was pressed”)
   dialog.destroy();
}

The dialog.signal.response.connect function is used to connect the buttons added to the buttons to a callback. When any of the buttons are pressed the code inside the function is actioned. This is where the response ids come into action.

In real life situations, when the dialog is run to say to change settings, you may want to do additional checking to these settings to make sure they are correct or to set program variables with input. You may also want to disregard the input is cancel is pressed. To allow this with multiple buttons, the response_id is checked.

In the above example if the response id (response_id variable is defined in the parameter of callback) is 1 (which was set when adding the Ok button), then code is executed, in this instance, a message saying OK button was pressed.

if (response_id == 1){
   Seed.print(“Ok Button was pressed”);
}

If the response id is set to 0 (which was set when adding the Cancel button), then code is executed, in this instance, a message saying cancel button was pressed and the dialog is destroyed.

if (response_id == 0){
   Seed.print(“Cancel Button was pressed”)
   dialog.destroy();
}

This shows how a dialog is created. The following is how the dialog would normaly be used is as follows. In this example, a window is created with a button and when it is pressed the dialog appears.

   1 #!/usr/bin/env seed
   2 
   3 Gtk = imports.gi.Gtk;
   4 Gtk.init(null, null);
   5 
   6 var dialog = new Gtk.Dialog({title : “My Dialog”});
   7 var label = new Gtk.Label({label : “Hello World In Dialog!!”});
   8 var window = new Gtk.Window();
   9 
  10 window.signal.hide.connect(Gtk.main_quit);
  11 dialog.add_button(Gtk.STOCK_OK, 1);
  12 var dialog_area = dialog.get_content_area();
  13 dialog_area.pack_start(label);
  14 dialog.signal.response.connect(function(w, response_id) {
  15    Seed.print(“Dialog Ok was pressed”);
  16    dialog.hide();
  17 });
  18 var button = new Gtk.Button({label: “Click Me!”});
  19 
  20 button.signal.clicked.connect(function(w){
  21    dialog.show_all();
  22 });
  23 
  24 window.add(button);
  25 window.show_all();
  26 Gtk.main();
  27 dialog.destroy()

Please note there is a difference in the behaviour of the dialog which is different in the previous example. This is to do the design of the program. The writing programs that uses dialog type windows, you can either create all the dialogs at the beginning of the program and then show and hide them when required. The other way is to create and destroy them ‘on the fly’ when you only need them. It is not in the scope of this tutorial to say which is best but the ‘on the fly’ approach may be required if writing programs for embedded devices where memory is limited (when creating dialogs at the start, even though hide still uses memory, so have a few of them created but not be advisable).

In the above example, the dialog is created and in the response signal callback, the command dialog.hide(); is used when hides the dialog when the OK button is pressed.

dialog.signal.response.connect(function(w, response_id) {
   Seed.print(“Dialog Ok was pressed”);
   dialog.hide();
});

In the main window, a click signal callback is connected to the window Button to show the dialog. In the main window, when the button is pressed, the dialog appears.

button.signal.clicked.connect(function(w){
   dialog.show_all();
});

The dialog is then destroyed after the main window is destroyed.

dialog.destroy()

The following example shows how to create dialogs ‘on the fly’. The dialog is created each time the Window button is pressed (the MyDialog Gobject subclass of Gtk.Dialog).

Gtk = imports.gi.Gtk;
Gtk.init(null, null);

MyDialog = new GType({
   // Parent class
   parent: Gtk.Dialog.type,
   name: “MyDialog”,
   init: function (){
      // Private
      this.add_button(Gtk.STOCK_OK, 1);
      this.set_title(“Test Dialog”);
     x = this;
      this.signal.response.connect(function(w,       response_id) {
         Seed.print(“Dialog Ok was pressed”);
         x.destroy();
      });
   }
});

var dialog = new Gtk.Dialog({title : “My Dialog”});
var label = new Gtk.Label({label : “Hello World In Dialog!!”});
var window = new Gtk.Window();

window.signal.hide.connect(Gtk.main_quit);
var dialog_area = dialog.get_content_area();
var button = new Gtk.Button({label: “Click Me!”});

button.signal.clicked.connect(function(w){
  x = new MyDialog();
   x.show();
});

window.add(button);
window.show_all();
Gtk.main();
dialog.destroy()