You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by "B.L. Zeebub" <ro...@googlemail.com> on 2012/05/09 12:47:00 UTC
Alignment
Hi
I've got the following snippet;
<BoxPane orientation="horizontal" >
<ImageView wtkx:id="car" styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="vci_status" styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="pc" styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="pc_status" styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="server" styles="{verticalAlignment:'center'}"/>
<PushButton wtkx:id="start" buttonData="Start Communications"
styles="{font: {bold:true, size:12}}"/>
</BoxPane>
The problem I've got is that I want the button to appear on the far right of
the window and centered in the box pane. When I try to add
verticalAlignment='center',horizontalAlignment='right' to the styles
attribute I get a runtime exception "Unable to access property "styles" for
type org.apache.pivot.wtk.PushButton."
How do I acheive what I want?
Regards
--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Alignment-tp3973763.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
RE: Alignment
Posted by "Roger L. Whitcomb" <Ro...@actian.com>.
You can specify the padding values separately for each direction:
styles="{padding:{right:12}}" and that should fix it without having to
use the extra BoxPane (which doesn't work anyway because BoxPane sizes
itself to its content...).
Let us know. Thanks for using Pivot. No problem for the questions (I
was there not that long ago ;)
~Roger Whitcomb
-----Original Message-----
From: B.L. Zeebub [mailto:roger.varley@googlemail.com]
Sent: Wednesday, May 09, 2012 11:27 PM
To: user@pivot.apache.org
Subject: Re: Alignment
> I would wrap the BoxPane inside a TablePane with two columns, the
first
> of width "-1" and second with width "1*", then take the PushButton out
> of this BoxPane and make a second BoxPane (the second column of the
> TablePane.Row) and put the PushButton inside that and set the
alignment
> of this BoxPane to horizontal right, vertical center. Something like
> this (though I haven't tried it to be sure):
> <TablePane>
> <columns>
> <TablePane.Column width="-1"/>
> <TablePane.Column width="1*"/>
> </columns>
> <rows>
> <TablePane.Row>
> <BoxPane orientation="horizontal">
> <ImageView .../>
> <ImageView .../>
> ...
> <ImageView .../>
> </BoxPane>
> <BoxPane orientation="horizontal"
styles="{horizontalAlignment:'right',
> verticalAlignment:'center'}">
> <PushButton wtkx:id="start" ... />
> </BoxPane>
> </TablePane.Row>
> </rows>
> </TablePane>
>
>
Thanks, that worked a treat. The only problem I've got now is that the
PushButton is now pushed hard up against the right hand edge of the
window.
I tried adding a padding style which moves the button away from the
edge,
but Pivot is applying the padding to the top and bottom as well which
increases the height of the row container. The CSS style padding-left
causes
an exception.
I then tried adding another BoxPane specifying a width style attribute
with
no content to act as a spacer but that doesn't work and still leaves the
button hard up against the edge of the screen.
Sorry for these newbie questions but could someone tell me how to move
the
BoxPane away from the right hand edge of the display without increasing
the
overall height of the containing row.
<TablePane>
<columns>
<TablePane.Column width="-1"/>
<TablePane.Column width="1*"/>
</columns>
<rows>
<TablePane.Row>
<BoxPane
orientation="horizontal" styles="{horizontalAlignment:'left',
padding:10}">
<ImageView wtkx:id="car"
styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="vci_status"
styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="pc"
styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="pc_status"
styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="server"
styles="{verticalAlignment:'center'}"/>
</BoxPane>
<BoxPane
orientation="horizontal"
styles="{horizontalAlignment:'right',verticalAlignment:'center'}">
<PushButton wtkx:id="start"
buttonData="Start Communications"
styles="{font:{bold:true, size:12} }"/>
</BoxPane>
<BoxPane
orientation="horizontal"
styles="{horizontalAlignment:'right',verticalAlignment:'center'}
width=10">
</BoxPane>
</TablePane.Row>
</rows>
</TablePane>
--
View this message in context:
http://apache-pivot-users.399431.n3.nabble.com/Alignment-tp3973763p39762
50.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
Re: Alignment
Posted by "B.L. Zeebub" <ro...@googlemail.com>.
> I would wrap the BoxPane inside a TablePane with two columns, the first
> of width "-1" and second with width "1*", then take the PushButton out
> of this BoxPane and make a second BoxPane (the second column of the
> TablePane.Row) and put the PushButton inside that and set the alignment
> of this BoxPane to horizontal right, vertical center. Something like
> this (though I haven't tried it to be sure):
> <TablePane>
> <columns>
> <TablePane.Column width="-1"/>
> <TablePane.Column width="1*"/>
> </columns>
> <rows>
> <TablePane.Row>
> <BoxPane orientation="horizontal">
> <ImageView .../>
> <ImageView .../>
> ...
> <ImageView .../>
> </BoxPane>
> <BoxPane orientation="horizontal" styles="{horizontalAlignment:'right',
> verticalAlignment:'center'}">
> <PushButton wtkx:id="start" ... />
> </BoxPane>
> </TablePane.Row>
> </rows>
> </TablePane>
>
>
Thanks, that worked a treat. The only problem I've got now is that the
PushButton is now pushed hard up against the right hand edge of the window.
I tried adding a padding style which moves the button away from the edge,
but Pivot is applying the padding to the top and bottom as well which
increases the height of the row container. The CSS style padding-left causes
an exception.
I then tried adding another BoxPane specifying a width style attribute with
no content to act as a spacer but that doesn't work and still leaves the
button hard up against the edge of the screen.
Sorry for these newbie questions but could someone tell me how to move the
BoxPane away from the right hand edge of the display without increasing the
overall height of the containing row.
<TablePane>
<columns>
<TablePane.Column width="-1"/>
<TablePane.Column width="1*"/>
</columns>
<rows>
<TablePane.Row>
<BoxPane orientation="horizontal" styles="{horizontalAlignment:'left',
padding:10}">
<ImageView wtkx:id="car" styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="vci_status" styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="pc" styles="{verticalAlignment:'center'}"/>
<ImageView wtkx:id="pc_status" styles="{verticalAlignment:'bottom'}"/>
<ImageView wtkx:id="server" styles="{verticalAlignment:'center'}"/>
</BoxPane>
<BoxPane orientation="horizontal"
styles="{horizontalAlignment:'right',verticalAlignment:'center'}">
<PushButton wtkx:id="start" buttonData="Start Communications"
styles="{font:{bold:true, size:12} }"/>
</BoxPane>
<BoxPane orientation="horizontal"
styles="{horizontalAlignment:'right',verticalAlignment:'center'} width=10">
</BoxPane>
</TablePane.Row>
</rows>
</TablePane>
--
View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Alignment-tp3973763p3976250.html
Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
Re: Alignment
Posted by Roger and Beth Whitcomb <Ro...@rbwhitcomb.com>.
I would wrap the BoxPane inside a TablePane with two columns, the first
of width "-1" and second with width "1*", then take the PushButton out
of this BoxPane and make a second BoxPane (the second column of the
TablePane.Row) and put the PushButton inside that and set the alignment
of this BoxPane to horizontal right, vertical center. Something like
this (though I haven't tried it to be sure):
<TablePane>
<columns>
<TablePane.Column width="-1"/>
<TablePane.Column width="1*"/>
</columns>
<rows>
<TablePane.Row>
<BoxPane orientation="horizontal">
<ImageView .../>
<ImageView .../>
...
<ImageView .../>
</BoxPane>
<BoxPane orientation="horizontal" styles="{horizontalAlignment:'right',
verticalAlignment:'center'}">
<PushButton wtkx:id="start" ... />
</BoxPane>
</TablePane.Row>
</rows>
</TablePane>
~Roger
On 5/9/12 3:47 AM, B.L. Zeebub wrote:
> Hi
>
> I've got the following snippet;
>
> <BoxPane orientation="horizontal">
> <ImageView wtkx:id="car" styles="{verticalAlignment:'center'}"/>
> <ImageView wtkx:id="vci_status" styles="{verticalAlignment:'bottom'}"/>
> <ImageView wtkx:id="pc" styles="{verticalAlignment:'center'}"/>
> <ImageView wtkx:id="pc_status" styles="{verticalAlignment:'bottom'}"/>
> <ImageView wtkx:id="server" styles="{verticalAlignment:'center'}"/>
>
> <PushButton wtkx:id="start" buttonData="Start Communications"
> styles="{font: {bold:true, size:12}}"/>
>
> </BoxPane>
>
> The problem I've got is that I want the button to appear on the far right of
> the window and centered in the box pane. When I try to add
> verticalAlignment='center',horizontalAlignment='right' to the styles
> attribute I get a runtime exception "Unable to access property "styles" for
> type org.apache.pivot.wtk.PushButton."
>
> How do I acheive what I want?
>
> Regards
>
> --
> View this message in context: http://apache-pivot-users.399431.n3.nabble.com/Alignment-tp3973763.html
> Sent from the Apache Pivot - Users mailing list archive at Nabble.com.
>
>
Re: Alignment
Posted by Sandro Martini <sa...@gmail.com>.
Hi,
> The problem I've got is that I want the button to appear on the far right of the window and centered in the box pane. When I try to add verticalAlignment='center',horizontalAlignment='right' to the styles attribute I get a runtime exception "Unable to access property "styles" for type org.apache.pivot.wtk.PushButton."
it's because it hasn't the style properties you are trying to set.
You should try to set alignment/fill properties/styles in Layout
Containers where the PushButton is put.
Or if you don't get the desired effect, try even to nest more
containers (even different types).
In the meantime, it's simpler to play with different options for
example in the Component Explorer sample application, and maybe even
with the BXMLExplorer sample app
Sorry but hadn't more time to be more precise ... maybe someone of us can.
Keep us updated.
Bye,
Sandro