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

(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/wrapboxdemo.png)

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

_why

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

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/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

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)

Martin DeMello wrote:
>
> 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/j...df/TS-4928.pdf


Martin DeMello wrote:
>
>> You _could_ write Java if you wanted, but we haven't run into occurrences
>> where Java (the language) is needed. You could write all of your designs
>> by
>> hand in Ruby, which is fine. My preferred approach is to use a designer
>> tool, such as Netbeans.
>> Do you really want to lay something like this out by hand?
>> http://www.happycamperstudios.com/mo...0interface.png
>
> 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
--
View this message in context: http://www.nabble.com/Can-your-GUI-f...p18146336.html
Sent from the ruby-talk mailing list archive at Nabble.com.