Well, IMO, the default Spark skins are a middle ground where they support
certain styles, some of which are not CSS compliant. But a Spark Skin can
be completely non-styleable. If you create it via FXG, or just use MXML
without any code, you pretty much can’t get it to support styles.
I’m definitely not an expert on how folks “skin” or “theme” their HTML
websites, but things like topcoat seem to entirely describe the visuals as
CSS.
IMO, we should support both, and I don’t see at this point, a lot of
overlap between a skin workflow that starts with FXG/MXML/AS and ends up
in SVG, and one that starts with CSS and does not use SVG on the JS side.
But as you guys make progress it certainly would be good to keep up to
date with the other workflow and look for overlap.
Another way to think about it, is that Om is working on the pipeline that
cross-compiles FXG/MXML/AS to SVG, and Peter is going to write one theme
that tries to mimic CSS in AS just like it will respond in the browser.
Anyone who wants to take on new MXML tags on the AS side like <border> and
<background> that would resolve to CSS rules is more than welcome to try
such a route as well.
Now as to how to implement FlatSpark, it might be a better fit for it to
go through the FXG/MXML/AS pipeline although having a CSS-only definition
of FlatSpark would be totally cool as well.
-Alex
On 1/28/15, 1:31 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> wrote:
>Spark skinning also obeys CSS rules. In a spark skin, you can for
>example,
>call getStyle("borderColor") and use that to draw a Rect with the given
>color. Or call getStyle("themeColor") and apply that color to a
>LinearGradient Rect.
>
>In addition, on the SVG side, individual shapes can be fully styled using
>CSS as well.
>
>So, I don't think we need to approach them as different techniques. I
>will
>try out and post some real life examples using FlexJS soon.
>
>Thanks,
>Om
>
>On Wed, Jan 28, 2015 at 1:24 PM, Peter Ent <p...@adobe.com> wrote:
>
>> After talking with Alex a bit more, it seems there are two paths we can
>> take, both valid and both really worth exploring.
>>
>> One is the MXML/designer UI path where skins are specific either in
>>MXML,
>> drawn in some way, and/or created using a design tool. This skins follow
>> from Spark skins.
>>
>> The other is CSS based which works backwards from the HTML/JS side and
>> attempts to replicate styles in ActionScript. If you look at things like
>> TopCoat[1] (or even jQuery since it offers styles and themes in a
>>similar
>> manner) you could imagine applying that same CSS to the ActionScript
>> version of an app and getting the same look and feel.
>>
>> And I guess there is a converged third path that combines a little of
>>both
>> somehow.
>>
>> It looks like Om is pursuing the first path so I am going to look at the
>> second and we'll see where we wind up.
>>
>> Peter Ent
>> Adobe Systems
>>
>> On 1/28/15, 2:07 PM, "Peter Ent" <p...@adobe.com> wrote:
>>
>> >Working backwards from JS/CSS seems to be the best route, no matter
>>how it
>> >is implemented. We know there are some least-common denominators such
>>as
>> >background color and border, so perhaps we start there to formulate a
>> >plan.
>> >
>> >I do think we should try and use the core.graphics package which is
>> >style-able from CSS and we can mimic that much in AS. I've been
>>looking at
>> >the TextButton on the AS side and makes use of a border bead and a
>> >background bead if there are border and style properties present.
>> >
>> >I am thinking that we make skins a required element of FlexJS so that
>> >everything has at least a default skin and TextButton would not even
>>care
>> >about such things, it would turn that work over to its skins (up, down,
>> >over) and those skins can make use of core.graphics. This more
>> >implementation detail, I know.
>> >
>> >—peter
>> >
>> >On 1/28/15, 1:08 PM, "Alex Harui" <aha...@adobe.com> wrote:
>> >
>> >>I don’t have well-formed thoughts on this topic, but the following
>> >>occurred to me.
>> >>
>> >>On the JS side, the browser has a powerful CSS engine. Drawing skins
>>in
>> >>AS/MXML won’t leverage that. So these kinds of themes may not be
>> >>styleable. I think that’s fine, but IMO, Spark skins were designed to
>> >>have other tools modify/create these non-styleable skins, generally by
>> >>buying Adobe products.
>> >>
>> >>Thus, maybe there will be another kind of theme in FlexJS that is more
>> >>oriented to being tailored by CSS. I’m not an expert on JS themes at
>>all,
>> >>but I think I’ve read that lots of them are really “drawn” via CSS.
>>We
>> >>may need to support this kind of theme in FlexJS as well. The AS code
>> >>will have to handle more advanced CSS. IMO, these CSS skins will be
>> >>smaller and faster than code skins.
>> >>
>> >>I think I recall that FlatSpark is heavily derived from some JS CSS
>>skin.
>> >>If so, should the default FlexJS implementation leverage CSS on the JS
>> >>side, or should it really cross compile from its MXML/AS?
>> >>
>> >>Or, I could be totally wrong..
>> >>
>> >>-Alex
>> >>
>> >>
>> >>On 1/27/15, 1:04 PM, "Peter Ent" <p...@adobe.com> wrote:
>> >>
>> >>>
>> >>>
>> >>>On 1/27/15, 2:31 PM, "OmPrakash Muppirala" <bigosma...@gmail.com>
>> wrote:
>> >>>
>> >>>>On Tue, Jan 27, 2015 at 11:21 AM, Peter Ent <p...@adobe.com> wrote:
>> >>>>
>> >>>>> Hi,
>> >>>>>
>> >>>>> I am thinking about using FlatSpark as either inspiration for a
>>set
>> >>>>>of
>> >>>>> "skins" for FlexJS or porting it over to FlexJS. Since FlexJS is
>> >>>>>more
>> >>>>> JavaScript-minded (what you can do in ActionScript/MXML must
>> >>>>>translate
>> >>>>>to
>> >>>>> JavaScript) I'm thinking that FlexJS skins would need to keep
>>this in
>> >>>>>mind.
>> >>>>>
>> >>>>> Please share your thoughts and ideas if you can.
>> >>>>>
>> >>>>>
>> >>>>Peter,
>> >>>>
>> >>>>This was next on my plate as well. I want to try and continue
>>where I
>> >>>>left
>> >>>>off with the MXML based drawing API which gets translated to SVG on
>>the
>> >>>>JS
>> >>>>side. I had good success getting the visuals to work correctly. I
>>got
>> >>>>tripped up with tracking the mouse events on the JS side. I think
>>Alex
>> >>>>might have checked in something in the meantime that might have
>>fixed
>> >>>>my
>> >>>>issues.
>> >>>>
>> >>>>I have gotten sidetracked with the Android4/iOS8 skins and my
>>vacation
>> >>>>before I could finish this work. I hope to get back to this soon.
>> >>>>
>> >>>>Can you share what you have in mind in terms of FlexJS skinning?
>> >>>
>> >>>I've just started to look into this myself. My first thought is there
>> >>>should be an explicit way to attach the skin such as a skin property
>>or,
>> >>>more likely for FlexJS, a skin bead.
>> >>>
>> >>>I think what you (Om) were doing with core.graphics is a good step
>>with
>> >>>the ability to place some of the constructs in MXML. Alex has done
>>more
>> >>>work with events so perhaps what was tripping you up will have
>>cleared
>> >>>itself up by now.
>> >>>
>> >>>In the meantime, I need to get re-aquainted with skinning in Flex so
>> >>>dive
>> >>>in, by all means.
>> >>>‹peter
>> >>>
>> >>>>
>> >>>>Thanks,
>> >>>>Om
>> >>>>
>> >>>>
>> >>>>> Thanks,
>> >>>>> Peter Ent
>> >>>>> Adobe Systems
>> >>>>>
>> >>>
>> >>
>> >
>>
>>
