What is the subtree? Do you mean that a CSS declaration,
"s|Button#myButton" would match a button named myButton in two different
documents or views? Yeah, that's a possibility.
I looked at the generated code and here is the MXML and generated code for
an ImageButton class:
<controls:ImageButton id="myButton" label="a long label test"
icon="assets/lagoon.jpg" />
generates:
private function _PseudoStatesTest_ImageButton1_i() :
com.flexcapacitor.controls.ImageButton
{
var temp : com.flexcapacitor.controls.ImageButton = new
com.flexcapacitor.controls.ImageButton();
temp.label = "a long label test";
temp.setStyle("icon", "assets/lagoon.jpg");
temp.id = "myButton";
if (!temp.document) temp.document = this;
myButton = temp;
mx.binding.BindingManager.executeBindings(this, "myButton", myButton);
return temp;
}
Here is the CSS and generated code for the pseudo states declaration:
controls|ImageButton:up {
backgroundColor:red;
backgroundAlpha:1;
}
generates:
selector = null;
conditions = null;
conditions = [];
condition = new CSSCondition("pseudo", "up");
conditions.push(condition);
selector = new
CSSSelector("com.flexcapacitor.controls.ImageButton", conditions, selector);
// com.flexcapacitor.controls.ImageButton:up
style =
styleManager.getStyleDeclaration("com.flexcapacitor.controls.ImageButton:up");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.backgroundColor = 0xFF0000;
this.backgroundAlpha = 1;
};
}
The component is created in the application's constructor. The styles are
created in the application styles init. I'm not sure when the application's
style init method is called but it seems it would have to be called some
time after the application's constructor.
We may have an opportunity to set the style when the component is created
if we update the compiler and the setStyle method. So when we are creating
the component we are setting the "icon" style with this line:
private function _PseudoStatesTest_ImageButton1_i() :
com.flexcapacitor.controls.ImageButton
{
//...
temp.setStyle("icon", "assets/lagoon.jpg");
//...
}
If we modified setStyle to accept pseudo states as a third parameter we
could do something like this:
private function _PseudoStatesTest_ImageButton1_i() :
com.flexcapacitor.controls.ImageButton
{
//...
temp.setStyle("icon", "assets/lagoon.jpg");
temp.setStyle("icon", "assets/lagoon_up_image.jpg", "up");
//...
}
We could also modify getStyle with a third parameter to get the value in a
different state:
var s:String = temp.getStyle("icon", "up"); //
assets/lagoon_up_image.jpg
Currently, there is no way to get the value of a style from a different
state with these methods. But if we are going to add pseudo states we might
as well support getting and setting document level state values in AS3 and
make pseudo state values a fourth option:
temp.getStyle("icon", "about", false); // get the value of icon in the
"about" document state
temp.getStyle("icon", "up", true); // get the value of icon in the
current target "up" pseudo state
temp.setStyle("icon", "assets/lagoon.jpg", "about", false); // set the
icon value in the about state
temp.setStyle("icon", "assets/lagoon_up_image.jpg", "up", true); // set
the icon value in the current target pseudo "up" state
So the compiler would write the correct setStyle syntax when it encountered
pseudo states and the setStyle method would handle creating the pseudo
states and conditions in the same way the CSS declarations are creating
them (see the generated controls|ImageButton:up code above) and the
setStyle method could create them at runtime without the compilers
generated code from the CSS.
On Mon, Mar 9, 2015 at 2:11 PM, Alex Harui <aha...@adobe.com> wrote:
> First of all, technically, you are sort of trying to do this:
>
> <s:Button>
> <s:skin>
> <s:ButtonSkin icon.up=“upImage.png” />
> </s:skin>
> </s:Button>
>
> The Button itself may not have an icon property, and the Button itself
> doesn’t have a set of states like “up”.
>
> So, setting the currentState on Button may not have any effect, and might
> not have an effect if the Skin itself doesn’t support such a state, or
> throw an exception if that state doesn’t exist. Thus, you are trying to
> skip a level of abstraction which can be tricky and I think makes the
> problem harder.
>
> I’m not saying it isn’t worth doing, just thinking about how hard it will
> be.
>
> CSS is interesting in that it doesn’t set a property per-se. It can be
> thought of as a filter on the DOM. It searches using Selector subjects
> and if it finds a match, applies the rules. The danger is that if you
> accidentally have the same subtree somewhere else in the DOM it also
> matches and changes. Pseudo-states are part of the filter/selection.
> There is no way to do inline pseudo styles in HTML markup either.
>
> -Alex
>
> On 3/8/15, 11:45 AM, "jude" <flexcapaci...@gmail.com> wrote:
>
> >Hmm. I don't have any problem with using the "icon.up" in the MXML skin.
> >I'm thinking of the occasion in the example.
> >
> >We could still declare the states property changes generated code as part
> >of the document except when we set a skin state we set the component
> >instance.currentState instead of currentState.
> >
> >Doesn't UIComponent have a states property? We could assign the state's
> >values when we assign the skin. The skin has a list of its states correct?
> >Sorry on mobile.
> >
> >We could have a different syntax for it:
> >
> >icon:up="upImage.png"
> >
> >icon::up="upImage.png"
> >
> >icon@up="upImage.png"
> >
> >icon#up="upImage.png"
> >
> >Not sure if these examples will show up. the problem with the first two is
> >that a colon + any character turns into emoticons. So posting examples
> >online and chat might get translated.
> >
> >I'll have to look at the code but when we have CSS that uses pseudo states
> >we use that same code when we encounter inline MXML pseudo state
> >syntax,"icon#up".
> >
> >On Saturday, March 7, 2015, Alex Harui <aha...@adobe.com> wrote:
> >
> >> Interesting. I get why you would want that.
> >>
> >> States are declared as part of the document. So “icon.about” tells the
> >> compiler to set the icon when the MXML file changes currentState to
> >> “about”. The Button skin, if it were defined in MXML, would have the
> >>“up”
> >> state, not necessarily the MXML file that contains the Button. The
> >> generated code in the containing MXML doesn’t know anything about
> >>Button’s
> >> skin’s states since even the skin itself can be assigned at runtime or
> >>via
> >> CSS. Feels a bit like piercing an abstraction boundary, but I get that
> >> CSS lets you do it. Does it feel too unnatural to have to use icon.up
> >>in
> >> the Button’s skin?
> >>
> >> -Alex
> >>
> >> On 3/7/15, 9:34 PM, "OmPrakash Muppirala" <bigosma...@gmail.com
> >> <javascript:;>> wrote:
> >>
> >> >This sounds like a fantastic idea. It would be a bonus if we could get
> >> >the
> >> >same state names auto-complete feature to work in CSS as well.
> >> >
> >> >Thanks,
> >> >Om
> >> >On Mar 7, 2015 8:08 PM, "jude" <flexcapaci...@gmail.com
> <javascript:;>>
> >> wrote:
> >> >
> >> >> In CSS you can address certain states of a component using pseudo
> >>states
> >> >> (states) like so:
> >> >>
> >> >> s|Button#iconOnlyButton:up {
> >> >> icon: "assets/upImage.png";
> >> >> }
> >> >> s|Button#iconOnlyButton:over {
> >> >> icon: "assets/overImage.png";
> >> >> }
> >> >> s|Button#iconOnlyButton:down {
> >> >> icon: "assets/downImage.png";
> >> >> }
> >> >>
> >> >> But you can't do the same thing in MXML.
> >> >>
> >> >> You *can* address document level states in MXML like so:
> >> >>
> >> >> <s:Button icon="default.png" icon.about="about.png"/>
> >> >>
> >> >> <s:states>
> >> >> <s:State name="home" />
> >> >> <s:State name="gallery" />
> >> >> <s:State name="feedback" />
> >> >> </s:states>
> >> >>
> >> >> But that doesn't let you assign values to states of the component.
> >>This
> >> >> will throw an error:
> >> >>
> >> >> <s:Button icon="default.png" icon.up="about.png"/>
> >> >>
> >> >> While this CSS will not:
> >> >>
> >> >> s|Button#iconOnlyButton:up {
> >> >> icon: "about.png";
> >> >> }
> >> >>
> >> >> Is it possible to add support for inline pseudo states like we do
> >>with
> >> >>CSS?
> >> >> Does anyone else want this? How would we do it?
> >> >>
> >> >> Jude
> >> >>
> >>
> >>
>
>
