Developing Ext AS Applications with IntelliJ IDEA

Developing Ext AS 3.4 Applications with IntelliJ IDEA

Ext AS language and tools are described on the Jangaroo Tools Wiki Ext AS page. For Ext AS 6 / Jangaroo 4 (used by CoreMedia LiveContext 3 and CMS 9), please refer to the Jangaroo-4-specific page. Here, we describe how to use IntelliJ IDEA Ultimate Edition as IDE for Ext AS 3.4 / Jangaroo 1 + 2 development.

Ext AS consists of two main aspects: Writing your Ext JS code in ActionScript to create an application from code, and writing declarative components in a new XML language called EXML instead of JSON. Both pursue the goal of stronger (static) typing, allowing to provide much better tool support (code completion, documentation lookup, code navigation, error and potential bug analysis).

Developing an Ext JS Application in ActionScript

This description is based on Developing Jangaroo Applications with IntelliJ IDEA, since it tackles how to develop general Jangaroo / ActionScript applications with IDEA. It is also assumed that you know the basics of EXML.

After having set up IDEA as described in Developing Jangaroo Applications with IntelliJ IDEA, just add a dependency to ext-as to your pom.xml as described in Ext AS, and you can start coding Ext AS applications. However, an even quicker start can be achieved by cloning or copying the Ext AS examples project from github, as described on the Jangaroo Tools Wiki Ext AS page. If you are not familiar with using IDEA to fetch projects from git(hub), you find a detailed description (only for another project) in Developing Jangaroo Applications with IntelliJ IDEA.

The quick start application hello-world contains all basic elements an Ext AS application requires:

• a Maven POM using the jangaroo-maven-plugin and with a dependency on ext-as
• an HTML wrapper index.html
• a class containing a static main() method, using the Ext AS API

Developing an Ext JS Application in EXML

Before introducing the Jangaroo EXML plugin for the best development experience, we cover IDEA's excellent out-of-the-box support for XML including namespaces and XML Schema. While we recommend using the plugin, the documentation helps you understanding which features come with IDEA and which are added through the Jangaroo plugin, and it should offer a good starting point for other XML tools that can be used to edit EXML.

Built-In EXML / XML Schema Support

EXML is based on XML Schemata, generated from annotations in the original Ext JS 3 source code. The Jangaroo EXML tool generates such an XML Schema for your own components, too.

Out of the box, IDEA supports XML-Schema-based XML editing including namespaces with the following features:

• Code Completion: The Schema tells IDEA which elements and attributes may come next, so Ctrl+Space knows what to suggest. To close a tag, simply type </ and hit Ctrl+Space again.
• Intentions: For example "Expand Empty Tag" (<panel/> => <panel></panel>) or "Insert Namespace Prefix" to assign a name to the default namespace (<panel/> => <ext:panel/>). Intentions are shown as a yellow light bulb and the intention / quick fix menu can then be opened by Alt+Return.
• Documentation Lookup: The generated Ext JS 3 XML Schema contains full documentation of components and their config attributes, using <xs:documentation> elements. Since these are standard, IDEA shows the corresponding documentation when pressing Ctrl+Q ("Quick Documentation Lookup") while on a tag or an attribute. Note: There is a bug in IDEA that causes some standard attributes like title to incorrectly claim it is defined in "any DTD", so you cannot see the documentation of those attributes. The workaround is to press Ctrl+Shift+I ("Quick Definition Lookup"), which looks less fancy, but at least lets you read the documentation.
• Validation: IDEA features incremental, on-the-fly validation against XML Schema (red marks) as well as a validation run that reports all errors and allows to navigate to the error location.

Jangaroo IDEA Plugin

For optimal EXML support, you have to install the Jangaroo IDEA plugin Jangaroo 0.9. Just follow the instructions of section Installing the Jangaroo Language IDEA Plugin on page Developing Jangaroo Applications with IntelliJ IDEA. If you are stuck with an old Jangaroo version, you may have to install two plugins; for details please consult Home.

The Jangaroo IDEA plugin adds the following EXML-specific features:

• Maven Import: When importing a Jangaroo Maven project using EXML in IDEA, the plugin takes care of all necessary setup of XML namespaces and EXML facets (see below).
• File Templates: Quickly create a new EXML component via package context menu "New > | Ext AS Component" (AS3 class) or "New > | EXML Component" (EXML file).
• Code Navigation: To navigate to other EXML, Ext AS, or Ext JS components used at the current cursor position, simply Ctrl+Click or press Ctrl+B. The plugin first looks for an EXML file where the component is defined. If there is no such EXML file, an ActionScript definition is looked up. For original Ext JS components, the AS3 API class from the Jangaroo library ext-as is shown, containing full documentation of the class and all its members.
• Inline ActionScript Code: Using IDEA's language injection capabilities, Jangaroo adds support for ActionScript code inside EXML. ActionScript code may appear in curly braces in XML attribute values (handler="{function() { window.alert('gotcha!'); }}"). Thus, with the EXML plugin, IDEA offers full code assist for inline scripts (code completion, documentation lookup, validation, ...). Note: The EXML plugin does not yet handle imports correctly. Instead of generating an <exml:import class="..."/> element at the beginning of the file, an inline import ...; is added, which causes a validation error. Until this issue is solved, please refrain from using the offered "intention" to import ActionScript classes.
• EXML Configuration UI: IDEA can be extended by so-called facets to let you edit module settings for new languages or tools. The Jangaroo EXML plugin adds such a facet for the EXML-to-ActionScript compiler.