kenalan ama GWT ‘Google Web Toolkit’

hmm, GWT?

GWT ato singkatan dari google web toolkit merupakan sebuah, eeeeeeeeeeeeeee…….. apa y? dibilang bahasa pemrograman, bukan. dibilang framework, juga bukan 😀

kalo di dibilang bahasa pemrograman, masa sich? karena syntaxnya pake java. lantas kalo di bilang framework? masa juga sich, karena emang gak terintegrasi ama bahasa pemrograman lain 😀 yang artinya bisa di dampingi ma php, java, asp, coldfision, rails, and so on 😀

kalo menurut gw pribadi google web toolkit merupakan TOOL untuk mengkonfersi dari java to javascript (AJAX):D yang dalam artian, untuk programmer java, kita gak perlu susah2 belajar syntax AJAX, cukup dengan GWT kita bisa buat AJAX hanya dengan menggunakan bahasa pemrograman java 😀

nah sekarang gw mo kasih sedikit tutorial tentang konfigurasi awal GWT, ok pertama download GWT nya dulu di :

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

setelah itu extrax di komputer kita dan setting classpath GWT nya, kalo setting classpath GWT nya bener kalo kita ketik

projectCreator

di command ato shell pasti keluar kayak gini :

D:programminggwt_workspacesecondGWT>projectCreator
Please specify either -ant or -eclipse.
Google Web Toolkit 1.5.3
ProjectCreator [-ant projectName] [-eclipse projectName] [-out dir] [-overwrite]
 [-ignore] [-addToClassPath classPathEntry]
where
  -ant             Generate an Ant buildfile to compile source (.ant.xml will be
 appended)
  -eclipse         Generate an eclipse project
  -out             The directory to write output files into (defaults to current
)
  -overwrite       Overwrite any existing files
  -ignore          Ignore any existing files; do not overwrite
  -addToClassPath  Adds extra elements to the class path.
D:programminggwt_workspacesecondGWT>

artinya OS dah bisa detek perintah projectCreator punyanya GWT 😀
sekarang baut folder untuk project lalu masuk lewat command / shell dan ketik kayak gini :

projectCreator -eclipse myProject 

nah nanti GWT otomatis buat project buat Eclipse, dan kita bisa import projectnya ke Eclipse lewat menu File > Import, lalu ketika keluar dialog Import pilih General > Existing Project into Workspace :
 
klik next 
 
lalu di select root directory pilih folder yang tadi dibuat projectnya, setelah itu klik Finish 😀
 
sekarang projectnya dah ada di eclipse, tinggal buat applikasi GWTnya, caranya masuk command / shell lagi, trus masuk ke folder project tadi yang dibuat trus ketik seperti dibawah ini :

applicationCreator -eclipse myProject org.eecchhoo.myproject.client.ContohApplication

nah di situ kita berarti buat applikasi baru dalam project myProject dan classnya org.eecchhoo.myproject.client.ContohApplication dan ingat kalo bikin GWT paket akhirnya harus ada paket “client” 😀
sekarang kita bisa lihat dile baru dan file cmd (kalo di window) baru :
 
nah file ContohApplication.java itu file aplikasi GWT nya dan ContohApplication-compile.cmd tuh buat kompile dan ContohApplication-shell.cmd itu buat running aplikasinya 😀
nah secara default, file ContohApplication itu ada aplikasi sederhananya seperti ini :
package org.eecchhoo.myproject.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class ContohApplication implements EntryPoint {

  /**
   * This is the entry point method.
   */
  public void onModuleLoad() {
    Image img = new Image("http://code.google.com/webtoolkit/logo-185x175.png");
    Button button = new Button("Click me");
    
    // We can add style names
    button.addStyleName("pc-template-btn");
    // or we can set an id on a specific element for styling
    img.getElement().setId("pc-template-img");
    
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.setWidth("100%");
    vPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
    vPanel.add(img);
    vPanel.add(button);

    // Add image and button to the RootPanel
    RootPanel.get().add(vPanel);

    // Create the dialog box
    final DialogBox dialogBox = new DialogBox();
    dialogBox.setText("Welcome to GWT!");
    dialogBox.setAnimationEnabled(true);
    Button closeButton = new Button("close");
    VerticalPanel dialogVPanel = new VerticalPanel();
    dialogVPanel.setWidth("100%");
    dialogVPanel.setHorizontalAlignment(VerticalPanel.ALIGN_CENTER);
    dialogVPanel.add(closeButton);

    closeButton.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        dialogBox.hide();
      }
    });

    // Set the contents of the Widget
    dialogBox.setWidget(dialogVPanel);
    
    button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        dialogBox.center();
        dialogBox.show();
      }
    });
  }
}

hmmm, nah sekarang eksekusi file ContohApplication-compile.cmd lalu setelah itu eksekusi file ContohApplication-shell.cmd untuk ngejalanin aplikasi GWT nya 😀
dan lo bakal dapat tampilan kayak gini :
  
dan kalo diklik tombol “Click Me” bakal keluar dialog kayak gini :
 
wew, seru y 😀 , cuma koding java, bisa jadi javascript (AJAX), huhuiiiiiii 😀