Implementing AutoComplete for Freemarker and Velocity languages in ACE Editor

Introducing AutoComplete for Velocity and FreeMarker languages in Liferay Portal 6.2

Liferay UI Engineer

Iliyan Peychev

Thursday, October 10, 13

A few words about meStarted as C developer ~12 years ago.

Lately turned to Java developer.

Currently working as Front-End engineer at Liferay.

Twitter: ipeychevGitHub: ipeychev


• What we had in Liferay 6.1• Making the AutoComplete• Making the Palette• Applying both to Web Content, DDM and ADT• Extending the AutoComplete• Future

Agenda


• Relatively complicated user interface

What we had in Liferay 6.1


Step #1:Click on Add Template Button



Step #2:Click on Launch EditorButton



Result:Plain Text Editor



Or basicRich Text Editor



Click Save orSave and Continue

If you want to edit again,click again on Launch Editor



• Relatively complicated user interface (true, right?)



• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete



• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete• No Palette



• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete• No Palette• No context help, no link to external resources



• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete• No Palette• No context help, no link to external resources

As result, developers very often used external editors to create their Templates.



Making the AutoComplete


ACE Editor does not provide AutoComplete.

We had to build it from scratch.

Fortunately, it turned its API is powerful enough to achieve this goal without many efforts.

Making the AutoComplete


AutoComplete architecture

ACE Editor Language processor Result list

FiltersSortersFormatters


• Fill mode• Overwrite mode

Overwrite mode is by default, it replaces the input string entirely.

Fill mode adds the suggestion after the input string.

AutoComplete modes


We built a new module for the AlloyUI Framework.

This module consists of Base, UI and Language processors.

Currently we support parts of Freemarker and Velocity languages.

ACE AutoComplete is an AlloyUI module


The Base module intercepts ACE Editor commands, like:

- onTextInput- golinedown- golineup- gotoend- gotolineend- gotolinestart

(and a few others)

The Base


The UI is a standard AlloyUI Overlay.

It is used to draw the suggestions in a list.

Supports keyboard navigation.

The developer can specify custom sorters or filters.

The UI


Since Freemarker and Velocity are similar and we support part of them, they have a common ancestor.

For both languages we support Directives and Variables.

The Language Processors


An instance of the Template editor can be modified on the fly.

This means we can always plug and unplug the AutoComplete functionality.

We can even replace one language with another.

Plugin Infrastructure


AutoComplete Variables example

Variable

AutoComplete UI


AutoComplete Directives example


Learning from the mistakesSearching was fast.

Constructing the Tree turned to be slow, so we discarded it from the Editor.

However, it is now AlloyUI module and all developers can use it.

Hint - use it when you construct the tree rarely (or once), but search often.


Making the Palette


Making the PaletteRepresents the most often used:• General variables• Utilities• Web Content Services• Portal Services• Data List Variables• Data List Record Fields


Making the PaletteRepresents the most often used:• General variables• Utilities• Web Content Services• Portal Services• Data List Variables• Data List Record Fields

Dynamically adds the fields in Structures and Data Definitions


The Palette – general view


The Palette – general view

Click with the mouse (or tap) to insert the item in the editor


The Palette – general viewThe result goes where the cursor was


From Structure to TemplateLet's suppose we have an example structure with

three fields:

• Name• Image• URL


From Structure to Template


From Structure to Template

The Palette automatically includes the structure fields on creating Template.


Context help and searching

Context help with link to the Javadoc page

Search box, use it to filter the results


Applying the Palette and AutoComplete• Applying to Web Content• Applying to Data Definitions• Applying to ADT (Application Display Template)


Applying to Data Definitions

Displays the previously created fields into the Data Definition


Extending AutoComplete

The AutoComplete is built with the idea of being easily extendable.

One day I read this Tweet:

“Primeros pasos en el desarrollo de un editor sql online utilizando @AlloyUI , #keepworking ”

Victor Miranda, Support Engineer, Liferay Spain

He created AutoComplete for SQL.


Extending AutoComplete

Web Based SQL Editor with AutoComplete


The future• Adding more language processors.• Adding visual formatters.• Applying the AutoComplete to other Editors.• Show nested fields in Palette


You can contribute too!

Sometimes the chains that prevent us to be creative and free are more mental than physical.


Thanks!

Questions?

Twitter: ipeychevGitHub: ipeychev


Implementing AutoComplete for Freemarker and Velocity languages in ACE Editor

Technology

Transcript of Implementing AutoComplete for Freemarker and Velocity languages in ACE Editor