Javascript/AJAX

Archived Posts from this Category

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:
  1. CheckBox rubyCheck = new CheckBox("Ruby");
  2. rubyCheck.setFormValue("ruby");
  3. boxes.add(rubyCheck);
  4.  
  5. CheckBox pythonCheck = new CheckBox("Python");
  6. pythonCheck.setFormValue("python");
  7. boxes.add(pythonCheck);
  8.  
  9. CheckBox javaCheck = new CheckBox("Java");
  10. javaCheck.setFormValue("java");
  11. boxes.add(javaCheck);
  12.  
  13. CheckBox phpCheck = new CheckBox("PHP");
  14. phpCheck.setFormValue("php");
  15. boxes.add(phpCheck);
  16.  
  17. // set up panel
  18. Panel panel = new VerticalPanel();
  19. panel.add(new Label("Choose a language:"));

Compare to the UiBinder code:

PLAIN TEXT
XML:
  1. <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
  2.     xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  3.     <g:VerticalPanel>
  4.       <g:Label>Choose a language:</g:Label>
  5.       <g:CheckBox ui:field="rubyCheck" formValue="ruby">Ruby</g:CheckBox>
  6.       <g:CheckBox ui:field="pythonCheck" formValue="python">Python</g:CheckBox>
  7.       <g:CheckBox ui:field="javaCheck" formValue="java">Java</g:CheckBox>
  8.       <g:CheckBox ui:field="phpCheck" formValue="php">PHP</g:CheckBox>
  9.       <g:Button ui:field="button">Submit</g:Button>
  10.     </g:VerticalPanel>
  11. </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:
  1. public class LanguageList extends Composite {
  2.  
  3.   interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  4.   private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  5.  
  6.   @UiField CheckBox rubyCheck;
  7.   @UiField CheckBox pythonCheck;
  8.   @UiField CheckBox javaCheck;
  9.   @UiField CheckBox phpCheck;
  10.   @UiField Button button;
  11.  
  12.   public LanguageList() {
  13.       // bind XML file of same name of this class to this class
  14.       initWidget(uiBinder.createAndBindUi(this));
  15.       
  16.       final ArrayList<CheckBox> boxes = new ArrayList<CheckBox>();
  17.       boxes.add(rubyCheck);
  18.       boxes.add(pythonCheck);
  19.       boxes.add(javaCheck);
  20.       boxes.add(phpCheck);
  21.   }

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.

 

Fri 15 Sep 2006

Dynamic Select Boxes

Posted by nola under Javascript/AJAX
[2] Comments

I need to have two select boxes. One with a major category, and once selected another one appears with sub categories.

For sake of example, say I have 8 major categories.

At first, I thought I'd just make 8 selects with the sub categories, and just hide/show the ones I didn't need or need. Fine .. but the form still sees them when you submit! so my subcategory name was getting overwritten by the hidden selects. No good.

I load my data into a javascript array, so I do the dyamic thing where I loop through the array and add options to the DOM. Fine .. works.

something like:

for (s in data) {
label = "       "+data[s][1];
$('sub_cat_select').options[i] = new Option(label, data[s][0]);
i++;
}

But -- my subcategoris are actually "tree like" and there are sub categories. With my hidden selects, in php I added & nbsp ; to create an "indent" which showed up fine. However, usin the dom, my & nbsp didn't work.. and neither did putting a real space.

I just find it weird that if I used php to print my option lists with the & nbsp ... it worked.. but then putting the & nbsp when doing the dom way it didn't work. Any suggestions on how to indent? next I am trying style sheets, but I think that will be a bit of a pain.

 

Fri 3 Mar 2006

View Rendered Source — for IE

Posted by nola under Javascript/AJAX
No Comments

IE was being a bad boy and I wasn't sure it was rendering my ajax correctly. I was wishing for a View Rendered Source like I have for FF. I searched, found but it didn't install right..and found 2 commercial ones. Ugh. I don't know if work would go for that.

The I thought.. hmm I could make a link "view source" (for when I need to debug) and have it grab the text of html, format... and make it display? hmm.. I was working on that then left for lunch.

Then I get to Panera bread for lunch and realize.. hmm wonder if I can make this a bookmarklet so I don't need to put tag in my page... then I thought.. hmm maybe there already exists one... so I search.. and found one! and it works... its not color coded like FF but it works:

http://javascript.about.com/library/blsource.htm

Yeah.

 

Thu 2 Mar 2006

Javascript Debugger extension out.. for FF 1.5

Posted by nola under Javascript/AJAX
No Comments

Found out last night from the DotProject IRC room that the newest Venkman, the Javascript debugger is out. I had to uninstall the old version manually then install this new one. Sweet. I was missing this...

In case you don't haven't used it, its an excellent tool for stepping through your Javascript and watching variables. Even tests ajax type things too! Another of my favorite extentions is FireBug which I use when I just want to see what XML requests are being called (ie. is this DERNED THING WORKING?!?!).

If you are really hard up for entertainment ... check out this person who installed 100 firefox extentions..

Am I missing out on any cool FF developer extentions??