[flexcoders] Re: Binding and Spark Skins

2010-01-18 Thread Ariel J 
You are not tackling this right.

The component does not create the title bar as a child.
The skin will do that.

Check this out:

(1) Do the component in ActionScript. Declare the expected elements that the 
skin will define as variables. Define their behaviors and properties in the 
partAdded function.

package com.mycompany {
[SkinState(normal)]

public class HostComponent extends SkinnableContainer
{
[SkinPart(required=false)]
public var titleBar:IReportTitleBar

override protected function partAdded(partName:String,instance:Object):void
  {
if (instance == titleBar)
   {
titleBar.label = My Label;
// or use Binding: 
BindingUtils.bindPropert(titleBar,label,this,titleBarLabel);
}
  }
}

  // don't forget the partRemoved function, too

}

(2) Then, the skin only defines the titleBar using convenient MXML.

s:SparkSkin 
  fx:Metadata
[HostComponent(com.mycompany.HostComponent)] 
  /fx:Metadata
s:states
s:State name=normal/
/s:states
controls:DCDocTitleBar id=titleBar /
/s:SparkSkin



--- In flexcoders@yahoogroups.com, amiller.demandlending amil...@... wrote:

 Hi Everyone,
 
 I have a sub-component which uses a String binding on a Label. The bindings 
 works fine if I do not use a skinClass on the host component. If I do use a 
 SparkSkin, my bindings do not execute on the sub-component. Instead, I get 
 the value which I initialized it to.
 
 Am I doing something wrong, or is this expected behavior?
 
 If this is expected behavior, then what is the purpose of a SparkSkin if I 
 have to explicitly redeclare all my control code in the skin?
 
 I could just be misunderstanding the intended usage, but from what I 
 understood in the docs it seems like a very powerful new feature.
 
 Would anyone be able to enlighten me on the topic a bit more?
 
 
 Here is the trimmed code for my host/sub
 
 Host Component
 
 s:SkinnableContainer skinClass=demand.skins.DSDoc 
   fx:Metadata
   [SkinState(normal)]
   /fx:Metadata
   fx:Script
   ![CDATA[   
   [SkinPart(required=false)]
   public var titleBar:IReportTitleBar
   
   override protected function createChildren():void
   {
   if (!_titleBar)
   {
   _titleBar = new DCDocTitleBar();
   
 this.addElementAt(IVisualElement(_titleBar), 0);
   }
   super.createChildren();
   }
   ]]
   /fx:Script
 /s:SkinnableContainer
 ---
 
 The title bar sub-component
 
 s:SkinnableContainer 
   fx:Script
   ![CDATA[
   [Bindable]
   public var label:String=Incorrect Label;
   ]]
   /fx:Script
   s:Label text={this.label}/
 /s:SkinnableContainer
 
 
 The host component skin
 
 s:SparkSkin 
   fx:Metadata
   [HostComponent(demand.reports.DRDoc)] 
   /fx:Metadata
   s:states
   s:State name=normal/
   /s:states
   controls:DCDocTitleBar id=titleBar /
 /s:SparkSkin
 
 
 
 Thanks in advance!
 
 ~Aaron

[flexcoders] Re: Binding and Spark Skins

2010-01-18 Thread amiller.demandlending 

Ah..

So the component is strictly data/control code, and the skin is strictly visual 
code and layout. Very sweet.

Thanks for the insight.

Cheers!

~Aaron

--- In flexcoders@yahoogroups.com, Ariel J arielj...@... wrote:

 You are not tackling this right.
 
 The component does not create the title bar as a child.
 The skin will do that.
 
 Check this out:
 
 (1) Do the component in ActionScript. Declare the expected elements that the 
 skin will define as variables. Define their behaviors and properties in the 
 partAdded function.
 
 package com.mycompany {
 [SkinState(normal)]
 
 public class HostComponent extends SkinnableContainer
 {
 [SkinPart(required=false)]
 public var titleBar:IReportTitleBar
 
 override protected function 
 partAdded(partName:String,instance:Object):void
   {
 if (instance == titleBar)
{
 titleBar.label = My Label;
 // or use Binding: 
 BindingUtils.bindPropert(titleBar,label,this,titleBarLabel);
 }
   }
 }
 
   // don't forget the partRemoved function, too
 
 }
 
 (2) Then, the skin only defines the titleBar using convenient MXML.
 
 s:SparkSkin 
   fx:Metadata
 [HostComponent(com.mycompany.HostComponent)] 
   /fx:Metadata
   s:states
   s:State name=normal/
   /s:states
   controls:DCDocTitleBar id=titleBar /
 /s:SparkSkin
 
 
 
 --- In flexcoders@yahoogroups.com, amiller.demandlending amiller@ wrote:
 
  Hi Everyone,
  
  I have a sub-component which uses a String binding on a Label. The bindings 
  works fine if I do not use a skinClass on the host component. If I do use a 
  SparkSkin, my bindings do not execute on the sub-component. Instead, I get 
  the value which I initialized it to.
  
  Am I doing something wrong, or is this expected behavior?
  
  If this is expected behavior, then what is the purpose of a SparkSkin if I 
  have to explicitly redeclare all my control code in the skin?
  
  I could just be misunderstanding the intended usage, but from what I 
  understood in the docs it seems like a very powerful new feature.
  
  Would anyone be able to enlighten me on the topic a bit more?
  
  
  Here is the trimmed code for my host/sub
  
  Host Component
  
  s:SkinnableContainer skinClass=demand.skins.DSDoc 
  fx:Metadata
  [SkinState(normal)]
  /fx:Metadata
  fx:Script
  ![CDATA[   
  [SkinPart(required=false)]
  public var titleBar:IReportTitleBar
  
  override protected function createChildren():void
  {
  if (!_titleBar)
  {
  _titleBar = new DCDocTitleBar();
  
  this.addElementAt(IVisualElement(_titleBar), 0);
  }
  super.createChildren();
  }
  ]]
  /fx:Script
  /s:SkinnableContainer
  ---
  
  The title bar sub-component
  
  s:SkinnableContainer 
  fx:Script
  ![CDATA[
  [Bindable]
  public var label:String=Incorrect Label;
  ]]
  /fx:Script
  s:Label text={this.label}/
  /s:SkinnableContainer
  
  
  The host component skin
  
  s:SparkSkin 
  fx:Metadata
  [HostComponent(demand.reports.DRDoc)] 
  /fx:Metadata
  s:states
  s:State name=normal/
  /s:states
  controls:DCDocTitleBar id=titleBar /
  /s:SparkSkin
  
  
  
  Thanks in advance!
  
  ~Aaron