gwt

Archived Posts from this Category

Sat 30 Jan 2010

What I’ve been up to!

Posted by nola under Ruby, android, gwt, life
1 Comment

Its been a crazy December through January and I haven’t written much!

I’m glad the GWT posts helped some of you from the comments. I spent some time on figuring them out from the limited docs on google’s GWT site, mostly I think it helps to have complete examples since they dont make it real clear what file each snippit of code goes in. I’m glad the pain I went through to figure them out help some of you A few of you had problems but i haven’t gotten around to seeing what is wrong. I was using the trunk version of GWT, so if you are using 2.0 then you might have some differences.

I’ve been diving my head back into rails after spending a spell in perl/mason and GWT in some projects for work. I think other languages are neat but I really love ruby. So I’ve been re-watching some of my episodes of PeepCode.com and RailsCasts.com those guys are awesome. I love this stuff. Why else would I be spending my Saturday night with Ruby vs watching a movie or playing a game!

I’ve also been playing with android a bit, its pretty fun to see my app on a phone! Working on a TODO List app, which seems almost like “hello world” but it has a twist… more later when i have something to show.

Been working learning jQuery. I had seen it before, but saw class names mixed with programming and having a ugghhhh feeling. But.. I decided to give it a shot and dang! I would have given my right arm to have this 5 years ago when i was experimenting with ajax (though it wasn’t called that…) with setting the src of a script tag with a php url to load and save data. Anyways, its cool and neat. I think the name is horrible since you aren’t really quering anything… IMHO Maybe if I can think of a better one I can suggest it, but seems like it is here to stay since there are stay since there are 4 books already about it!

To help with reviewing ruby I have been working through Ruby Koans. Hats off to EdgeCase. I have already written them and thanked them! This goes along with my post How To Get Better At Programming where I wrote about how i was working at getting better at programming. It all comes down to practice! … I think when I finish the rubykoans exercises, i will revert and start going through them again. Almost like doing pushups every day (I push up to get more coffee at least 3x a day!).

Git … I did my first pull request on github, very cool how that works.

Have some ideas for some more substantial posts… coming soon

Sun 1 Nov 2009

GWT 2.0: UiHandler

Posted by nola under gwt, java
No Comments

I was pretty excited to find UiHandler, it makes the organization of code so much cleaner!

I am putting in the full code for both, so you can see the beauty for yourself! Pay attention to the comments where i put the gotchas that got me at first!
Before:

PLAIN TEXT

JAVA:

package com.rubygeek.sandbox.client;
import java.util.ArrayList;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class LanguageList extends Composite {
interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiField CheckBox rubyCheck;
@UiField CheckBox pythonCheck;
@UiField CheckBox javaCheck;
@UiField CheckBox phpCheck;
@UiField Button button;
public LanguageList() {
// bind XML file of same name of this class to this class
initWidget(uiBinder.createAndBindUi(this));
final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
boxes.add(rubyCheck);
boxes.add(pythonCheck);
boxes.add(javaCheck);
boxes.add(phpCheck);
// add button and handler to alert the values of checkboxes
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
String output = "";
for(CheckBox box : boxes) {
if (box.getValue()) {
output += box.getFormValue() + ", ";
}
}
Window.alert("You checked: "+ output);
}
});
}
}

After:

PLAIN TEXT

JAVA:

package com.rubygeek.sandbox.client;
import java.util.ArrayList;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
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.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
public class LanguageList extends Composite {
interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
@UiField CheckBox rubyCheck;
@UiField CheckBox pythonCheck;
@UiField CheckBox javaCheck;
@UiField CheckBox phpCheck;
// add ClickEvent handler to button with ui:field="languageButton" in the UiBinder code
// !!! note no ; at end of this annotation, and the name of function does not matter, its the annotation that ties it to the
// body of the method, also this does not go inside the class (i spend 40 mins figuring that out...)
@UiHandler("languageButton")
void doClick(ClickEvent event) {
String output = "";
for(CheckBox box : boxes) {
if (box.getValue()) {
output += box.getFormValue() + ", ";
}
}
Window.alert("You checked: "+ output);
}
public LanguageList() {
// bind XML file of same name of this class to this class
initWidget(uiBinder.createAndBindUi(this));
boxes.add(rubyCheck);
boxes.add(pythonCheck);
boxes.add(javaCheck);
boxes.add(phpCheck);
}
}

See the constructure is further slimmed down!

Sat 31 Oct 2009

GWT 2.0: UiBinder, first look at simple example

Posted by nola under Javascript/AJAX, gwt, java, open source
[6] Comments

Note: as of right now, you can only get this feature in Trunk. see here for how to download the source and use it More Info on release

