Looking for best practice with "dock" style layout

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

Looking for best practice with "dock" style layout

Cajus Pollmeier
Hello!

I'm new to the list and to the qooxdoo framework. Having some history in
  QT programming, I like qooxdoo very much ;-)

After starting up and playing around successfully, I keep on trying to
find the right way to achieve a layout like the second one shown in

http://demo.qooxdoo.org/current/demobrowser/#layout~Dock_FlexGrowing.html

, but with the difference that west and east have a button to let
themselves overlap the south one.

Mumble. Other words: Pressing the (lets say) "Advanced" button on the
west side container, should result in a view like the first layout on

http://demo.qooxdoo.org/current/demobrowser/#layout~Dock_FlexGrowing.html

shows - but just overlapping over south, not shrinking south.

Are there any best practice suggestions, keeping as much as possible
from the layouting features?

Thanks,
Cajus

------------------------------------------------------------------------------
Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
-OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
-Strategies to boost innovation and cut costs with open source participation
-Receive a $600 discount off the registration fee with the source code: SFAD
http://p.sf.net/sfu/XcvMzF8H
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Looking for best practice with "dock" style layout

Sebastian Werner
Hi!

Welcome to qooxdoo!

I would say you need to overlay the Dock layout in this case. Just  
create the Dock layout without the bottom overlay.

Then put both into a canvas layout:

canvas
- dock (edge=0)
- overlay (bottom=0, left=0, right=0, height=xxx)

then simply show/exclude the overlay as needed.

Greetings,
Sebastian



Am 27.02.2009 um 09:19 schrieb Cajus Pollmeier:

> Hello!
>
> I'm new to the list and to the qooxdoo framework. Having some  
> history in
>  QT programming, I like qooxdoo very much ;-)
>
> After starting up and playing around successfully, I keep on trying to
> find the right way to achieve a layout like the second one shown in
>
> http://demo.qooxdoo.org/current/demobrowser/ 
> #layout~Dock_FlexGrowing.html
>
> , but with the difference that west and east have a button to let
> themselves overlap the south one.
>
> Mumble. Other words: Pressing the (lets say) "Advanced" button on the
> west side container, should result in a view like the first layout on
>
> http://demo.qooxdoo.org/current/demobrowser/ 
> #layout~Dock_FlexGrowing.html
>
> shows - but just overlapping over south, not shrinking south.
>
> Are there any best practice suggestions, keeping as much as possible
> from the layouting features?
>
> Thanks,
> Cajus
>
> ------------------------------------------------------------------------------
> Open Source Business Conference (OSBC), March 24-25, 2009, San  
> Francisco, CA
> -OSBC tackles the biggest issue in open source: Open Sourcing the  
> Enterprise
> -Strategies to boost innovation and cut costs with open source  
> participation
> -Receive a $600 discount off the registration fee with the source  
> code: SFAD
> http://p.sf.net/sfu/XcvMzF8H
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
-OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
-Strategies to boost innovation and cut costs with open source participation
-Receive a $600 discount off the registration fee with the source code: SFAD
http://p.sf.net/sfu/XcvMzF8H
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Looking for best practice with "dock" style layout

Noggin182
In reply to this post by Cajus Pollmeier
Sebastian's solution sounds good to me.

This is another tidy way but it means shrinking the south which isn't
want you wanted but thought it might help. Run this in the playground:



var dock = new qx.ui.layout.Dock();
dock.setSort("y");

var widget = (new qx.ui.container.Composite(dock)).set(
{
   decorator: "main",
   backgroundColor: "yellow",
   width:450,
   height:250,
   allowGrowX : false
});

var w1 = new qx.ui.core.Widget().set({decorator: "main",
backgroundColor: "red"});
var w2 = new qx.ui.core.Widget().set({decorator: "main",
backgroundColor: "blue"});
var w3 = new qx.ui.core.Widget().set({decorator: "main",
backgroundColor: "orange"});
var w4 = new qx.ui.core.Widget().set({decorator: "main",
backgroundColor: "green"});
var w5 = new qx.ui.core.Widget().set({decorator: "main",
backgroundColor: "fuchsia"});

widget.add(w1, {edge:"north"});
widget.add(w4, {edge:"east"});
widget.add(w3, {edge:"south"});
widget.add(w2, {edge:"west"});
widget.add(w5, {edge:"center"});

this.getRoot().add(widget, {left:10, top: 100}    );

var button = new qx.ui.form.Button("Advance");
button.addListener("execute", function()
{
   dock.resetSort();
});

this.getRoot().add(widget, {left:10, top: 50}    );

