UiBinder - google-web-toolkit-incubator - Project Hosting on Google Code

Updated Sep 11, 2009 by rjrjr+pe...@google.com
Labels:	Type-Library

UiBinder

Moved to http://code.google.com/p/google-web-toolkit/wiki/UiBinder

Comment by dan.baternik, Jul 30, 2008

A declarative ui definitely appears to be step in the right direction. I'm following this very closely :)

Comment by svramu, Aug 15, 2008

I don't know how to link to a comment in another wiki page... Please see my comment/request in http://code.google.com/p/google-web-toolkit-incubator/wiki/CssResource

Comment by svramu, Sep 02, 2008

Thanks to the showcase example, and http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/860aefef0daa2539/8839d9da2f7b28a7 (also http://www.zenika.com/blog/wp-content/uploads/2007/08/tutorial-binding-en.pdf), I managed to have my own generator to bind the HTML to GWT in compile time.

The use case I'm trying is to provide different GUI for same functionality, and with generators I can map the right GUI as one of the compiler permutation. I peeked and used the Locale like JS usage for my GWT module. All neat and clean! The issue I see is that it pastes the whole HTML as it is in the generated html files even in obfuscated mode. Makes sense as any optimization on HTML can be invasive. So I'm looking if the UiBinder will optimize it much more.

Will UiBindier? allow me to create more than one GUI for the same screen (a collection of widgets with logic)? BTW, I use the HTML only for layout (so a designer can supply it). All the components are embedded into it with the logic. Any day I'll be happy to ditch my homemade generator (however sweet it is) for GWT supported one.

Comment by svramu, Sep 02, 2008

oh FooPickerDisplay? says it all! (and that static call ensures only one thing is really instantiated) Sorry should have read more carefully. And the whole model is not alien for me, and this is neat. I thought my model is convoluted with inner interfaces etc, but looks like it is necessary.

Comment by svramu, Nov 10, 2008

http://tattvum.blogspot.com/2008/11/on-gwt-gui-and-pure-pojo-applications.html

" Maybe think this way, take POJO, apply JPA annotation to it, and now add new GWT GUI (ideally generic standard) annotations to it. Create HTML and run GWT over it. Presto. RPC, html binding all taken care of.

GWT can keep adding to the standard data type mapping, and allow custom routes for experts.

In this light declarative UI looks bit out dated (?!) because maybe component binding will become a less common daily chore. "

Comment by chettich, Dec 30, 2008

Nice idea! Looks like XAML.

Comment by dobesv, Jan 08, 2009

If you're looking for a sample implementation of this concept check out my Kiyaa! project where I have already created a declarative UI system based on facelets. Basically you define tag libraries to map tags to UI classes, and you write XHTML templates which contain the widget trees you want to display. Feel free to contact me about this ...

http://code.google.com/p/kiyaa/

Comment by codeoncoffee, May 18, 2009

If you're looking for declaritive markup and code bindings you may be interested in Shandor Xul.

We've implemented a GWT runtime for our Xul framework that supports bindings, overlays, includes, i18n. Plus the same app will run as Swing or SWT. It's been released to the community as Shandor Xul:

http://bitbucket.org/codeoncoffee/shandor-xul/wiki/Home

Comment by andres.a.testi, Jun 07, 2009

I think the extension .xhtml has more sense than .ui.xml

Comment by cristiano.costantini, Jun 09, 2009

Declarative UI is the only thing missing to GWT, and it is the only reason I prefer Flex and WPF, I'm following the evolution of UIBinder very closely.

Comment by cristiano.costantini, Jun 09, 2009

dear andreas.a.test, I think an XHTML file need to have <html>,<head> and <body> tags to be compliant.

Do it is possible to try out this UiBinder? (I'm failing in searching out instructions... it seems it is not present in the 1.6 incubator jar...)

Comment by cwestbrook20, Jun 09, 2009

This was mentioned within a couple of Google I/O 2009. They mentioned that this was used in both Google AdWords? and Google Wave...

Is UI Binder something that will be released soon as open source?

Comment by cristiano.costantini, Jun 15, 2009

I would like to propose a use case: to use XHTML to define GWT widget/panels inside an XHTML host page. Here an example of what I mean:

---

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="it" dir="ltr" 
		xmlns="http://www.w3.org/1999/xhtml" 
		xmlns:ui='urn:ui:com.google.gwt.uibinder'
		xmlns:gwt='urn:import:com.google.gwt.user.client.ui'>
   
	<head>
		<title>Use case for GWT + UiBinder + XHTML</title>
		<script type="text/javascript" src="mymodule/mymodule.nocache.js"></script>
	</head>
	
	<body>
		<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
			style="position: absolute; width: 0; height: 0; border: 0"></iframe>
	
		<div id="sample_content_1">
			<!-- same example of the hello world -->
			<ui:UiBinder>
				<div>
					Hello, <span ui:field='nameSpan'/>.
				</div>
			</ui:UiBinder>
		</div>
		
		<div id="sample_content_2">
			<!-- 
				creating a declarative layout for an app, intended to produce a layout
				similar to http://gwt.google.com/samples/Showcase/Showcase.html#CwVerticalPanel 
			-->
			<ui:UiBinder>
				<gwt:VerticalPanel spacing="5" debugId="cwVerticalPanel">
					<gwt:Button text="Button 1" />
					<gwt:Button text="Button 2" />
					<gwt:Button text="Button 3" />
					<gwt:Button text="Button 4" />
					<gwt:Button text="Button 5" />
					<gwt:Button text="Button 6" />
					<gwt:Button text="Button 7" />
					<gwt:Button text="Button 8" />
					<gwt:Button text="Button 9" />		  		
				</gwt:VerticalPanel>
			</ui:UiBinder>
		<div>
	</body>
</html>

---

the idea is that inside the application entrypoint all the <ui:UiBinder> elements are replaced with corresponding GWT widgets.

It seem to me powerful because I can have a server side technology (JSP, PHP etc...) to output my XHTML host page, and have GWT to dynamically build the layout on the needs.

For example it may be useful when you have an application with different user privileges, on which you may have a servlet to handle user log in a Web 1.0 approach, and a JSP to output the correct layout for the priviledges granted to the user (i.e. an administration panel only for Administrators, or no gwt application at all in case of incorrect login....)

Hope this is interesting and that this will be read by the right GWT developers ;-)

Comment by andres.a.testi, Jul 26, 2009

Please, allow injection by constructor for @UiField?.

Comment by cromwellian, Aug 03, 2009

Might be additionally useful to allow template parameterization. That is, extend/add the expression language so that you may write $x.foo or ${x.foo} and modify the binder to take a Map of parameters, or declare a method with actual parameters, which are then substituted into these variables. This would be useful for instantiating the same template several times but with different static/raw data that is runtime-substituted (or compile time substituted)

Comment by jgw+personal@google.com, Aug 04, 2009

@Everyone suggesting that UiBinder should be able to dynamically drop widgets into a server-generated HTML page: If you read the design carefully, you'll notice that the .ui.xml structure is processed at compile-time, not runtime, and is thus thrown away after the compiler is done performing its work. Doing otherwise would be hugely problematic, because there would be no way to prove which widgets would need to be compiled into the output code (because the server could always generate references to widgets the compiled code has never even heard of).

If you want something like that, you'll need to propose an entirely different system, as this one is not intended to solve that problem, and by design never could. Feel free to go implement a dynamic system if that's what you need, of course.

Comment by bill.braasch, Aug 04, 2009

The itemscript project has a declarative GWT client called Item Lens. Item Lens is provisioned by a JAM file (JSON Application Markup) that it animates on the client. Item Lens is written in GWT but uses a JSON transport, not GWT-RPC. Item Store is a server side implementation that uses Apache Derby.

Itemscript describes applications, components, events and data in an open, standard language built on JSON that's independent of the details of any particular implementation.http://itemscript.org is the project site.

Alpha version downloads are available at http://itemscript.org/downloads/. This is an early version of the project.

Comment by rjrjr+pe...@google.com, Aug 06, 2009

@andres.a.testi, you can do this via @UiField?(provided=true), e.g. (presuming you're using Gin):

public class MyUiThingy? {

interface MyUiBinder? extends UiBinder<DivElement?, MyUiThingy?> {} private static final MyUiBinder? BINDER = GWT.create(MyUiBinder?.class);

@UiField?(provide=true) private final ThisOtherThingy? other;

@Inject public MyUiThingy?(ThisOtherThingy? other) {
this.other = other;

BINDER.createAndBindUi(this);

}

}

Comment by rjrjr+pe...@google.com, Aug 06, 2009

Hey, thanks for the reformatting, Mr. Wiki!

Comment by thebravedave, Aug 12, 2009

Well UiBinder is available on the gwt trunk. Im not exactly sure how to go about compiling it so i can use it. I've compiled a few projects from source code before, but they all had build.xml files, etc. Anyone have any info on this?

Comment by sripathikrishnan, Aug 14, 2009

The instructions to compile are documented here - http://code.google.com/webtoolkit/makinggwtbetter.html#workingoncode

Comment by tgdavies, Sep 07, 2009

The first example has a minor error:

SpanElement? helloWorld = new HelloWorld?("World").getElement();

should be:

DivElement? helloWorld = new HelloWorld?("World").getElement();

If I understand correctly...

Comment by tgdavies, Sep 07, 2009

And also:

@UiFactory CricketScores(String... teamNames) {

should be

@UiFactory CricketScores makeCriketScores(String... teamNames) {

Comment by rjrjr+pe...@google.com, Sep 11, 2009

@tgdavies, thanks for the corrections.

All, I've moved the wiki from here over to gwt trunk.

Comment by LuminariGWT, Oct 15, 2009

My major issue with the uibinder syntax is the necessity of having the uibinder html separate from the widget java code. In reality these two items are linked together at the hip so they really should be in the same files. You could easily create a syntax similiar to the jsni for uibinder html. This way there would be no need for two separate files.