Can your GUI framework do this?

[Martin DeMello]

One of the most interesting facets of a desktop GUI system is how easy
it makes it to go off the beaten track, particularly how well you can
add "first class" components to the system. (Using 'first class' here
to mean 'on an equal footing with the widgets supplied by the
toolkit'). Also, as a ruby programmer, I'd naturally rather not drop
down into C (or Java) to do this. I'm trying to collect examples of
the following four tasks (which I will then assemble and put up on the
web as another datapoint in the eternal GUI debate ):

1. A component consisting of a series of existing components hooked
together to act as a single widget
2. A component built 'from scratch' atop a canvas, that is, handling
its own drawing and event management
3. A component combining a canvas and existing widgets
4. A container that takes a collection of widgets and lays them out
according to some userdefined algorithm

Examples (more welcomed):

1. An icon widget, that combines a picture and a textfield
underneath, with config options to turn either off or size the image,
make the text editable, etc
2. A speedometer-type dial with a configurable range and tick interval
3. A box that holds a component and paints a customised border around it
4. A pure-ruby implementation of a wrapbox
(http://zem.novylen.net/ruby/wrapboxdemo.png)

martin

 

[_why]

(These examples require a Shoes that's no older than a week or two.)

1. A component consisting of a series of existing components hooked
together to act as a single widget

In Shoes, you inherit from the Widget class and you can paint
your own custom widgets or combine pre-existing ones.

Like, for instance, Shoes doesn't come with a file input field like
HTML does. But you can combine an `edit_line` and a `button`.

class Browse < Widget
def initialize
@name = edit_line
@find =
button("Browse...").click do
@name.text = ask_open_file
end
end
def filename
@name.text
end
end

Shoes.app do
browse
end

When you inherit from Widget, you get a free lowercased method added
to Shoes for inserting that widget into any "stack" or "flow" (like
HTML divs, basically.)

And since the widget itself is a "flow", you can move the whole widget
as a single component. So you can call `move(x, y)` or `show` or
`hide` on the object returned by the `browse` method.

2. A component built 'from scratch' atop a canvas, that is, handling
its own drawing and event management

Too easy, Shoes has painting nailed. I've worked hard to get things
on par with Processing. See the `samples` directory for a clock
widget and a calculator and a dictionary and you'll find a lot more
out on the web.

3. A component combining a canvas and existing widgets

So a combo of #1 and #2? Well, okay, so taking the `Browse` example
from earlier, we could add a background and a border. This just
illustrates that all widgets are drawn on a canvas anyway.

class Browse < Widget
def initialize
flow do
background "#09F"
border "#FFF"
@name = edit_line
@find =
button("Browse...").click do
@name.text = ask_open_file
end
end
end
end

4. A container that takes a collection of widgets and lays them out
according to some userdefined algorithm

I'll have to think about this one. Shoes already has a 'wrapbox'
called a `flow`, but I can see why you'd want to lay things out
yourself.

Okay, let's see. So let's try a `cascade` layout that positions
everything diagonally from the element previous to it.

class Cascade < Widget
def initialize &blk
instance_eval &blk
end
def draw(a,b)
x, y = 0, 0
contents.each do |e|
if x != e.left && y != e.top
e.move x, y
end
x += e.height
y += e.width
end
super(a,b)
end
end

Shoes.app do
cascade do
button "1"
button "2"
button "3"
end
end

The `initialize` part works because every widget is just a canvas anyway.
And the `draw` method is called every time there's a repaint.

That's a bit clunky. But proves that it can be done.

Examples (more welcomed):

1. An icon widget, that combines a picture and a textfield
underneath, with config options to turn either off or size the image,
make the text editable, etc
2. A speedometer-type dial with a configurable range and tick interval
3. A box that holds a component and paints a customised border around it
4. A pure-ruby implementation of a wrapbox
(http://zem.novylen.net/ruby/wrapboxdemo.png)

I'll work on some really nice answers to these. This is a fantastic exercise.

_why

 

[Martin DeMello]

I'll work on some really nice answers to these. This is a fantastic exercise.

Looking forward to them. The code looks very slick - "check out shoes"
just moved all the way up my todo list

martin

 

[Charles Oliver Nutter]

One of the most interesting facets of a desktop GUI system is how easy
it makes it to go off the beaten track, particularly how well you can
add "first class" components to the system. (Using 'first class' here
to mean 'on an equal footing with the widgets supplied by the
toolkit'). Also, as a ruby programmer, I'd naturally rather not drop
down into C (or Java) to do this. I'm trying to collect examples of
the following four tasks (which I will then assemble and put up on the
web as another datapoint in the eternal GUI debate ):

1. A component consisting of a series of existing components hooked
together to act as a single widget
2. A component built 'from scratch' atop a canvas, that is, handling
its own drawing and event management
3. A component combining a canvas and existing widgets
4. A container that takes a collection of widgets and lays them out
according to some userdefined algorithm

Examples (more welcomed):

1. An icon widget, that combines a picture and a textfield
underneath, with config options to turn either off or size the image,
make the text editable, etc
2. A speedometer-type dial with a configurable range and tick interval
3. A box that holds a component and paints a customised border around it
4. A pure-ruby implementation of a wrapbox
(http://zem.novylen.net/ruby/wrapboxdemo.png)

Swing can certainly do all this, and with layout tools like Netbeans
Matisse you can do almost all of it drag-and-drop (though obviously
implementing your own component atop a canvase requires code).

I could try to dig up some examples of doing this in Ruby, but I would
wager the Monkeybars guys have some already. In general, it's pretty easy.

- Charlie

 

[Hidetoshi NAGAI]

From: "Martin DeMello" <[email protected]>
Subject: Can your GUI framework do this?
Date: Sun, 8 Jun 2008 08:29:55 +0900

Examples (more welcomed):

On Ruby/Tk,

1. An icon widget, that combines a picture and a textfield
underneath, with config options to turn either off or size the image,
make the text editable, etc

Use a TkLabel widget.

2. A speedometer-type dial with a configurable range and tick interval

Use (install) Tcl/Tk's VU extension.
Ruby/Tk has a wrapper library for the extension.

3. A box that holds a component and paints a customised border around it

Probably, a TkFrame widget is enough to do this.

4. A pure-ruby implementation of a wrapbox

Use a TkText widget and TkTextWindow objects.

 

[david_koontz]

Yes, but my point was, can you define your own Layout in ruby?

Yes you can define a new Swing layout manager with 100% Ruby code, just as
you can do most anything doable in Java from JRuby. I would say though,
that is is highly unlikely that you would need to do so. There are a great
variety of layout managers and most are pretty sophisticated, I surely
wouldn't take on writing a non-trivial one myself. If you are looking for a
very flexible layout manager designed for people doing layouts by hand I'd
suggest the MiG layout manager (http://www.miglayout.com/). You can see the
author's presentation at this year's Java One here:
http://developers.sun.com/learning/javaoneonline/2008/pdf/TS-4928.pdf

Actually, I do My preferred approach is to build widgets from the
bottom up, so that if I want to experiment with the layout later I can
do it easily in the code. Does netbeans use the "interface definition
file" approach or does it generate actual code from your UI?

Netbeans generates straight Java code, which you normally would never need
to touch. As for building a widget from the "bottom up" do you have any
examples? I've built several "widgets" using the graphical deisgner. In
Swing they tend to be JPanel + some components + logic (the logic of course
would all be in Ruby) which makes the visual designer even more useful. If
you're doing a super custom component involving doing your own drawing, that
is accomplished easily enough in straight Ruby code. In either of these
situations I fail to see how having a visual designer in any way slows you
down.

David