Resources for digging in GWT's Uibinder and Declarative UI - gwt

I am a student getting started with web development with GWT. I have previous experience with Java however I am no UI design experience.
However I believe I can catch up on CSS easily.
I was browsing the official Google's UiBinder document, which is very concise(one page). I am not able to figure out much just from this document. It might be that things are not much obvious to me at the moment due to lack of experience in this field.
How should I dig deeper and get hang of designing UI with uibinder?
Any resources and strategies can be of great help.

I'd try using GWT designer which is part of the Google Plugin for Eclipse. It'll add handlers to buttons / forms / widgets for you and populate uifields in the Java classes. I've found just playing around with it helped me quickly find UIBinder features. You can easily switch between XML and design mode if you want to see what it's creating for you.

Related

Writing web application GUI in a mix of plain-GWT and smart-GWT?

I started working on projects in GWT last month. It was all well until I needed drag and drop(DND). After trying gwt-dnd library like everyone else I got infatuated by smart-gwt widgets. But everywhere I read that its a very thin wrapper over Javascript. But I've still decided to go with it. I have some general questions regarding GWT.
Is it okay to write the GUI in a mix of plain-GWT and smart-gwt ?
Can I implement drag and drop only with plain-GWT without the help of external libraries?
Should I write the smart-GWT like widgets in plain-GWT myself?
No you shouldn't and neither is proposed from the smartgwt creators, There are some tweaks that can make it work, but it is at a per case base ...
You could try to achieve this, especially with the latest 2.5 version and its Elemental library.
Depends what you need and the resources you have for the task. You could make look-like lighter elements macthing the smartgwt ones, but it can be tricky if you are looking after operations like filtering etc. Bottom line is, you wouldn't be considering the smartgwt or any other similar library, if you had the time and resources to develop its widgets.

GUI Platform choice: Google GWT, SmartGWT, ExtGWT and SmartClient

We are in the process choosing a new GUI platform. Ive been looking at subj. but are a bit confused. Could someone please refer to at tutorial or blog that makes a qualified comparison.
Thanks.
Nikolaj G.
We've used SmartGWT for a couple of projects and it's ok but there are tradeoffs:
PRO:
Makes it easy to write a web app that looks and works like a rich client GUI.
Don't have to know any Javascript. SmartGWT coding is pretty similar to Swing coding, which is good if you already know how to do that.
CON:
Unless you do a lot of work tinkering with the look and feel, your app won't look very web-like, it will look like a rich client app running in a browser. You may not care about this.
It's a pretty heavyweight library which has to download large .js files to get going.
We found it difficult to control the layout of form controls precisely, but that might just be our inexperience.
I think you should fully understand what GWT does and what your projects needs are first and foremost. There wont be a source that will adequately compare them for your specific needs.
Start with the wikipedia http://en.wikipedia.org/wiki/Google_Web_Toolkit
Here is a comparison of SmartGWT vs GWT
http://www.theserverside.com/discussions/thread.tss?thread_id=60186
If interested in AJAX RIA Frameworts, below analysis is for you
Before starting new GUI for our new project arrival, I made some research.
Here are my findings (remove spaces from "http: // "; bcoz stackoverflow is preventing me to do so :)):
Prototype framework favorable links:
http://en.wikipedia.org/wiki/List_of_Ajax_frameworks
http://www.javabeat.net/articles/12-comparison-of-ajax-frameworks-prototype-gwt-dwr-and-1.html
http://www.devx.com/AJAXRoundup/Article/33209
Dojo framework favorable links:
http://blog.creonfx.com/javascript/dojo-vs-jquery-vs-mootools-vs-prototype-performance-comparison
jQuery framework favorable links:
http://blog.creonfx.com/javascript/mootools-vs-jquery-vs-prototype-vs-yui-vs-dojo-comparison-revised
Test speed of different RIA frameworks:
http://mootools.net/slickspeed/#
More comparasions:
http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
http://jqueryvsmootools.com/#conclusion
Out of all these findings I started using SmartClient 5. Initially we faced some issues but as SmartClient matures I find it interesting in many terms:
1. APIs doc help and examples
2. Flexible controls
3. Forum
Today I am working on SmartClient 8 and few on my GUIs are in production running successfully. Actually the great help with SmartClient is that you find every thing at one place. No need to dug many other sites that is hard to do for any other open source RIA framework.
So my choice is no doubt SmartClient.
Thanks
Shailendra (shaILU)

