The Artima Developer Community
Sponsored Link

PHP Buzz Forum
gtkdjs updates - treeview liststore

0 replies on 1 page.

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 0 replies on 1 page
Alan Knowles

Posts: 390
Nickname: alank
Registered: Sep, 2004

Alan Knowles is Freelance Developer, works on PHP extensions and PEAR.
gtkdjs updates - treeview liststore Posted: Jun 12, 2007 5:48 PM
Reply to this message Reply

This post originated from an RSS feed registered with PHP Buzz by Alan Knowles.
Original Post: gtkdjs updates - treeview liststore
Feed Title: Smoking toooo much PHP
Feed URL:
Feed Description: More than just a blog :)
Latest PHP Buzz Posts
Latest PHP Buzz Posts by Alan Knowles
Latest Posts From Smoking toooo much PHP

I'm still digging through the gtk api, checking it works as I go. (and still deciding on a name for the bindings). I've been looking at perhaps one of the two most complex widgets in Gtk, GtkTreeView. The tutorial for which looks like it weighs in at half the Full Gtk manual.

At present I've got through the first section, and got a roughed out GtkListStore to work with it. (TreeStore should come next).

For those who dont know GtkTreeView, it uses the concept of a Model, and a View.

The Model contains all the data (in rows or a tree) - GtkListStore is a model.

The View (eg. GtkTreeView and it's columns) describe how to render the view, and what columns to use from the model.

This API is pretty raw at present, Some of it can be tidied up in Javascript, others may need more work in the bindings

First part of using the tree is creating the Store.
var store = new Gtk.ListStore(
At present I've used the Gtype names to define what is being stored where. - This may need simplifying, and integrating somehow with the writing mechanism as validating data types written to the tree is a bit haphazard at present.

Next, to add data, you must use what I think is the worst named Class in Gtk, Gtk.TreeIter. a better name would have probably been something like  GtkRowReaderAndWriter (bit of a mouthfull, but alot clearer.)

To use this Row reader/writer, we first have to create a blank version. Then call the append Method on the store (a bit ass backwards, but again this could be fixed with some Javascript prototype modifications.
var iter = new Gtk.TreeIter();
The append method loads the Row reader writer, so that it can access the new row.

Next we add data to the row. This is done via G.Values at present, although this may change in the future...

store.set(iter, 0, new G.Value("test"));
store.set(iter, 1, new G.Value(1.0));
store.set(iter, 2, new G.Value({ a: 1, c: 2}));
store.set(iter, 3, new G.Value(true) );
var pixbuf = Gdk.Pixbuf.newFromFile("gnome-logo-icon.png");
store.set(iter, 4, new G.Value(pixbuf) );

all this could easily be abstracted by defining a simple prototype

Gtk.ListStore.prototype.appendRow = function(rdata) {
var iter = new Gtk.TreeIter();
for(var i =0;i<rdata.length;i++) {
this.set(iter,i, new G.Value(rdata[i]));
store.appendRow(["test", 1.0, {a: 1}, true, Gtk.Pixbuf.newFromFile(....)]);

Next step is to build the Widget. And the renderers (the classes that turn the data into visable data). Gtk comes with a few renderers, It will be interesting to see if creating them in Javascript is feasible.

var view = new Gtk.TreeView();
var renderer = new Gtk.CellRendererText ();
var pixrenderer = new Gtk.CellRendererPixbuf ();

Adding columns is again a little raw, as we cant use the varargs methods the C does, so we have to combine a few calls.

var col = new Gtk.TreeViewColumn();
col.packStart(renderer, true);
col.addAttribute(renderer, "text", 0);
view.insertColumn( col, -1);
Again a nice wrapper could be written.

Gtk.TreeView.prototype.insertColumnAuto = function(config) {
var col = new Gtk.TreeViewColumn();
col.packStart(config.renderer, true);
config.renderer.isPrototypeOf(GtkCellRenderText) ?
 "text" : "pixbuf", 0);
this.insertColumn( col, -1);
title: "text here",
renderer: new GtkCellRendererText(),

Merging the data and the view is done simply by setting the model.
view.setModel ( store );
window.add(view); // add it to a GtkWindow..

I also had a few experiments with callbacks.

view.connect("row-activated", function(view, path, col) {
var model = view.getModel();
var iter = new Gtk.TreeIter();

if (model.getIter(iter, path)) {
var name = new G.Value();
var name2 = new G.Value();
model.getValue(iter, 0, name);
model.getValue(iter, 1, name2);
println (
"The row containing the name '"+
name.getString() +
"' has been double-clicked. holding" +
model = new Gtk.ListStore(model);
println ("removed?");

At present this is a little klunky, but again with some prototype modifications it should be pretty easy to solve.
Fetching values has to be done by creating an empty G.Value, them fetching and converting them.

The last line illustrates removing a line. - since we cant cast in Javascript, I've modified the ListStore constructor to accept either a list of strings (eg. creating it) or a store object which does effectively the same as casting.. enabling you to call the remove method on GtkListStore.

Anyway back to fighting fires with real work today...

Read: gtkdjs updates - treeview liststore

Topic: All I Have To Say About The Sopranos Finale Previous Topic   Next Topic Topic: What A Difference A Year Makes

Sponsored Links


Copyright © 1996-2018 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use