Day 6: GWT iTune Design = Done!

FINALLY, IT'S DONE! The layout is now official live :) Of course, most of the images are not clickable at the moment because I haven't added any onclick event or slice them into sprite.

Also, from now on, I will start posting source code of what I implement to the site everyday. I will try to put some comment on them as well so everyone can learn from it :)

As always, you can check it out here: http://itunegwt.appspot.com

Day 5: GWT CellTable and ListDataProvider

Finished adding ListDataProvider into the Celltable. That was easier than I thought! All the columns on the main presenter should be sortable now. Just click on the column name to see the magic!

I will focus on finishing the Ui Design and concept tomorrow. At the moment, all the images are all rendered into one sprite sheet. I will slice them out later in the future to implement EventHandler. But for now, I just want to get the rough design down first :)

Day 4: GWT Platform Nested Presenter Testing

Made a pretty cool Ui today after I learned how to use GwT platform nested presenter. GWTP library really helped me organize everything and put it all together. I should be able to finish the Ui today and have something post up later on :)

Ok: Rough Ui is up

http://itunegwt.appspot.com/

Day 3: GWT Platform MVP

The plugin from these guys are AMAZING. They make MVP pattern design and structure so much easier for developer. With just a click of button and your Presenter, View and UiBinder are ready to go. I am highly recommended this library for productive development with GWT. I mean it just make thing so much faster and ORGANIZE! You know what is even cooler? They have Nested Presenter! What is Nested Presenter you asked?

Remember the good old PHP when you want to include header and footer then you would do this

CONTENT

..Unfortunately with GWT you can't do something like that. Well, you can if you define your layout as a widget and include it everywhere within your new view's UiBinder. Now, thats too much work and hassle. Imagine if you have 1000 views? That would be 3,000 extra lines of code (header widget, footer widget and sidebar widget). With GWTP, you only have to change the following once you defined your header/footer file

RevealRootContentEvent.fire(this, this);

..into

RevealContentEvent.fire(this, IncludePresenter.TYPE_SetMainContent , this);

..pretty easy right? BUT that is still too much typing. Worry not! With the gwtp eclipse plugin, you can easily select the parent presenter and it will auto generate the code above for you! How awesome is that?!!

The plugin and video tutorial is available here: http://code.google.com/p/gwt-platform/wiki/EclipsePlugin

First Project Done

After playing around with GWT for a while, I managed to finish up with my first project. Its a very simple project to help me learn how GWT works. You can see the demo here http://quynh-nguyen.appspot.com/. Notes that I created the site for educational purpose so I didn't go over fine details such as RegEx matching for email field input or the length of username/password. Those features can be implemented easily though.

What I learned from this project:

• Use UiBinder! It saves lots of time and speed up your website!
• Use HTML as much as you can. Don't reply too much on widget because it can cause slowness on your site.
• Usage of PersistenceManager and Datastore.
• PersistenceManager can only fetch what exist in the data; so, it will throw an errors if you try to fetch something that is not existed in datastore. Thus, to check whether an object exist in datastore or not, you can use transaction with datastoreservice API instead.

DatastoreService datastore = DatastoreServiceFactory.getDatastoreService();

Transaction tnx = datastore.beginTransaction();

try{

     //first param is your ENTITY, second is the value of your ID/Name

      Key userKey = KeyFactory.createKey("User", username);

      datastore.get(userKey);

     //If found then do some query/task with your PersistenceManager or DataStore here

   

     //Don't forget to commit :)

     txn.commit();

}catch(EntityNotFound ex){

    //not found codes go here!

}finally{

     if(tnx.isActive())

         tnx.rollBack()

}

• Cookies won't work when you try to use it on serverside. It will give you URI encoding errors when you try to call it over RPC. Yup, took me 2 hours to figure out -_- COOKIES = CLIENT SIDE!!!!!
• I also learned how to use ClientBundle but never tested it out with this project so maybe the next one :)

I think thats about it. Next Task: GWT MVP pattern to refine my spaghetti code!!

Journey To Learn Google Web Toolkits

Ever since my first expose to Java Appengine and JSP, I have been very fascinated with the use of Java in web developing. For most of my coding "career", I have been using PHP, HTML, CSS, and MySQL to develop dynamic websites. Even though, I was well aware of JSP and ASP technology but I was always afraid to learn them, mostly due to the learning curve. I know its a bit sad for a Java coder to be afraid of JSP technology. I don't know about others but for me its confusing as heck to go from web developing with PHP to creating dynamic site with JSP. I mean, there is no point of learning JSP when I can create the EXACT same webpage in PHP right? Now, in order to be full flesh web developer, you would need to master Ajax and Javascript. Unfortunately, I have never actually coded with them except for using third party library then made couples of modification here and there. For me at least, saying that you know the language by just changing pre-made codes is a big JOKE.

Fortunately while I was searching around for tutorial, I stumbled across a google technology call Google Web Toolkit which allows you to build Ajax website using pure JAVA. This is like a dream come true for Java programmer like me who doesn't like the learning curve of Ajax.

Little preview about GWT

Google Web Toolkit (GWT) is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including Google Wave and the new version of AdWords. It's open source, completely free, and used by thousands of developers around the world.

Download here: http://code.google.com/webtoolkit/

Anyway, to cut the story short, this summer will be my journey to master GWT! I will try to post up my learning progress everyday, including all the cool tips and tricks!

public void onModuleLoad(){
  RootPanel.get().add(new Label("see you guys later :D"));
}