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 AS.
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 framework. 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? -Alex On 10/16/14, 2:06 AM, "OmPrakash Muppirala" <bigosma...@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? > >Thanks, >Om > >On Wed, Oct 15, 2014 at 8:31 PM, Alex Harui <aha...@adobe.com> wrote: > >> >> >> On 10/15/14, 2:53 PM, "OmPrakash Muppirala" <bigosma...@gmail.com> >>wrote: >> >> > >> >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 >> >>
