implementing autocomplete for freemarker and velocity languages in ace editor
TRANSCRIPT
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
Thursday, October 10, 13
• 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
Thursday, October 10, 13
• Relatively complicated user interface
What we had in Liferay 6.1
Thursday, October 10, 13
Step #1:Click on Add Template Button
What we had in Liferay 6.1
Thursday, October 10, 13
Step #2:Click on Launch EditorButton
What we had in Liferay 6.1
Thursday, October 10, 13
Result:Plain Text Editor
What we had in Liferay 6.1
Thursday, October 10, 13
Or basicRich Text Editor
What we had in Liferay 6.1
Thursday, October 10, 13
Click Save orSave and Continue
If you want to edit again,click again on Launch Editor
What we had in Liferay 6.1
Thursday, October 10, 13
• Relatively complicated user interface (true, right?)
What we had in Liferay 6.1
Thursday, October 10, 13
• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete
What we had in Liferay 6.1
Thursday, October 10, 13
• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete• No Palette
What we had in Liferay 6.1
Thursday, October 10, 13
• Relatively complicated user interface (true, right?)• ACE Editor without any kind of AutoComplete• No Palette• No context help, no link to external resources
What we had in Liferay 6.1
Thursday, October 10, 13
• 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.
What we had in Liferay 6.1
Thursday, October 10, 13
Making the AutoComplete
Thursday, October 10, 13
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
Thursday, October 10, 13
AutoComplete architecture
ACE Editor Language processor Result list
FiltersSortersFormatters
Thursday, October 10, 13
• 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
Thursday, October 10, 13
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
Thursday, October 10, 13
The Base module intercepts ACE Editor commands, like:
- onTextInput- golinedown- golineup- gotoend- gotolineend- gotolinestart
(and a few others)
The Base
Thursday, October 10, 13
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
Thursday, October 10, 13
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
Thursday, October 10, 13
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
Thursday, October 10, 13
AutoComplete Variables example
Variable
AutoComplete UI
Thursday, October 10, 13
AutoComplete Directives example
Thursday, October 10, 13
Learning from the mistakesInitially we implemented the AutoComplete using Ternary Search Tree.
c / | \ a u h | | | \ t t e u / / | / | s p e i s
Source: Wikipedia
Thursday, October 10, 13
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.
Thursday, October 10, 13
Making the Palette
Thursday, October 10, 13
Making the PaletteRepresents the most often used:• General variables• Utilities• Web Content Services• Portal Services• Data List Variables• Data List Record Fields
Thursday, October 10, 13
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
Thursday, October 10, 13
The Palette – general view
Thursday, October 10, 13
The Palette – general view
Click with the mouse (or tap) to insert the item in the editor
Thursday, October 10, 13
The Palette – general viewThe result goes where the cursor was
Thursday, October 10, 13
From Structure to TemplateLet's suppose we have an example structure with
three fields:
• Name• Image• URL
Thursday, October 10, 13
From Structure to Template
Thursday, October 10, 13
From Structure to Template
The Palette automatically includes the structure fields on creating Template.
Thursday, October 10, 13
Context help and searching
Context help with link to the Javadoc page
Search box, use it to filter the results
Thursday, October 10, 13
Applying the Palette and AutoComplete• Applying to Web Content• Applying to Data Definitions• Applying to ADT (Application Display Template)
Thursday, October 10, 13
Applying to Data Definitions
Displays the previously created fields into the Data Definition
Thursday, October 10, 13
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.
Thursday, October 10, 13
Extending AutoComplete
Web Based SQL Editor with AutoComplete
Thursday, October 10, 13
The future• Adding more language processors.• Adding visual formatters.• Applying the AutoComplete to other Editors.• Show nested fields in Palette
Thursday, October 10, 13
You can contribute too!
Sometimes the chains that prevent us to be creative and free are more mental than physical.
Thursday, October 10, 13
Thanks!
Questions?
Twitter: ipeychevGitHub: ipeychev
Thursday, October 10, 13