Skip to main content

Laying out the components

14 replies [Last post]
Anonymous

Hi,

how is the syntax for laying out the different visual components?

I think the most difficult part of creating a new form or other kind of window content is to place the elements so the form looks nice and ergonomic.

What kind of constructs did you include in your markup language to support the 'designer' of forms. (GridBagLayout is very powerful to layout almost any design but the 'normal' designer does not understand it at all, same is for nesting layouts).

With regards,
Udo

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Gregg Wonderly

jdnc-interest@javadesktop.org wrote:
>People seem to have figured out HTML tables (though I use Dreamweaver :-), so perhaps
>that is worth exploring. Nested boxes (very tek-like) is also a
simple paradigm
>that could work easily from markup, thought it makes it hard to do
things like line
>of label colons vertically.

One thing to consider is the tcl/tk packer. If you look at its
'language' of layout, and contemplate an XML like representation, you
can start to create something that is powerful in expression, yet
neutral to rendering technologies. I've always preferred this language
of layout, and my Packer project on java.net is a recast of the
GridbagLayout API into such a 'language'. But, I use Java instead of
HTML for expressing the layout. But, that doesn't preclude the use of
an interface such as PackAs in a programming API that would have
implementations that could generate HTML documents into a document
structure, instead of binding Component objects into Container objects.

Gregg Wonderly

---------------------------------------------------------------------
To unsubscribe, e-mail: jdnc-unsubscribe@jdnc.dev.java.net
For additional commands, e-mail: jdnc-help@jdnc.dev.java.net

zander
Offline
Joined: 2003-06-13
Points: 0

> While I think the proper solution for this is a good tool that allows you to layout the UI visually without
> intimate knowledge of layout managers (which are admittedly designed for programmatic usage), we cannot
> ignore this large issue if we're promoting markup.

What I did was create a layout manager that fits the minimum concepts of doing layout. The user only knows horizontal/vertical/grid layout components. (My layout manager actually does all in one class; but the user does not know reading the XML)

Second suggestion here is that manually writing XML is not really that important in the end; a good graphical representation of the XML is. A good drag-and-drop application writing your XML is far more intuitive then any XML markup ever will be.

Anonymous

I will start out with a common requirement in implementing business application GUI:
A forms that has rows and columns of Label,Field
combinations. Something like below:

======================================================
Name [ ] Age {Dropdown}
Gender [ ] Occupation ()
Location { }
========================================================
This screen has four fields and each field has
a label that acts as a prompt. Notice that
each label is right justified and aligns with
the label directly below/above it.
Nesting Containers is the key to good layout.

Each Label/Field pair can be encapsulated within
a JPanel (Call it a 'pair panel'). The pair panel
will have new FlowLayout(FlowLayout.RIGHT) in order
to account for the alignment. This pair panel can then
be reused. Add a Box.createHorizontalStrut(10)
between the Field and Label to maintain a gap of size 10.

Now coming to the entire grid, though it is
intuitive to use a GridLayout, we cannot. GridLayout will cause components to fill up the entire alloted space. So you will end up with monstrous fields and labels.
To solve this, use the Box. Recognize that we can split the screen into 2 columns.
Each column is a Box verBox = Box.createVerticalBox()
Keep adding 'pair panel' components to the verBox.

Now we finally come to adding verBox1, verBox2,..
each representing a column of 'pair panel' components
to the outermost container/screen. Now, because each column follows the other, the FlowLayout is most appropriate, so do a new FlowLayout() on the outermost container.

I have had the opportunity to create complicated layouts using the basic layout managers (Flow, GridLayout,Border,Box,Card)..

greggwon
Offline
Joined: 2003-06-14
Points: 0

> I will start out with a common requirement in
> implementing business application GUI:
> A forms that has rows and columns of Label,Field
> combinations. Something like below:
>
> ======================================================
>
> Name [ ] Age {Dropdown}
> Gender [ ] Occupation ()
> Location { }
> ======================================================

Using the Packer project from http://packer.dev.java.net

JPanel p = new JPanel();
Packer pk = new Packer( p );
int y = -1;

pk.pack( new JLabel("Name", JLabel.RIGHT ) ).gridx(0).gridy(++y);
pk.pack( new JTextField() ).gridx(1).gridy(y).fillx();

pk.pack( new JLabel("Age", JLabel.RIGHT ) ).gridx(2).gridy(y);
pk.pack( new JComboBox() ).gridx(3).gridy(y).fillx();

pk.pack( new JLabel("Gender", JLabel.RIGHT ) ).gridx(0).gridy(++y);
pk.pack( new JTextField() ).gridx(1).gridy(y).fillx();

pk.pack( new JLabel("Occupation", JLabel.RIGHT) ).gridx(2).gridy(y);
pk.pack( new JTextField() ).gridx(3).gridy(y).fillx();

pk.pack( new JLabel("Location", JLabel.RIGHT ) ).gridx(0).gridy(++y);
pk.pack( new JTextField() ).gridx(1).gridy(y).fillx();

That is one statement per component, with everything applying to the components layout, in that statement.

For the location, you might just want to fill that JTextField on across, underneath Occupation. In that case, you could add ".gridw(3)" to that statement to have the width cover three cells.

Gregg Wonderly

