Completion for AUI Framework.

AlloyUI is a framework built on top of YUI3 (JavaScript) that uses Bootstrap (HTML/CSS) to provide a simple API for building high scalable applications.

Liferay uses AlloyUI, so a Tern Plugin for AlloyUI is interesting to provide AlloyUI completion in JavaScript editor like this :

With Liferay, AlloyUI completion should be available in 2 contexts:

• Eclipse IDE: when you write JSP inside Eclipse IDE, you can use scripts with AUI. I think it should be cool to have completion on AUI framework.
• Web Browser: in the Liferay portal, you can edit WebContent, Template with a ACE EDitor and insert some scripts like AUI. I think it should be cool to have completion on AUI framework.

AlloyUI Tern plugin

tern.js is a JavaScript inference engine which can be used in Browser context and with tern.java, this engine can be used in Java context and Eclipse IDE context. With tern, you can write your Tern plugin to manage your JavaScript framework. the aui.js is a tern plugin which manages AUI.

This tern plugin comes from tern.yuidoc project.

AlloyUI & Web Browser

tern.js can be used inside a WebBrowser. It exists a CodeMirror Addon which is enable to plug tern with CodeMirror.

If you wish to see in action AUI & CodeMirror, you can play with the online demo

Here a screenshot of AUI completion with CodeMirror :

In Liferay context, ACE Editor is used. I think it's not very difficult to develop the same glue than tern CodeMirror addon, to use Tern in ACE.

AlloyUI & Eclipse IDE

After installing and converting your project as Tern Project, go at Tern project property, you can check the AlloyUI plugin (check aui.js) :

After that you can benefit with AlloyUI completion on AUI :

Completion on AUI functions are available like use function :

The A variable coming from the function callback is recognized as YUI instance,

If you use 'aui-node', you will see that YUI instance is injected in the callback function with one method coming from the 'aui-node' module :

A.one returns an instance of (YUI)Node, you can benefit with completion of (YUI)Node :

Completion for object literal :

Completion for available modules

• Completion for modules :

• Completion for submodules :

Validation module & submodules

Validation module is available if you enable the (Semantic) Lint linter) :

YUI Class extension & mix

Anim class extends Base which provides none methods/properties but which uses several classes like BaseCore, AttributeCore. The tern plugin is able to mix BaseCore, AttributeCore methods/properties in Base to provide for instance addAttr:

A.Node Augments

AlloyUI A.Node augments the YUI3 Node with more util methods. The tern plugin is able to mix YUI3 node with AlloyUI A.Node to provide for instance ancestorsByClassName: