You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by "Roger L. Whitcomb" <Ro...@ingres.com> on 2010/09/16 01:54:46 UTC
Laying out left and right justified objects
I'm trying to lay out a little title bar with a title (Label) object on
the left and little move, pin and close icon buttons on the right. How
would I use the layout containers so that the right-hand buttons move
with the right edge of the container?
Right now I have a GridPane, but this basically lays out things
according to the widths of the contained objects and I need things to
fit their containers....
<TablePane.Row height="-1">
<BoxPane orientation="horizontal"
styles="{padding:0, fill:true,
backgroundPaint:{paintType:'gradient',
startX:0,startY:0,startColor:'#3982ef',
endX:0,endY:17,endColor:'#3169c6'}}">
<GridPane
columnCount="4">
<rows>
<GridPane.Row>
<FlowPane
styles="{padding:2, alignment:'left'}">
<Label
text="Object Explorer" styles="{color:'#ffffff'}"/>
</FlowPane>
<GridPane.Filler/>
<GridPane.Filler/>
<FlowPane
styles="{alignment:'right'}">
<PushButton styles="{toolbar:true}" tooltipText="Window Position">
<buttonData><c:ButtonData icon="images/winpos-14.png"/></buttonData>
</PushButton>
<PushButton styles="{toolbar:true}" tooltipText="Auto Hide">
<buttonData><c:ButtonData icon="images/winpin-14.png"/></buttonData>
</PushButton>
<PushButton styles="{toolbar:true}" tooltipText="Close">
<buttonData><c:ButtonData icon="images/winclose-14.png"/></buttonData>
</PushButton>
</FlowPane>
</GridPane.Row>
</rows>
</GridPane>
</BoxPane>
</TablePane.Row>
Thanks!
Roger Whitcomb
Architect, Engineering
Ingres Corporation
roger.whitcomb@ingres.com <ma...@ingres.com>
PHONE +1 650.587.5596
FAX +1 650.587.5550
www.ingres.com <http://www.ingres.com/>
This transmission is confidential and intended solely for the use of the
recipient named above. It may contain confidential, proprietary, or
legally privileged information. If you are not the intended recipient,
you are hereby notified that any unauthorized review, use, disclosure or
distribution is strictly prohibited. If you have received this
transmission in error, please contact the sender by reply e-mail and
delete the original transmission and all copies from your system.
Re: Laying out left and right justified objects
Posted by Greg Brown <gk...@mac.com>.
That's a good suggestion too. :-)
On Sep 15, 2010, at 8:17 PM, Chris Bartlett wrote:
> Roger,
>
> TablePane has a static inner class named Filler which can be used as a placeholder between you left aligned components and your right aligned components.
>
>
> <TablePane xmlns="org.apache.pivot.wtk" xmlns:bxml="http://pivot.apache.org/bxml">
>
> <columns>
> <TablePane.Column width="-1" />
> <TablePane.Column width="1*" />
> <TablePane.Column width="-1" />
> </columns>
>
> <rows>
> <TablePane.Row height="-1">
> <BoxPane>
> <TextInput text="Left" />
> </BoxPane>
> <TablePane.Filler tooltipText="Filler"/>
> <BoxPane>
> <TextInput text="Right" />
> <TextInput text="Right" />
> </BoxPane>
> </TablePane.Row>
> </rows>
>
> </TablePane>
>
>
>
> Regards,
>
> Chris
>
> On 16 September 2010 06:54, Roger L. Whitcomb <Ro...@ingres.com> wrote:
> I’m trying to lay out a little title bar with a title (Label) object on the left and little move, pin and close icon buttons on the right. How would I use the layout containers so that the right-hand buttons move with the right edge of the container?
>
>
> Right now I have a GridPane, but this basically lays out things according to the widths of the contained objects and I need things to fit their containers….
>
> <TablePane.Row height="-1">
>
> <BoxPane orientation="horizontal" styles="{padding:0, fill:true,
>
> backgroundPaint:{paintType:'gradient',
>
> startX:0,startY:0,startColor:'#3982ef',
>
> endX:0,endY:17,endColor:'#3169c6'}}">
>
> <GridPane columnCount="4">
>
> <rows>
>
> <GridPane.Row>
>
> <FlowPane styles="{padding:2, alignment:'left'}">
>
> <Label text="Object Explorer" styles="{color:'#ffffff'}"/>
>
> </FlowPane>
>
> <GridPane.Filler/>
>
> <GridPane.Filler/>
>
> <FlowPane styles="{alignment:'right'}">
>
> <PushButton styles="{toolbar:true}" tooltipText="Window Position">
>
> <buttonData><c:ButtonData icon="images/winpos-14.png"/></buttonData>
>
> </PushButton>
>
> <PushButton styles="{toolbar:true}" tooltipText="Auto Hide">
>
> <buttonData><c:ButtonData icon="images/winpin-14.png"/></buttonData>
>
> </PushButton>
>
> <PushButton styles="{toolbar:true}" tooltipText="Close">
>
> <buttonData><c:ButtonData icon="images/winclose-14.png"/></buttonData>
>
> </PushButton>
>
> </FlowPane>
>
> </GridPane.Row>
>
> </rows>
>
> </GridPane>
>
> </BoxPane>
>
> </TablePane.Row>
>
>
> Thanks!
>
>
> Roger Whitcomb
>
> Architect, Engineering
>
> Ingres Corporation
>
> roger.whitcomb@ingres.com
>
>
> PHONE +1 650.587.5596
>
> FAX +1 650.587.5550
>
>
> www.ingres.com
>
>
> This transmission is confidential and intended solely for the use of the recipient named above. It may contain confidential, proprietary, or legally privileged information. If you are not the intended recipient, you are hereby notified that any unauthorized review, use, disclosure or distribution is strictly prohibited. If you have received this transmission in error, please contact the sender by reply e-mail and delete the original transmission and all copies from your system.
>
>
>
Re: Laying out left and right justified objects
Posted by Chris Bartlett <cb...@gmail.com>.
Roger,
TablePane has a static inner class named Filler which can be used as a
placeholder between you left aligned components and your right aligned
components.
<TablePane xmlns="org.apache.pivot.wtk" xmlns:bxml="
http://pivot.apache.org/bxml">
<columns>
<TablePane.Column width="-1" />
<TablePane.Column width="1*" />
<TablePane.Column width="-1" />
</columns>
<rows>
<TablePane.Row height="-1">
<BoxPane>
<TextInput text="Left" />
</BoxPane>
<TablePane.Filler tooltipText="Filler"/>
<BoxPane>
<TextInput text="Right" />
<TextInput text="Right" />
</BoxPane>
</TablePane.Row>
</rows>
</TablePane>
Regards,
Chris
On 16 September 2010 06:54, Roger L. Whitcomb <Ro...@ingres.com>wrote:
> I’m trying to lay out a little title bar with a title (Label) object on
> the left and little move, pin and close icon buttons on the right. How
> would I use the layout containers so that the right-hand buttons move with
> the right edge of the container?
>
>
>
> Right now I have a GridPane, but this basically lays out things according
> to the widths of the contained objects and I need things to fit their
> containers….
>
> <TablePane.Row height="-1">
>
> <BoxPane orientation="horizontal"
> styles="{padding:0, fill:true,
>
>
> backgroundPaint:{paintType:'gradient',
>
>
> startX:0,startY:0,startColor:'#3982ef',
>
>
> endX:0,endY:17,endColor:'#3169c6'}}">
>
> <GridPane columnCount="4">
>
> <rows>
>
> <GridPane.Row>
>
> <FlowPane
> styles="{padding:2, alignment:'left'}">
>
> <Label
> text="Object Explorer" styles="{color:'#ffffff'}"/>
>
> </FlowPane>
>
> <GridPane.Filler/>
>
> <GridPane.Filler/>
>
> <FlowPane
> styles="{alignment:'right'}">
>
> <PushButton
> styles="{toolbar:true}" tooltipText="Window Position">
>
>
> <buttonData><c:ButtonData icon="images/winpos-14.png"/></buttonData>
>
>
> </PushButton>
>
> <PushButton
> styles="{toolbar:true}" tooltipText="Auto Hide">
>
>
> <buttonData><c:ButtonData icon="images/winpin-14.png"/></buttonData>
>
>
> </PushButton>
>
> <PushButton
> styles="{toolbar:true}" tooltipText="Close">
>
>
> <buttonData><c:ButtonData icon="images/winclose-14.png"/></buttonData>
>
>
> </PushButton>
>
> </FlowPane>
>
> </GridPane.Row>
>
> </rows>
>
> </GridPane>
>
> </BoxPane>
>
> </TablePane.Row>
>
>
>
> Thanks!
>
>
>
> *Roger Whitcomb*
>
> Architect, Engineering
>
> *Ingres Corporation*
>
> roger.whitcomb@ingres.com
>
>
>
> *PHONE* +1 650.587.5596
>
> *FAX* +1 650.587.5550
>
>
>
> *www.ingres.com* <http://www.ingres.com/>
>
>
>
> This transmission is confidential and intended solely for the use of the
> recipient named above. It may contain confidential, proprietary, or legally
> privileged information. If you are not the intended recipient, you are
> hereby notified that any unauthorized review, use, disclosure or
> distribution is strictly prohibited. If you have received this transmission
> in error, please contact the sender by reply e-mail and delete the original
> transmission and all copies from your system.
>
>
>
Re: Laying out left and right justified objects
Posted by Roger Whitcomb <Ro...@rbwhitcomb.com>.
Did this (and took out the enclosing BoxPane) and it works great. Thank you.
~Roger Whitcomb
On Sep 15, 2010, at 5:18 PM, Greg Brown wrote:
> You probably want to use a TablePane here. GridPane always makes cells the same size (same as GridLayout in AWT).
>
> Create a TablePane with two columns and one row. The first column should have a width of "1*" and the second "-1" (the default). The first column can contain the Label, and the second should contain a horizontal BoxPane containing the buttons. The second column will be given only the space it needs, and the first column will be given the remaining width. FWIW, this is how we lay out the title bar in TerraFrameSkin.
>
> Hope this helps,
> G
>
> On Sep 15, 2010, at 7:54 PM, Roger L. Whitcomb wrote:
>
>> I’m trying to lay out a little title bar with a title (Label) object on the left and little move, pin and close icon buttons on the right. How would I use the layout containers so that the right-hand buttons move with the right edge of the container?
>>
>> Right now I have a GridPane, but this basically lays out things according to the widths of the contained objects and I need things to fit their containers….
>> <TablePane.Row height="-1">
>> <BoxPane orientation="horizontal" styles="{padding:0, fill:true,
>> backgroundPaint:{paintType:'gradient',
>> startX:0,startY:0,startColor:'#3982ef',
>> endX:0,endY:17,endColor:'#3169c6'}}">
>> <GridPane columnCount="4">
>> <rows>
>> <GridPane.Row>
>> <FlowPane styles="{padding:2, alignment:'left'}">
>> <Label text="Object Explorer" styles="{color:'#ffffff'}"/>
>> </FlowPane>
>> <GridPane.Filler/>
>> <GridPane.Filler/>
>> <FlowPane styles="{alignment:'right'}">
>> <PushButton styles="{toolbar:true}" tooltipText="Window Position">
>> <buttonData><c:ButtonData icon="images/winpos-14.png"/></buttonData>
>> </PushButton>
>> <PushButton styles="{toolbar:true}" tooltipText="Auto Hide">
>> <buttonData><c:ButtonData icon="images/winpin-14.png"/></buttonData>
>> </PushButton>
>> <PushButton styles="{toolbar:true}" tooltipText="Close">
>> <buttonData><c:ButtonData icon="images/winclose-14.png"/></buttonData>
>> </PushButton>
>> </FlowPane>
>> </GridPane.Row>
>> </rows>
>> </GridPane>
>> </BoxPane>
>> </TablePane.Row>
>>
>> Thanks!
>>
>> Roger Whitcomb
>> Architect, Engineering
>> Ingres Corporation
>> roger.whitcomb@ingres.com
>>
>> PHONE +1 650.587.5596
>> FAX +1 650.587.5550
>>
>> www.ingres.com
>>
>> This transmission is confidential and intended solely for the use of the recipient named above. It may contain confidential, proprietary, or legally privileged information. If you are not the intended recipient, you are hereby notified that any unauthorized review, use, disclosure or distribution is strictly prohibited. If you have received this transmission in error, please contact the sender by reply e-mail and delete the original transmission and all copies from your system.
>>
>
Re: Laying out left and right justified objects
Posted by Greg Brown <gk...@mac.com>.
You probably want to use a TablePane here. GridPane always makes cells the same size (same as GridLayout in AWT).
Create a TablePane with two columns and one row. The first column should have a width of "1*" and the second "-1" (the default). The first column can contain the Label, and the second should contain a horizontal BoxPane containing the buttons. The second column will be given only the space it needs, and the first column will be given the remaining width. FWIW, this is how we lay out the title bar in TerraFrameSkin.
Hope this helps,
G
On Sep 15, 2010, at 7:54 PM, Roger L. Whitcomb wrote:
> I’m trying to lay out a little title bar with a title (Label) object on the left and little move, pin and close icon buttons on the right. How would I use the layout containers so that the right-hand buttons move with the right edge of the container?
>
> Right now I have a GridPane, but this basically lays out things according to the widths of the contained objects and I need things to fit their containers….
> <TablePane.Row height="-1">
> <BoxPane orientation="horizontal" styles="{padding:0, fill:true,
> backgroundPaint:{paintType:'gradient',
> startX:0,startY:0,startColor:'#3982ef',
> endX:0,endY:17,endColor:'#3169c6'}}">
> <GridPane columnCount="4">
> <rows>
> <GridPane.Row>
> <FlowPane styles="{padding:2, alignment:'left'}">
> <Label text="Object Explorer" styles="{color:'#ffffff'}"/>
> </FlowPane>
> <GridPane.Filler/>
> <GridPane.Filler/>
> <FlowPane styles="{alignment:'right'}">
> <PushButton styles="{toolbar:true}" tooltipText="Window Position">
> <buttonData><c:ButtonData icon="images/winpos-14.png"/></buttonData>
> </PushButton>
> <PushButton styles="{toolbar:true}" tooltipText="Auto Hide">
> <buttonData><c:ButtonData icon="images/winpin-14.png"/></buttonData>
> </PushButton>
> <PushButton styles="{toolbar:true}" tooltipText="Close">
> <buttonData><c:ButtonData icon="images/winclose-14.png"/></buttonData>
> </PushButton>
> </FlowPane>
> </GridPane.Row>
> </rows>
> </GridPane>
> </BoxPane>
> </TablePane.Row>
>
> Thanks!
>
> Roger Whitcomb
> Architect, Engineering
> Ingres Corporation
> roger.whitcomb@ingres.com
>
> PHONE +1 650.587.5596
> FAX +1 650.587.5550
>
> www.ingres.com
>
> This transmission is confidential and intended solely for the use of the recipient named above. It may contain confidential, proprietary, or legally privileged information. If you are not the intended recipient, you are hereby notified that any unauthorized review, use, disclosure or distribution is strictly prohibited. If you have received this transmission in error, please contact the sender by reply e-mail and delete the original transmission and all copies from your system.
>