You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@pivot.apache.org by Jamal BERRICH <jb...@gmail.com> on 2012/06/26 18:23:21 UTC

PushButton : Alignement

Hi,
   I am using the a PushButton component with icon and i want to place the
icon on the right of the text.
   Can you help me plz?

<PushButton bxml:id="advancedButton"  styles="$styles.pushButtonStyles">
<content:ButtonData text="Avancé"
icon="/ma/easyexchange/module/common/img/next.png"/>
</PushButton>

Re: PushButton : Alignement

Posted by Jamal BERRICH <jb...@gmail.com>.
Hi and tks for your response,
    The problem is resolved with

getAdvancedButton().setDataRenderer(new WrappingButtonRenderer());
                class WrappingButtonRenderer extends ButtonDataRenderer {
           public WrappingButtonRenderer() {
            super();
            this.removeAll();
            this.add(this.label);
            this.add(this.imageView);
          }
          }


2012/6/26 Roger Whitcomb <Ro...@rbwhitcomb.com>

> Hi Jamal,
>         For that you would need a custom renderer for the PushButton.
>  Sample code for one that does something similar (wraps the button text) is
> below.  Basically, then, you would set this custom renderer as the renderer
> for your PushButton (see the BXML sample also below).  If you need to do
> more stuff than this sample shows, please look at the source for
> ButtonDataRenderer to see how to get access to the other parts of the
> control (like the icon).
>         Let us know if you have any problems.
>
> Cheers,
> ~Roger
>
> === WrappingButtonRenderer.java ===
>
> import org.apache.pivot.wtk.Button;
> import org.apache.pivot.wtk.HorizontalAlignment;
> import org.apache.pivot.wtk.Orientation;
> import org.apache.pivot.wtk.content.ButtonDataRenderer;
>
>
> public class WrappingButtonRenderer extends ButtonDataRenderer
> {
>         public WrappingButtonRenderer() {
>             setOrientation( Orientation.VERTICAL );
>             getStyles().put( "fill", true );
>             label.getStyles().put( "horizontalAlignment",
> HorizontalAlignment.CENTER );
>             label.getStyles().put("wrapText", true);
>         }
> }
>
>
> === about.bxml ===
> . . .
> <PushButton bxml:id="ourLicenseButton" preferredWidth="64"
> buttonData="%aboutBox.license" >
>        <dataRenderer>
>              <controls:WrappingButtonRenderer />
>        </dataRenderer>
> </PushButton>
> . . .
>
> On Jun 26, 2012, at 9:23 AM, Jamal BERRICH wrote:
>
> > Hi,
> >    I am using the a PushButton component with icon and i want to place
> the icon on the right of the text.
> >    Can you help me plz?
> >
> > <PushButton bxml:id="advancedButton"  styles="$styles.pushButtonStyles">
> >       <content:ButtonData text="Avancé"
> icon="/ma/easyexchange/module/common/img/next.png"/>
> > </PushButton>
> >
>
>

Re: PushButton : Alignement

Posted by Roger Whitcomb <Ro...@rbwhitcomb.com>.
Hi Jamal,
	For that you would need a custom renderer for the PushButton.  Sample code for one that does something similar (wraps the button text) is below.  Basically, then, you would set this custom renderer as the renderer for your PushButton (see the BXML sample also below).  If you need to do more stuff than this sample shows, please look at the source for ButtonDataRenderer to see how to get access to the other parts of the control (like the icon).
	Let us know if you have any problems.

Cheers,
~Roger

=== WrappingButtonRenderer.java ===

import org.apache.pivot.wtk.Button;
import org.apache.pivot.wtk.HorizontalAlignment;
import org.apache.pivot.wtk.Orientation;
import org.apache.pivot.wtk.content.ButtonDataRenderer;


public class WrappingButtonRenderer extends ButtonDataRenderer
{
        public WrappingButtonRenderer() {
            setOrientation( Orientation.VERTICAL );
            getStyles().put( "fill", true );
            label.getStyles().put( "horizontalAlignment", HorizontalAlignment.CENTER );
            label.getStyles().put("wrapText", true);
        }
}


=== about.bxml ===
. . .
<PushButton bxml:id="ourLicenseButton" preferredWidth="64" buttonData="%aboutBox.license" >
       <dataRenderer>
             <controls:WrappingButtonRenderer />
       </dataRenderer>
</PushButton>
. . .

On Jun 26, 2012, at 9:23 AM, Jamal BERRICH wrote:

> Hi, 
>    I am using the a PushButton component with icon and i want to place the icon on the right of the text.
>    Can you help me plz?
> 
> <PushButton bxml:id="advancedButton"  styles="$styles.pushButtonStyles">
> 	<content:ButtonData text="Avancé" icon="/ma/easyexchange/module/common/img/next.png"/>
> </PushButton>
>