flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jude <flexcapaci...@gmail.com>
Subject Re: Skinning FlexJS
Date Fri, 21 Jun 2013 10:52:16 GMT
Hi Om,

I have been trying to think of a way to be able to reuse the skin you
create in Flex with HTML 5 as well. I think it may require a new Flex
component or MXML Skins with certain constraints (such as no ActionScript
in the skin).

Off the top of my head I have listed some ways we can create the visual UI
of a button in Flex:

- Button - button class draws the skin itself using graphics commands
- Button with Programmatic Skin - programmatic skin of a button draws the
graphics
- BitmapImage Button -  button draws the up, over, down states from
provided bitmaps (png, gif, jpg)
- MXML Skin - the button skin draws the visuals from inline FXG and AS3
(what Flex 4 uses)
- FXG only MXML Skin - the button skin has only inline FXG. no AS3 used in
skin
- FXG external MXML Skin - the button skin references external FXG files
for up, down, over states. no AS3 used in skin
- MXML Bitmap Skin - the button skin references external images
- FXG Button - the button references FXG for up, over, down states. no AS3
in FXG obviously
- AS3 Skin - the button skin written in AS3 draws the graphics
- more?

To create visuals of a button in HTML:

- Button - the browser(s) draws the graphics (default size, position,
padding, margins, etc)
- Styled Button - the browser(s) draws the graphics use CSS to override the
size, position, padding, margins, etc
- BitmapImage Button - use CSS to draw the up, over, down states using
external bitmaps
- SVG Button - use CSS to draw the up, over, down states using external SVG
files
- SVG Inline Button - draws the up, over, down states using inline SVG
(requires JS?)
- BitmapImage Inline Button - draw to draw the up, over, down states using
inline bitmap data (requires JS?)



On Thu, Jun 20, 2013 at 3:47 PM, OmPrakash Muppirala
<bigosmallm@gmail.com>wrote:

> On Wed, Jun 19, 2013 at 7:09 AM, Erick Ghaumez <eactif@gmail.com> wrote:
>
> > hi,
> >
> > yes Om i'm in !
> >
> > I'll start with some skinning tests for the stockQuote sample.
> > I think I can send a first proposal next week.
> >
>
> Sounds good!
>
>
> >
> > Just to be sure : the goal is to create a default skin which you can use
> > with SWF and html/js export ?
> >
>
> Yes.  An AI or Fireworks file should be good.  We can export that to
> .png/.fxg/.svg as needed.
>
>
> > Does the skinning system for SWF Flex will be the same as today ( Skin
> > class with MXMLG & FXG ) ?
> >
> >
> I am trying to figure out what the best options would be.  I think I will
> start out with skinning the Flash version with bitmaps and HTML5 version
> with SVG to start out with.
>
> In the long run, I want to figure out how to bring back FXG to the Flash
> version.
>



>
> Thanks,
> Om
>
>
>
> > Erick
> >
> >
> > Le 19 juin 2013 à 02:21, OmPrakash Muppirala <bigosmallm@gmail.com> a
> > écrit :
> >
> > >>
> > >>>> What kind of beautification are you taking about?
> > >>> I'm don't think it looks as good as Spark or MX right now.  Colors,
> > >>> styles, spacing might make it look more like it is worth trying to
> use
> > >>> this stuff.
> > >>>
> > >> Perhaps the designers in this list could help us design the next gen
> > >> default look and feel for Flex?  Any takers?
> > >> Thanks,
> > >> Om
> > >
> > >
> > > Designers in the list,
> > >
> > > How about we try to put together a new visual look and feel for FlexJS?
> > >
> > > I am thinking that we can use the traditional approach of creating
> assets
> > > in AI or Fireworks and export them to formats we want.  This will also
> > give
> > > me a chance to figure out the various approaches and tooling
> > requirements.
> > >
> > > We have a lot of different options to do this, CSS3, FXG/MXML, SVG,
> etc.
> > > To get an idea of the first set of components we want skinned, here are
> > > the links to some samples Alex had put out a while ago [1,2]
> > >
> > > P.S.  Erick, you had pinged me on Twitter about wanting to help.  I
> hope
> > > you are in this list now :-)
> > >
> > > [1] http://people.apache.org/~aharui/FlexJS/
> > > [2] http://people.apache.org/~aharui/FlexJS/StatesTest/
> >
> >
>

Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message