Asp Forum - Can your GUI framework do this?

Martin DeMello

6/7/2008 11:30:00 PM

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/wrapb...)

martin

4 Answers

_why

6/8/2008 5:51:00 AM

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

On Sun, Jun 08, 2008 at 08:29:55AM +0900, Martin DeMello wrote:
> 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/wrapb...)

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

_why

Martin DeMello

6/8/2008 10:17:00 AM

On Sat, Jun 7, 2008 at 10:50 PM, _why <why@ruby-lang.org> wrote:
>
> 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

6/8/2008 5:06:00 PM

Martin DeMello wrote:
> 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/wrapb...)

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

6/26/2008 3:25:00 PM

From: "Martin DeMello" <martindemello@gmail.com>
Subject: Can your GUI framework do this?
Date: Sun, 8 Jun 2008 08:29:55 +0900
Message-ID: <f93a6bcc0806071631g4d2bc263tce130e8f3c2f7e81@mail.gmail.com>
> 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.
--
Hidetoshi NAGAI (nagai@ai.kyutech.ac.jp)

comp.lang.ruby

Can your GUI framework do this?

Martin DeMello

_why

Martin DeMello

Charles Oliver Nutter

Hidetoshi NAGAI

x Login to ForumsZone