How do I get the Label element to reposition when using a StackPane?

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

How do I get the Label element to reposition when using a StackPane?

Erik Innocent
How do I get the Label element to reposition when using a StackPane? Right now I'm specifying the 'x' and 'y' attributes in my Label element in my bxml, but the Label remains stuck in the top, left corner of the screen. I have a simple code example demonstrating my issue here:


Am I doing it right, but there is a bug? Or am I doing it wrong, and should be doing it another way? Or does StackPane not function that way, and I should be using something else (like Panel)?

Note that I know I can use style elements like "horizontalAlignment:'center', verticalAlignment:'center'", but I need precise control over placement of the Label. I suppose I could use the padding style elements, but that seems hackish.

Thank you for your time and feedback!
--E


Reply | Threaded
Open this post in threaded view
|

Re: How do I get the Label element to reposition when using a StackPane?

Erik Innocent
Whoops, I forgot to mention that the sample SVG in the example is available at:


I've also mentioned the image source in a comment in the bxml.

Cheers,
--E



On Mon, Jul 22, 2013 at 8:10 PM, Erik Innocent <[hidden email]> wrote:
How do I get the Label element to reposition when using a StackPane? Right now I'm specifying the 'x' and 'y' attributes in my Label element in my bxml, but the Label remains stuck in the top, left corner of the screen. I have a simple code example demonstrating my issue here:


Am I doing it right, but there is a bug? Or am I doing it wrong, and should be doing it another way? Or does StackPane not function that way, and I should be using something else (like Panel)?

Note that I know I can use style elements like "horizontalAlignment:'center', verticalAlignment:'center'", but I need precise control over placement of the Label. I suppose I could use the padding style elements, but that seems hackish.

Thank you for your time and feedback!
--E



Reply | Threaded
Open this post in threaded view
|

RE: How do I get the Label element to reposition when using a StackPane?

Roger Whitcomb-2

Thanks for the link to the SVG – I was having trouble without it ;)

 

I did some playing around, and was able to get the effect you wanted by doing this:

<Window title="Labels" maximized="true" xmlns:bxml="http://pivot.apache.org/bxml"

    xmlns="org.apache.pivot.wtk">

    <StackPane bxml:id="mainContainer" styles="{backgroundColor:'#cccccc'}">

        <ImageView bxml:id="background" image="@Usa_counties_large.svg"

            styles="{horizontalAlignment:'left', verticalAlignment:'top', fill:true, preserveAspectRatio:true}" />

        <BoxPane styles="{padding:{left:100,top:100}}">

            <Label bxml:id="countyLabel" text="King County"

                styles="{font:'Helvetica bold 24', color:'red', wrapText:true}" />

        </BoxPane>

    </StackPane>

</Window>

 

The difficulty is that StackPane lays out its children only according to its padding values (see StackPaneSkin.java method “layout()”).  This effectively overrides the x and y values in the BXML file.  So, adding in the BoxPane around the Label allows its padding to be used to layout the Label where you want it.

 

Another way to do it, in order to override the label’s location that is being set during the layout process, is to do it in the Java code like this (which effectively allows the layout process to happen, which will set the label’s location according to the StackPane’s padding, but then will reposition it to where you want it).

    @Override///

    public void startup(Display display, Map<String, String> properties) throws Exception

    {

        final BXMLSerializer bxmlSerializer = new BXMLSerializer();

        window = (Window) bxmlSerializer.readObject(StackPaneLabelRepositionExample.class, "StackPaneLabelRepositionExample.bxml");

        window.open(display);

        ApplicationContext.queueCallback(new Runnable() {

            @Override

            public void run() {

                Label label = (Label)bxmlSerializer.getNamespace().get("countyLabel");

                label.setLocation(100, 100);

            }

        });

    }

 

The point being that the container plays the most important role in positioning its children during the “layout()” method/process, but you can also override this afterwards.  But note that with the code this way, if I resize the main window, the label will jump back to the 0,0 position, so the “setLocation” code I’ve highlighted would also have to be called in response to a window resize event.

 

HTH,

~Roger

 

From: Erik Innocent [mailto:[hidden email]]
Sent: Tuesday, July 23, 2013 7:35 AM
To: user
Subject: Re: How do I get the Label element to reposition when using a StackPane?

 

Whoops, I forgot to mention that the sample SVG in the example is available at:

 

 