this.getRoot().add(button, {left:10, top: 10}    );


Cajus Pollmeier wrote:

> Hello!
>
> I'm new to the list and to the qooxdoo framework. Having some history in
>   QT programming, I like qooxdoo very much ;-)
>
> After starting up and playing around successfully, I keep on trying to
> find the right way to achieve a layout like the second one shown in
>
> http://demo.qooxdoo.org/current/demobrowser/#layout~Dock_FlexGrowing.html
>
> , but with the difference that west and east have a button to let
> themselves overlap the south one.
>
> Mumble. Other words: Pressing the (lets say) "Advanced" button on the
> west side container, should result in a view like the first layout on
>
> http://demo.qooxdoo.org/current/demobrowser/#layout~Dock_FlexGrowing.html
>
> shows - but just overlapping over south, not shrinking south.
>
> Are there any best practice suggestions, keeping as much as possible
> from the layouting features?
>
> Thanks,
> Cajus
>
> ------------------------------------------------------------------------------
> Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
> -OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
> -Strategies to boost innovation and cut costs with open source participation
> -Receive a $600 discount off the registration fee with the source code: SFAD
> http://p.sf.net/sfu/XcvMzF8H


------------------------------------------------------------------------------
Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
-OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
-Strategies to boost innovation and cut costs with open source participation
-Receive a $600 discount off the registration fee with the source code: SFAD
http://p.sf.net/sfu/XcvMzF8H
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Looking for best practice with "dock" style layout

Cajus Pollmeier
In reply to this post by Sebastian Werner
Hi Sebastian,

tanks for the suggestion. Just to get you right: I should add some widget that overlays the south container to the canvas. But his removes the automatic scaling when resizing the window, or am I wrong?

What seems to work is adding a margin and adjusting the height - but it doesn't seem to be easy to calculate the correct height so that it works with resizing, too.

Cheers,
Cajus

Sebastian Werner schrieb:

> Hi!
>
> Welcome to qooxdoo!
>
> I would say you need to overlay the Dock layout in this case. Just  
> create the Dock layout without the bottom overlay.
>
> Then put both into a canvas layout:
>
> canvas
> - dock (edge=0)
> - overlay (bottom=0, left=0, right=0, height=xxx)
>
> then simply show/exclude the overlay as needed.
>
> Greetings,
> Sebastian
>
>
>
> Am 27.02.2009 um 09:19 schrieb Cajus Pollmeier:
>
>> Hello!
>>
>> I'm new to the list and to the qooxdoo framework. Having some  
>> history in
>>  QT programming, I like qooxdoo very much ;-)
>>
>> After starting up and playing around successfully, I keep on trying to
>> find the right way to achieve a layout like the second one shown in
>>
>> http://demo.qooxdoo.org/current/demobrowser/ 
>> #layout~Dock_FlexGrowing.html
>>
>> , but with the difference that west and east have a button to let
>> themselves overlap the south one.
>>
>> Mumble. Other words: Pressing the (lets say) "Advanced" button on the
>> west side container, should result in a view like the first layout on
>>
>> http://demo.qooxdoo.org/current/demobrowser/ 
>> #layout~Dock_FlexGrowing.html
>>
>> shows - but just overlapping over south, not shrinking south.
>>
>> Are there any best practice suggestions, keeping as much as possible
>> from the layouting features?
>>
>> Thanks,
>> Cajus
>>
>> ------------------------------------------------------------------------------
>> Open Source Business Conference (OSBC), March 24-25, 2009, San  
>> Francisco, CA
>> -OSBC tackles the biggest issue in open source: Open Sourcing the  
>> Enterprise
>> -Strategies to boost innovation and cut costs with open source  
>> participation
>> -Receive a $600 discount off the registration fee with the source  
>> code: SFAD
>> http://p.sf.net/sfu/XcvMzF8H
>> _______________________________________________
>> qooxdoo-devel mailing list
>> [hidden email]
>> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
>
>
> ------------------------------------------------------------------------------
> Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
> -OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
> -Strategies to boost innovation and cut costs with open source participation
> -Receive a $600 discount off the registration fee with the source code: SFAD
> http://p.sf.net/sfu/XcvMzF8H
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


------------------------------------------------------------------------------
Open Source Business Conference (OSBC), March 24-25, 2009, San Francisco, CA
-OSBC tackles the biggest issue in open source: Open Sourcing the Enterprise
-Strategies to boost innovation and cut costs with open source participation
-Receive a $600 discount off the registration fee with the source code: SFAD
http://p.sf.net/sfu/XcvMzF8H
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel