SOLVED: Composite skinning
as far know there 2 ways skin custom components:
1) copy , paste base skin (spark.skins.spark.titlewindow etc.) , modify it;
2) create composite skin.
i have 1) working little large , looking cut down on size of skin. read post on extending skins suggested possible:
-- start: dialognoteskin.mxml --
<?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"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:skins="spark.skins.spark.*">
<fx:metadata>[hostcomponent("view.dialognote")]</fx:metadata>
<fx:script>
<![cdata[
import spark.components.group;
import spark.skins.spark.titlewindowskin;
public function contentgroup():group {
return titlewindowskin.contentgroup;
}
]]>
</fx:script>
<s:states>
<s:state name="normal" />
<s:state name="inactive" />
<s:state name="disabled" />
<s:state name="normalwithcontrolbar" />
<s:state name="inactivewithcontrolbar" />
<s:state name="disabledwithcontrolbar" />
<s:state name="closed" />
</s:states>
<skins:titlewindowskin id="titlewindowskin" left="0" right="0" top="0" bottom="0" />
</s:skin>
-- end: dialognoteskin.mxml --
where skins:titlewindowskin is included in dialognoteskin.mxml. end title window has black content area, , not draggable either:
know why doesn't work?
my original question hasn't been answered, have solution problem trying solve. thought composite skinning easiest way extend mxml component, saying goodbye templates , hello mxmlcontent has better answer. me 'trick' getting solution working open titlewindow , have base component starting s:group allows extended. base component added titlewindow. provided override public function set mxmlcontent function needs go mycontainer object , not mysubcontainer object tried @ first.
my working solution below, , won't long before flex mxml has extend keyword because find painful!
--- main.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:view="view.*">
<fx:script>
<![cdata[
import mx.managers.popupmanager;
import view.mytitlewindow;
private var mytitlewindow:mytitlewindow;
private function eventhandlerbuttonclick():void {
mytitlewindow = popupmanager.createpopup(this , mytitlewindow) mytitlewindow;
mytitlewindow.title = "my title window";
mytitlewindow.width = 300;
mytitlewindow.height = 300;
popupmanager.centerpopup(mytitlewindow);
}
]]>
</fx:script>
<s:button label="open title window" click="eventhandlerbuttonclick()" />
</s:application>
--- mytitlewindow.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:titlewindow 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:view="view.*">
<s:vgroup paddingtop="10" paddingright="10" paddingbottom="10" paddingleft="10">
<view:mysubcontainer width="300" height="300" />
</s:vgroup>
</s:titlewindow>
--- mycontainer.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:group 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:view="view.*">
<fx:script>
<![cdata[
/**
* add child components component.
*/
public override function set mxmlcontent(value:array):void {
var len:int = super.numelements;
(var i:int = len - 1 ; >= 0; --i) {
value.unshift(super.getelementat(i));
}
super.mxmlcontent = value;
}
]]>
</fx:script>
<s:layout>
<s:verticallayout/>
</s:layout>
<s:label text="my container text" />
</s:group>
--- mysubcontainer.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<view:mycontainer 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:view="view.*">
<s:label text="mysubcontainer text 1" />
<s:label text="mysubcontainer text 2" />
</view:mycontainer>
More discussions in Flex (Read Only)
adobe
Comments
Post a Comment