You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by OmPrakash Muppirala <bi...@gmail.com> on 2013/06/19 02:21:20 UTC
Skinning FlexJS
>
> > >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/
Re: Skinning FlexJS
Posted by Igor Costa <ig...@gmail.com>.
Why not creating a basic approach but give total freedom for developers
apply metro style, twitter bootstrap, pure css, topcoat.
Like, re-using existing code and apply directly to our framework.
This week I started working on a model that could work with Apache Flex UI
Builder that outputs some sort of it, but I'm using topcoat with purecss
from yahoo.
I'm getting lucky until now and guess I will publish to whiteboard later
this summer.
Regards
----------------------------
Igor Costa
www.igorcosta.com
www.igorcosta.org
On Fri, Jun 21, 2013 at 7:52 AM, jude <fl...@gmail.com> wrote:
> 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
> <bi...@gmail.com>wrote:
>
> > On Wed, Jun 19, 2013 at 7:09 AM, Erick Ghaumez <ea...@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 <bi...@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/
> > >
> > >
> >
>
Re: Skinning FlexJS
Posted by jude <fl...@gmail.com>.
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
<bi...@gmail.com>wrote:
> On Wed, Jun 19, 2013 at 7:09 AM, Erick Ghaumez <ea...@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 <bi...@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/
> >
> >
>
Re: Skinning FlexJS
Posted by OmPrakash Muppirala <bi...@gmail.com>.
On Wed, Jun 19, 2013 at 7:09 AM, Erick Ghaumez <ea...@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 <bi...@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/
>
>
Re: Skinning FlexJS
Posted by Erik de Bruin <er...@ixsoftware.nl>.
If you guys need any help from the FalconJx compiler to get this
working, feel free to ping me and I'll see what I can do.
EdB
On Wed, Jun 19, 2013 at 4:09 PM, Erick Ghaumez <ea...@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.
>
> Just to be sure : the goal is to create a default skin which you can use with SWF and html/js export ?
> Does the skinning system for SWF Flex will be the same as today ( Skin class with MXMLG & FXG ) ?
>
> Erick
>
>
> Le 19 juin 2013 à 02:21, OmPrakash Muppirala <bi...@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/
>
--
Ix Multimedia Software
Jan Luykenstraat 27
3521 VB Utrecht
T. 06-51952295
I. www.ixsoftware.nl
Re: Skinning FlexJS
Posted by Erick Ghaumez <ea...@gmail.com>.
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.
Just to be sure : the goal is to create a default skin which you can use with SWF and html/js export ?
Does the skinning system for SWF Flex will be the same as today ( Skin class with MXMLG & FXG ) ?
Erick
Le 19 juin 2013 à 02:21, OmPrakash Muppirala <bi...@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/