General layout question

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

General layout question

Ian Monroe
I can't make head or tails of layouts. The API seems to make more
promises then it can't keep.

The following code is an combination of the various examples and takes
place in an application's constructor. It overlaps the table over the
toolbar. My ideal is to have a toolbar at the top and the rest of the
space taken up by the table.

If the table.set( { width is uncommented, there are errors when I try
to add items to the table. If height is also commented out, the table
is not shown.

This isn't the only way I tried it, nothing has really worked, this
just happens to be the latest iteration.

var doc = qx.ui.core.ClientDocument.getInstance();
var dockLayout = new qx.ui.layout.DockLayout;
dockLayout.setLocation(0, 0);
dockLayout.setRight(0);
dockLayout.setBottom(0);
dockLayout.setBackgroundColor("white");

var toolbar = new qx.ui.toolbar.ToolBar;
var prevBtn = new qx.ui.toolbar.Button( "Previous",
"icon/16/actions/media-skip-backward.png" );
var playBtn =  new qx.ui.toolbar.Button("Play",
"icon/16/actions/media-playback-start.png" );
toolbar.add( prevBtn );
toolbar.add( playBtn );
dockLayout.addTop( toolbar );

var playlistModel = new qx.ui.table.model.Simple();
playlistModel.setColumns([ "#", "Title", "Artist", "Album", "Length" ]);

    var table = new qx.ui.table.Table(playlistModel);
table.set(
{
//  width   : "100%"
    height  : "100%"
});
dockLayout.addBottom( table );
doc.add(dockLayout);

Thanks,
Ian

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General layout question

Jim Hunter
Try sticking the table in a CanvasLayout then place the CanvasLayour inside the DockLayout where you are currently placing the table. I might have used a VerticalBoxLayout for this scenario, but a DockLayout will also work.

I suggest that you don't spend too much time trying to master the layout system unless you plan on staying in .7x as the layout system is changing in .8 and you are going to need to learn a new system all over.

Jim



On Sun, Aug 3, 2008 at 10:07 PM, Ian Monroe <[hidden email]> wrote:
I can't make head or tails of layouts. The API seems to make more
promises then it can't keep.

The following code is an combination of the various examples and takes
place in an application's constructor. It overlaps the table over the
toolbar. My ideal is to have a toolbar at the top and the rest of the
space taken up by the table.

If the table.set( { width is uncommented, there are errors when I try
to add items to the table. If height is also commented out, the table
is not shown.

This isn't the only way I tried it, nothing has really worked, this
just happens to be the latest iteration.

var doc = qx.ui.core.ClientDocument.getInstance();
var dockLayout = new qx.ui.layout.DockLayout;
dockLayout.setLocation(0, 0);
dockLayout.setRight(0);
dockLayout.setBottom(0);
dockLayout.setBackgroundColor("white");

var toolbar = new qx.ui.toolbar.ToolBar;
var prevBtn = new qx.ui.toolbar.Button( "Previous",
"icon/16/actions/media-skip-backward.png" );
var playBtn =  new qx.ui.toolbar.Button("Play",
"icon/16/actions/media-playback-start.png" );
toolbar.add( prevBtn );
toolbar.add( playBtn );
dockLayout.addTop( toolbar );

var playlistModel = new qx.ui.table.model.Simple();
playlistModel.setColumns([ "#", "Title", "Artist", "Album", "Length" ]);

   var table = new qx.ui.table.Table(playlistModel);
table.set(
{
//  width   : "100%"
   height  : "100%"
});
dockLayout.addBottom( table );
doc.add(dockLayout);

Thanks,
Ian

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel



--
Jim Hunter

DAILY THOUGHT: SOME PEOPLE ARE LIKE SLINKIES - NOT REALLY GOOD
FOR ANYTHING BUT THEY BRING A SMILE TO YOUR FACE WHEN PUSHED DOWN THE STAIRS

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: General layout question

Sebastian Werner
In reply to this post by Ian Monroe
It looks like you are starting developing a new application. In these  
cases I would suggest to directly startup with qooxdoo 0.8 beta 1.  
This makes it easier for you to make the final transition to some  
0.8.x release afterwards compared to the steps needed for regular  
0.7.x users.

The layout system is much easier to use in 0.8 and is modeled after  
some ideas from Qt - so you might like it ;)

Here you can find some introduction documentation:
http://qooxdoo.org/documentation/0.8/ui_overview

Welcome to qooxdoo! Cheers,

Sebastian



Am 04.08.2008 um 07:07 schrieb Ian Monroe:

> I can't make head or tails of layouts. The API seems to make more
> promises then it can't keep.
>
> The following code is an combination of the various examples and takes
> place in an application's constructor. It overlaps the table over the
> toolbar. My ideal is to have a toolbar at the top and the rest of the
> space taken up by the table.
>
> If the table.set( { width is uncommented, there are errors when I try
> to add items to the table. If height is also commented out, the table
> is not shown.
>
> This isn't the only way I tried it, nothing has really worked, this
> just happens to be the latest iteration.
>
> var doc = qx.ui.core.ClientDocument.getInstance();
> var dockLayout = new qx.ui.layout.DockLayout;
> dockLayout.setLocation(0, 0);
> dockLayout.setRight(0);
> dockLayout.setBottom(0);
> dockLayout.setBackgroundColor("white");
>
> var toolbar = new qx.ui.toolbar.ToolBar;
> var prevBtn = new qx.ui.toolbar.Button( "Previous",
> "icon/16/actions/media-skip-backward.png" );
> var playBtn =  new qx.ui.toolbar.Button("Play",
> "icon/16/actions/media-playback-start.png" );
> toolbar.add( prevBtn );
> toolbar.add( playBtn );
> dockLayout.addTop( toolbar );
>
> var playlistModel = new qx.ui.table.model.Simple();
> playlistModel.setColumns([ "#", "Title", "Artist", "Album",  
> "Length" ]);
>
>    var table = new qx.ui.table.Table(playlistModel);
> table.set(
> {
> //  width   : "100%"
>    height  : "100%"
> });
> dockLayout.addBottom( table );
> doc.add(dockLayout);
>
> Thanks,
> Ian
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's  
> challenge
> Build the coolest Linux based applications with Moblin SDK & win  
> great prizes
> Grand prize is a trip for two to an Open Source event anywhere in  
> the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel