Hi Judah,
I didn’t read your entire post. I think you missed some of the generated
code for the state-dependent properties and styles. Take a look at how
the assignment for a state-dependent style attribute looks and consider
whether it would change your mind about what you want to do.
-Alex
On 3/9/15, 9:50 PM, "jude" <flexcapaci...@gmail.com> wrote:
>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:u
>p");
> 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
>> >> >>
>> >>
>> >>
>>
>>
