Introducing dialogs in JavaScript GTK

Dialogs

In this part of the JavaScript GTK programming tutorial, we will introduce dialogs.
Dialog windows or dialogs are an indispensable part of most modern GUI applications. A dialog is defined as a conversation between two or more persons. In a computer application a dialog is a window which is used to "talk" to the application. A dialog is used to input data, modify data, change the application settings etc. Dialogs are important means of communication between a user and a computer program.

Message boxes

Message dialogs are convenient dialogs that provide messages to the user of the application. The message consists of textual and image data.

#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates a
Message dialog

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;


Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);       
        
        function init_ui(w) {
          
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("Message dialog");
            w.set_position(Gtk.WindowPosition.CENTER);           
                            
            var fixed = new Gtk.Fixed();
            
            var infoButton = new Gtk.Button.with_label("Information");
            fixed.put(infoButton, 30, 20);

            infoButton.signal.clicked.connect(on_info);            
            
            w.add(fixed);
            w.show_all(); 
        }            
        
        function on_info() {
           
            var md = new Gtk.MessageDialog({modal:true, title:"Information",
                message_type:Gtk.MessageType.INFO,
                buttons:Gtk.ButtonsType.OK, text:"Download completed."});
                
            md.run();
            md.destroy();
        }
    }   
           
});


var window = new Example();
Gtk.main();

We show a button on the window. When we click on the button, an information message is displayed.

var infoButton = new Gtk.Button.with_label("Information"); 

This is a button, which will show a dialog, when we click on it.

function on_info() {
    
    var md = new Gtk.MessageDialog({modal:true, title:"Information",
        message_type:Gtk.MessageType.INFO,
        buttons:Gtk.ButtonsType.OK, text:"Download completed."});
        
    md.run();
    md.destroy();
}

If we click on the info button, the Information dialog is displayed. The Gtk.MessageType.INFO specifies the type of the dialog. The Gtk.ButtonsType.OK specifies what buttons will be in the dialog. The last parameter is the message displayed. The dialog is displayed with the run() method. The programmer must also call either the destroy() or the hide() method.

Figure: Message dialog

AboutDialog

The AboutDialog displays information about the application. It can display a logo, the name of the application, version, copyright, website or license information. It is also possible to give credits to the authors, documenters, translators and artists.

#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example demonstrates the
AboutDialog dialog.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
GdkPixbuf = imports.gi.GdkPixbuf;

Gtk.init(null, null);

Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {
        init_ui(this);
        
        function init_ui(w) {
                            
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(250, 200);
            w.set_title("About dialog");
            w.set_position(Gtk.WindowPosition.CENTER);   
            
            var button = new Gtk.Button.with_label("About");
            button.set_size_request(80, 30);        
            button.signal.clicked.connect(on_clicked);        
            var fix = new Gtk.Fixed();
            fix.put(button, 20, 20);
      
            w.add(fix);        

            w.show_all(); 
        }            
        
        function on_clicked() {
          
            var about = new Gtk.AboutDialog();
            about.set_program_name("Battery");
            about.set_version("0.1");
            about.set_copyright("(c) Jan Bodnar");
            about.set_comments("Battery is a simple tool for battery checking");
            about.set_website("http://www.zetcode.com");
            about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));
            about.run();
            about.destroy();
    }
    }   
           
});


var window = new Example();
Gtk.main();

The code example uses a AboutDialog with some of its features.

var about = new Gtk.AboutDialog();

We create an instance of the AboutDialog.

about.set_program_name("Battery");
about.set_version("0.1");
about.set_copyright("(c) Jan Bodnar");

Here we specify the name, the version and the copyright of the program.

about.set_logo(new GdkPixbuf.Pixbuf.from_file("battery.png"));

This line creates a logo.

FontSelectionDialog

The FontSelectionDialog is a dialog for selecting fonts. It is typically used in applications, that do some text editing or formatting.

#!/usr/bin/seed

/*
ZetCode JavaScript GTK tutorial

This example works with the
FontSelectionDialog.

author: Jan Bodnar
website: www.zetcode.com
last modified: July 2011
*/

Gtk = imports.gi.Gtk;
Pango = imports.gi.Pango;

Gtk.init(null, null);



Example = new GType({
    parent: Gtk.Window.type,
    name: "Example",
    init: function ()
    {

        init_ui(this);
        
        var label;
      
        function init_ui(w) {
      
            w.signal.hide.connect(Gtk.main_quit);
            w.set_default_size(350, 150);
            w.set_title("Font selection");
            w.set_position(Gtk.WindowPosition.CENTER);

            w.set_border_width(10);
            var text = "The only victory over love is flight."
            label = new Gtk.Label.c_new(text);
            var button = new Gtk.Button.with_label("Select font");
            
            button.signal.clicked.connect(on_clicked);

            var fix = new Gtk.Fixed();
            fix.put(button, 100, 30);
            fix.put(label, 30, 90);
            
            w.add(fix);       
            w.show_all();             
        }
            
        function on_clicked() {
          
            var fdia = new Gtk.FontSelectionDialog.c_new("Select font");
            var response = fdia.run();
                  
            if (response == Gtk.ResponseType.OK) {
                var fname = fdia.get_font_name();
                var font_desc = Pango.Font.description_from_string(fname);
                if (font_desc)
                    label.modify_font(font_desc);        
            }
            
            fdia.destroy();
        }       
    }                   
});


var window = new Example();
Gtk.main();

In the code example, we have a button and a label. We show the FontSelectionDialog by clicking on the button.

var fdia = new Gtk.FontSelectionDialog.c_new("Select font");

We create the FontSelectionDialog.

if (response == Gtk.ResponseType.OK) {
    var fname = fdia.get_font_name();
    var font_desc = Pango.Font.description_from_string(fname);
    if (font_desc)
        label.modify_font(font_desc);        
}

If we click on the OK button, the font of the label widget changes to the one, that we selected in the dialog.

Figure: FontSelectionDialog

In this part of the JavaScript GTK tutorial, we presented dialogs.