question about JButton Sizing

Thread view:

michelle - 29 Jan 2004 17:06 GMT

Hi, I created 4 JButtons in a JDialog and place them on south, north,
east and west in BorderLayout. But I don't like the size of the
JButton being appear, which method could I call to resize the JButton?
I tried like getMaximumSize or setAlignmentX, but none of those
works. Could anyone help me? Thanks.

Michelle Xue

Reply to this Message

Karsten Lentzsch - 29 Jan 2004 17:51 GMT

> Hi, I created 4 JButtons in a JDialog and place them on south, north,
> east and west in BorderLayout. But I don't like the size of the
[quoted text clipped - 3 lines]
>
> Michelle Xue

The Microsoft layout style guide recommends
a minimum width for command buttons of 50 dlu.
The Dlu (Dialog Units) grow and shrink with
the font, font size, and screen resolution (dpi).
This way you can ensure a stable size over
multiple platforms and desktop configurations.

I'd say this technique is best for multiplatform
screen design. Basically you should avoid all
pixel sizes. Most l&fs return a preferred size
and minimum size that I consider poor for consistent
design. I therefore recommend to let an external
instance compute and set the button size:
that's what a layout manager can do well.

I provide a demo that shows several layout tasks
including several button bars and button stacks.
The demo utilizes my free and open source layout
system 'Forms'. For more information see
http://forms.dev.java.net/

Hope this helps. Best regards,
Karsten Lentzsch
JGoodies :: Java User Interface Design

Reply to this Message

Jon A. Cruz - 07 Feb 2004 06:18 GMT

> The Microsoft layout style guide recommends
> a minimum width for command buttons of 50 dlu.
> The Dlu (Dialog Units) grow and shrink with
> the font, font size, and screen resolution (dpi).
> This way you can ensure a stable size over
> multiple platforms and desktop configurations.

Their approach is actually a poor one.

It mainly boils down to "just make the buttons bigger than you need, and
hope it will be big enough for other languages".

> I'd say this technique is best for multiplatform
> screen design. Basically you should avoid all
> pixel sizes.

Yes. Avoid pixel sizes, but avoid "dialog unit" sizes also.

For example, when switching an app, a button label that's very long in
English might shrink down to a single kanji character. Or a short
English one might change to a very long phonetically written sequence of
katakana

So, instead of measuring things in dlu's, just use logical layouts.

> Most l&fs return a preferred size
> and minimum size that I consider poor for consistent
> design. I therefore recommend to let an external
> instance compute and set the button size:
> that's what a layout manager can do well.

Ahhh. That's the good point. Use a layout manager and all works much better.

Reply to this Message

Karsten Lentzsch - 07 Feb 2004 12:08 GMT

> Their approach is actually a poor one.
>
> It mainly boils down to "just make the buttons bigger than you need, and
> hope it will be big enough for other languages".

The Microsoft approach is poor compared to a
well-done layout management that can use dlus.

As said before Microsoft used the dlus in the
past to compensate the lack of layout management.
Anyway, the dlus are essential for screen design,
even if you use a layout manager.

I provide a demo that demonstrate layout tasks
that you can hardly implement without dlus.
If you want to achieve a consistent layout
over multiple panels, dialogs you could potentially
use logical layout to set consistent sizes.
(For example SpringLayout could tie together
multiple panel layouts). But that won't help
you with building consistent applications,
it may end up with poor layout performance
and is hard to communicate in a team.

And so I recommend to build grids and more than
that a grid system that mixes layout management
with bounded sizes that are specified in dlus.
Again, check out the Forms Demo, to see where
minimum sizes help.

Actually I use logical sizes instead of dlus.
The logical sizes define a layout style, for example
I provide to layout styles for the Mac Aqua and
Microsoft layout guide. An example logical size
is the minimum command button width (ensures that
a user can quickly click the button even in Kanji
or Chinese). Where Microsoft requires 50dlu,
Aqua needs 68px. So in a first step logical sizes
are mapped to concrete sizes. In a second step
all non-pixel sizes (in, mm, cm, pt) are mapped
to pixel sizes.

