Rough version of element capture implemented
glongman
http://spindle.sourceforge.net/AutoCompleterDemo.htm
...the wheels were turing in my head about how this can be used in
Tapestry (as I am a Tapestry committer). I thought to myself it would
be nice to add GWT TextBox behaviour to an <input> field that was
rendered into the page by Tapestry.
I managed to do it. Follows is the code. It's brute force but it
definitely works. Comments and suggestions are welcome.
(package names removed to protect the innocent)
/**
* A standard single-line text box.
* <p>
* Changed so that there is the option that instead of creating a Text
box, it adds GWT Textbox behaviour to a text box
* defined in the HTML (capturing it!).
* <p>
* Warning: adding the captured version of this to a normal GWT
container will probably break in new and interesting ways!
*/
public class CapturableTextBox extends TextBoxBase {
/**
* Capture!
* Adds GWT text box behviour to an existing <input> element
*/
public CapturableTextBox(Element element) {
super(element);
CapturePanel.get().add(this);
}
// all below is unchanged from the standard TextBox
/**
* Creates an empty text box.
* The default we expect from the unmodified TextBox!
*/
public CapturableTextBox() {
super(DOM.createInputText());
setStyleName("gwt-TextBox");
}
/**
* Gets the maximum allowable length of the text box.
*
* @return the maximum length, in characters
*/
public int getMaxLength() {
return DOM.getIntAttribute(getElement(), "maxLength");
}
/**
* Gets the number of visible characters in the text box.
*
* @return the number of visible characters
*/
public int getVisibleLength() {
return DOM.getIntAttribute(getElement(), "size");
}
/**
* Sets the maximum allowable length of the text box.
*
* @param length
* the maximum length, in characters
*/
public void setMaxLength(int length) {
DOM.setIntAttribute(getElement(), "maxLength", length);
}
/**
* Sets the number of visible characters in the text box.
*
* @param length
* the number of visible characters
*/
public void setVisibleLength(int length) {
DOM.setIntAttribute(getElement(), "size", length);
}
}
in orfer for things to setup properly, the captured widget is added to
this container automagically. Built by looking at RootPanel.
package com.cleancode.demo.autocompleter.client;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.WindowCloseListener;
import com.google.gwt.user.client.ui.ComplexPanel;
/**
* The panel contains captured widgets. There is one capture panel for
* the entire window. They never created directly.
*/
public class CapturePanel extends ComplexPanel {
private static CapturePanel INSTANCE;
/**
* Gets the window's capture panel. This panel wraps body of the
browser's
* document. This capture panel can contain any number of captured
widgets, whose layout
*comes from the html they were captured from.
*
* @return the default CapturePanel
*/
static CapturePanel get() {
return getInstance();
}
private static CapturePanel getInstance() {
// See if this CapturePanel is already created.
if (INSTANCE == null) {
hookWindowClosing();
INSTANCE = new CapturePanel();
}
return INSTANCE;
}
/**
* Convenience method for getting the document's body element.
*
* @return the document's body element
*/
private static native Element getBodyElement() /*-{
return $doc.body;
}-*/;
private static void hookWindowClosing() {
// Catch the window closing event.
Window.addWindowCloseListener(new WindowCloseListener() {
public void onWindowClosed() {
// When the window is closing, detach the page CpaturePanel.
This will cause
// all of their children's event listeners to be unhooked,
which will
// avoid potential memory leaks.
INSTANCE.onDetach();
}
public String onWindowClosing() {
return null;
}
});
}
private CapturePanel() {
Element elem = getBodyElement();
setElement(elem);
onAttach();
}
}
-- a demo class
public class CaptureDemo implements EntryPoint {
/**
* This is the entry point method.
*/
public void onModuleLoad() {
Element existing = DOM.getElementById("existing");
final CapturableTextBox capturedTextBox = new CapturableTextBox
(existing);
}
}
--html
<html>
<head>
<meta name='gwt:module'
content='CaptureDemo'>
</head>
<body>
<script language="javascript" src="gwt.js"></script>
<form>
<input id="existing" type="text"/>
</form>
</body>
</html>
I took my auto completer and made it extend CapturableTextBox and it
worked both in the normal way and in a captured text field.
Geoff