You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by Arne Broedel <ar...@trainon.net> on 2013/08/15 20:43:33 UTC
Resizable Component that manages to keep its proportions
Hi Flex-Community,
I am skinning a Button with an icon. The Button should be sizable but keep
its proportions.
Its proportions width to height is 2 to 1. So every time the width is
changed the height shall change to width/2 and every time the height is
changed the width shall change to height*2.
Anyone can tell me a proper solution.
Thans
Re: Resizable Component that manages to keep its proportions
Posted by Arne Broedel <ar...@googlemail.com>.
thank you
2013/8/16 Alex Harui <ah...@adobe.com>
> Measure() would be called whenever invalidateSize() is called, which is
> not just when added to the container. But you are right that
> invalidateSize() isn't called when width or height is set. You could use
> event handlers or override the setters.
>
> Sounds like you got it working though.
>
> On 8/15/13 2:58 PM, "Arne Broedel" <ar...@googlemail.com> wrote:
>
> >but the measure method will only be invoked when adding the object to a
> >container. So it wont work on resize, does it?
> >The only way I could get it working is this script in my Button-Skin:
> >
> > protected function
> >sparkbuttonskin1_initializeHandler(event:FlexEvent):void
> >{
> >this.hostComponent.addEventListener("widthChanged",sizeChangeHandler);
> >this.hostComponent.addEventListener("heightChanged",sizeChangeHandler);
> > }
> >
> > protected function sizeChangeHandler(event:Event):void
> >{
> >switch (event.type)
> >{
> >case "widthChanged":
> >if(this.hostComponent.height!=this.hostComponent.width*2)
> >{
> >this.hostComponent.height=this.hostComponent.width*2;
> >}
> >break;
> >case "heightChanged":
> >if(this.hostComponent.width!=this.hostComponent.height/2)
> >{
> >this.hostComponent.width=this.hostComponent.height/2;
> >}
> > }
> >
> >}
> >
> >The propertyChanged Event, that I was trying to listen to in the first
> >place, is not dispatched by changing width and height. So it has to be
> >"widthChanged" and "heightChanged".
> >Moreover, and I dont know why, this only works on the hostComponent.
> >
> >
> >2013/8/15 Alex Harui <ah...@adobe.com>
> >
> >> In theory, in the measure() method, you would set measuredWidth or
> >> measuredHeight based on explicitHeight and/or explicitWidth
> >>
> >> On 8/15/13 11:43 AM, "Arne Broedel" <ar...@trainon.net> wrote:
> >>
> >> >Hi Flex-Community,
> >> >I am skinning a Button with an icon. The Button should be sizable but
> >>keep
> >> >its proportions.
> >> >Its proportions width to height is 2 to 1. So every time the width is
> >> >changed the height shall change to width/2 and every time the height is
> >> >changed the width shall change to height*2.
> >> >Anyone can tell me a proper solution.
> >> >Thans
> >>
> >>
>
>
Re: Resizable Component that manages to keep its proportions
Posted by Alex Harui <ah...@adobe.com>.
Measure() would be called whenever invalidateSize() is called, which is
not just when added to the container. But you are right that
invalidateSize() isn't called when width or height is set. You could use
event handlers or override the setters.
Sounds like you got it working though.
On 8/15/13 2:58 PM, "Arne Broedel" <ar...@googlemail.com> wrote:
>but the measure method will only be invoked when adding the object to a
>container. So it wont work on resize, does it?
>The only way I could get it working is this script in my Button-Skin:
>
> protected function
>sparkbuttonskin1_initializeHandler(event:FlexEvent):void
>{
>this.hostComponent.addEventListener("widthChanged",sizeChangeHandler);
>this.hostComponent.addEventListener("heightChanged",sizeChangeHandler);
> }
>
> protected function sizeChangeHandler(event:Event):void
>{
>switch (event.type)
>{
>case "widthChanged":
>if(this.hostComponent.height!=this.hostComponent.width*2)
>{
>this.hostComponent.height=this.hostComponent.width*2;
>}
>break;
>case "heightChanged":
>if(this.hostComponent.width!=this.hostComponent.height/2)
>{
>this.hostComponent.width=this.hostComponent.height/2;
>}
> }
>
>}
>
>The propertyChanged Event, that I was trying to listen to in the first
>place, is not dispatched by changing width and height. So it has to be
>"widthChanged" and "heightChanged".
>Moreover, and I dont know why, this only works on the hostComponent.
>
>
>2013/8/15 Alex Harui <ah...@adobe.com>
>
>> In theory, in the measure() method, you would set measuredWidth or
>> measuredHeight based on explicitHeight and/or explicitWidth
>>
>> On 8/15/13 11:43 AM, "Arne Broedel" <ar...@trainon.net> wrote:
>>
>> >Hi Flex-Community,
>> >I am skinning a Button with an icon. The Button should be sizable but
>>keep
>> >its proportions.
>> >Its proportions width to height is 2 to 1. So every time the width is
>> >changed the height shall change to width/2 and every time the height is
>> >changed the width shall change to height*2.
>> >Anyone can tell me a proper solution.
>> >Thans
>>
>>
Re: Resizable Component that manages to keep its proportions
Posted by Arne Broedel <ar...@googlemail.com>.
but the measure method will only be invoked when adding the object to a
container. So it wont work on resize, does it?
The only way I could get it working is this script in my Button-Skin:
protected function
sparkbuttonskin1_initializeHandler(event:FlexEvent):void
{
this.hostComponent.addEventListener("widthChanged",sizeChangeHandler);
this.hostComponent.addEventListener("heightChanged",sizeChangeHandler);
}
protected function sizeChangeHandler(event:Event):void
{
switch (event.type)
{
case "widthChanged":
if(this.hostComponent.height!=this.hostComponent.width*2)
{
this.hostComponent.height=this.hostComponent.width*2;
}
break;
case "heightChanged":
if(this.hostComponent.width!=this.hostComponent.height/2)
{
this.hostComponent.width=this.hostComponent.height/2;
}
}
}
The propertyChanged Event, that I was trying to listen to in the first
place, is not dispatched by changing width and height. So it has to be
"widthChanged" and "heightChanged".
Moreover, and I dont know why, this only works on the hostComponent.
2013/8/15 Alex Harui <ah...@adobe.com>
> In theory, in the measure() method, you would set measuredWidth or
> measuredHeight based on explicitHeight and/or explicitWidth
>
> On 8/15/13 11:43 AM, "Arne Broedel" <ar...@trainon.net> wrote:
>
> >Hi Flex-Community,
> >I am skinning a Button with an icon. The Button should be sizable but keep
> >its proportions.
> >Its proportions width to height is 2 to 1. So every time the width is
> >changed the height shall change to width/2 and every time the height is
> >changed the width shall change to height*2.
> >Anyone can tell me a proper solution.
> >Thans
>
>
Re: Resizable Component that manages to keep its proportions
Posted by Alex Harui <ah...@adobe.com>.
In theory, in the measure() method, you would set measuredWidth or
measuredHeight based on explicitHeight and/or explicitWidth
On 8/15/13 11:43 AM, "Arne Broedel" <ar...@trainon.net> wrote:
>Hi Flex-Community,
>I am skinning a Button with an icon. The Button should be sizable but keep
>its proportions.
>Its proportions width to height is 2 to 1. So every time the width is
>changed the height shall change to width/2 and every time the height is
>changed the width shall change to height*2.
>Anyone can tell me a proper solution.
>Thans