Skip to main content

how to make Gridlayout with the columns with different width

15 replies [Last post]
sawal_xp
Offline
Joined: 2008-02-12

i want to make table with gridlayout. but i want to make the column has different width.
may be this picture can help to decribe the layout what i want to make with gridlayout.

http://www.4shared.com/file/56104770/74fa7d9b/pic3.html

thanks.:)

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
nic_r
Offline
Joined: 2008-07-11

I don't think tables would be limited to a mobile spreadsheet application - see the image the OP linked to. My application is somewhat similar, displaying cost centres, suppliers, order numbers etc extracted from SAP databases.

Similarly, what about high score tables ? Much easier with a well designed widget !

Shai Almog

Unless the table is editable (at which point you will raised
complexity considerably) this type of UI is easily achieved with a
list component.
The screenshot linked in the forum is an excellent example of why we
don't have a table widget. This image would look horrible in any
device except maybe on some of the really tall devices when viewed in
landscape mode.

Editable tables are useful for some cases but very hard to navigate/
edit in a phone without a touch screen, which might be useful for
some cases however since LWUIT tries to be portable in usability as
well as in functionality.... Notice that many of the usability issues
of the editable tables cause UI experts to avoid them completely even
in the desktop, e.g. the resource editor has a table in the theme
editor which I chose to leave as uneditable (directly) to avoid these
usability issues.

Assuming you want to create a table like UI using a list with a
renderer would work far better since its easier to adopt to screens
with varying aspect ratios e.g.:

Say you have a need to track 6 items of data, if you use tables this
would be very simple to implement (build a table with 6 columns).
However if the device doesn't have the space for 6 columns you end up
with horizontal scrolling and serious usability issues.

Using a list you can easily adapt to display less information, to
edit an entry just popup a dialog with the elements of the entry.
This will work for all resolutions.

Just to drive the point through, a table is trivial for text entry.
However, when you combine it with multiple types of entry (anything
from numbers to choice boxes to colors) it becomes one of the most
complex widgets around. If you don't support all complex aspects it
becomes useless...

If you still think editable table is a good idea, go ahead and we
will try to help as much as possible.
If you need help with getting a list to look "right" feel free to
ask, generally we tend to just use a container with a grid layout as
the renderer. The cool part about this is that we can build the
renderer based on the screen width and adapt for aspect ratio changes.

Thanks.

> I don't think tables would be limited to a mobile spreadsheet
> application - see the image the OP linked to. My application is
> somewhat similar, displaying cost centres, suppliers, order numbers
> etc extracted from SAP databases.
>
> Similarly, what about high score tables ? Much easier with a well
> designed widget !
> [Message sent by forum member 'nic_r' (nic_r)]
>
> http://forums.java.net/jive/thread.jspa?messageID=288419
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

sawal_xp
Offline
Joined: 2008-02-12

The table that i want to use is not editable.just to show a lot of data.Like nic_r said, the table is very useful when we will show data, may be from database.

Yes, like from the screenshot, i'm in building project mobile application for the device that has more width screen, like a communicator, ex.Nokia E90.

so, is List componet the conclusion to make the table which has diffrent width..??
what about gridlayout, we can do it with gridlayout?

Shai Almog

Hi,
if you just want to display data then I would go with List. You can
still use a grid layout inside the list to render the components in
columns similarly to the scroll demo in the LWUIT Demo.

The disadvantage of using grid layout for the whole thing is its
uniform width for all columns, I suggest box layout on the Y_AXIS
with column preferred size coded to a specific ratio e.g.:

class MyRenderer extends Container implements ListCellRenderer {
private Label[] column;
private final float[] ratios = {0.2f, 0.3f, 0.1f, 0.4f};
MyRenderer() {
setLayout(new BoxLayout(BoxLayout.Y_AXIS));
columns = new Label[ratios.length];
for(int iter = 0 ; iter < columns.length ; iter++) {
columns[iter] = new Label();
Dimension d = columns[iter].getPreferredSize();

// set cell width to be specific ratio of the screen size
d.setWidth((int)(Display.getInstance().getDisplayWidth() * ratios
[iter]));
columns[iter].setPreferredSize(d);
}
}
...
}

Hope this is clear ;-)

Thanks,
Shai.

