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
>> >>
>>
>>
