You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by santanu4ver <sa...@gmail.com> on 2016/03/14 10:11:23 UTC
Updating className
Hi,
Is it possible to update a Container's className property? I
programmatically tried to update className value to Container but couldn't
able to.
Thanks.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by OK <OK...@edscha.com>.
>This way only one TextInput control has the extra code.
Thanks Peter, I think I've got it ;-)
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12242.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Peter Ent <pe...@adobe.com>.
That's correct. For example, the TextInput component does not have the
capability to mask input for passwords. But there is a bead you can add to
it (org.apache.flex.html.accessories.PasswordInputBead) that listens for
changes to the text and replaces it with "*". This way only one TextInput
control has the extra code.
Peter Ent
Adobe Systems/Apache Flex Project
On 3/15/16, 6:47 AM, "OK" <OK...@edscha.com> wrote:
>>In FlexJS, PAYG will commonly be implemented with different beads
>
>Only to make sure if I got it right:
>Does this concept mean that instead of having one fat component that
>implements all the features that probably makes sense for this component
>there're a couple of small beads that respectively implements only a
>subset
>of features according the special characteristic of this bead?
>So that during application development we have to choose the bead that
>best
>fits our needs?
>
>Thanks for help,
>Olaf
>
>
>
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p
>12237.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by sankar <sa...@gmail.com>.
Alex Harui wrote
> There is an example in
> examples/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml. A
> LayoutChangeNotifier is used to hook up the BindableCSSStyles to the
> layout.
I know it's a quite old issue but after some brief time I tested the my
original source with latest 0.8.0 nightly build. I tested with
/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml only. Existing
BindableCSSStyle worked great with border style! But it fails when I tried
to change the container's background color by the same style usage:
> <js:style>
>
> <js:BindableCSSStyles id="borderStyles" borderStyle="solid"
> borderWidth="1"
> borderColor="#FFFFFF" backgroundColor="#FFFFFF"/>
> </js:style>
> ...
> private function rollOverHandler(event:MouseEvent):void
> {
> borderStyles.borderColor = "#0000ff";
> borderStyles.backgroundColor = "#00ffff";
> //style["dropShadowEnabled"] = true;
> buttons.visible = true;
> }
The background color never changed in my tests. Is backgroundColor broken to
the said css styling?
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p14315.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/16/16, 3:30 AM, "santanu4ver" <sa...@gmail.com> wrote:
>Alex Harui wrote
>>>3. Passing border styles through 'className' styles never worked in HTML
>>>version (nor in SWF version). This only I able to worked through
>>>
>> <js:SimpleCSSStyles/>
>> . Does border styles through 'className' property is
>>>not supportable?
>>
>> For a Container? Or some other component? Some components have styles
>> defined in defaults.css. There might be a bug in order of precedence.
>> Border should work as expected so further investigation is needed.
>
>For Container.
Make sure you are using valid CSS for the border styles. The Spark and MX
components didn't use valid CSS as values or style names. If that still
isn't working, then file another JIRA with a simple test case.
>
>
>Alex Harui wrote
>> SimpleCSSStyles also expects the styles won't change. There is a
>> BindableCSSStyles class that dispatches valueChange events when you
>>change
>> the style properties. Your new version of SolidBackgroundBead may want
>>to
>> check for changes there as well. Similar work is needed for
>> SingleLineBorderBead.
>
>How this BindableCSSStyles works? Is there any working example/codes
>against
>this that I can follow? So far I tried these but nothing worked out:
>
>/<js:Container id="cont" width="20%" height="100%">
> <js:style>
> <js:BindableCSSStyles id="bcss" borderStyle="solid" borderWidth="2"
>borderColor="#ffffff" backgroundColor="#0000ff"/>
> </js:style>
> <js:Label text="3"/>
></js:Container>/
There is an example in
examples/flexjs/FlexJSStore/productsView/ProductCatalogThumbnail.mxml. A
LayoutChangeNotifier is used to hook up the BindableCSSStyles to the
layout.
I know that seems like a lot of extra steps because it is. It shows how
PAYG is more verbose but gives you more control. Otherwise, all of the
MXML component tags in ProductCatalogThumbnail end up watching for change
events that never happen, and if that helps you meet your performance or
size goals, then it is probably worth it. But the cool thing about
composition of small "beads" is that common patterns can be composited
together into a single tag so there are fewer steps, but potentially
unused or fatter code. So someone may get tired of putting
BindableCSSStyles and LayoutChangeNotifiers in and create a
LayoutNotifyingCSSStyles widget that directly dispatches an event to the
layout, saving you a step, but at the cost of adding event listeners that
may never fire.
HTH,
-Alex
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
Alex Harui wrote
>>3. Passing border styles through 'className' styles never worked in HTML
>>version (nor in SWF version). This only I able to worked through
>>
> <js:SimpleCSSStyles/>
> . Does border styles through 'className' property is
>>not supportable?
>
> For a Container? Or some other component? Some components have styles
> defined in defaults.css. There might be a bug in order of precedence.
> Border should work as expected so further investigation is needed.
For Container.
Alex Harui wrote
> SimpleCSSStyles also expects the styles won't change. There is a
> BindableCSSStyles class that dispatches valueChange events when you change
> the style properties. Your new version of SolidBackgroundBead may want to
> check for changes there as well. Similar work is needed for
> SingleLineBorderBead.
How this BindableCSSStyles works? Is there any working example/codes against
this that I can follow? So far I tried these but nothing worked out:
/<js:Container id="cont" width="20%" height="100%">
<js:style>
<js:BindableCSSStyles id="bcss" borderStyle="solid" borderWidth="2"
borderColor="#ffffff" backgroundColor="#0000ff"/>
</js:style>
<js:Label text="3"/>
</js:Container>/
Upon some click event I tried these:
/protected function onTextBClick(event:org.apache.flex.events.Event):void
{
var bgColor:Object = ValuesManager.valuesImpl.getValue(cont,
"backgroundColor"); // got 255 (blue)
if( bgColor != null )
{
bgColor = 16711680; // modified to red
// TEST 1 - fails
ValuesManager.valuesImpl.newInstance(cont, "backgrounColor", null,
ValuesManager.valuesImpl.convertColor(bgColor));
// TEST 2 - fails
bcss.backgroundColor = ValuesManager.valuesImpl.convertColor(bgColor);
}
}/
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12261.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/15/16, 9:54 PM, "santanu4ver" <sa...@gmail.com> wrote:
>Hello everyone. Thank you, for taking yours time out to helping me solve
>this
>problem.
>
>
>Peter Ent wrote
>> 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.
>
>Does that mean I do not need to call /changeHandler()/ after this?
I think so. The background needs to be redrawn.
>
>
>Alex Harui wrote
>> 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).
>
>1. I noticed that updating 'className' property with another style updates
>in HTML version (background-color) which supports your saying.
>2. Since we purely interested in HTML output, we may want to emphasis on
>how
>it's working on HTML version
The className property in HTML is mapped directly to the element's
className. In the SWF version, we have to emulate all that functionality
ourselves, in various beads.
>
>3. Passing border styles through 'className' styles never worked in HTML
>version (nor in SWF version). This only I able to worked through
><js:SimpleCSSStyles/>. Does border styles through 'className' property is
>not supportable?
For a Container? Or some other component? Some components have styles
defined in defaults.css. There might be a bug in order of precedence.
Border should work as expected so further investigation is needed.
>
>4. If <js:SimpleCSSStyles/> ONLY able to give us ability to modify border
>styles, then I would like to discuss how to update this style instead of
>'className' property.
SimpleCSSStyles also expects the styles won't change. There is a
BindableCSSStyles class that dispatches valueChange events when you change
the style properties. Your new version of SolidBackgroundBead may want to
check for changes there as well. Similar work is needed for
SingleLineBorderBead.
>5. Why <js:SimpleCSSStyles/> has 'verticalAlign' but not
>'horizontalAlign'?
>Moreover, why the property is not working expectedly in HTML or SWF
>output?
AIUI, CSS does not have a horizontalAlign property. The Spark component
set will support it since it is trying to emulate existing Spark behavior,
but the basic component set is trying to wrap low level HTML elements. I
don't know why verticalAlign isn't working in the HTML version. If it
isn't working in the SWF version it is probably a bug. Feel free to
investigate a fix, or file a JIRA bug.
>6. If I declare both 'className' and <js:SimpleCSSStyles/> to a Container,
>which style should take preference?
SimpleCSSStyles has precedence. It is just like setting element.styles
directly.
>
>
>Lots of questions, but I think this also a learning curve for me/us.
>Thanks
>for yours patience and staying long with me!
>
It is a learning curve for us as well as we learn what we haven't
communicated about FlexJS and what bugs are still out there. Thank you
for being patient and working with us. Again, I am shutting down for the
evening. I will look at your JIRA issues tomorrow.
Thanks,
-Alex
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
Hello everyone. Thank you, for taking yours time out to helping me solve this
problem.
Peter Ent wrote
> 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.
Does that mean I do not need to call /changeHandler()/ after this?
Alex Harui wrote
> 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).
1. I noticed that updating 'className' property with another style updates
in HTML version (background-color) which supports your saying.
2. Since we purely interested in HTML output, we may want to emphasis on how
it's working on HTML version
3. Passing border styles through 'className' styles never worked in HTML
version (nor in SWF version). This only I able to worked through
<js:SimpleCSSStyles/>. Does border styles through 'className' property is
not supportable?
4. If <js:SimpleCSSStyles/> ONLY able to give us ability to modify border
styles, then I would like to discuss how to update this style instead of
'className' property.
5. Why <js:SimpleCSSStyles/> has 'verticalAlign' but not 'horizontalAlign'?
Moreover, why the property is not working expectedly in HTML or SWF output?
6. If I declare both 'className' and <js:SimpleCSSStyles/> to a Container,
which style should take preference?
Lots of questions, but I think this also a learning curve for me/us. Thanks
for yours patience and staying long with me!
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12254.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
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" <pe...@adobe.com> 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" <sa...@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-tp12217
>>p
>>12238.html
>>Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
Re: Updating className
Posted by Peter Ent <pe...@adobe.com>.
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" <sa...@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.
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
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.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/16/16, 12:53 AM, "OK" <OK...@edscha.com> wrote:
>Thanks for your detailed explanation Alex!
>
>Only to give you some feedback as application developer:
>For me there's no concern to have a vast number of beads where we can
>choose
>from as long there's a fair chance to find the beed wich best fits the
>needs
>during application development ;-)
Yep. Deciding which bead to use could be challenging, but I believe we
may write tools to help you figure it out, and/or the cost of trying a
bead will be low enough that you can quickly try it and toss it out. And
as I just said to santanu, common combinations of beads can be composited
into a single bead to simply your choices, but usually at a cost.
In the US, there are some big hardware stores with dozens of tool choices.
I went to buy a drill the other day and there were probably 40 drills of
different shapes, sizes and prices. I finally picked one and it turned
out to be good enough. If it wasn't I would have returned it. But some
day, if I find it is too big to fit in a small space I need to drill in, I
may need to go back and get a smaller one.
The direct analogy to Flex and FlexJS is that Flex had one big drill with
dozens of options on it. You could grab it and use it on most jobs. But
when you needed to optimize for size, you couldn't make it smaller or
lighter. In FlexJS, by starting with individual pieces, we guarantee that
you can make things smaller even if the first drill you buy is composited
with dozens of options.
So in both real hardware stores and FlexJS, you can start with the one
with more options that will work in most cases, and then worry about
optimization later, but at least you will have a choice.
HTH,
-Alex
Re: Updating className
Posted by OK <OK...@edscha.com>.
Thanks for your detailed explanation Alex!
Only to give you some feedback as application developer:
For me there's no concern to have a vast number of beads where we can choose
from as long there's a fair chance to find the beed wich best fits the needs
during application development ;-)
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12259.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/15/16, 3:47 AM, "OK" <OK...@edscha.com> wrote:
>>In FlexJS, PAYG will commonly be implemented with different beads
>
>Only to make sure if I got it right:
>Does this concept mean that instead of having one fat component that
>implements all the features that probably makes sense for this component
>there're a couple of small beads that respectively implements only a
>subset
>of features according the special characteristic of this bead?
>So that during application development we have to choose the bead that
>best
>fits our needs?
Well, it depends. Another important principle in FlexJS is the support
for multiple component sets as opposed to trying to get everyone to use
just Spark or MX in the regular Flex SDK. Yet another important principle
in FlexJS is increased usage of composition instead of subclassing to add
new features and functions. What I think will happen is that there will
be popular fat component sets that are composited from lots of beads that
folks will default to using for rapid development. Then if you run into
performance and size issues, you can try swapping in lightweight component
sets and build back the functionality you need by compositing beads used
in the fat component sets.
Other folks may always want to start with the lightweight component set
and build up and are ok with making a lot of decisions and pulling in
beads and swapping out other beads as they go. The current component set
in FlexJS is intended to be the lightweight set. I am currently
investigating the practicality of developing a component set that more
closely mirrors the MX and Spark component sets which will be a really fat
component set.
The thing I am really trying to achieve is flexibility in the "last mile".
While it was really simple in the regular Flex SDK to take the Spark
components and build and app, I saw plenty of examples where a customer's
deadline was approaching and they were running into performance and size
issues and couldn't break out code in Spark they weren't using. By trying
to make sure component developers take the time to use fine-grain
encapsulation of functionality into beads and build components by
compositing beads, we will give application developers options on how to
build and tune their apps.
There is a concern that the number of choices might be overwhelming, but I
believe that tools and internet articles will emerge to help you make
those choices, and the cost of trying different choices will be low. This
is sort of true in the HTML world today: you can grab a snippet of JS
from Stack Overflow, try it, and discard it if it doesn't work for you.
HTH,
-Alex
Re: Updating className
Posted by OK <OK...@edscha.com>.
>In FlexJS, PAYG will commonly be implemented with different beads
Only to make sure if I got it right:
Does this concept mean that instead of having one fat component that
implements all the features that probably makes sense for this component
there're a couple of small beads that respectively implements only a subset
of features according the special characteristic of this bead?
So that during application development we have to choose the bead that best
fits our needs?
Thanks for help,
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12237.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by OK <OK...@edscha.com>.
> I also not able to see inside SolidBackgroundBead class as it's compiled
> by HTML.swc.
Perhaps this helps until the other quys who know what they are talking about
are back:
https://github.com/apache/flex-asjs/blob/e52e01764faa76dec2a983ccaebca5673d2935b9/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/beads/SolidBackgroundBead.as
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12235.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
> I think in the strand setter you can add another listener for the
> classNameChanged event. That handler needs to update the backgroundColor
> property by calling ValuesManager, then call the changeHandler.
Thank you for startup ideas, Alex. However I'm unable to understand to which
object I should listen classNameChanged event? I also not able to see inside
SolidBackgroundBead class as it's compiled by HTML.swc.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12234.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/14/16, 10:58 PM, "santanu4ver" <sa...@gmail.com> wrote:
>
>> If you want to try to create the missing beads, we'll be happy to try to
>> help you get started.
>
>Thank you Alex, yes I would like to try. Let me know how to proceed. Here
>in
>our organisation we really likes to see FlexJS comes out a solid
>development
>platform for browser HTML written in ActionScript.
>
I think you should be able to take a copy of SolidBackgroundBead and call
it something like SolidBackgroundBeadWithStyleWatchers (another option is
to try to subclass SolidBackgroundBead).
I think in the strand setter you can add another listener for the
classNameChanged event. That handler needs to update the backgroundColor
property by calling ValuesManager, then call the changeHandler.
You would test that out in your app by defining a custom CSS selector for
the Container:
Container
{
iBackgroundBead:
ClassReference("org.apache.flex.html.beads.SolidBackgroundBeadWithStyleWatc
hers");
}
I may have forgotten something, so let us know how it goes. I'm shutting
down for tonight but will check in the morning. Peter or someone in an
earlier time zone will help.
Thanks for trying,
-Alex
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
> If you want to try to create the missing beads, we'll be happy to try to
> help you get started.
Thank you Alex, yes I would like to try. Let me know how to proceed. Here in
our organisation we really likes to see FlexJS comes out a solid development
platform for browser HTML written in ActionScript.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12232.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by Alex Harui <ah...@adobe.com>.
On 3/14/16, 4:17 AM, "santanu4ver" <sa...@gmail.com> wrote:
>It's about FlexJS SDK and output as HTML.
>
In FlexJS, we are trying to make things "pay-as-you-go" (PAYG). In the
regular Flex SDK, lots of code is dedicated to "just-in-case". If you
think about the number of containers in an app and how many actually
change colors, you can imagine that in many apps, running extra code to
watch for background color changes that never happen can be wasteful.
In FlexJS, PAYG will commonly be implemented with different beads, so you
don't have chunks of code with a bunch of if statements that don't do
anything. It turns out we haven't written the version of
SolidBackgroundBead that watches for changes to className (or actually,
listens for layoutNeeded or maybe a styleChanged event).
If you want to try to create the missing beads, we'll be happy to try to
help you get started.
-Alex
RE: [Non-DoD Source] Re: Updating className
Posted by Kessler CTR Mark J <ma...@usmc.mil>.
Note sure if the FlexJS uses styleName[1], but it's able to change the styles of UIComponents by referencing a CSS style's name.
[1] http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html#styleName
-Mark
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
It's about FlexJS SDK and output as HTML.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12222.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by OK <OK...@edscha.com>.
This sounds like the question is "How to dynamically change styles at
runtime".
Do you speek about the standard SDK or FlexJS?
For the standard SDK this works for me:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f8c.html
HTH,
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12221.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by santanu4ver <sa...@gmail.com>.
I have a Container which already has a background color, border styles etc.
supplied by a CSS style in 'className' property. At some point I wants to
change the Container's background color, border styles etc. by updating
'className' value by another CSS style.
I also noticed border styles are not affecting to UI if I declare CSS like
this:
.widgetStateNormal
{
background-color: #ffff00;
borders-style: solid;
border-width: 2;
border-color: #ff00ff;
}
I able to work with border styles only when declared in MXML tag:
<js:style>
<js:SimpleCSSStyles borderStyle="solid" borderWidth="2"
borderColor="#ffffff" backgroundColor="#ffffff" />
</js:style>
By whichever way I sets it's background/border styles, I couldn't able to
update them at certain time by another styles.
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12219.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Updating className
Posted by OK <OK...@edscha.com>.
santanu4ver wrote
> Is it possible to update a Container's className property? I
> programmatically tried to update className value to Container but couldn't
> able to.
This is read only:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html#className
Perhaps it makes sense to explain what do you'd like to achive.
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Updating-className-tp12217p12218.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.