To do a YXML and AS3 api for YUI

50 views
Skip to first unread message

stevereiner

unread,
Mar 3, 2012, 5:22:49 PM3/3/12
to Jangaroo Users
For me to do a YXML (like EXML) and AS3 api for YUI Yahoo library, how
best to leverage the exml Ext AS tooling code?
Is it setup to process / use jsdoc tool code or output? Would need to
get this processing with yui jsdoc or yuidoc. What other work would be
involved?

Trying to avoid ExtJS with its GPL open src license.

Thanks,
Steve

Frank

unread,
Mar 4, 2012, 3:41:29 AM3/4/12
to Jangaroo Users
Second question first:

On Mar 3, 11:22 pm, stevereiner <steverei...@integratedsemantics.com>
wrote:
> Is it setup to process / use jsdoc tool code or output? Would need to
> get this processing with yui jsdoc or yuidoc. What other work would be
> involved?

No, AS3 APIs are not generated by the EXML tool, but instead I tweaked
another tool by Andrey Zubkov aka oxymoron called ext-doc to produce
AS3 source code instead of HTML from Ext's jsdoc dialect. Fork here:

https://github.com/CoreMedia/ext-doc-2-as#readme

It should be possible to hack that code to work with yui jsdoc /
yuidoc,
too.

Now to the first question:

On Mar 3, 11:22 pm, stevereiner <steverei...@integratedsemantics.com>
wrote:
> For me to do a YXML (like EXML) and AS3 api for YUI Yahoo library, how
> best to leverage the exml Ext AS tooling code?

Well, EXML doesn't know too much about Ext JS. However, it is based on
the following assumptions:
* There are component (and other) classes that take a single
constructor
argument, usually called config.
* That constructor argument is an Object of named properties. In order
to know about the properties and their types, we "invent" another
AS3
class, the config class, that represents the type of the config
object.
* Primitive property values (e.g. "label") are represented as XML
attributes, complex property values (e.g. "items", "layout") as XML
sub-elements.
* EXML components are organized in "suites" or modules. All config
classes of one suite are located in the same config package. This
also serves as a namespace for their XML elements.
* For each suite, there is an XML Schema (XSD) that helps XML-capable
IDEs to support completion, documentation lookup, and early
error detection
* At runtime, there has to be some factory that takes a config object
and
creates the corresponding component (or other object). The config
class contains an AS3 annotation [ExtConfig(target="...")] that
points at the target class.
* A special case of Ext JS is that for components, plugins and some
other Ext objects, the generated code does not have to invoke that
factory explicitly, but instead a specific property ("xtype",
"ptype",
...) it contained in the config object, and a generic factory
(Ext.ComponentMgr) takes care of instantiating those objects.

EXML, like Flex' MXML, is intended to be a Domain Specific Language
to describe UIs. You could even say it is an an AS3 object
serialization
in XML.
I'm not much into YUI, but I saw code that suggests that YUI
components
can also be instantiated with a "config" object.

When you have a look at the EXML compiler
https://github.com/CoreMedia/jangaroo-tools/tree/master/exml/exml-compiler/src/main/java/net/jangaroo/exml
the following hints might help:
* it parses the config classes using the Jangaroo AS3 parser
backend
* it builds a model of all config classes before starting code
generation
* it parses the EXML file (using a standard XML parser) and
generates two AS3 classes: the config class and the target
(usually component) class
* for all config classes of one component suite, an XML
Schema (XSD) is generated
* for code generation, we use Freemarker templates:
https://github.com/CoreMedia/jangaroo-tools/tree/master/exml/exml-compiler/src/main/resources/net/jangaroo/exml/templates
* the [ExtConfig(target="...")] annotation is supported by the
Ext AS runtime by loading and registering the target class:
https://github.com/CoreMedia/jangaroo-libs/blob/master/ext-as/src/main/joo-js/joo/net.jangaroo.ext-as-aliases.js

Good luck with your appoach! Feel free to come back here if you get
stuck!

Greetings,
-Frank-

stevereiner

unread,
Mar 5, 2012, 1:26:04 AM3/5/12
to jangaro...@googlegroups.com
Frank,

Thanks for the detailed help!
I figured YUI would have things similar to ExtJS (like the config), given ExtJS was originally extensions to YUI,

Now thinking of doing the YUI AS3 but skip the YXML and use MXML:
1. Generate an AS3 api to YUI with yuidoc/jsdoc and a variant of jangaroo extdoc tool 
2. Get AS3 stubs for a subset of Flex component as3 classes (start small)
3. Use calls to yui as3 api to fill in some of the Flex as3 stubs.

On Falcon/FalconJS, I saw the summit video, skimmed the blog articles, and spent a few painful hours looking through the mail archive of Apache Flex dev.
From the FalconJS part of the video, I was surprised they hadn't used a JS framework / control library (jQuery/plugins or YUI) as a starting point
Sounds like they have more of the flash apis implemented in javascript than jangaroo, might have more complete as3->js, and was able to translate the flex actionscript code (with parts removed) to JS. Only having a listbox to demo made me question the approach of translating the parts of flex component code which is doing "graphics" to doing SVG graphics in JS.  Think things would work better not using "graphic drawing", mostly just CSS styling (with optional support if you want to customize some components with a skin that drawing graphics). Think the jangaroo approach of using existing js framework controls is a good one.  Having the Falcon / Falcon JS compiler will be great when Adobe provides it in final form or sooner in a early version, but things can be done using the Jangaroo compiler/tooling and approach without waiting.

Steve
Reply all
Reply to author
Forward
0 new messages