-
Notifications
You must be signed in to change notification settings - Fork 32
Introduction to Jangaroo FlExt AS
Jangaroo FlExt AS is a set of tools and libraries to create modern Web Apps. It uses
- ActionScript and MXML from Apache Flex as source code languages,
- Ext JS 6.2 as UI component library,
- Ext AS 6.2, an ActionScript type definition of the Ext JS 6.2 API, and
- the Jangaroo tools to compile and build packages and Apps, which in turn rely on
- Apache Maven and Java.
So "FlExt AS" is obviously a mixture of Flex, Ext JS, and AS (ActionScript), i.e. "use Flex (ActionScript and MXML) to implement Ext JS UIs".
This means that to use Jangaroo FlExt AS, you need to understand how Jangaroo maps Flex concepts and languages to Ext JS, or vice versa, how you can transfer existing Ext JS know how to the FlExt AS world.
Apache Flex, formerly Adobe Flex, is a UI framework built on top of ActionScript. It adds a library of UI components and other entities you need to define desktop-like user interfaces (events, models, skins, ...) and a domain specific language called MXML for declarative component composition, i.e. declaratively construct new components by customizing, combining and wiring existing ones.
Traditionally, ActionScript is compiled to byte code and executed in FlashPlayer, either inside a browser or in Adobe AIR. Both execution environments are no longer state of the art. Instead, to run in the browser, the resulting application should use JavaScript. Apache Flex has some side-projects (FlexJS, FlexJX) that implement Flex components in JavaScript.
Jangaroo takes a similar approach like Apache FlexJS/JX. It compiles ActionScript to JavaScript, but instead of implementing the original Flex components in JavaScript (which probably takes years), it relies on the existing, mature Ext JS components. Thus, Jangaroo uses Flex' languages ActionScript and MXML, but not its standard component library (neither Flex 4 "spark" nor its predecessor from Flex 3). Fortunately, MXML is sufficiently generic to allow using arbitrary components classes with arbitrary properties.
While Ext JS and Flex are quite similar from a bird eye's view, there are some differences in details that require Jangaroo-specific semantics of MXML and sometimes also of ActionScript (e.g. special annotations).
This guide explains how with Jangaroo, you use Flex syntax to program Ext JS applications. Some Flex and lots of Ext JS know-how it required to succeed, but with Jangaroo, Ext JS development also becomes easier. Through static typing, ActionScript and MXML require much less manual documentation look-up, allow reliable code navigation (go to declaration, find usages) and even lots of refactorings. We hope you'll like it!
Another aspect covered by Jangaroo tools is the build process. Right from the start, we have integrated the Jangaroo compiler with Maven, because it is a mature and cleanly extensible build tool. Later, Ext JS brought its own build tool Sencha Cmd. To keep you from having to deal with two build tools, we wrap all calls to Sencha Cmd in the Jangaroo Maven Plugin.
The most enjoyable way to develop FlExt AS applications is by using IntelliJ IDEA. Unfortunately, the free Community Edition does not suffice, but you have to use IDEA Ultimate Edition, because only that one supports Flex and Maven. However, JetBrains offer free licenses for Open Source development. As of now, you can use any IDEA version starting from 2016.3.
To get started with a "hello world" project, please consult this Jangaroo IDEA Wiki page. Here, let's look at the code and the concepts behind it.
In FlExt AS, as in Apache Flex, ActionScript (AS) is the primary, most versatile language. However, that does not mean that most of your code will be AS. MXML is often the better choice, especially (but not exclusively) for UI components.
To get an overview of how MXML looks like and works, please have a look at the Adobe Flex documentation pages. Note that most code samples won't work, because they rely on Flex components and classes, not on their Ext AS counterparts. It still helps to gain a deeper understanding of how MXML works. To get started, you find core concepts and working code examples in the following.
MXML is a domain specific language that compiles to ActionScript. That said, you could write all your code in ActionScript. But that would mean a lot of boiler plate or hard-to-read code. While ActionScript is a functional/imperative language, MXML is much more declarative and allows to inject ActionScript where scripting is required. Creating custom UI components by composing, customizing and wiring existing components is much more intuitive in MXML than in ActionScript.
ActionScript 3 was created by Adobe and is an ECMAScript 3 ("classic" JavaScript) extension featuring classes, interfaces, packages, and static typing. It was meant to be standardized as the next ECMAScript version 4, but that step never happened, and that version number has actually been skipped.
If you don't know ActionScript, think of it as a mixture of JavaScript and Java, or as a predecessor to TypeScript. If you know your OOP and your C-like syntax, you will have no problem learning ActionScript.
Please read on about MXML.