ADJUSTMENTS
Certain widgets work on a range of values like a slider button whose values have an lower and upper value. For these to function properly a Gtk.Adjustment object needs to be created and associated with the widget. The widget and Adjustment ‘work together’ to manipulate the widgets value which the user can amend.
A Seed JavaScript example of a scale button is as follows:
1 #!/usr/bin/env seed
2
3 var Gtk = imports.gi.Gtk;
4 Gtk.init(null, null);
5
6 var window = new Gtk.Window();
7 window.set_default_size(150,50);
8 window.signal.hide.connect(Gtk.main_quit);
9 var vbox = new Gtk.VBox()
10 var button = new Gtk.Button({label:”OK”});
11 var adj = new Gtk.Adjustment({value : 1.0, lower: 1.0, upper: 31.0, step_increment : 1.0, page_increment : 5.0, page_size : 0.0});
12 var scalebutton = new Gtk.ScaleButton({adjustment : adj, climb_rate: 1});
13 vbox.pack_start(scalebutton);
14 vbox.pack_start(button);
15 button.signal.clicked.connect(function(w) {
16 Seed.print(scalebutton.get_value());
17 });
18 window.add(vbox);
19 window.show_all();
20
21 Gtk.Main();
The only thing required for basic usage of the Adjustment is to create it and then use it when defining the widget. Using the above Seed JavaScript example,
var adj = new Gtk.Adjustment({value : 1.0, lower: 1.0, upper: 31.0, step_increment : 1.0, page_increment : 5.0, page_size : 0.0});The JSON values are as explained below (which I nicked from the GTK reference manual as they explain it more eloquently!!):
lower = the minimum value. upper = the maximum value. value = the current value. step_increment = the increment to use to make minor changes to the value. In a GtkScrollbar this increment is used when the mouse is clicked on the arrows at the top and bottom of the scrollbar, to scroll by a small amount. page_increment = the increment to use to make major changes to the value. In a GtkScrollbar this increment is used when the mouse is clicked in the trough, to scroll by a large amount. page_size = the page size. In a Gtk.Scrollbar this is the size of the area which is currently visible.
The adjustment is then associated with the widget when creating it.
var scalebutton = new Gtk.ScaleButton({adjustment : adj, climb_rate: 1});Here is a Seed JavaScript example of using a Spin Button
1 #!/usr/bin/env seed
2
3 var Gtk = imports.gi.Gtk;
4
5 Gtk.init(null, null);
6
7 var window = new Gtk.Window();
8 window.set_default_size(150,50);
9 window.signal.hide.connect(Gtk.main_quit);
10 var vbox = new Gtk.VBox()
11 var button = new Gtk.Button({label:”OK”});
12 var adj = new Gtk.Adjustment({value : 1.0, lower: 1.0, upper: 31.0, step_increment : 1.0, page_increment : 5.0, page_size : 0.0});
13 var spinbutton = new Gtk.SpinButton({adjustment : adj, climb_rate: 1});
14 vbox.pack_start(spinbutton);
15 vbox.pack_start(button);
16 button.signal.clicked.connect(function(w) {
17 Seed.print(spinbutton.get_value());
18 });
19 window.add(vbox);
20 window.show_all();
21
22 Gtk.main();
It has to be noticed that adjustments aren’t just used for widgets that get input from the user. It is used on Scrollbars of widgets like Scrolled Windows which can be manipulated.
In the below example, the program has a scrolled-window and a button. When the button is pressed, text is added to the scrolled window. When the text fills the Scrolled window view-port, it is scrolled down to see this (this does not work perfectly with Gtk.Builder but is only being used as an example).
Please note, the example uses Gtk.Builder which gets widgets used in program from a XML file created using Glade 3. Glade 3 allows you to create User interfaces quickly rather than doing it manually. A brief overview will be done in a later post.
1 #!/usr/bin/env seed
2 Gtk = imports.gi.Gtk;
3 GtkBuilder = imports.gtkbuilder;
4 GObject = imports.gi.GObject;
5
6 Gtk.init(Seed.argv);
7
8 var counter = 0;
9 builder = new Gtk.Builder();
10 builder.add_from_file(“scroll_window.glade”);
11
12 window = builder.get_object(“window1″);
13 liststore = builder.get_object(“liststore1″);
14 scrolled_window = builder.get_object(“scrolledwindow1″);
15
16 handlers = {
17 button1_clicked_cb: function(button){
18 var iter = new Gtk.TreeIter();
19 var v_adj = new Gtk.Adjustment({value : 1.0});
20 var sw_adj = new Gtk.Adjustment({value : 1.0});
21 counter = counter +1;
22 liststore.append(iter);
23 iter_text = “Item ” + counter;
24 liststore.set_value(iter, 0, iter_text);
25 sw_adj = scrolled_window.get_vscrollbar();
26 sw_adj_value = sw_adj.get_value()
27 v_adj = scrolled_window.get_vadjustment();
28 v_adj.set_value(sw_adj_value + 50);
29 scrolled_window.set_vadjustment(v_adj);
30 }
31 };
32
33 builder.connect_signals(handlers);
34 window.show_all();
35
36 Gtk.main();
From the above Seed, JavaScript example, the adjustment from the Scrolled Windows vertical Scrollbar is extracted into sw_adj adjustment.
sw_adj = scrolled_window.get_vscrollbar();
The value of it is extracted
sw_adj_value = sw_adj.get_value()
The vertical adjustment of the Scrolled window is extracted to v_adj
v_adj = scrolled_window.get_vadjustment();
The value of the vertical adjustment is amended to a higher amount.
v_adj.set_value(sw_adj_value + 50);
The verical adjustment is added to the Scrolled window so that it ’scrolls down’.
scrolled_window.set_vadjustment(v_adj);
This XML file needs to be saved as scrolled_window.glade and needs to be in the same folder as the example
<?xml version="1.0"?>
<interface>
<requires lib="gtk+" version="2.16"/>
<!-- interface-naming-policy project-wide -->
<object class="GtkWindow" id="window1">
<property name="default_width">440</property>
<property name="default_height">250</property>
<child>
<object class="GtkVBox" id="vbox1">
<property name="visible">True</property>
<property name="orientation">vertical</property>
<child>
<object class="GtkScrolledWindow" id="scrolledwindow1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="hscrollbar_policy">automatic</property>
<property name="vscrollbar_policy">automatic</property>
<child>
<object class="GtkTreeView" id="treeview1">
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="model">liststore1</property>
<property name="headers_clickable">False</property>
<property name="search_column">0</property>
<child>
<object class="GtkTreeViewColumn" id="treeviewcolumn1">
<property name="title">column</property>
<child>
<object class="GtkCellRendererText" id="cellrenderertext1"/>
<attributes>
<attribute name="text">0</attribute>
</attributes>
</child>
</object>
</child>
</object>
</child>
</object>
<packing>
<property name="position">0</property>
</packing>
</child>
<child>
<object class="GtkButton" id="button1">
<property name="label" translatable="yes">click here</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
<signal name="clicked" handler="button1_clicked_cb"/>
</object>
<packing>
<property name="position">1</property>
</packing>
</child>
</object>
</child>
</object>
<object class="GtkListStore" id="liststore1">
<columns>
<!-- column-name text -->
<column type="gchararray"/>
</columns>
<data>
<row>
<col id="0" translatable="yes">Click on Button To start</col>
</row>
</data>
</object>
</interface>