I've also mentioned the image source in a comment in the bxml.

 

Cheers,

--E

 

 

On Mon, Jul 22, 2013 at 8:10 PM, Erik Innocent <[hidden email]> wrote:

How do I get the Label element to reposition when using a StackPane? Right now I'm specifying the 'x' and 'y' attributes in my Label element in my bxml, but the Label remains stuck in the top, left corner of the screen. I have a simple code example demonstrating my issue here:

 

 

Am I doing it right, but there is a bug? Or am I doing it wrong, and should be doing it another way? Or does StackPane not function that way, and I should be using something else (like Panel)?

 

Note that I know I can use style elements like "horizontalAlignment:'center', verticalAlignment:'center'", but I need precise control over placement of the Label. I suppose I could use the padding style elements, but that seems hackish.

 

Thank you for your time and feedback!

--E

 

 

 

Reply | Threaded
Open this post in threaded view
|

Re: How do I get the Label element to reposition when using a StackPane?

Marek Repak
remove me from here


On 23 July 2013 18:34, Roger L. Whitcomb <[hidden email]> wrote:

Thanks for the link to the SVG – I was having trouble without it ;)

 

I did some playing around, and was able to get the effect you wanted by doing this:

<Window title="Labels" maximized="true" xmlns:bxml="http://pivot.apache.org/bxml"

    xmlns="org.apache.pivot.wtk">

    <StackPane bxml:id="mainContainer" styles="{backgroundColor:'#cccccc'}">

        <ImageView bxml:id="background" image="@Usa_counties_large.svg"

            styles="{horizontalAlignment:'left', verticalAlignment:'top', fill:true, preserveAspectRatio:true}" />

        <BoxPane styles="{padding:{left:100,top:100}}">

            <Label bxml:id="countyLabel" text="King County"

                styles="{font:'Helvetica bold 24', color:'red', wrapText:true}" />

        </BoxPane>

    </StackPane>

</Window>

 

The difficulty is that StackPane lays out its children only according to its padding values (see StackPaneSkin.java method “layout()”).  This effectively overrides the x and y values in the BXML file.  So, adding in the BoxPane around the Label allows its padding to be used to layout the Label where you want it.

 

Another way to do it, in order to override the label’s location that is being set during the layout process, is to do it in the Java code like this (which effectively allows the layout process to happen, which will set the label’s location according to the StackPane’s padding, but then will reposition it to where you want it).

    @Override///

    public void startup(Display display, Map<String, String> properties) throws Exception

    {

        final BXMLSerializer bxmlSerializer = new BXMLSerializer();

        window = (Window) bxmlSerializer.readObject(StackPaneLabelRepositionExample.class, "StackPaneLabelRepositionExample.bxml");

        window.open(display);

        ApplicationContext.queueCallback(new Runnable() {

            @Override

            public void run() {

                Label label = (Label)bxmlSerializer.getNamespace().get("countyLabel");

                label.setLocation(100, 100);

            }

        });

    }

 

The point being that the container plays the most important role in positioning its children during the “layout()” method/process, but you can also override this afterwards.  But note that with the code this way, if I resize the main window, the label will jump back to the 0,0 position, so the “setLocation” code I’ve highlighted would also have to be called in response to a window resize event.

 

HTH,

~Roger

 

From: Erik Innocent [mailto:[hidden email]]
Sent: Tuesday, July 23, 2013 7:35 AM
To: user
Subject: Re: How do I get the Label element to reposition when using a StackPane?

 

Whoops, I forgot to mention that the sample SVG in the example is available at:

 

 

I've also mentioned the image source in a comment in the bxml.

 

Cheers,

--E

 

 

On Mon, Jul 22, 2013 at 8:10 PM, Erik Innocent <[hidden email]> wrote:

How do I get the Label element to reposition when using a StackPane? Right now I'm specifying the 'x' and 'y' attributes in my Label element in my bxml, but the Label remains stuck in the top, left corner of the screen. I have a simple code example demonstrating my issue here:

 

 

Am I doing it right, but there is a bug? Or am I doing it wrong, and should be doing it another way? Or does StackPane not function that way, and I should be using something else (like Panel)?

 

Note that I know I can use style elements like "horizontalAlignment:'center', verticalAlignment:'center'", but I need precise control over placement of the Label. I suppose I could use the padding style elements, but that seems hackish.

 

Thank you for your time and feedback!

--E