Re: Updating className

[santanu4ver]

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-tp12217p12238.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.