On 2/27/14 12:11 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
>On Thu, Feb 27, 2014 at 8:50 AM, Alex Harui <aha...@adobe.com> wrote:
>
>> Thanks for that information about web components. I thought it was
>>still
>> a popular trend. Here's my latest thoughts based on your feedback.
>> Everything in this reply is top-posted so you don't have to go dig
>>through
>> the prior posts.
>>
>> 1) I don't think using background-image is limited to built-in HTML
>> controls. Well, maybe it is, but essentially, the entire UI is built
>>out
>> of DIVs and some of the built-in controls and I think background-image
>> works on all of them.
>>
>
>We still have the problem of not being to control the internals of the SVG
>document when used as a background-image. See my response to (2) as to
>why
>we need this.
Are you saying that the SVG in the background-image is not in the DOM and
can't be accessed via JS?
>
>
>>
>> 2) If flickering is a problem (for SVG, I didn't see flicker for
>> png/gif/jpg) some sort of "embedding" is at least possible for SVG.
>>
>
>The way I am packing multiple SVG documents in one is essentially an
>'embedding' mechanism. Also, this means that we need some code in the top
>SVG to switch between states. We can probably use CSS to do the
>switching,
>but then we are limited to only the CSS approved states. If we want to do
>custom, complex states, we need JS.
I was thinking that web-components/css3 was going to allow custom states,
but as you pointed out, maybe browser support for that will be limited.
FlexJS already allows custom CSS states within its JS code. What that
means is that the browser is given a copy of your CSS "as-is" and another
copy of the CSS is converted to JS Objects and the rest of the FlexJS JS
code can access those structures and ask for values based on totally new
psuedo-states and then run code to modify the DOM as needed.
>>
>> 4) I would really love to have "code-less" skins in FlexJS. Spark
>>tried,
>> but most every skin in the Spark theme has a script block in it. I'm
>> wondering if the FXG/SVG the designer creates can be free of event
>> handling code and that SVG can be injected into a skin. FXG is already
>> code-less right? And it gets injected into a sub component structure.
>> That sub-component structure is called a View in FlexJS. So, could the
>> button view be some JS and SVG with event handling and the
>>cross-compiled
>> FXG->SVG get injected into certain places in that View's SVG? It looks
>> like we could do it if the FXG cross-compiles to JS code that create
>> elements and addChild's them. I think it would be more efficient if you
>> could actually stitch in XML though like you can for HTML via innerHTML.
>>
>
>I have seen a few mobile skin classes do this. For example, the
>spark.skins.mobile.RadioButtonSkin.as sets various sections of the skin by
>pointing them to various pure, codeless FXG assets like this:
>
> upIconClass = spark.skins.mobile640.assets.RadioButton_up;
> upSelectedIconClass =
>spark.skins.mobile640.assets.RadioButton_up;
> downIconClass =
>spark.skins.mobile640.assets.RadioButton_down;
> downSelectedIconClass =
>spark.skins.mobile640.assets.RadioButton_down;
> upSymbolIconClass =
>spark.skins.mobile640.assets.RadioButton_upSymbol;
> downSymbolIconClass =
>spark.skins.mobile640.assets.RadioButton_downSymbol;
> upSymbolIconSelectedClass =
>spark.skins.mobile640.assets.RadioButton_upSymbolSelected;
> downSymbolIconSelectedClass =
>spark.skins.mobile640.assets.RadioButton_downSymbolSelected;
>
>Ignoring its baseclasses, there is pretty much no other code in
>RadioButtonSkin.as and all the visuals are controlled by FXG.
>
>Is this something like what you have in mind?
Something like that. Then, hopefully, all events and other code is
outside of that part of the SVG. You might need to inject that SVG into
an outer SVG shell in order to get events, but I was wondering if you can
attach listeners in capture phase and get the SVG events.
>
>It is definitely possible to stitch in SVG inline with regular HTML; most
>browsers today support this.
What I'm wondering is whether it is possible to stitch SVG inline with
other SVG. I think you are saying you can write sag into an innerHTML
like this:
var element = document.createElement('div');
element.innerHTML = "<svg><polygon id='foo' Š /></svg>";
What I'm wondering is whether there is anyway to modify the SVG in that
innerHTML via other SVG markup. As in:
var element = document.createElement('div');
element.innerHTML = "<svg><polygon id='foo' Š /></svg>";
var foo = element.getElementByID('foo');
foo.innerSVG = "<fill><SolidColor />Š</fill>";
There is no innerSVG property, and parsing the XML to make the
createElementNS and setAttribute calls feels slow compared to injecting a
bunch of XML.
I'm asking because, for example, in your TextButtonSkin.svg you have all
of these nested SVG tags and the code and events are in the outer tag. If
the designer exports some FXG for a state it will probably be one of the
inner SVG tags and it would seem like it would be faster to simply write
that SVG into the outer SVG instead of making all of the calls via JS.
Also, doing so state-by-state could allow for deferred instantiation of we
need it.
I guess you can always use some sort of template where the "outer" SVG has
special tags that denote where we'd inject the "inner" SVG converted from
the designer's FXG.
-Alex
