Peter is correct for the general case. Most folks trying to create new components should be working with the 0.6.0 nightly builds since they are set up with the conditional compile directives.
However, SolidBackgroundBead is only used for SWFs since the DIV used by Container in HTML already supports backgroundColor (or should unless we have a bug). So as Peter says, you shouldn't need to use conditional compile, and just add a new listener to the host for the event. The source is not only in Github, but should also be in your FlexJS SDK folders in frameworks/projects. If you are using Flash Builder, you will need to set up your own source links for the FlexJS SWCs. Flash Builder doesn't know how to do it automatically. HTH, -Alex On 3/15/16, 4:58 AM, "Peter Ent" <[email protected]> wrote: >Hi, > >I believe you need a new version of the Falcon compiler that supports the >COMPILE::AS3 and COMPILE::JS directives, but I don't think you need to use >them for this task. > >It looks like you have the right idea, but you don't need to separate the >event listeners in the strand function, just > >IEventDispatcher(value).addEventListener("classNameChanged", >classNameChangedHandler); > > >will do. This is generic FlexJS code that will cross-compile to JavaScript >into the right thing. In general, the code >separation is for cases where the cross-compiled (AS3 - into - JS) >JavaScript really isn't correct and/or efficient. > >Further, if you subclass SolidBackgroundBead, I think the only thing you >need to is > >1. Override the strand-setter function and add in your "classNameChanged" >event handler on the strand. > >2. In your classNameChanged handler, grab the style you want using >ValuesManager. > >3. Then use the SolidBackgroundBead's backgroundColor property setter to >change the background color: > > this.backgroundColor = newColorFromStyle; > >and that should work or be very close to it. I don't think you need the >compiler directives at all. > >Peter Ent >Adobe Systems/Apache Flex Project > >On 3/15/16, 7:17 AM, "santanu4ver" <[email protected]> wrote: > >>I'm still struggling creating my own custom SolidBackgroundBead as >>suggested >>by Alex. Maybe my concepts to beads, strands etc. not clear yet. >> >>Previously I tried by following >>https://cwiki.apache.org/confluence/display/FLEX/Creating+Components Wiki >>page where it shows how to create custom bead. I soon got compiler errors >>"Can not resolve config constant: 'AS3'" when tried to implement >>something >>like this as shown in example codes: >> >> >> >>/override public function set strand(value:IStrand):void >>{ >> super.strand(value); >> >> var containerView: IContainerView = value.getBeadByType(IContainerView) >>as >>IContainerView; >> if (containerView) >> { >> COMPILE::AS3 >> { >> >> IEventDispatcher(value).addEventListener("classNameChanged", >>classNameChangedHandler); >> } >> COMPILE::JS >> { >> var host:UIBase = _strand as UIBase; >> var e:HTMLInputElement = host.element as >> HTMLInputElement; >> e.addEventListener('classNameChanged', validateInput); >> } >> } >>}/ >> >> >> >>Soon when things are starts going off my head, Olaf suggested with the >>link >>to SolidBackgroundBead class at Github. I haven't found any >>COMPILE:AS3/JS >>references there, though. I tried to move more by following the class >>file >>codes, many fields and methods in SolidBackgroundBead are private, so I >>required to re-reference same fields/methods in my custom class again: >> >> >> >>/public class SolidBackgroundBeadWithStyleWatchers extends >>SolidBackgroundBead implements IBead >>{ >> private var host:IUIBase; >> private var _strand:IStrand; >> >> public function SolidBackgroundBeadWithStyleWatchers() >> { >> super(); >> } >> >> override public function set strand(value:IStrand):void >> { >> super.strand(value); >> _strand = value; >> >> var containerView: IContainerView = >> value.getBeadByType(IContainerView) >>as >>IContainerView; >> if (containerView) >> { >> if (value is IUIBase) >> host = IUIBase(value); >> else if (value is IBeadView) >> host = IUIBase(IBeadView(value).host); >> >> >> IEventDispatcher(value).addEventListener("classNameChanged", >>classNameChangedHandler); >> } >> } >> >> private function classNameChangedHandler(event:Event):void >> { >> var bgColor:Object = ValuesManager.valuesImpl.getValue(host, >>"background-color"); >> if( bgColor != null ) { >> backgroundColor = >> ValuesManager.valuesImpl.convertColor(bgColor); >> changeHandler(null); >> } >> } >> >> private function changeHandler(event:Event):void >> { >> var g:Graphics = Sprite(host).graphics; >> var w:Number = host.width; >> var h:Number = host.height; >> >> var gd:IGraphicsDrawing = >> _strand.getBeadByType(IGraphicsDrawing) as >>IGraphicsDrawing; >> if( this == gd ) g.clear(); >> >> g.beginFill(backgroundColor,opacity); >> if (isNaN(borderRadius)) >> g.drawRect(0, 0, w, h); >> else >> g.drawRoundRect(0, 0, w, h, borderRadius * 2); >> g.endFill(); >> } >>}/ >> >> >> >>Inside MXML file I declared styles: >> >>/<fx:Style> >> @namespace basic "library://ns.apache.org/flexjs/basic"; >> >> basic|Container >> { >> iBackgroundBead: >>ClassReference("views.SolidBackgroundBeadWithStyleWatchers"); >> } >> >> .widgetStateNormal >> { >> background-color: #ffff00; >> borders-style: solid; >> border-width: 2; >> border-color: #ff00ff; >> } >> .widgetStateSelected >> { >> background-color: #ff0000; >> borders-style: solid; >> border-width: 2; >> border-color: #ff00ff; >> } >></fx:Style> >> >>... >> >><js:Container id="cont" width="20%" height="100%" >>className="widgetStateNormal"> >> <js:TextButton text="HIT" click="onTextBClick(event)"/> >></js:Container> >> >>... >> >>protected function onTextBClick(event:org.apache.flex.events.Event):void >>{ >> cont.className = "widgetStateSelected"; >>}/ >> >> >> >>When application ran, I got error in /*super.strange(value)*/ line >>saying: >>"Illegal read of write-only property strand on >>org.apache.flex.html.beads.SolidBackgroundBead." I noticed value:IStrand >>is >>coming Container. >> >> >>/override public function set strand(value:IStrand):void >>{ >> super.strand(value); >> ... >>}/ >> >> >> >>I also like to note again that we specially interested in HTML outputs by >>FlexJS. >> >> >> >>-- >>View this message in context: >>http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217 >>p >>12238.html >>Sent from the Apache Flex Users mailing list archive at Nabble.com. >
