EMF/GWT

From Eclipsepedia

< EMF
Jump to: navigation, search

EMF makes developing your first Google Web Toolkit application a snap. Here's what you'll need to get started.

Getting Started

Of course you'll need to start by installing Eclipse itself. You can read some background information for how to install Eclipse if this is your first time. You can get the latest release version of Indigo here. While writing this wiki, I installed eclipse-SDK-3.7.1-win32.zip.

Next, you'll need to install the EMF and GWT toolkits into Eclipse. Use "Help->Install New Software..." to bring up the "Install" wizard. The Indigo repo contains what you need, i.e., you don't need the Cloudsmith one anymore:

EMFGWTInstallAddRepository.jpg

Check mark the "EMF SDK for GWT" category and then drive the wizard to completion. Restart the IDE after the install completes.

Next, you'll need to configure the GWT and App Engine SDKs. The current EMF generator and runtime target GWT SDK 2.x so please fetch that version. Note that you do not need the "Plugin for Eclipse" because you've already installed that. Unzip the GWT 2.x download somewhere on your machine and then use the "Window->Preferences...->Google->Web Toolkit" wizard to "Add..." a reference to the GWT SDK you've just unzipped and then drive the wizard to completion. Next, fetch the latest version of the AppEngine SDK and unzip it somewhere; I used 1.3.8 when writing this wiki. Then use the "Window->Preferences...->Google->App Engine" wizard to "Add..." a reference to the App Engine SDK you've just unzipped and drive the wizard to completion.

To complete the setup, you'll need to configure a target platform containing the EMF for GWT runtime. Use the "Window->Preferences->Plug-in Development Environment->Target Platform" wizard to "Add..." a new target platform. Start with an empty target definition on the first page and then proceed to the second page to "Add..." a location. You'll need to "Add..." a new "Software Update Site" for http://download.eclipse.org/modeling/emf/emf/updates/2.7/; you can name it EMF for GWT Runtime. Note that you must end up with a version 20101220 or later to end up with something that works with GWT 2.x.

EMFGWTNewTargetDefinition.jpg

Be sure to uncheck "Include required software" in the "Add Content" wizard. If the wizard doesn't update to show you "EMF GWT Target Components" choice so you can check mark it, then cancel the wizard, bring it up again, and choose the "EMF for GWT Runtime" site, again. At this point you should be able to run the wizard to completion. If it complains that it can't be installed, then you didn't uncheck "Include require software". Run the "New Target Definition" wizard to completion as well; you might want to change the name from "New Target" to "EMF for GWT". Finally, make that new target the default and you're all ready to get started!

Generating an Application

If you're already familiar with how to create a project in which to generate an EMF model, there's almost nothing else you need to know. It's best to start with a clean project though, so if you already have a model, load it into a new project and skip to the next paragraph. You can learn about the steps for creating a model using one of existing tutorials, i.e., you can generate a model from an XML Schema, or you can generate a model from annotated Java which is great if you're familiar with JDT and don't care to learn a lot about EMF's tools. The EMF Refcard documents all the annotations you need to know. On the other hand, if you're impatient and want a quick start, try the following easy steps. Use "File->New->Project...->Eclipse Modeling Framework->EMF Project" to bring up the "New EMF Project" wizard. Give the project a name, e.g., com.example.library, choose "XML Schema" as the type of model from which to import on the next page, copy this URI for the library schema into "Model URI:" entry field of the following page, hit the "Load..." button, and finally drive the wizard to completion.

At this point, you should have your model open in the Generator. You can double click the root GenModel instance at the root of the editor's tree view to bring up the properties view. You'll want to change the "Runtime Platform" property to GWT.

EMFGWTRuntimePlatformGWT.jpg

Save the editor's changes, and from the context menu of the root GenModel instance, invoke "Generate All". The model, edit, and editor plugins should now be generated. From the context menu of the editor project, invoke "Run As->Web Application". Wait for the "Development Mode" view to display the URL for your application. Copy that URL using the context menu, and paste it into your favorite browser. And there you have it, an editor for working with instances of your model in a browser. Of course you can run this under debug control to explore the inner workings of both the client and the server logic. If you get yourself an App Engine account, you'll be able to deploy this application so it's literally running in the clouds!

Using the Application

I think you'll find it's pretty obvious how to use the generated application. Most of the buttons (other than "Validate" and "Save") act on the current selection. You'll be able to create resources, create objects in those resources, create children under those objects, and edit your object's properties. Of course cut, copy, paste, undo and redo work as expected. You'll notice that your saved changes persist across browser sessions; try reloading the browser after saving some changes. It's implemented using the App Engine's DatastoreService. One of the subtle things you'll notice is that a resource in a new session will display "Loading..." until its contents have finished loading; this illustrates the EMF for GWT runtime's support for asynchronous IO.