> The table that i want to use is not editable.just to show a lot of
> data.Like nic_r said, the table is very useful when we will show
> data, may be from database.
>
> Yes, like from the screenshot, i'm in building project mobile
> application for the device that has more width screen, like a
> communicator, ex.Nokia E90.
>
> so, is List componet the conclusion to make the table which has
> diffrent width..??
> what about gridlayout, we can do it with gridlayout?
> [Message sent by forum member 'sawal_xp' (sawal_xp)]
>
> http://forums.java.net/jive/thread.jspa?messageID=288563
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

vprise
Offline
Joined: 2003-11-07

Nic let me know that the forum truncated my last message, this is it in its entirety:
Hi,
if you just want to display data then I would go with List. You can still use a grid layout inside the list to render the components in columns similarly to the scroll demo in the LWUIT Demo.

The disadvantage of using grid layout for the whole thing is its uniform width for all columns, I suggest box layout on the Y_AXIS with column preferred size coded to a specific ratio e.g.:
[code]
class MyRenderer extends Container implements ListCellRenderer {
private Label[] column;
private final float[] ratios = {0.2f, 0.3f, 0.1f, 0.4f};
MyRenderer() {
setLayout(new BoxLayout(BoxLayout.Y_AXIS));
columns = new Label[ratios.length];
for(int iter = 0 ; iter < columns.length ; iter++) {
columns[iter] = new Label();
Dimension d = columns[iter].getPreferredSize();

// set cell width to be specific ratio of the screen size
d.setWidth((int)(Display.getInstance().getDisplayWidth() * ratios[iter]));
columns[iter].setPreferredSize(d);
}
}
...
}
[/code]

Hope this is clear ;-)

Thanks,
Shai.

lowi
Offline
Joined: 2008-08-28

Hello,

How do you setup a grid layout inside the list?
I haven't seen any setLayout on the List class.

In particular I want to use a custom listCellRenderer to show two different labels in a cell of a grid.

I see how I do that in a list, but I do not know how to setup the list with a grid layout.

Thanks,
Alexandre

Shai Almog

Hi,
see the ScrollDemo. The layout is used within an individual renderer
which may derive from container.

> Hello,
>
> How do you setup a grid layout inside the list?
> I haven't seen any setLayout on the List class.
>
> In particular I want to use a custom listCellRenderer to show two
> different labels in a cell of a grid.
>
> I see how I do that in a list, but I do not know how to setup the
> list with a grid layout.
>
> Thanks,
> Alexandre
> [Message sent by forum member 'lowi' (lowi)]
>
> http://forums.java.net/jive/thread.jspa?messageID=295923
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

lowi
Offline
Joined: 2008-08-28

Thanks,

I have taken a look at the ScollDemo, and I have seen that it contains a borderlayout in its listCellRenderer.

Unfortunately in this example, this solutions does not allow to focus either on the picture alone, or on the contact information.

I guess I should support internal traversal of the borderlayout inside the listCellRenderer by listening to the keyPressed and consuming the input in handlesInput, right?
Would there be any simpler solution to avoid handling keyPressed?

Why not add a gridCellRenderer to customize the appearance of the cell of a grid?

Thanks,
Alexandre

Shai Almog

What you are looking for is not a list but simply a set of
components, a list is not a layout.
You can nest containers and layouts in any way you choose and allow
focus to traverse in any way you choose, please follow the tutorial
and the developer guide for further reference.

> Thanks,
>
> I have taken a look at the ScollDemo, and I have seen that it
> contains a borderlayout in its listCellRenderer.
>
> Unfortunately in this example, this solutions does not allow to
> focus either on the picture alone, or on the contact information.
>
> I guess I should support internal traversal of the borderlayout
> inside the listCellRenderer by listening to the keyPressed and
> consuming the input in handlesInput, right?
> Would there be any simpler solution to avoid handling keyPressed?
>
> Why not add a gridCellRenderer to customize the appearance of the
> cell of a grid?
>
> Thanks,
> Alexandre
> [Message sent by forum member 'lowi' (lowi)]
>
> http://forums.java.net/jive/thread.jspa?messageID=295943
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

lowi
Offline
Joined: 2008-08-28

