Sample GWT (Google Web Toolkit)

27 08 2008

Sudah lama ga ngeblog .. abis sering researching sampai hampir lupa blog ini .. hehehe
Lagi cari AJAX application adalah GWT (Google Web Toolkit).
Tidak perlu coding JavaScript … hanya coding java saja … GWT akan compile source java menjadi javascript.

Langkah – langkah membuat web sederhana (Hello World) di Linux :
1. Download dan extract GWT v1.5 here.

2. Download Cypal Studio (eclipse plugin) for GWT here and put it to your eclipse IDE

3. Setting preferences for Cypal Studio and enter your GWT home from Windows menu > Preferences > Cypal Studio.

4. Press finish button.

5. Create New Dynamic Web Project and enter your project: HelloWorldApp from File menu > New > Others > Dynamic Web Project.

6. Copy library and file to lib folder:
– gwt-dev-linux.jar
– gwt-servlet.jar
– gwt-user.jar
– juli-6.0.xx.jar
– libgwt-ll.so
– libswt-gtk-3235.so
– libswt-mozilla-gtk-3235.so
– libswt-pi-gtk-3235.so
– mozilla-hosted-browser.conf

7. Create New GWT Module from File menu > New > Others > Cypal Studio > GWT Module.
Langsung membuat package dan file dengan otomatis seperti di bawah :
com/sample/gwt
com/sample/gwt/public
com/sample/gwt/public/HelloWorld.html
com/sample/gwt/HelloWorld.gwt.xml
com/sample/gwt/client
com/sample/gwt/client/HelloWorld.java
com/sample/gwt/server
com/sample/gwt/client/HelloWorld.java
com/sample/gwt/public/HelloWorld.html

8. HelloWorld.java

public class HelloWorld implements EntryPoint {
	public void onModuleLoad() {
		final TextBox textBox = new TextBox();
		final Label label = new Label();

		Button button = new Button("Click Me", new ClickListener() {
			public void onClick(Widget sender) {
				label.setText("Hello World, " + textBox.getText());
			}
		});

		RootPanel.get("textInput").add(textBox);
		RootPanel.get("button").add(button);
		RootPanel.get("label").add(label);
	}
}

9. HelloWorld.html

<html>
	<head>
		<title>Wrapper HTML for HelloWorld</title>
		<style>
			body,td,a,div,.p{font-family:arial,sans-serif}
			div,td{color:#000000}
			a:link,.w,.w a:link{color:#0000cc}
			a:visited{color:#551a8b}
			a:active{color:#ff0000}
		</style>
	</head>
	<body>
		<iframe src="javascript:''" id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
   		<script type="text/javascript" language="javascript" src="com.sample.gwt.HelloWorld.nocache.js"></script>

   		<div id="textInput"></div><br/>
   		<div id="button"></div><br/>
   		<div id="label"></div>
	</body>
</html>

10. HelloWorld.gwt.xml

<module>
	<!-- Inherit the core Web Toolkit stuff.                  -->
	<inherits name='com.google.gwt.user.User' />

	<!-- Specify the app entry point class.                   -->
	<entry-point class='com.sample.gwt.client.HelloWorld' />
	<inherits name="com.google.gwt.user.theme.standard.Standard" />
</module>

11. Compile and Run GWT from Run menu > Run Configurations.

– GWT Hosted Mode application: HelloWorld
– Project : HelloWorldApp
– Module : com.sample.gwt.HelloWorld

12. Beres.

Khan tidak sulit ?
Selamat mencoba …


Actions

Information

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: