ui designer : best practices for a crossword board ui ?

Let's say you want to create a UI for a crosswords board.
How should one design this with the uiDesigner?

version 1 : fixed size (10 by 10)
version 2 : variable size

Alain Ravet

11 comments
Comment actions Permalink

Hello,

unfortunatelly I do not understand your question. Couldn't you please
clarify the task.

--
Best regards,
Anton Katilin
-


JetBrains, Inc / IntelliJ Software
http://www.intellij.com
"Develop with pleasure!"


"Alain Ravet" <alain.ravet.list@wanadoo.be> wrote in message
news:bg57cv$ite$2@is.intellij.net...

Let's say you want to create a UI for a crosswords board.
How should one design this with the uiDesigner?

>

version 1 : fixed size (10 by 10)
version 2 : variable size

>

Alain Ravet

>


0
Comment actions Permalink

version 2 : variable size


UI Designer is intended for static UIs, unfortunately, it's definetely not
good (not even possible) for dynamic GUIs.

Guillaume Laforge


0
Comment actions Permalink

Anton,

>Couldn't you please clarify the task.
>

Sorry for being too vague : here is more info.

The generic question is :
"How do you build a ui for a container of XYZ",
when the number/location of XYZs (widgets) is either
*1) very big (scenario 1 : 10 * 10 cells), or
*2) only known at runtime

The generic example is the table presentation of a collection of 'xxx',
where 'xxx' is a text, icon or image?



problem related to *1)
- you can't bind an object to a component array element
- it's slow and painstaking (see example below)

problem related to *2)
- you can't do it.


-


The uiDesigner way :
-



To benefit from the uiDesigner visual feedback :
- in the uiD, create and align 10 * 10 individual widgets
- in the bound (binded?) class, create 10 * 10 widget objects (*1)
- link the 100 pairs


Advantage : visual feedback.
Problem *1): stupid, ineffective, slowand
Problem *2) impossible for non-fixed size board.


-


The classical way : (100% code, no visual feedback)
-



To create a board 10 by 10 cells.
- create a cell widget, that knows about it's row and column position
- feed the board with 2 imbricated for loops
- store references to the objects in an array.

This would work for variable size

Problem: you do this blindly, and visually tune by trial and error.


Suggestions :
-



- virtual placeholder :
some visual feedback for aligning and positioning,
but the components creation is done by hand, in the code.


or
- in the uiD, use 'parametrized' widgets
ex: JButton[row,col] , for row in 1..10, and col in 1..10,
bind to: myJButtonArray[row,col]

. the uiD would handle the repetition (generate the group of 10 * 10
buttons), and hide the individuals behind the group.
. the uiD would handle the parametrized binding : bind button_1_2 to
myBut[1,2]
..more : how to do : parameter passing : "button(1,2) was clicked". ?


or
? a better solution



Alain

0
Comment actions Permalink

Guillaume Laforge wrote:

>> version 2 : variable size
>>
>UI Designer is intended for static UIs, unfortunately, it's definetely not
>good (not even possible) for dynamic GUIs.
>

Are you sure it's not possible? Please see the suggestions at the end of
my reply to Anton.

Alain

0
Comment actions Permalink

Are you sure it's not possible? Please see the suggestions at the end of
my reply to Anton.


Currently, it seems it's not possible to do that.

And BTW, a 10*10 array of widget ? Do you think it'd happen ?
If you have such a case, maybe you should use a JTable !
Usually, when you have dynamic stuffs, it's better to use things like
JTables or JTrees.

Guillaume


0
Comment actions Permalink

Re: dynamic guis, wouldn't it be feasible to design at least part of the "dynamic" gui in the visual builder, then add the dynamism at runtime? Obviously, you can't edit or intercede in the code with Intellij generates, but that only executes at initialization time. After that, the initializes components are bound to instance variables, and then you can do whatever you want to them:
Change their colors, fonts, sizes, event layouts, whatever, programmatically.

Even the 10x10 layout issue could at least be simplified a little by the intellij gui builder. If you had a repeating component or panel like that, you could at least use the gui builder to design the parts of the window around the "crossword board". You could even use the gui designer to design the panel which is repeated (the panel which constitutes one tile of the crossword board).

Do the visual tweaking in the visual tool, then do the repetitive or dynamic stuff in code. This should be possible given the intellij paradigm, right?

0
Comment actions Permalink


Thank your for your description.

Actually UI designer was intended to help to lay static panels out.

In my opinion, it is much more natural way to produce such dynamic layouts,
to add widgets, assign actions etc. in java code, because it is the only way
that can support any possible complicity. UI designer always allows to
perform only fixed number of things.

Also, for matrix-like structures I think JTable could be ok. Or static (i.e.
with fixed number of row-columns) grid drawn in UI designer with
placeholders.

So lets try to find particular usecases and think if there's anything we
could automate via UI designer.

--
Best regards,
Anton Katilin
-


JetBrains, Inc / IntelliJ Software
http://www.intellij.com
"Develop with pleasure!"


"Alain Ravet" <alain.ravet.list@wanadoo.be> wrote in message
news:bg5pev$rkl$1@is.intellij.net...

Anton,

>

>Couldn't you please clarify the task.
>

>

Sorry for being too vague : here is more info.

>

The generic question is :
"How do you build a ui for a container of XYZ",
when the number/location of XYZs (widgets) is either
*1) very big (scenario 1 : 10 * 10 cells), or
*2) only known at runtime

>

The generic example is the table presentation of a collection of 'xxx',
where 'xxx' is a text, icon or image?

>
>
>

problem related to *1)
- you can't bind an object to a component array element
- it's slow and painstaking (see example below)

>

problem related to *2)
- you can't do it.

>
>

--------------------
The uiDesigner way :
--------------------

>

To benefit from the uiDesigner visual feedback :
- in the uiD, create and align 10 * 10 individual widgets
- in the bound (binded?) class, create 10 * 10 widget objects (*1)
- link the 100 pairs

>
>

Advantage : visual feedback.
Problem *1): stupid, ineffective, slowand
Problem *2) impossible for non-fixed size board.

>
>

--------------------
The classical way : (100% code, no visual feedback)
--------------------

>

To create a board 10 by 10 cells.
- create a cell widget, that knows about it's row and column position
- feed the board with 2 imbricated for loops
- store references to the objects in an array.

>

This would work for variable size

>

Problem: you do this blindly, and visually tune by trial and error.

>
>

Suggestions :
--------------

>

- virtual placeholder :
some visual feedback for aligning and positioning,
but the components creation is done by hand, in the code.

>
>

or
- in the uiD, use 'parametrized' widgets
ex: JButton[row,col] , for row in 1..10, and col in 1..10,
bind to: myJButtonArray[row,col]

>

. the uiD would handle the repetition (generate the group of 10 * 10
buttons), and hide the individuals behind the group.
. the uiD would handle the parametrized binding : bind button_1_2 to
myBut[1,2]
..more : how to do : parameter passing : "button(1,2) was clicked". ?

>
>

or
? a better solution

>
>
>

Alain

>


0
Comment actions Permalink

Anton,

>lets try to find particular usecases and think if there's anything we
>could automate via UI designer.
>

Here is a simple idea, that should be easy to implement.


use case 1 : adding a table to your UI
-



The first problem is the lack of feedback : a JTable appears as a blank
surface.
Ideally, we'd like to see it filled with close to reality data, but only
the developper can provide this kind of info, through a table model.


Suggestion :
Bind a user-written sample table model to the JTable.
This table model must implement the new SampleTableModelSource
interface.


Usage:

1°/ in the java code, add a method to the table model class
that will be used in the user code to feed the JTable.



2°/ in the uiDesigner, add a property for JTable :
sample TableModel


Under the cover, it would simply do a
jtable.setModel(BoardTableModel.getSampleModel());



Just a first idea

Alain

0
Comment actions Permalink


> Suggestion :
> Bind a user-written sample table model to the JTable.


Pushing this idea a little further, this could introduce some light form
of round-trip engineering :


Java -> form
-



In the java code, if the user adds/changes to

TableModel model = new SmallBoardTableModel() ;
jtable.setModel(model);


, then the uiDesigner automatically fills 'jtable' in the form with

SmallBoardTableModel.getSampleModel()
, if it's available.


Note: this could be seconded by an inspection, that would detect the
change, and offer to synchronize the target.



form -> Java
-


In the uiDesigner form, if the user set a JTable to another sample model,
MediumBoardTableModel.getSampleModel()

the java code is updated to
TableModel model = new MediumBoardTableModel() ;
jtable.setModel(model);



This would work as long as the user would respect some code pattern, like :

public class BoardUI extends JFrame
{
public BoardUI ( ) throws HeadlessException
{
super( "board game" );

..
TableModel model = new SmallBoardTableModel() ;
jtable.setModel(model);
..
}


Alain



0
Comment actions Permalink

Anton ,

Any comment about my reply to your request (dated 31/7/2003)?

Alain

>So lets try to find particular usecases and think if there's anything we
>could automate via UI designer.
>

0
Comment actions Permalink

Hi,

Sorry for the delay.
We have not decided how should more complex data binding look like. Thank
you for your suggestions, sure we will use them when we start planning this
feature.

--
Best regards,
Anton Katilin
-


JetBrains, Inc / IntelliJ Software
http://www.intellij.com
"Develop with pleasure!"


"Alain Ravet" <alain.ravet.list@wanadoo.be> wrote in message
news:bgr5q5$kpm$3@is.intellij.net...

Anton ,

>

Any comment about my reply to your request (dated 31/7/2003)?

>

Alain

>

>So lets try to find particular usecases and think if there's anything we
>could automate via UI designer.
>

>


0

Please sign in to leave a comment.