fnimphiu
Offline
Joined: 2003-06-17
Points: 0

All,

you are going off topic. The basic question is what JDNC provides to make layouts in Swing easier. You answered with code lines, which is exactly the complexity that makes working wit Swing a hassle.

Look at Microsoft's table layout in VB. Its all you need to create a good UI. As Amy mentions, the thin client layout is so simply that everybody can use it.

Frank

greggwon
Offline
Joined: 2003-06-14
Points: 0

> you are going off topic. The basic question is what
> JDNC provides to make layouts in Swing easier. You
> answered with code lines, which is exactly the
> complexity that makes working wit Swing a hassle.

The lines of code show the underlying power of the system that any UI builder needs to empower the user to take advantage of. In the end, this is the place where most UI builders fall flat on their faces.

> Look at Microsoft's table layout in VB. Its all you
> need to create a good UI.

Show me how easy it is to create a UI that has multiple resizable components and which allows the user to make full use of their screen size to make long lists visible so that they can find things in those lists more readily.

Anonymous

It really only takes 4-5 days to figure out how to use all the simple layout managers (BorderLayout, FlowLayout, GridLayout, CardLayout, Box). A person can create fairly complicated layouts using these and combinations of these layouts and without using GridBagLayout.
Also, if they work in a project, they can figure out ,ahead of time, some frequently used layout combinations that can be reused.
One hint to spacing components ergonomically is to use the create methods in the Box class.

edwine
Offline
Joined: 2003-06-18
Points: 0

I created a simple XML format for describing my layout, using the 'DefaultFormBuilder' from JGoodies to create the formlayout. I use the JForm class and set 'autoLayout' to false. I then add the JPanel created with the DefaultFormBuilder to the JForm.

It was quite easy to use the binding from JDNC (from code, I'm looking at integrating with the XML definitions).

My GUI definition looks like this:












etc..
gphilipp
Offline
Joined: 2003-06-10
Points: 0

I do agree that JGoodies is very useful when it comes to layouting things in your screens. Here is the link to the design document :

http://www.jgoodies.com/articles/forms.pdf

Gilles Philippart

dcurry
Offline
Joined: 2006-02-17
Points: 0

iandallas has a good suggestion. JGoodies Forms is easily the best thought-out layout manager in the open-source Java arena.

A markup representation of the Forms layout probably wouldn't be too cumbersome, especially as compared to the alternatives. For example, the typical HTML/CSS approach of nested tables and element alignment attributes quickly becomes unproductive and difficult to maintain as the layout grows more complex.

In any case, forms layout will have to be supported by visual tools if Java is to compete successfully with .NET on the desktop. JGoodies Forms has some momentum in this area as well. SwingEmpire FormBuilder is one example.

Anonymous

We have not yet tackled the general problem of layout, but I agree this is one of the largest problems facing
developers who are creating GUIs.

While I think the proper solution for this is a good tool that allows you to layout the UI visually without intimate knowledge of layout managers (which are admittedly designed for programmatic usage), we cannot ignore this large issue if we're promoting markup.

What JDNC has now is support for creating the macro window layout -- menubar, toolbar, content area with split or tabbed panes, statusbar. We have been thinking about how we might enable some very basic layout capabilities at the micro level, which becomes particularly import for creating forms.

People seem to have figured out HTML tables (though I use Dreamweaver :-), so perhaps that is worth exploring. Nested boxes (very tek-like) is also a simple paradigm that could work easily from markup, thought it makes it hard to do things like line of label colons vertically.

We are open to suggestions!

iandallas
Offline
Joined: 2006-07-03
Points: 0

It might be a little too complicated for the intended audience, but JGoodies.com's Forms layout would be a good model to emulate.

Specifically:

* Being able to specify measurements in pixels or dialog units
* Support for symmetrical columns (ie, with the same width)
* It's flexible, but not too flexible

Gregg Wonderly

jdnc-interest@javadesktop.org wrote:
> * Being able to specify measurements in pixels or dialog units
> * Support for symmetrical columns (ie, with the same width)
> * It's flexible, but not too flexible

Fixed sized windows are one of the things I like least about UIs. I've
used resizeable windows with the GridbagLayout in Java and the 'packer'
in TCL/TK for decades. There really is a lot to be gained from letting
the user take full advantage of their screen size (either large or
small). Forcing them to deal with a particular sized dialog/window
seems a little old fashioned in this day and age.

Gregg Wonderly - a big fan of rectangular layout...

---------------------------------------------------------------------
To unsubscribe, e-mail: jdnc-unsubscribe@jdnc.dev.java.net
For additional commands, e-mail: jdnc-help@jdnc.dev.java.net

rbair
Offline
Joined: 2003-07-08
Points: 0

> jdnc-interest@javadesktop.org wrote:
> > * Being able to specify measurements in pixels or
> dialog units
> > * Support for symmetrical columns (ie, with the
> same width)
> > * It's flexible, but not too flexible
>
> Fixed sized windows are one of the things I like
> least about UIs. I've
> used resizeable windows with the GridbagLayout in
> Java and the 'packer'
> in TCL/TK for decades.

The FormLayout is also one that doesn't have fixed dialog dimensions (width/height) therefore allowing full resizing. The dialog unit/pixel measurements are used for specifying the width of borders etc, not for a fixed dialog width.