ahome-ace

High performance web code editor for GWT.

ahome-ace is a java API for the Ace Editor. If you want to embed a powerful web based editor in a GWT application, ahome-ace might be what you're looking for!

The editor comes with a lot of nice feratures:

• Fully integrate with GWT Widgets.
• UI Binder support
• Syntax highlighting for over 110 languages (TextMate/Sublime Text.tmlanguage files can be imported)
• Over 20 themes (TextMate/Sublime Text .tmtheme files can be imported)
• Automatic indent and outdent
• An optional command line
• Handles huge documents (four million lines seems to be the limit!)
• Fully customizable key bindings including vim and Emacs modes
• Search and replace with regular expressions
• Highlight matching parentheses
• Toggle between soft tabs and real tabs
• Displays hidden characters
• Drag and drop text using the mouse
• Line wrapping
• Code folding
• Multiple cursors and selections
• Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
• Cut, copy, and paste functionality
• And more to come ...

The following components are required to work with ahome-ace:

• GWT 2.5 and higher
• ahome-core project

##Getting started with ahome-ace

1. The project does'nt not have a binary. So one will have to build a jar file from source and add it to the classpath

2. Inherit the ahome-ace module

  <inherits name="com.ait.toolkit.ace.AhomeAce"/>

3. Below is an example how to use the widget.In this example we use our ahome-ext library but ahome-ace is compatible with any GWT library.

package com.ait.toolkit.clientio.demo.client;
package com.ait.toolkit.clientio.demo.client;

import com.ait.toolkit.ace.client.AceEditor;
import com.ait.toolkit.ace.client.AceEditorMode;
import com.ait.toolkit.ace.client.AceEditorOptions;
import com.ait.toolkit.ace.client.AceEditorTheme;
import com.ait.toolkit.sencha.ext.client.core.ExtEntryPoint;
import com.ait.toolkit.sencha.ext.client.layout.Layout;
import com.ait.toolkit.sencha.ext.client.ui.Window;

public class AceTest extends ExtEntryPoint {

	private AceEditor edior;

	@Override
	public void onLoad() {

		Window w = new Window("ACE Editor");
		w.setLayout(Layout.FIT);
		w.setSize(700, 400);

		edior = new AceEditor();
		edior.setTheme(AceEditorTheme.TWILIGHT);
		edior.setMode(AceEditorMode.JAVASCRIPT);

		AceEditorOptions options = new AceEditorOptions();
		// options.setEnableBasicAutocompletion(true);
		options.setEnableLiveAutocompletion(true);
		edior.setOptions(options);

		w.add(edior);
		w.show();
	}

}

4. ahome-ace also works nicely with GWT's UI Binder

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:x="urn:import:com.ait.toolkit.sencha.ext.client.ui"
	xmlns:ace="urn:import:com.ait.toolkit.ace.client" >
	
	<x:Window ui:field="window" title="ACE Editor demo" layout="fit" componentHeight="400" componentWidth="700">
	   <ace:AceEditor  ui:field="editor"  theme="twilight" mode="javascript" />
	</x:Window>
	
</ui:UiBinder> 

package com.ait.toolkit.clientio.demo.client;

import com.ait.toolkit.ace.client.AceEditor;
import com.ait.toolkit.ace.client.events.BlurEvent;
import com.ait.toolkit.sencha.ext.client.events.component.ShowEvent;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;

public class AceDemo extends Composite {

	private static AceDemoUiBinder uiBinder = GWT.create(AceDemoUiBinder.class);

	interface AceDemoUiBinder extends UiBinder<Widget, AceDemo> {
	}

	@UiField
	com.ait.toolkit.sencha.ext.client.ui.Window window;

	@UiField
	AceEditor editor;

	public AceDemo() {
		initWidget(uiBinder.createAndBindUi(this));
	}

	public com.ait.toolkit.sencha.ext.client.ui.Window getWindow() {
		return window;
	}

	public AceEditor getEditor() {
		return editor;
	}

	@UiHandler("window")
	public void handlerShow(ShowEvent e) {
		Window.alert("Show event");
	}

	@UiHandler("editor")
	public void handlerBlur(BlurEvent e) {
		Window.alert("blur event");
	}

}

##Real world Demo

• Ahomé-Ace Demo

##Issues tracking

• Ahomé-Ace Issues tracker

##Community

• Ahomé Google+ Community - See whats happening in the community.

##Enterprise Support Get high quality support through Ahomé

• Buy Enterprise Support