[flexcoders] Spark: Best way to reference mxml component hierarchy
Hello again, I've been making some headway on my Spark experimentation, but I've run into another road block. I was wondering if someone would be willing to offer some possible solutions. I'm trying to make a basic structured document. I would normally do this in Flex 3 by starting with the data and then creating some kind of factory to build the visual elements. I was hoping that the new Spark architecture would allow me to bridge that gap by defining my document structure using Groups. IE: s:MyDocument ..p:Page title=Page 1 / ..p:Page title=Page 2 p:Page title=Page 2.1 / p:Page title=Page 2.2 / ../p:Page ..p:Page title=Page 3 / /s:MyDocument I'm sure you get the idea.. These pages are then laid out using a SparkSkin. I need to be able to maintain a tree structure of document elements for various operations. My initial plan was to capture this.contentGroup in the partAdded function, and update node references as needed. However, it turns out that the skin adds adds on an additional complexity to the element hierarchy (which makes sense once I saw it). One solution is to recursively run up element.parent capturing my instances as I go, but I'm not sure if that's an ideal solution. Is there a way to reference the mxml element hierarchy as it's listed in the group? Any suggestions would be greatly appreciated. Thanks!
[flexcoders] Re: Binding and Spark Skins
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
[flexcoders] Binding and Spark Skins
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
