Nested Widgets

Hi. First of all, great job! And now: It is possible to nest widgets? From a xml point of view, how could I know if a button is "inside" a window? I'm thinking about import the ecore model into a xtext model to generate my own code!

Regards, Nicolás.

Hi Nicolás,

Thank you for your kind words!

Since Window widget is not a true container you have to resort to testing geometrical bounds. You just have to test that the button widget is inside the bounds of the window. You have x, y, measuredWidth and measuredHeight attributes that give you all the necessary info. Let me know how it works for you.

That's a pity... Is there any widget on which I could nest a widget? Besides a group, of course. If not, couldn't that be a great improvement to the product? Nesting is not a uncommon concept wireframing window controls, and could ease the conversion to another "executable" formats!

I might implement it someday but I am not yet convinced it's a good idea. WireframeSketcher is a mix of a GUI builder and a drawing tool. This allows for a lot of flexibility that you don't have in a straightforward GUI builder. I am afraid that implementing containers will make the tool less flexible and less usable without much gain.

I think it shouldn't be that hard to use geometric constraints to deduce parent - child relationships. You just take the Window widget and test for containment all widgets that follow in XML.

Navigating a model tree is a lot easier than make the calculations :), but I will try your solution. May be you could put a "parent" attribute, instead of nested widgets? Sorry, but I must ask :)

Nicolás, I should have asked this before. What are you trying to do?

Use your great tool, of course :)

We would like to convert your screens XML to our own DSL. We are using this tool: http://www.eclipse.org/Xtext/ to construct the DSL From that DSL we could generate any code. A real HTML with ExtJS, for instance (http://www.sencha.com/products/extjs/).

My goal is something like:

window { panel [layout=vertical] { panel [layout=horizontal] { Label ... TextField ... } panel [layout=horizontal] { Button .... } } }

Does this clarify anything?

Nicolás, I see what you are trying do it. I am not a big fan of code generation. I think wireframes should to be cheap to produce and cheap to discard. The main purpose of this tool is to allow you to generate and discuss ideas. Trying to generate production code from wireframes... lets just say I have yet to see a system that works.

Still, I think you are going to write a lot of code there to accomplish what you need. I am sure you can sneak a parent - child detection algorithm somewhere in there :)

What I could help you with is the EMF model. I can provide you with ecore model + java files so that you can use it to load and process screen files. I plan to release this code in an open-source project someday when I'll have more time. Drop me an email if you are interested and I'll send you the files.

"I have yet to see a system that works" -> I'm a dreamer :) I'll drop you an email, your code will be of a great help! Thanks Peter.

Nicolás, I just sent you the source code for model. Keep me updated on how it works for you!

Ok Peter, many thanks.

Hi Nicolás,

What direction did you finally take with this issue? Since we talked WireframeSketcher evolved a bit. Java code for the model is now open-source. There is also support for editing inside groups so you can use those to create a component tree. I'd like to have an update from you.

Hi Peter.

We build some code to simulate the nesting based on the position of the objects, but it was unreliable because the drawing itself is not always exact. Some times the mockup is ok visually, but the coordinates aren't. So, I like the news about the Open Source java code! How could I get it?

Nicolás,

Find how to get the source code here: http://wireframesketcher.com/developers.html

Do you think your problem with coordinates is inevitable because of the approach? I don't know if you know it, but there are some attributes like "measuredWidth" and "measuredHeight" that should be used to get the exact size of the element on screen.