/ahome-ace

High performance web code editor for GWT

Primary LanguageJavaApache License 2.0Apache-2.0

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"/>
  1. 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();
	}

}
  1. 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

##Issues tracking

##Community

##Enterprise Support Get high quality support through Ahomé