You can find more information in the Forms whitepaper
and in my JavaOne presentation slides - available at:
http://www.jgoodies.com/articles/

The Forms framework that mixes and advanced layout
manager with in, mm, cm, pt and dlus is here:
http://forms.dev.java.net/

The Forms Demo is here
http://www.jgoodies.com/downloads/

> Yes. Avoid pixel sizes, but avoid "dialog unit" sizes also.

I strongly disagree.

> For example, when switching an app, a button label that's very long in
> English might shrink down to a single kanji character. Or a short
> English one might change to a very long phonetically written sequence of
> katakana
>
> So, instead of measuring things in dlu's, just use logical layouts.

Microsoft suggest a poor workaround for handling
localization. Anyway this doesn't affect the value
of pixel-independent sizes like in, mm, cm and dlu.

> Ahhh. That's the good point. Use a layout manager and all works much
> better.

Most people are not aware that the JRE core layout managers
can *not* implement many of the layouts shown in the
JGoodies Forms Demo. How do you ensure an appropriate
minimum size for a button with a very short text?
How do you ensure consistent design over multiple panels?

Best regards,
Karsten

Reply to this Message

Steve W. Jackson - 29 Jan 2004 18:30 GMT

>:Hi, I created 4 JButtons in a JDialog and place them on south, north,
>:east and west in BorderLayout. But I don't like the size of the
[quoted text clipped - 3 lines]
>:
>:Michelle Xue

Some layout managers respect the min, max and preferred sizes of
components. I believe you'll have better luck if you set the preferred
size of your buttons using setPreferredSize(). It's probably a good
idea to set the minimum and maximum as well.

= Steve =

Signature

Steve W. Jackson
Montgomery, Alabama

Reply to this Message

Karsten Lentzsch - 30 Jan 2004 10:55 GMT

> Some layout managers respect the min, max and preferred sizes of
> components. I believe you'll have better luck if you set the preferred
> size of your buttons using setPreferredSize(). It's probably a good
> idea to set the minimum and maximum as well.

I recommend to not set the minimum, preferred and maximum sizes,
unless you can map string to their (pixel) width honoringing:
the font, font size, and screen resolution (dpi).

In most l&fs the button UI delegates honor these three things
and most layout managers use the preferred size.

So using a layout manager will often return better results
in a multiplatform design then fixed (pixel) sizes.

It's just that the preferred size typically leads to
inconsistent sizes and won't guarantee an appropriate
minimum width.

For example, how large is an OK button? 70 pixel width
may be appropriate on a Mac with default fonts, 85 px
are the default on many Windows desktops with 96dpi
and the Tahoma font, 100 px are fine for Windows with
120 dpi and Tahoma, 150 px can be better for large fonts.
Which pixel size would you assign?

Best regards,
Karsten

Reply to this Message

Steve W. Jackson - 30 Jan 2004 18:11 GMT

>:Steve W. Jackson wrote:
>:
[quoted text clipped - 26 lines]
>:Best regards,
>:Karsten

I fail to see how it's possible to get all buttons to be the same size
on a dialog, for instance, if I simply let the layout manager do it
based on the string used on the button, font, etc. We are specifically
using one designated font throughout our application for all buttons,
labels, etc., but if there's something I can learn that would accomplish
this differently I'd sure be interested in hearing about it.

= Steve =

Signature

Steve W. Jackson
Montgomery, Alabama

Reply to this Message

Karsten Lentzsch - 30 Jan 2004 19:14 GMT

> I fail to see how it's possible to get all buttons to be the same size
> on a dialog, for instance, if I simply let the layout manager do it
> based on the string used on the button, font, etc. We are specifically
> using one designated font throughout our application for all buttons,
> labels, etc., but if there's something I can learn that would accomplish
> this differently I'd sure be interested in hearing about it.

First off, I should add that actually you can set
minimum, preferred and maximum sizes, if you have:
a fixed font, fixed font size, fixed screen resolution
(dpi), fixed l&f and don't change the locale.

