Making GWT ui better? - gwt

I have an application developed using GWT and GXT. Most of my screens are like search or detail kind of pages.
Now i am adding some more functionalities with that. In that i require some nice representation with images, arrows, links, models. I finding its very complex to do it in GXT.
Is there any other libraries or frameworks to do this?
That supposed to be easily integrated with GWT/GXT without much effort.
Please help me out on this.
Thank you in advance.

Is there any specific reason why you do not want to venture the CSS route and are looking for libraries? I mean, if you are good with CSS then you can start with plain GWT stripped-off of all its defualt CSS and incorporate your design ground up. That is the perhaps the best (only?) way to design your web-app once you have your Photoshop mock-up ready.
You may ofcourse depend on libraries, which come with their own CSS, but your web-application will look no different from the next app designed with the same library.

Related

Best suite for GWT widgets

I am looking to build a GWT based web application. Being new to GWT, am looking for suites that provide the best GWT widgets (in terms of user experience, variety, styles, etc.), to help build a web app.
I have come across SmartGWT, but looking for other options/suggestions.
Thanks in advance!
I've done apps in both GWT and SmartGWT. My observations, for what it's worth:
SmartGWT has all sorts of cool features, out of the box. It's easy to be seduced by the SmartGWT showcase.
GWT is converging on SmartGWT, and quickly. For instance, the new DataGrid
can stand up against the SmartGWT ListGrid and come away looking good.
In order for GWT to look good though, there has to be real skill in the
developer. SmartGWT can make anyone look good, it seems, but to make
GWT shine takes skill.
Once you have that level of skill, though, there's no looking back.
GWT seems to me to be much more flexible, a consequence of the building-block approach. SmartGWT is more monolithic.
SmartGWT's design has some portability issues. I successfully took a pure GWT app I made and re-worked it (minimal effort) to run nicely in a BlackBerry PlayBook browser. I took a
SmartGWT app I had made at about the same time, and half the widgets
didn't work.
For an enterprise level solution I'm working on, I'm using pure GWT and I don't regret having made that choice.
I would suggest using standard gwt widgets. Simply because,
1)they are best documented,
2)they are highly customizable via css
3)from what I observe they provide the best performance
4)you dont need to learn a whole new framework built on top of another framework
but if you insist on using a framework then I suggest you take a look at this question
My advice to you is to consider your needs. Plain GWT and SmartGWT both are the best supported, so you need not look for more (unless of course both fail in what you want).
Go to their respective showcases and see what they offer and how it fits your requirements.
If gwt satisfies all your UI requirements, my advice is to choose it over SmartGWT. gwt beats SmartGWT in learning curve and documentation anytime. Also its faster(my opinion). If gwt doesn't satisfy your needs and SmartGWT does, then you should consider making the switch.
I have a year experience in smartGWT, when we started our first gwt lessons, they said use the basic gwt features and build own framework otherwise we can encounter errors which may lead to dead-ends. We considered the idea, but for the project (since we already had deadline) decided to look after some extension of gwt. We found smartGWT. The showcase was really convincing. Remember these are widgets, the basic logic of your system is still up to you.
In case if you start using smartGWT: If you don't use JSON but some normal list of java structures prepare to get hard hours/days to get use to datasources, grids, and few other components. Seriously, it had ridiculous problems (for example switching two configuration code line without reason makes work the listgrid), BUT before you drop the entire idea to use it, after a while it starts to work, and it becomes really impressive and comfortable. This is a kind of work "make it once, will work hundreds of times".
In my opinion:
don't start use smartGWT if you want to make a system which is not too complicated.
start use it if you need complicated system with lot of different features, if you don't have the time to develop everything for yourself: many components are ready in smartGWT.

CSS based framework like SCSS (Adaptive design)

