Blog
Now that's cool
If you are following my blog you may have noticed that I invested some hours this weekend in Eclipse-Databinding and GWT. It was Saturday in the evening when I got the Eclipse-Databinding working inside GWT and I started searching for a decent Table and TableTree-Widget (I looked at the code in the gwt-incubator but that didn't made me happy). So I thought the RAP people are using Qooxdoo as the underlying JavaScript-UI library what would be if there was a GWT-Binding to this JavaScript-Lib using the GWT-native calling interface and so I started search for such a thing but apparently noone ever tried to write such a thing. So I started reading docs and studying libraries who use this native-calling interface - I've never written such a thing before - and voilá it was yesterday around lunch time when I had the first success because one of the GWT-Demos showed up. Video The Java code for this small application looks like this:
public class Button extends QooxdooApp {
@Override
protected void run(QxAbstractGui application) {
QxHBox box = new QxHBox();
box.setSpacing(10);
QxComposite container = new QxComposite(box);
container.setPadding(20);
application.getRoot().add(container, QxOption.left(0), QxOption.top(0));
QxButton btn1 = new QxButton("Button A", "/icon/22/apps/media-video-player.png");
container.add(btn1);
QxButton btn2 = new QxButton("Button B", "/icon/22/apps/internet-mail.png");
btn2.setEnabled(false);
container.add(btn2);
QxToggleButton btn3 = new QxToggleButton("Toggle Button", "/icon/22/apps/internet-web-browser.png");
btn3.focus();
container.add(btn3);
QxRepeatButton btnRepeat = new QxRepeatButton(null,"/icon/22/actions/list-add.png");
container.add(btnRepeat);
final QxLabel l1 = new QxLabel("0");
l1.setDecorator("main");
l1.setPadding(2, 4);
l1.setBackgroundColor("white");
container.add(l1);
btnRepeat.addExecuteHandler(new ExecuteHandler() {
public void execute(ExecuteEvent executeEvent) {
int tmp = Integer.parseInt(l1.getContent()) + 1;
l1.setContent(tmp+"");
}
});
}
}
and now compare it too the original source:
/* ************************************************************************
qooxdoo - the new era of web development
http://qooxdoo.org
Copyright:
2004-2008 1&1 Internet AG, Germany, http://www.1und1.de
License:
LGPL: http://www.gnu.org/licenses/lgpl.html
EPL: http://www.eclipse.org/org/documents/epl-v10.php
See the LICENSE file in the project's top-level directory for details.
Authors:
* Sebastian Werner (wpbasti)
* Fabian Jakobs (fjakobs)
************************************************************************ */
/* ************************************************************************
#asset(qx/icon/${qx.icontheme}/22/apps/media-video-player.png)
#asset(qx/icon/${qx.icontheme}/22/apps/internet-mail.png)
#asset(qx/icon/${qx.icontheme}/22/apps/internet-web-browser.png)
#asset(qx/icon/${qx.icontheme}/22/actions/list-add.png)
************************************************************************ */
qx.Class.define("demobrowser.demo.widget.Button",
{
extend : qx.application.Standalone,
members :
{
main: function()
{
this.base(arguments);
var box = new qx.ui.layout.HBox();
box.setSpacing(10);
var container = new qx.ui.container.Composite(box);
container.setPadding(20);
this.getRoot().add(container, {left:0,top:0});
// Two normal buttons
var btn1 = new qx.ui.form.Button("Button A", "icon/22/apps/media-video-player.png");
container.add(btn1);
var btn2 = new qx.ui.form.Button("Button B", "icon/22/apps/internet-mail.png");
btn2.setEnabled(false);
container.add(btn2);
// Toggle Button
var btn3 = new qx.ui.form.ToggleButton("Toggle Button", "icon/22/apps/internet-web-browser.png");
btn3.focus();
container.add(btn3);
btn3.addListener("changeChecked", function(e) {
this.debug("Checked: " + e.getData());
}, this);
// Repeat Button
var img1 = "icon/22/actions/list-add.png";
var btnRepeat = new qx.ui.form.RepeatButton(null, img1);
container.add(btnRepeat);
// Label
var l1 = new qx.ui.basic.Label("0");
l1.setDecorator("main");
l1.setPadding(2, 4);
l1.setBackgroundColor("white");
container.add(l1);
// Listener
btnRepeat.addListener("execute", function()
{
var tempValue = parseInt(l1.getContent()) + 1;
l1.setContent(tempValue.toString());
});
}
}
});
Afterwards I went outdoors because the weather was just too nice to stay inside but because of my great success in the morning I sat down and implemented a few more widgets to show you the GWT-Databinding example from Saturdays post running on Qooxdoo-GWT. Video
public class TextLabelBinding extends QooxdooApp {
@Override
protected void run(QxAbstractGui application) {
final QxLabel titleLabel = new QxLabel("");
final QxTextField firstNameField = new QxTextField("");
final QxTextField lastNameField = new QxTextField("");
QxVBox box = new QxVBox();
box.setSpacing(10);
QxComposite container = new QxComposite(box);
container.setPadding(20);
container.add(titleLabel);
container.add(firstNameField);
container.add(lastNameField);
application.getRoot().add(container, QxOption.left(0), QxOption.top(0));
final Person p = new Person();
p.setFirstname("Tom");
p.setLastname("Schindl");
DataBindingContext dbc = new DataBindingContext(QxObservables.getRealm());
QxIWidgetValueProperty uiProp = QxWidgetProperties.text();
dbc.bindValue(uiProp.observe(firstNameField), UBeansObservables.observeValue(QxObservables.getRealm(), p, Person.FIRST_NAME));
dbc.bindValue(uiProp.observe(lastNameField), UBeansObservables.observeValue(QxObservables.getRealm(), p, Person.LAST_NAME));
ComputedValue titleValue = new ComputedValue(QxObservables.getRealm()) {
private IObservableValue last = UBeansObservables.observeValue(QxObservables.getRealm(), p, Person.LAST_NAME);
private IObservableValue first = UBeansObservables.observeValue(QxObservables.getRealm(), p, Person.FIRST_NAME);
@Override
protected Object calculate() {
return last.getValue().toString().toUpperCase() + ", " + first.getValue();
}
};
dbc.bindValue(uiProp.observe(titleLabel), titleValue);
}
}
I'm going to look at the more complex controls when having the next free time slot but for now this is just plain cool, isn't it?