-
Notifications
You must be signed in to change notification settings - Fork 68
Documentation
Option 1: Copy the AceGWT/src/edu directory and its contents into your the directory containing your GWT source code. Then, add the following to the <module> element of the .gwt.xml file for your project:
<inherits name='edu.ycp.cs.dh.acegwt.AceGWT'/>Option 2: Add the AceGWT project to your Eclipse workspace. Edit properties for your GWT project, choose Java Build Path, Projects, Add, and then choose the AceGWT project. Then, add the following to the <module> element of the .gwt.xml file for your project:
<inherits name='edu.ycp.cs.dh.acegwt.AceGWT'/>Your will need to include some js files to get ACE as well as the modes and themes you plan to use. You can include them as <script> elements in the <head> element of your application's html file:
Include ace.js (required):
<script src="yourapp/ace/ace.js" type="text/javascript" charset="utf-8"></script>Note: replace "yourapp" with the base URL of your application.
Include mode and theme files (optional): example
<script src="yourapp/ace/theme-eclipse.js" type="text/javascript" charset="utf-8"></script>
<script src="yourapp/ace/mode-java.js" type="text/javascript" charset="utf-8"></script>
<script src="yourapp/ace/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="yourapp/ace/mode-perl.js" type="text/javascript" charset="utf-8"></script>Again, replace "yourapp" with the base URL of your application.
The above includes the eclipse and twilight themes, and the java and perl modes.
The AceEditor class represents an instance of the ACE editor. It is a subclass of the GWT Composite class, and so can be added to a dynamically-generated UI the same as any other GWT widget.
Before an AceEditor widget will turn into an actual ACE editor instance, you must call its startEditor() method. This method must be called after the AceEditor is added to the web page, and before any other method calls are made on the AceEditor widget (to set the mode, theme, etc.)
Here is an example onModuleLoad() method which creates an AceEditor widget and adds it to the UI:
public void onModuleLoad() {
AceEditor editor = new AceEditor();
editor.setWidth("600px");
editor.setHeight("400px");
RootPanel.get().add(editor);
editor.startEditor();
editor.setMode(AceEditorMode.PERL);
editor.setTheme(AceEditorTheme.TWILIGHT);
}Note that you will probably want to store references to AceEditor objects in fields so that your event handlers can refer back to them.
ACE Editor supports a variety of code completion options, which are disabled by default.
Note, these APIs may change in the future, this should be treated as beta functionality.
Local Auto-Completions:
Local auto-completions are implemented by the Ace itself, and involves Ace tokenizing what appears to be all alpha-numeric words in an editor window, then presenting options from that bank of words to the user.
AceEditor myAceEditor = << init >>;
myAceEditor.startEditor();
myAceEditor.setAutocompleteEnabled(true);This can be useful for documents with a low entropy of possible words as there will only be a few options to choose from. For larger documents with higher entropy (such as a text file containing a story), there may be thousands of words in which to choose from, so the auto-complete pool is potentially too crowded to be useful.
An additional problem for documents with a high word entropy is that it can have the effect of slowing down the editor pain as the document gets larger as constant tokenization is occurring (although this is a personal observance that may be incorrect).
Bespoke / Custom Auto-completions
Bespoke substitutions are probably a better option from the GWT perspective. Bespoke substitutions allow full control over what substitutions are presented by way of callbacks. The position in the document where the auto-completion is invoked, along with the prefix to the invocation is provided to a user-defined callback method.
Ace itself takes care of only presenting auto-completions that match the prefix at the location in which CTRL + SPACE is pressed. If there is only a single option, then ACE will automatically apply that auto-completion, as it knows there is only a single choice. If the autocompletion is not desired, the user can always undo with CTRL + Z as is usual.
See the AceDemo project for a concrete example.
private static class MyCompletionProvider implements AceCompletionProvider {
@Override
public void getProposals(AceEditor editor, AceEditorCursorPosition pos, String prefix, AceCompletionCallback callback) {
/** This example shows statically defined auto-completion options but these can be dynamic, and can be sources via an RPC call */
callback.invokeWithCompletions( new AceCompletion[]{
// ITEM 1 - A basic substitution
new AceCompletionValue(
"first", // The caption of the item in the auto complete box (as it appears on left side of dropdown)
"firstcompletion", // The value of the substitution.
"regular", // This field can contain any non-empty string -- narrative only
10 // The score of the auto completion item, higher scores appear higher in the drop down
),
// ITEM 2 - A snippet based substitution (allows caret placement + tab stops
new AceCompletionSnippet(
"second", // The caption of the item in the auto complete box (as it appears on left side of dropdown)
new AceCompletionSnippetSegment[]{ // The elements of a tokenized substitution with tab stop elements
new AceCompletionSnippetSegmentLiteral("filler_"), // The subsitution in this case will be "filler_
new AceCompletionSnippetSegmentTabstopItem("tabstop1"), // and post-completion "tabstop1" will be selected by the editor.
new AceCompletionSnippetSegmentLiteral("_filler2"),
},
"snippet", // This field can contain any non-empty string -- narrative only
15 ) // The score of the auto completion item, higher scores appear higher in the drop down
});
}
}
public void onModuleLoad() {
AceEditor myAceEditor = << init >>;
myAceEditor.startEditor();
// Optionally remove all existing completers (local) for the editor
myAceEditor.removeAllExistingCompleters();
myAceEditor.setAutocompleteEnabled(true);
// Associate the custom completer with the ACE library
// NOTE :: Currently a static method, this may change in subsequent release
AceEditor.addCompletionProvider(new MyCompletionProvider());
}