I am designing a web app from scratch, which would be a fluid-based layout and the same HTML would render on different screens using the adaptive CSS.
I am going to use adaptive CSS (or responsive design) for this.
I was looking to use a framework like SCSS (http://sass-lang.com/) which would improve my code maintenance efforts. I'll have lots of CSS files (and probably some skin based as well)
Since I am using adaptive layout, I am going to use CSS Media Queries for desktop/tablet/mobile CSS. I could not get an idea how well the SCSS would integrate with media queries and overall speaking , how much flexibility will it offer to me.
Please let me know your suggestions if you have used SASS/SCSS and in general, any other suggestions.
SCSS is essentially an extension to CSS, and is useful (with mixins) to void repetition in your code. It also provides a way to group blocks of CSS in semantically meaningful ways and gives you variables to avoid repeating yourself.
If you are using a framework such as Rails, it is no-brainer.
There are also frameworks which focus on layout such as 960 (and its variants), and Blueprint which also adds code for thing like buttons.
The underlying philosophy behind many of these is DRY (don't repeat yourself). One bonus of using an established framework is that many of the browser issues have been ironed out, so you can be sure that it will work cross-browser.
It is true that perhaps the code is not quite a lean as rolling your own, but with careful editing and making sure you minify the result and send it gzipped, this is not a major issue except on the most high traffic sites.
Personally I have objected to using frameworks in the past because of the small amount of additional redundant code, but after 15 years of hacking around browser issues, I now think they are a Good Thing.
Larry Wall said in Programming Perl, "We will encourage you to develop the three great virtues of a programmer: laziness, impatience, and hubris."
Anything that allows more people to use CSS in a repeatable and reliable way, to build on work done by other, and to try out some of the leading edge features has got be a good thing.
Engineering a site with media queries is still a bit leading edge. There are compromises in each approach and you should read up as much as possible before choosing one. Adapt.js is a good alternative if you don't mind javascript.
You may want to look into the HTML5 Boilerplate. This has some useful defaults, and lots of documentation about the HTML and CSS defaults that have been chosen.
Good luck!
I have not used media queries together with SCSS, but I don't think they conflict with each other. I have used SCSS extensively in my current rails apps, and it helped me to reduce the amount of code, and get a better understanding when to use which styles.
The tricky part will be what to have fluid (changing depending on the medias viewport size), and how to avoid repetition.
Have a look at the nice site Responsive Design with CSS3 Media Queries, to get an idea which parts of your layout may be fluid.
Have a look at 320+Susy (GitHub repo here). It uses the Susy grid framework extension for Compass. All of these tools are based on Sass and make use of media queries.

Realizing the design from a design professional in code

I typically work on web apps that will only be used by a small group of well-controlled people, but now find that I'm writing something that has the potential to be used by a very large population. This means that the design and "look" will be very important to the success.
While I can certainly code up something functional, it ain't gonna look pretty, so I know that I'll need to get an outside designer to make things look good. Never having worked that way before I had a few questions about the mechanics of how this happens and how to try to make things easier.
We do Java, so when building a rich interface, we use GWT. I know that when working with designers, they typically provide images of what the interface should look like without any type of "useable" output. My question is how best to bridge that gap between a simple drawing of an interface to a fully functional realized one.
Any thoughts are appreciated.
Well, "it depends", as always.
Nowadays, I don't think you can work wit someone who simply provides PhotoShop mockups. At least not at your level. Mockups are simply too static, and translating those mockups to actual pages that actually work with different browsers properly is a skill set all its own.
So, you need someone beyond simply a designer, especially if you are planning any javascript wizardry, animations, or other dynamic elements that don't capture at all well on a static image.
What you really want is an "operational" mockup. Static HTML files that look and behave as best as can be done to what the UI designer wants to do, including transitions, work flow, etc. This artifact can be run through all of the stake holders as a live mockup, letting folks "Feel" the site.
Once you have these HTML files, you can then do your part of backfilling these pages with actual server side content. Obviously you can start early working on models and working with the designers so as to have services ready to support the site functionality, but you shouldn't be committing any real time in to actual pages for the site.
As for interacting with the designers, I talk more about that over here: How can I make my JSP project easier for a designer to work with
I worked on a project very much like this. We had "comps" which were pictures of what the interface would look like. We identified common objects and build modules. Then built pages (this was for a web app) from modules plus any elements that were unique to that "comp".
A couple things to keep in mind that will make life much easier: use the comps/drawings as more of a recommendation rather than set in stone design. Try to identify common pieces early on and reuse code.
Also, designers aren't user experience gods. They often have a good idea of how things should work, but if you are close to your product and have a lot of product knowledge, don't be afraid to tweak the design as you and your group see fit. One thing that designers typically lack is product knowledge. They know a lot about general user experience and how a site should work, but they often won't know the in's and out's of your use cases and products.
If you are working with GWT, you should look for designers who are expert in CSS. Apart from, may be, the main layout of the website, all the application components like form fields, dialogs, tabs and grids etc. will need to be styled using CSS.
If the designers are not experienced in working with GWT, share the GWT's documentation about styling with them. It's a good idea to read these yourself as well. Specifically explore the GWT's theme-ing system.
Also try to make use of UiBinder as much as possible. This would allow you to stay as close to traditional HTML based design while still enjoying the GWT high level object oriented interfaces (both widgets and DOM).
Optionally you might want to tell the designers that GWT image bundles will automatically do "CSS Sprites" so they don't need to worry about page load performance issues related to images.

CMS applications as frameworks?

I was posed this question the other day and didn't really know how to respond. Anyone here have any comments?
Some CMS applications can be used as a frameworks, but it does not work the other way around.
I do not suggest using CMSes as frameworks if you're working on anything but trivial blogish/wordpress type websites which don't really need a whole lot of custom functionality.
CMS code is usually not extendable, following no coding conventions and crappy. Frameworks like Django and Zend are very high quality. You'll be able to actually make something useful in a reasonable amount of time instead of killing yourself trying to customize a CMS which wasn't made to be customized.

Java Web Framework Prototyping tools

At the moment Iam evaluating java web frameworks. More precisely Iam talking about GWT, JSF2 and apache wicket. One very importent criteria in this evaluation is prototyping.
The prototyping process in my company can be described by the folloing:
The customer can produce GUIs with an easy to use WYSIWYG editor, by drag&drop-ing web components on the corporate predefined website structur. There is also a need for some litte dynamic being like navigation from one frame to another.
So Iam looking for tools. These tools should not only provide nice GUIs but also deliver
some basic code, which can be forwarded to the development. The aim is to avoid missunderstandings between designers and developers as much as possible. More or less the
developers just have to implements the code, but not to implement the optical requirements.
In addition it would be desirable to customize the components thats been used in the WYSIWYG editor. Does anyone know any good tools for the mentioned frameworks (GWT, JSF2, wicket)?
One of the challenges with WYSIWYG tools for UI is that you generally have to pick between rapid prototyping and maintainable code. Even then, as soon as you want to do something that's not supported by the prototyping tool, you can implement it as you would without the prototyping tool, but your round-trip functionality (namely turning your app back into something that can be edited) is broken or crippled unless extra work is done to generate the metadata that the editor needs.
Upgrading between major releases is another issue. Vendors and groups who have developed these tools have a historically spotty record of when they stop supporting older versions, reasonably because of limited resources and sometimes difficult problems with how to track solid innovation happening in the framework itself.
My suggestion instead is to prototype with an RIA prototyping tool like Balsamiq Mockups or use a grid system like 960 Grid to generate rapid prototypes, then use a web development framework that allows your developers to run the code with or without the backend server. Wicket has a tag called that is great for this kind of thing -- web devs can fill a div with stuff that a component should generate, and Wicket devs can wrap the contents of that tag with after they implement it. Both parties can coexist for a long time that way.
Try GWT Designer for GWT.
Introduction
Quick Start Guide
Download
There's nothing like this for Wicket that I know of. The closest you would get to any kind of resource reuse from your customer would be to give them a drag and drop HTML editor - the resulting HTML could then form the basis of Wicket page/panel layout.
if you are planing to use a javascript library, you may use extjs,
http://www.sencha.com/products/js/
they have developed a nice designer
www.sencha.com/products/designer/
there is also a port of ext in GWT
www.sencha.com/products/gwt/
You have to pay for a commercial license if your application isn't open source!