Quantcast
Channel: Apache Timeline
Viewing all articles
Browse latest Browse all 5648

Performance Problems with SkinnableContainer when adding multiline Label

$
0
0
Having a skinnableContainer as some panel I get huge problems with
performance when putting some multiline label in it...

What can I do to fix that?

(Is there actually any component available where I can add children in a
special (sub-)container in mxml (contentGroup like) without skinning?)

Here the test code...

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:navigationContent>
<s:Button label="test1" click="{navigator.pushView(TestView)}" />
<s:Button label="test2" click="{navigator.pushView(TestView2)}" />

</s:navigationContent>

</s:ViewNavigatorApplication>

*TestView:*
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:Panel percentWidth="94" >
<s:Label percentWidth="100" text="This is a Test." />
</s:Panel>
</s:View>

*TestView2:*
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">

<s:Panel skinClass="TestSkin" percentWidth="94">
<s:Label percentWidth="100"
text="This is a Test. This is a Test. This is a Test. This
is a Test. This is a Test. This is a Test. This is a Test. This is a Test.
This is a Test. This is a Test. This is a Test. This is a Test. This is a
Test. This is a Test. This is a Test. This is a Test. " />
</s:Panel>
</s:View>

*The Panel*
package

import spark.components.SkinnableContainer;

public class MyPanel extends SkinnableContainer

public function MyPanel()

super();
setStyle("skinClass", TestSkin);

override protected function commitProperties():void

super.commitProperties();

*The Skin*
<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5">

<fx:Metadata>
[HostComponent("MyPanel")]
</fx:Metadata>

<fx:Script>

</fx:Script>

<s:states>
<s:State name="normal"/>
<s:State name="disabled"/>
</s:states>

<s:Rect percentWidth="100" percentHeight="100" >
<s:fill>
<s:SolidColor color="#FFFFFF" />
</s:fill>
</s:Rect>

<s:Rect top="{sidePadding}" left="{sidePadding}" right="{sidePadding}"
bottom="{sidePadding}" >
<s:fill>
<s:SolidColor color="#F6F6F6" />
</s:fill>
</s:Rect>

<s:Rect height="{getStyle('titleBackgroundHeight')}" x="{sidePadding}"
y="{sidePadding}" width="{width - sidePadding * 2}">
<s:fill>
<s:SolidColor color="0xFF0000" />
</s:fill>
</s:Rect>

<s:Rect id="lineRect" >
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>

<s:BitmapImage id="titleIcon" scaleMode="letterbox" smooth="true" />

<s:Label id="titleLabel" styleName="panelHeader" />

<s:Group id="contentGroup" contentBackgroundColor="0xFF0000"
contentBackgroundAlpha="1">
</s:Group>

</s:Skin>

Viewing all articles
Browse latest Browse all 5648

Trending Articles