A Tip on Panel Control in Flex.

June 8, 2009

Ok here is the Question to me, How to display html text for the title text of the Panel ?.

Solution:

var tfTitle:IUITextField=panel.mx_internal::getTitleTextField();
tfTitle.htmlText=”This is <B><FONT COLOR=’#FF0000′>Panel Title</FONT></B>”;

Here panel is the id of the Panel Control used. Enjoy the post.


Smoothing the resizing of layout’s in flex with effects.

January 25, 2008

For example suppose that there is an App where you wanted a Panel control to resize on click of button, then u would probably use setting the width and height of the panel.Which will resize the Layout, but the resize is not smooth [i.e immediate movement in resize] ,so we have to slow down the resize so that it looks fine [smooth].

So here we have to use a tag called <mx:Resize /> to achieve this.

Example :

<mx:Resize duration=”2000″ id=”r1″/>

Now this resize Effect can be included with any layouts.

Here iam using a Canvas, below one shows it.,

<mx:Canvas id=”cnv” width=”50%” height=”100%” resizeEffect=”r1″>
<mx:Panel layout=”absolute” id=”p” height=”100%” width=”100%”>
<mx:ControlBar horizontalAlign=”center”>
<mx:Button label=”FullScreen” click=”fullscreen()” id=”f”/>
<mx:Button label=”Compact” click=”compact()” id=”c”/>
</mx:ControlBar>
</mx:Panel>
</mx:Canvas>

Here resizeEffect is the property iam using [in canvas] to specify the resize effect to the canvas.

And the functions are here which will move the canvas. to full screen.,

<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.controls.Alert;
private function fullscreen():void
{
cnv.width=this.screen.width-100;
}
private function compact():void
{
cnv.width=(this.width)/2.2;
}

]]>
</mx:Script>

So atlast the the resize of canvas is smoothen by using resize effect..using <mx:Resize /> Tag and resizeEffect Property. simple and small but very use full.


Follow

Get every new post delivered to your Inbox.