Hi,
I'm currently re-developping my website with the new Flex 4 SDK. I'm facing something weird :
I built a new panel, based on a skinnabled container. A couple of tweaking for the skin, and voilà , a nice look and feel ! 
But I'd like to add some more functionnalities : close and refresh button on the right and a toolbar in the middle. So, following what Peter Dehaan posted on his blog, I came up with the following class :
public class RoundPanel extends SkinnableContainer
{
[SkinPart(required="true")]
public var titleField:TextGraphicElement;
[SkinPart(required="true")]
public var headerGroup:Group;
private var _title:String;
public function get title():String
{
return _title;
}
public function set title(v:String):void
{
_title = v;
if (titleField) {
titleField.text = title;
}
}
private var _headerContent:Array;
[ArrayElementType("mx.core.IVisualElement")]
public function get headerContent():Array
{
return _headerContent;
}
public function set headerContent(v:Array):void
{
_headerContent = v;
if (headerGroup) {
headerGroup.removeAllElements();
var idx:int;
var len:int = v.length;
for (idx = 0; idx <len; idx++) {
headerGroup.addElement(v[idx]);
}
}
}
public function RoundPanel()
{
super();
}
override protected function partAdded(partName:String, instance:Object) : void
{
super.partAdded(partName, instance);
if (instance == headerGroup) {
if (headerGroup) {
headerGroup.removeAllElements();
var idx:int;
var len:int = _headerContent.length;
for (idx = 0; idx < len; idx++) {
headerGroup.addElement(_headerContent[idx]);
}
}
}
if (instance == titleField) {
titleField.text = title;
}
}
override protected function partRemoved(partName:String, instance:Object) : void
{
if (instance == headerGroup) {
if (headerGroup) {
headerGroup.removeAllElements();
}
}
super.partRemoved(partName, instance);
}
}
And its skin :
<s:Skin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:components="components.*">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
[HostComponent("components.RoundPanel")]
</fx:Metadata>
<s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" >
<s:stroke>
<s:SolidColorStroke color="#555555" />
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90" >
<s:GradientEntry color="0xFFFFFF" />
<s:GradientEntry color="0xE8E8E8" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group left="10" top="2">
<s:layout>
<s:HorizontalLayout gap="15" />
</s:layout>
<s:SimpleText id="titleField" lineBreak="explicit"
height="30" verticalAlign="middle" fontWeight="bold">
</s:SimpleText>
<s:HGroup gap="0" height="30" id="headerGroup" verticalAlign="middle"/>
</s:Group>
<s:Group id="contentGroup" top="35" width="100%" height="100%" minWidth="0" minHeight="0">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
</s:layout>
</s:Group>
</s:Skin>
I instantiate the component in the main app :
<components:RoundPanel title="Round Panel" id="panel"
skinClass="skins.RoundPanelSkin" width="400" height="200">
<components:headerContent>
<mx:Label text="HELLO" />
<mx:Label text="THE" />
<mx:Label text="WORLD" />
</components:headerContent>
<mx:Label text="Bonjour le monde" />
</components:RoundPanel>
But I don't get WHY the label "Bonjour le monde" does not show up as the contentGroup of the component.
Any ideas ?
5
Replies
Hi Ryan, thanks for your quick feedback.
I'm using the bundled SDK provided with Flash Builder IDE (build 7219). I tried to update for nightly builds (4.0.0.9779 and 4.0.0.9731). First I had an issue with netmon.swc (fix here). I started from scratch, and I can't get to make a blank project work with a nightly build. I get a lot of run time errors, eg :
VerifyError: Error #1014: La classe IVisualElement est introuvable.
ReferenceError: Error #1065: La variable CrossFade_CrossFadeShaderClass n'est pas définie.
ReferenceError: Error #1065: La variable Wipe_WipeShaderClass n'est pas définie.
ReferenceError: Error #1065: La variable _570c7241257ee0f196ff140330742c80c2cef4f4533628ef52e8cc8738e0a758_flash_display_Sprite n'est pas définie.
(Details in french, sorry 
).
Anyway, with the 7219 build, I tried several work arounds for this label tag that is supposed to be displayed as the content group of my component. In vain...
AdChoices