GWT: UiBinder or GWT Designer?

I have my first GWT project that I created using UiBinder (GWT 2.0 way) which I found to be easier than write my UI creation Java source code (GWT 1.0 way).
But I saw this thing called GWT Designer that Google are releasing for free. It has nice features and wizards which were missing with the standard Google Eclipse Plugin. I like it, but I still think that using UiBinder is better. I think GWT Designer will be really useful when it can help you write UiBinder XML files (GWT 2.0 way), and not just source code (GWT 1.0 way).
What do you think about it?
Do I need to migrate to GWT Designer project?
Will it be better if I migrate but still keep UiBinder UI creation?
The latest GWT Designer now has support for UiBinder, and it works great.
http://download.instantiations.com/D2GWTDoc/continuous/latest/docs/html/wizards/gwt/uibinder_composite.html
UiBinder can give you better performance and a better optimized download than traditional widget construction; to me that's enough of a reason to stick with UiBinder. If your app is light and fast enough as it is then the choice probably comes down to what style of development suits you best.
I wouldn't go as far as to port your existing UiBinder templates into the designer. Google will be adding support for them to GWT designer soon enough.
I haven't used the newly-freed GWT Designer yet myself, but I wouldn't expect that it would warrant migrating your entire project over to it if it's already written using UIBinder.
Remember that the two methods of constructing a UI are not mutually exclusive -- you can use the GWT Designer to create a new widget and use it in an existing UIBinder project, and if you decide it's that much better, you can consider migrating at that point. Or not, since they can still happily coexist.
If you are doing professional development in an organization that utilizes experts in CSS and html, then GWt is going to be a tough sell if you don't use something like UIBinder for layouting as well as individual pages. I also think that a CSS designer can do a better job at responding to UI requirement changes than a java developer using GWT layouting techniques.
However if your java staff has control of the requirements and don't have to answer to UI designers, then I suppose choosing between delcarative templates and something like GWT Designer is just a matter preference.
As said in the relaunch announcement:
Now that these products are available again, we hope you’ll start using them within your GWT projects. Meanwhile, our next step is to more deeply unify them into the GWT family of tools by blending the fantastic Instantiations technology into the Google Plugin for Eclipse (GPE). So, there’s much more to come, including things we’re pretty sure you’ll like, such as UiBinder support in GWT Designer.
It wouldn't make sense to get ride of your UiBinder code since GWT Designer will support it soon.
DON'T use the designer plugin. The most recent update (8.1.1 at the time of this post) contains buttons that allow the user to add elements that are incompatible with IE, for instance CellTable, DeckPanel, HorizontalPanel and VerticalPanel.
This means whoever uses the plugin, uses it entirely at their peril. If IE7 tries to pull in these elements, it will load a partial page but fail to load components that use these elements. IE8 may not be able to load the application at all.

What is the best approach towards styling GWT applications?