I understant, it is just that I don't see any easy way to create a grid where each selectable cell is composed of two different string of text, one right aligned, the other one center aligned such as:

----------------------------------------
¦          right1 Â¦               one¦
¦     center1   Â¦       center2  Â¦
¦----------------------------------------
¦           cell2¦                  tt¦
¦       the       Â¦         cent    Â¦
----------------------------------------

Any advice?
Alexandre

Shai Almog

A grid isn't designed to do this.
Use nested box layouts, border layout etc.

For aligning use Label.setAlignment (button etc. derive from label)

> I understant, it is just that I don't see any easy way to create a
> grid where each selectable cell is composed of two different string
> of text, one right aligned, the other one center aligned such as:
>
> ----------------------------------------
> ¦          right1&nb
> sp;¦           
>     one¦
> ¦     center1   Â¦  &
> nbsp;    center2  Â¦
> ¦----------------------------------------
> ¦           cel
> l2¦           &
> nbsp;      tt¦
> ¦       the    
>    Â¦        &nb
> sp;cent    Â¦
> ----------------------------------------
>
> Any advice?
> Alexandre
> [Message sent by forum member 'lowi' (lowi)]
>
> http://forums.java.net/jive/thread.jspa?messageID=295965
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

nic_r
Offline
Joined: 2008-07-11

Hi,

In my opinion it would be a worthwhile addition to the library - I think tables are a common thing to want to do, especially for business/enterprise applications.

In the meantime, what is the recommended approach ? Lists with custom renderers ? Group layout ?

Thanks,

Nic

Shai Almog

Hi,
first off the main thread before discussed grid layout. Its pretty
easy to build a more elaborate grid layout.
Its also possible to use margins to control the grid layout further.

I'm not exactly sure tables would be a good idea for anything other
than a mobile spreadsheet, in which case you would build something
from scratch anyway.

Currently we use List's with a simple custom renderer where
applicable e.g. see the scroll demo which is somewhat of an elaborate
table.

Thanks.

> Hi,
>
> In my opinion it would be a worthwhile addition to the library - I
> think tables are a common thing to want to do.
>
> In the meantime, what is the recommended approach ? Lists with
> custom renderers ? Group layout ?
>
> Thanks,
>
> Nic
> [Message sent by forum member 'nic_r' (nic_r)]
>
> http://forums.java.net/jive/thread.jspa?messageID=288411
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>

Shai Almog
http://lwuit.blogspot.com/

[att1.html]

nic_r
Offline
Joined: 2008-07-11

Hi,

I was thinking exactly the same thing this morning - a new 'table' feature, as available in Matisse would be very handy !

As you say, with a grid layout all the boxes have to be the same size, and what if you want to highlight one row of the table ?

Instead you could use a list, with a list renderer to draw a row in a given way, but can you make sure that any items in a row won't wrap round on a smaller screen ?

What is the preferred way of producing a table, given that delimiters for rows and columns need to line up ?

Sounds like a new component is needed (as requested by someone else before) - anything in the pipeline ?

By the way, should we change the subject of this thread to something like 'How to make a table ?' ?

chen

Hi,
There is no doubt that a table widget is needed for some use case,
however i'm not sure this type of widget needs to be part of the core
lwuit lib.
We are interested to hear your opinion regarding this .

Regards,
Chen

lwuit-users@mobileandembedded.org wrote:
> Hi,
>
> I was thinking exactly the same thing this morning - a new 'table' feature, as available in Matisse would be very handy !
>
> As you say, with a grid layout all the boxes have to be the same size, and what if you want to highlight one row of the table ?
>
> Instead you could use a list, with a list renderer to draw a row in a given way, but can you make sure that any items in a row won't wrap round on a smaller screen ?
>
> What is the preferred way of producing a table, given that delimiters for rows and columns need to line up ?
>
> Sounds like a new component is needed (as requested by someone else before) - anything in the pipeline ?
>
> By the way, should we change the subject of this thread to something like 'How to make a table ?' ?
> [Message sent by forum member 'nic_r' (nic_r)]
>
> http://forums.java.net/jive/thread.jspa?messageID=288364
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: users-unsubscribe@lwuit.dev.java.net
> For additional commands, e-mail: users-help@lwuit.dev.java.net
>
>
>

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