flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com>
Subject [FlexJS] Skinning (was Re: [FlexJS] How to make the drawing APIs work from MXML)
Date Thu, 16 Oct 2014 15:59:08 GMT
Ah yes, skinning in FlexJS.

The general guidance for doing anything in FlexJS is to first consider
what is possible/practical/popular on the HTML/JS/CSS side, find the
patterns, propose encapsulations, then figure out how to implement that in

I’ve never promised FlexJS would offer Spark-like skinning because I’m not
sure it is possible or practical in HTML/JS/CSS.  Spark skinning basically
adds a child display object to any component.  I am not convinced you can
do that to the HTML built-in widgets I think most folks will want to use.
FlexJS certainly allows for a component set of widgets written to emulate
the built-in HTML widgets that can have an extra display object child, but
practically speaking, I want to leverage the built-in widgets so we don’t
have to invest time now in debugging emulations of them.  Also, FlexJS
hopes to support other component sets that wrap other UI frameworks like
Jquery and the way to customize the visuals may differ from framework to

The “basic” FlexJS framework tries to support MVC in most of the
components.  The view bead isn’t an extra display object, it adds display
objects (or sub-components) to the host components that can have
sub-components.  Fine tuning of the visuals is controlled via CSS.  On the
HTML/JS/CSS side, the FlexJS Button doesn’t currently have a view bead
since it just thinly wraps the HTML Button and that’s why fine tuning of
the visuals is controlled via CSS:  I think that’s the only way to alter
the way the HTML Button looks.

The one scenario that I keep thinking of, but haven’t fully explored, is
the “closeable tab”.  FlashBuilder/Eclipse users see it all the time:
there are tabs representing the open files in the source editor, and you
can close a file by hovering over the tab and clicking a close button that
will appear.

I have not researched how this is done in HTML/JS/CSS, but in Flash, folks
tried to do this by adding a button to the tab skin, and the tab is
already a button.  I don’t think you can do this to the default HTML
Button, but I could be wrong, but that’s been a factor in why I don’t
think we can replicate Spark skinning in every component.

So, starting from the HTML/JS/CSS side, what can we do?  We can specify
CSS background-image for lots of things, although IIRC, there are some
flicker issues with SVG background-image in Buttons.  We can specify
sub-components for components that aren’t based on HTML widgets.  And are
different things possible for a component set that is HTML5-only?

If you look at FlexJSJX/src/org/apache/flex/html/beads/TitleBarView.mxml
we can now specify the sub-component in the view in MXML.  IIRC, you still
want to convert FXG to SVG so the AS-side could load FXG and the JS-side
could load SVG.  Or we could just make the AS-side understand SVG and
convert to Graphics commands on the fly.

But fundamentally, I think we now have the ability to specify just about
every visual aspect of a FlexJS app as MXML plus some CSS, but I think the
HTML Button might flicker, and not all MXML will work in all components in
the JS side unless I’m wrong about the "closeable tab” scenario.  Maybe
that means there should be some other default Button in FlexJS and we
should give up on the built-in HTML Button or maybe that’s good enough.

What do other think?


On 10/16/14, 2:06 AM, "OmPrakash Muppirala" <bigosmallm@gmail.com> wrote:

>I have checked in the required changes to support FXG/MXMLG style drawing
>in FlexJS.  I have also updated the chart classes to accommodate for these
>changes so that they continue to work properly.
>Next up, figure out how to skin a component in FlexJS!
>Thoughts, suggestions?
>On Wed, Oct 15, 2014 at 8:31 PM, Alex Harui <aharui@adobe.com> wrote:
>> On 10/15/14, 2:53 PM, "OmPrakash Muppirala" <bigosmallm@gmail.com>
>> >
>> >On the JS side, I now have GraphicShape extend UIBase as well.  I added
>> >the
>> >same exact code path as in the AS version.
>> >
>> >We now have FXG like drawing on both Flash and HTML5/SVG with close to
>> >100%
>> >fidelity :-)
>> Sweet!
>> -Alex

View raw message