If you have problems running Ant on the Mac, try setting the $JDK_HOME environment variable with export JDK_HOME="/Library/Java/Home"
|
Download and unzip the Google Web Toolkit SDK. This contains the core libraries, compiler, and development server that you need to write web applications. |
|
|
gwt-2.0.0.zip. On Mac or Linux, you can unpack the package with a command like
unzip gwt-2.0.0.zip
The GWT SDK doesn't have an installer application. All the files you need to run and use the SDK are located in the extracted directory.
GWT ships with a command line utility called webAppCreator that automatically generates all the files you'll need in order to start a GWT project. It also generates Eclipse project files and launch config files for easy debugging in GWT's development mode.
You can create a new application called MyApplication with the command:
webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp
If you are using a Mac, you may need to make the script executable. In that case, use the following commands:
chmod u+x webAppCreator ./webAppCreator -out MyWebApp com.mycompany.mywebapp.MyWebApp
The webAppCreator script will generate a number of files in
MyWebApp/, including some basic "Hello, world"
functionality in the class
MyWebApp/src/com/mycompany/mywebapp/client/MyWebApp.java. The
script also generates an Ant build script MyWebApp/build.xml.
To run your newly created application in development mode, change to the
MyWebApp/ directory and execute:
ant devmode
This command starts GWT's development mode server, a local server used for development and debugging.
In the development mode window you will find the URL for the local server. Paste this URL into Firefox, Internet Explorer, Chrome, or Safari. Since this is your first time hitting the development mode server, it will prompt you to install the Google Web Toolkit Developer Plugin. Follow the instructions in the browser to install the plugin.
Once the Google Web Toolkit Developer Plugin is installed in your browser, navigate to the URL again and the starter application will load in development mode.
The source code for the starter application is in the
MyWebApp/src/ subdirectory, where MyWebApp is the name you gave to
the project above. You'll see two packages,
com.mycompany.mywebapp.client and
com.mycompany.mywebapp.server. Inside the client package is code that will eventually be compiled to JavaScript and run as client code in the browser. The java files in the server package will be run as Java bytecode on a server, in the case of this Quick Start on the App Engine servers.
Look inside the MyWebApp.java file in the client package. Line 40 constructs the send button.
final Button sendButton = new Button("Send");
Change the text from "Send" to "Send to Server".
final Button sendButton = new Button("Send to Server");
Now, save the file and simply click "Refresh" back in your browser to see your change. The button should now say "Send to Server" instead of "Send":
To run the application as JavaScript in what GWT calls "production mode", compile the application by executing
ant build
The "build" Ant target invokes the GWT compiler which generates a number of
JavaScript and HTML files from the MyWebApp Java source code in the
MyWebApp/war/ subdirectory. To see the application, open the file
MyWebApp/war/MyWebApp.html in your web browser.
Congratulations! You've created your first web application using Google Web
Toolkit. Since you've compiled the project, you're now running pure JavaScript and
HTML that works in IE, Chrome, Firefox, Safari, and Opera. You could now deploy
your application to production by serving the HTML and JavaScript files in your
MyWebApp/war/ directory from your web servers.
Now that you've created your first app, you probably want to do something a bit more interesting. But first, if you normally work with an IDE you'll want to set up your environment to use the Google Web Toolkit SDK.
If you are going to stick with the command line, check out Speed Tracer and then head over to the tutorials.