GWT and existing html pages
Ara Abrahamian
I'm trying to mix GWT with an existing web app. In other words, other
than creating the whole screen, or part of the screen in GWT using
RootPanel.get().add() and FlowLayout and so on, I want to be able to,
let's say just get a FormPanel object wrapping an html form element of
the page and just do an ordinary addFormHandler() on it.
Is it possible?
My understanding so far is that it's not possible. It IS possible to
"add" widgets complete with functionality and such to an existing html
page, but is not possible to just wrap existing html elements and add
functionality to them.
So as an exercise I tried to make it happen myself :) So I tried to
port appfuse's login page from javascript to GWT/java:
public void onModuleLoad() {
final XTextBox username = new XTextBox("j_username");
final XTextBox password = new XTextBox("j_password");
XFormPanel formPanel = new XFormPanel("loginForm");
formPanel.addFormHandler(new FormHandler(){
public void onSubmit(FormSubmitEvent formSubmitEvent) {
String usernameValue = username.getText();
String passwordValue = password.getText();
if(passwordValue==null ||
passwordValue.trim().equals("") || usernameValue ==null ||
usernameValue.equals("")) {
formSubmitEvent.setCancelled(true);
Window.alert("Required fields left blank,
fill'em!");
} else {
Date expires = new Date();
expires.setTime(expires.getTime() + 14 * 24 * 60 *
60 * 1000); // sets it for approx 14 days.
Cookies.setCookie("username", usernameValue,
expires);
}
}
public void onSubmitComplete(FormSubmitCompleteEvent
formSubmitCompleteEvent) {}
});
formPanel.hookEvents();
}
XFormPanel is nothing extraordinary, it's modeled after GWT's
FormPanel, BUT it wraps itself around and existing html element:
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FormHandler;
import com.google.gwt.user.client.ui.FormHandlerCollection;
public class XFormPanel extends XUIObject {
private FormHandlerCollection formHandlers;
public XFormPanel(String elementId) {
super(elementId);
}
public void addFormHandler(FormHandler formHandler) {
if (formHandlers == null) {
formHandlers = new FormHandlerCollection();
}
formHandlers.add(formHandler);
}
public void hookEvents() {
hookSubmitEvent(getElement(), this, formHandlers);
}
public native void hookSubmitEvent(Element form, XFormPanel
formPanel, FormHandlerCollection listener) /*-{
form.onsubmit = function() {
return !
listener.@com.google.gwt.user.client.ui.FormHandlerCollection::fireOnSubmit(Ljava/
lang/Object;)(formPanel);
}
}-*/;
}
hookSubmitEvent is the interetsing part. It gets a form submit event
from html form element and fires it as a GWT event to the java code.
The html is simply the existing one:
<form method="post" id="loginForm" action="/j_security_check">
<li>
<label for="j_username" class="required desc">
username <span class="req">*</span>
</label>
<input type="text" class="text medium"
name="j_username" id="j_username" tabindex="1" />
</li>
And so on. You get the idea.
Funny thing is it works!
- I wonder why such a thing is not included in GWT core?
- Am I wasting my time? Doing something wrong? Any roadblocks in such
a code?
- Should I continue working on the idea? Perhaps change GWT svn code
to have this capability? Or start an OS project for this? Or are there
plans for such a thing?
Cheers,
Ara.
Reinier Zwitserloot
>
> Is it possible?
>
Sort of. The technology behind GWT certainly has no beef with this
concept, BUT, there is some logistics going on under the hood which
make life a bit difficult. For example, most GWT widgets track
listeners separately, so you can't import those properly from non-GWT-
created widgets, and some other minor details (attach info, for
example, is tracked by GWT, it's not retreived from the DOM model at
all).
There are currently no libraries that I know of, and definitely
nothing in GWT-core, that makes this process easy, though.
> My understanding so far is that it's not possible. It IS possible to
> "add" widgets complete with functionality and such to an existing html
> page, but is not possible to just wrap existing html elements and add
> functionality to them.
>
Though it certainly IS possible to grab basic JS objects (Element,
Event) out of the DOM and do stuff with them, mostly by way of the
very very low level DOM.* methods. In certain circumstances this is
good enough.
> - I wonder why such a thing is not included in GWT core?
GWT is fairly new; no one has gotten around to it. Or perhaps: No one
has considered using GWT in that way.
> - Am I wasting my time? Doing something wrong? Any roadblocks in such
> a code?
Not particularly, though it might help for you to have a look at what
GWT stored 'internally' instead of foisting unto the DOM for all the
most commonly used widgets. For example, panel.add(someWidget) doesn't
just do DOM.appendChild(panel.getElement(), widget.getElement()); - it
ALSO sets attachment state, which has effects on asking for the
parents of things (as far as I can remember, you might want to check
this). There's also the issue of GWT's event system which is
complicated (it has to be to avoid JS<->DOM circular references which
cause memory leaks). However, once you have created a tally, for each
item you simply figure out if you can get the relevant info out of the
DOM/JS methods, or if you can build a workaround that gets close
enough/forces you to add some markers in the non-GWT generated stuff,
but not much, or if you can just ignore them.
Assuming you can sort everything into those 3 categories, this project
will work. I don't think you'll run into major showstoppers,
personally; most GWT widgets are implemented as only nicely structured
but very light DOM layering; in the end most GWT method calls
eventually find their way to a DOM.* method, which are all stuff you
can do with non-GWT created objects as well.
> - Should I continue working on the idea? Perhaps change GWT svn code
> to have this capability? Or start an OS project for this? Or are there
> plans for such a thing?
I doubt this is something that should find its way into GWT-core right
away; GWT is already complicated enough for now. An add-on library, or
eventually, something that does go into the GWT core downloads, but in
a separated module, sounds like a better idea.