General approach in GWT is to use Panels and then apply custom CSS themes to get a customized look. While I can achieve a certain extent of personalization of my GWT app through CSS tinkering, I was wondering how others generally approach styling.
Some of the suggestions I came across the web were to manage layout with plain HTML, through use of HTMLPanel's. This way one can straightaway use the HTML mock-up within the application without having to code all the layout.
So what in your opinion is the best and least painful way to approach layout and custom styling of GWT application?
So far, the best approach I found:
get rid of any default GWT theme
use UiBinder as much as possible
place your CSS in ui.xml that describes the widget
have one public Common CssResource with rules reused by many widgets
that way you don't need to maintain one global stylesheet which always is a pain (common problem: where is this rule used?)
It all depends - on you, your experience, your team, etc:
The usual/older approach of Panels, Widgets and Compositing will be easier to work with/more familiar:
If you are a Java programmer experienced with frameworks like Swing, etc. (I think that was the point of the GWT team),
Or if you come from the "desktop world" in general.
The UiBinder approach is the newer one:
Recommended if you are just starting your experience with GWT (it seems UiBinder is here to stay, and it allows more flexibility than the above approach),
Recommended if you have experience with web development (or desktop frameworks that use markup, like .NET's XAML, etc), since you'll be working in the familiar world of HTML/XML,
If you are working in a larger team, where you have designated designers in charge of the look of the web application (and they don't know/care about GWT). Cutting up the layout into HTML code should be pretty straightforward for them and you can, with little work, convert those templates into UiBinder's XML templates.
None of the above approaches is perfect - that's why it's worth to know their strong and weak points - but the end decision should be yours alone, since you know your/your team's capabilities best :)

Easy to use GWT editable datagrid?

I need recommendations from people whom have implemented an easy to use GWT editable datagrid.
I spent 4 hours with the PagingScrollTable in the gwt-incubator-july-14-2009.jar, and would now like to try other options.
What I'm looking for:
easy to get started (ex. drop a jar, edit .gwt.xml)
advanced features once you have gotten started
documentation of advanced features
self-contained module with minimal dependencies on other modules, jars or components
low cost/free
Thats all :)
Please, for goodness' sake, stick with vanilla GWT. Just use GWT data cell tables, lists and trees.
Smart-GWT and GXT really look good in their demo. e.g., Smart-GWT has widgets that accepts xml/json datasource directly that would save you time.
But, you find that your application requirements would "just need that tiny tweak" in the way the widget eats the datasource. Both GXT and Smart-GWT have attractive convenient widgets, but you find you need "just a little" tweak to make them suit your requirement.
Is your "little" tweak "important" enough? So, you resort to writing your patch for that "little" tweak. And soon you find that there is a whole entrail of "little" tweaks. You experiment and research and try untried means.
Finally, you discover that you might just as well had used vanilla GWT for which you would have taken less time to get the behaviour you want. Vanilla GWT is tried and proven.
Do not be tempted by the showcases of SmartGWT or GXT. Learn CSS and learn how to integrate CSS into vanilla GWT, which would make your widgets just as attractive as SmartGWT or GXT.
Then you would not regret because you would not face any impediments toward using other GWT features.
What is good enough for Google is good enough for me.
Hi HJO there are many solutions to problem depends on what you want. The GWT-EXT, EXT-GWt and SmartGWT libraries all have editable data grid implemented. Or you can make your own with FlexTable,ScrollPanel,TextBox and add a few event handlers. Both GWT-EXT and SmartGWT are in LGPL license and I believe EXT-GWT is GPL license. If you not doing it for production then any will do, but if you are doing it for big production environment I suggest to really test each of their performance first. I suggest to choose something light weight and robust instead of simplicity or appearance on production environments. At the end, the less data/widget loaded + less handlers = performance and happy user.
Take care,
NingZhang.info
I do not recommend to use GWT DataGrid for production (in GWT 2.4), unless you like coding workarounds for several bugs (most of them on Internet Explorer):
http://code.google.com/p/google-web-toolkit/issues/detail?id=7065
http://code.google.com/p/google-web-toolkit/issues/detail?id=7347
http://code.google.com/p/google-web-toolkit/issues/detail?id=7139
http://code.google.com/p/google-web-toolkit/issues/detail?id=6747
I use CellTable instead of DataGrid and wait for bugfixing from GWT team.