Wednesday, February 17, 2010

The busy Server programmer's 10 step guide to building a quick and not so dirty UI prototype

Yes, yes..I know, you might be wondering why a Server programmer would ever want to do UI. Ha! And that too for a Demo?! Believe me, it's not painful and besides who wants to go to those snooty UX guys for help? :-)

If you know Java, you are already half way there. Just follow these simple steps during your *ahem* long coffee break and before you know it, you will be there. Just a little Java Swing and these simple steps:

Step 1:
Get the latest NetBeans IDE (6.8 as of Feb 2010). You will not believe how far they've come. No, not even IntelliJ is as good as NetBeans for Swing development. Also make sure that you have JDK 6 (update 18+) or newer installed.

Step 2:
Install and fire up NetBeans.

Step 3:
Create a  new Desktop application project.

 














Step 4:
Start dragging and dropping the things you need on to the form. Yes, as easy as that.You will notice that NetBeans guides you while placing the components on the screen. It's beautiful. What you won't realize is that there's a magic class called GroupLayout. That along with NetBeans almost shows you how to aesthetically place widgets even if you are the type who wears shorts, a faded t-shirt, a pony tail and slippers to work.

Just watch the guide lines/bars for alignment and drop them there. There are also those springy things that will move your components relative to the window size if you do it correctly. Play with it for a while and you will get the hang of it.




























Step 5:
Double click the items and rename them - in-place. Yes, it's that easy.




























Step 6:
Do you even vaguely remember the MVC Design pattern? Good, that's good enough. Now, just create a package called "control" and add an Action implementation for the buttons.









































Step 7:
Go to the button and from the properties, choose the "action" and connect it to the Action class you just created. Once you create this, NetBeans does not automatically import the classes for you. So, go to the Source view and import these Action classes.





























Step 8:
Since I pulled you into the MVC mire, we might as well go the one extra step and add a Model to it for the ComboBox. You might find it useful for a slightly fancier UI. Then, go to the action and you will find the model useful there - all your code will be typesafe, thanks to Models and Enums.









































Step 9:
What? That's it. Didn't I tell you it'd be quick :-)
















Step 10:
One last thing, if you really want to impress your better dressed team mates who shower everyday (a waste of water if you ask me). Add this property "com.sun.java.swing.plaf.nimbus.NimbusLookAndFeel" to the main Application's properties file. It'll make your app look you and your app a lot sexier, because people will think you own a Mac. Not really.




























Hope it helps. Enjoy!

6 comments:

Ashwin Jayaprakash said...

Oh if you really want to go all out
on layouts (mostly for the web but) - http://www.smashingmagazine.com/2010/02/09/applying-mathematics-to-web-design/

Ke Cai said...

Will the server programmers use Swing for UI prototype?

Ashwin Jayaprakash said...

Sure why not? You don't have to use any Wireframing tool, it's Java, it's free. Also, since it's Java Swing the prototype can be a fully functional prototype.

Ashwin Jayaprakash said...

I found out about Vaadin today. GWT based. Incredible. Man! How has it gone unnoticed for so long?

Via: http://gridgaintech.wordpress.com

dhaval said...

yes Vaadin is pretty good and development is also really easy. It works above GWT so all the GWT features are already available and can be integrated with Spring easily.

Refer to my Vaadin-Spring article http://dhaval-n.blogspot.com/2010/02/vaadin-spring-integration.html

Ashwin Jayaprakash said...

The JDesktop libraries that NetBeans uses and adds automatically to the project can be found here:

Swingworker - https://swingworker.dev.java.net (https://swingworker.dev.java.net/files/documents/2810/51772/swing-worker-1.1.jar)

Swing app framework - https://appframework.dev.java.net (https://appframework.dev.java.net/downloads/AppFramework-1.03.jar)