You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by David Arno <da...@davidarno.org> on 2012/02/03 18:23:13 UTC

[Discussion] Flex 5 and non-SWF targets: Skinning

I have been thinking about how we might develop Flex so that it can target
technologies other than the flash player. I have been using JavaScript as my
theoretical target because it poses the most problems: we have to convert
the AS3 source to another language (not bytecode), we need the output to be
as small and fast as possible and - the topic of my thoughts here - we
cannot render to the Canvas as it is just too slow, instead components will
need to be "rendered" using the DOM and CSS.

My knowledge of skinning Flex 4 components is minimal, but my understanding
is that spark components hand off *all* rendering to skin classes. If this
is the case, then it might be relatively simple to come up with a
multi-target solution.

Take a trivially simple app:
-------------------------------------
ExampleApp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:Button skinClass="MyButtonSkin"/>
</s:Application>
-------------------------------------

It references MyButtonSkin class, which might be defined as below:
-------------------------------------
MyButtonSkin.mxml (based on example at
http://www.adobe.com/devnet/flex/articles/flex4_skinning.html):

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled=".5"
  implements="org.apache.flex.compilectrl.INativeClass">
    <s:states>
        ...
    </s:states> 

    <s:Rect id="rect" radiusX="4" radiusY="4" top="0" right="0" bottom="0"
left="0">
        ...
    </s:Rect>

    <s:Label text="Button" .../> 
</s:Skin>
-------------------------------------

Notice that I have added
implements="org.apache.flex.compilectrl.INativeClass." When compiled with,
for example --target-javascript, the compiler will disregard the AS3 version
of MyButtonSkin, as it is marked as a native class. Instead, the compiler
will expect some form of JavaScript, CSS & HTML MyButtonSkin "bundle", which
it will link/merge or whatever with the generated JavaScript-based output.

The Button class still gets compiled to JavaScript (or .NET bytecode, C++ or
whatever we choose to target), but the actual rendering process is handled
natively in each case.

Would this approach work, or have I missed something important? Obviously
having classes implement an interface may not be the most elegant way of
handling this and maybe either a new language keyword or metadata could be
used instead. Also, this technique would mean that only spark components
could be targeted at anything other than the flash player, but I don't see
this as a bad thing. Are there any fundamental flaws with the idea though?

David.




OT: OpenSeales

Posted by FRANKLIN GARZON <fg...@hotmail.com>.
I want to shared with you this link: http://openscales.org/ , good job, as a lot of project we can't cancel our current project, we are near to delivery mobile application with Flex.
 
Franklin Garzón
 
Regional Development Manager

MCITP  Microsoft SQLServer

 
*Si el hombre dejara de aprender entonces dejaría de existir*
 
094496862