Only a few layout managers can lay out button bars well.
From my perspective you cannot lay out a bunch of buttons
if you just used the string, font and font size.
There are different types of buttons, and often it is
appropriate for a well designed screen to use different
sizes. For example, a small size for a tool bar button,
narrow margins for an form-embedded button, and a
consistent default size for a command button.

Since the button itself lacks this extra information
even a layout manager requires help from the designer
to be able to compute sizes and lay out appropriately.

The Microsoft layout guidelines provide pixel-independent
sizes for different button types. And I'd say that this
approach is the best for multiplatform screen design.

And so if you lay out a bunch of buttons you categorize
them and decide of which type they are. Then you use
a layout manager that can handle pixel-independent sizes
and finally end up with well-designed button bars.
If you add a factory or builder layer you can also
honor the platforms button order: left-to-right vs.
right-to-left (PC vs. Mac).

In a typical button bar that consists of command buttons
like OK, Cancel, Apply, Help, etc. I specify a minimum
width of 50 Dialog Units (dlu). Together with the
button's preferred size, the layout manager will use
the maximum of both as initial size. If appropriate
the layout manager ensures in a second step that some
buttons shall get the same size. On a Windows with 96dpi
and 8pt Tahoma you end up with a minimum size of 75 pixel.

Again, you need a layout manager that is capable of
these features. For example, GridBagLayout or TableLayout
*can't* do this.

You can study a bunch of layout tasks including the
ones mentioned above in the JGoodies Forms Demo, see
http://www.jgoodies.com/freeware/formsdemo/
A reference implementation for the concepts mentioned
above is the free JGoodies Forms layout system:
http://forms.dev.java.net/

Hope this helps,
Karsten Lentzsch

Reply to this Message

Steve W. Jackson - 04 Feb 2004 17:58 GMT

>:Steve W. Jackson wrote:
>:
[quoted text clipped - 57 lines]
>:Hope this helps,
>:Karsten Lentzsch

Thanks for the enlightening response.

Our application has its own factory for supplying common button sizes,
text field sizes, etc., but all buttons on dialogs are generally
top-down. And the appearance of a great many of our dialogs and the
panels they contain are driven by the underlying XML structure of the
data they display, so going back after 3 years and doing something like
this is simply not feasible.

I am intrigued, however, by reference to Microsoft layout guidelines.
It's never been my experience that M$ does much in the way of "standard"
behavior -- but then you'd expect that from me, since I'm a Mac guy when
not using Windows at work. :-)

Perhaps sometime, when my schedule gives me breathing room, I'll attempt
to understand the real meaning of "pixel-independent sizes" and may even
find a way, if it's worth the effort and expense, to apply some of that
knowledge to a future release of our own application.

Again, thanks for the reply.

= Steve =

Signature

Steve W. Jackson
Montgomery, Alabama

Reply to this Message

Karsten Lentzsch - 04 Feb 2004 18:41 GMT

> Our application has its own factory for supplying common button sizes,
> text field sizes, etc., but all buttons on dialogs are generally
> top-down. [...]

For top-down button stacks I recommend to use
narrow button margins for long button labels.
The free JGoodies Window l&f and the Plastic l&f
honor a client property for this feature.

> I am intrigued, however, by reference to Microsoft layout guidelines.
> It's never been my experience that M$ does much in the way of "standard"
> behavior -- but then you'd expect that from me, since I'm a Mac guy when
> not using Windows at work. :-)

:) First off, I'm not a Microsoft addict and have just

purchased an iBook to better understand layout on the Mac.

Microsoft has compensated the lack of layout management
in older MS layouts with the Dialog Units (dlus). Sizes
described with this pixel-independent unit grow and shrink
with the font, font size and resolution (dpi). Combined
with layout management it's almost perfect for Java.

> Perhaps sometime, when my schedule gives me breathing room, I'll attempt
> to understand the real meaning of "pixel-independent sizes" and may even
> find a way, if it's worth the effort and expense, to apply some of that
> knowledge to a future release of our own application.

