flex-users mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Peter Ent <p...@adobe.com>
Subject Re: Updating className
Date Tue, 15 Mar 2016 11:58:59 GMT
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" <santanu4ver@gmail.com> 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-tp12217p
>12238.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.


Mime
View raw message