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