One of the great new features coming out of GWT 2.0 is UiBinder, a way to make a declarative UI without making tons of objects. Reminding you of swing? Yeah, I didn't sign up to be a Swing developer. I was sort of disturbed when I started doing gwt and was writing tons of java to just do simple HTML things.

Full Source

PLAIN TEXT

JAVA:

CheckBox rubyCheck = new CheckBox("Ruby");

rubyCheck.setFormValue("ruby");

boxes.add(rubyCheck);

CheckBox pythonCheck = new CheckBox("Python");

pythonCheck.setFormValue("python");

boxes.add(pythonCheck);

CheckBox javaCheck = new CheckBox("Java");

javaCheck.setFormValue("java");

boxes.add(javaCheck);

CheckBox phpCheck = new CheckBox("PHP");

phpCheck.setFormValue("php");

boxes.add(phpCheck);

// set up panel

Panel panel = new VerticalPanel();

panel.add(new Label("Choose a language:"));

Compare to the UiBinder code:

PLAIN TEXT

XML:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'

xmlns:g='urn:import:com.google.gwt.user.client.ui'>

<g:VerticalPanel>

<g:Label>Choose a language:</g:Label>

<g:CheckBox ui:field="rubyCheck" formValue="ruby">Ruby</g:CheckBox>

<g:CheckBox ui:field="pythonCheck" formValue="python">Python</g:CheckBox>

<g:CheckBox ui:field="javaCheck" formValue="java">Java</g:CheckBox>

<g:CheckBox ui:field="phpCheck" formValue="php">PHP</g:CheckBox>

<g:Button ui:field="button">Submit</g:Button>

</g:VerticalPanel>

</ui:UiBinder>

It is somewhat like HTML, each item with attribute "ui:field=" is the reference to the object that gets created in Java. Here's the Java code that uses this:

Full Source

PLAIN TEXT

JAVA:

public class LanguageList extends Composite {

interface MyUiBinder extends UiBinder<Widget, LanguageList> {}

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

@UiField CheckBox rubyCheck;

@UiField CheckBox pythonCheck;

@UiField CheckBox javaCheck;

@UiField CheckBox phpCheck;

@UiField Button button;

public LanguageList() {

   // bind XML file of same name of this class to this class

   initWidget(uiBinder.createAndBindUi(this));



   final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();

   boxes.add(rubyCheck);

   boxes.add(pythonCheck);

   boxes.add(javaCheck);

   boxes.add(phpCheck);

}

We still have to add them to the Array (which is use to display checked results) but doesn't that look so much better? And you are able to add the values of the checkboxes to the xml too.

When using UiBinder, make sure you add it as inherits to the xml for the module (i forgot at first and had errors with gwt trying to find UiBinder!)

I didn't do exactly one-to-one comparison between UiBinder and not, but i do have two complete gwt apps you can look at. I find it really helpful when learning something to look at complete apps rather than just snippits of code.

There is some documentation on Ui:Binder on Google Code, but at first I found it hard to follow since it doesn't say what files each piece goes in, it took me awhile to figure it out. Maybe its just me though.

Before UiBinder
After Ui Binder

Anyways, just a quick example that might help some people out there. I want to explore more about patterns in GWT and I'll write them up here.

Sat 31 Oct 2009

GWT: Using trunk

Posted by nola under Fun, Uncategorized, gwt
No Comments

Lately, I have been fascinated with Google Web Toolkit as of late. What you say, you love ruby but doing java?!!? My ruby friends will probably smack me but really i love all languages. The widgets and rpc stuff, that is pretty cool as well as learning how to do MVP. There are some new features in trunk that will be released "this fall" but I don't want to wait that long, so last night i set about to checkout and compile trunk and try it out!

1. I installed the latest version of eclipse Galileo, with the Google plugin
http://code.google.com/eclipse/

2. Checkout the source code
http://code.google.com/webtoolkit/makinggwtbetter.html#workingoncode
Make sure you have ant installed. It takes awhile, i think maybe 20 mins or so on my macbook.

3. Setup the API directory in the Preferences for GWT
It took a while (and many searches) of messing around to figure out how to switch to the trunk version of the API.

Go to Eclipse > Preferences. Find the Google Web Toolkit on the left. It has an interface to add/remove APIs. Click add, add the path like so:
~/gwt/trunk/build/lib
I named it "trunk"

4. Create project
Create a new Web Application Project, select "trunk" as the version of API. And now you are on your way!

Once i've done a little more with it, I'll write about some of the new features that are really awesome.

RubyGeek

gwt

What I’ve been up to!

GWT 2.0: UiHandler

GWT 2.0: UiBinder, first look at simple example

GWT: Using trunk

Currently Browsing

Shared Items

Meta

September 2010
M	T	W	T	F	S	S
« Jul
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30