The primary goal of the free Forms layout system
is to make simple things easy and let developers
save time and money. Secondary goals are to make
the hard stuff possible, the good design easy
and the bad difficult. Anyway, several developers
have contacted me and have reported that Swing
design is actually fun with the FormLayout.

The pixel-independent sizes are not that difficult.
For example, Inch is a pixel-independent size, as is
Millimeter and Centimeter. For screen design it often
is required to express a size that scales with the font
and resolution, so that the perceived size is the same
if the hardware resolution changes from let's say
100 dpi to 200 dpi. If you use pixel sizes in screen
design, some parts may grow with the font, others won't.
Hence, if you use pixel sizes even layout management
won't retain proportions. You can find examples in
the presentation at http://www.jgoodies.com/articles/

I hope you can find a breathing room ;)

Best regards,
Karsten

Reply to this Message

Jon A. Cruz - 07 Feb 2004 06:28 GMT

> :) First off, I'm not a Microsoft addict and have just
> purchased an iBook to better understand layout on the Mac.
[quoted text clipped - 4 lines]
> with the font, font size and resolution (dpi). Combined
> with layout management it's almost perfect for Java.

Again, the dlu's approach is a so-so hack that causes major problems
with any localization of applications.

Yes, as your font gets larger or smaller the widgets do also... however,
if the *number* of glyphs needed in a given language changes, then the
sizing has no way to deal with that.

A purely 'logical' driven Java layout ( e.g. "put the row of buttons at
the bottom, allocating as much size is needed for the largest button...
make each button the same size. put the first button all the way to the
left and the rest packed to the right...") can get all the benefits
without any need for dlu's.

On the other hand, just taking a dlu approach will not solve all the
problems that a 'logical' layout would.

(BTW, I've been doing apps on many platforms and in many languages since
they days when Windows 3.1 was new).

Reply to this Message

Jon A. Cruz - 07 Feb 2004 06:23 GMT

It's quite simple actually.

Just create a custom layout manager. Have it query the perferred sizes
of all of it's contained buttons. Those sizes will have taken into
account the textual content, font size, insets, padding, borders, icons,
etc.

Then have it set each button to the largest of the preferred sizes.
Implementing this in a layout manager will probably require the smallest
ammount of code, since all of the Swing framework is doing the heavy
lifting for it.

Oh, and you *can't* count on a fixed size for fonts. Even from a "same"
font.

For example, Macintosh and Windows systems have traditionally disagreed
about 10% on the pixels of the same ttf font at the same point size.

Reply to this Message

Karsten Lentzsch - 07 Feb 2004 12:12 GMT

> Just create a custom layout manager. Have it query the perferred sizes
> of all of it's contained buttons. Those sizes will have taken into
> account the textual content, font size, insets, padding, borders, icons,
> etc.

Under etc. add: font, screen resolution (dots per inch),
perceived minimum widths and consistency.

And guess what? Dlus express just that ;)

Karsten

Reply to this Message

Jon A. Cruz - 07 Feb 2004 06:34 GMT

> Hi, I created 4 JButtons in a JDialog and place them on south, north,
> east and west in BorderLayout. But I don't like the size of the
> JButton being appear, which method could I call to resize the JButton?

You shouldn't.

:-)

Instead of trying to tweak the individual components, instead look to
placing them in a proper Layout (or combinations of layouts).

A BorderLayou has very specific sizing for EAST, SOUTH, NORTH and WEST.
If that's not how you want things to look, then just use a different
layout manager. (Except avoid setting the layout to null).

http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html

If the stock ones don't do what you want, then it's usually less work
and less code to just make a custom layout manager than to try to hack
in work-arounds.

http://java.sun.com/docs/books/tutorial/uiswing/layout/custom.html

However, I think that the Spring layout that was introduced with JDK 1.4
could be used to get better button control.

Reply to this Message

question about JButton Sizing

Free Magazines