?Creating the TodoList Project

In this section, we’ll create the TodoList project from scratch using GWT’s webAppCreator, a command-line utility.

Before we start, make sure to download the most recent GWT distribution and install Maven.

Using webAppCreator

The webAppCreator is a command-line tool included in the GWT SDK. It generates the project structure necessary to get started. It also creates a starter application, which you can run to ensure that the components are created and linked successfully.

As you develop your software, you’ll replace the code in the starter application with yours.

For the TodoList project, we’ll need to run webAppCreator with the following parameters:

Parameter	Definition	Example
-templates	Comma separated templates to use	maven,sample
-out	The directory to place the generated files.	TodoList
moduleName	The name of the GWT module you want to create.	org.gwtproject.tutorial.TodoList

Setting up a new project.

Create the TodoList application.
GWT webAppCreator will generate the project structure and the build script (maven pom.xml).
```
$ /full_path_to_gwt_sdk/webAppCreator \
    -templates maven,sample \
    -out TodoListApp \
    org.gwtproject.tutorial.TodoList
```
Tip: If you include the GWT SDK folder in your PATH environment variable, you won’t have to specify the full path.
You may have to modify the pom.xml before you can run the application. Add <type>pom</type> to the gwt dependency, otherwise you will encounter an error. See the “Creating a Maven project” section in the webAppCreator documentation for more information.
Run the application in SuperDevMode.
To check that the project was created correctly start the new app in SuperDevMode.
```
$ cd TodoListApp
$ mvn war:exploded
$ mvn gwt:devmode
```
Tip: Since the created project is built with Maven, you can import it in Eclipse, IDEA, etc.
Launch your Browser.
In the GWT developer window, press “Launch Default Browser” to launch the application. Alternatively, you can click “Copy to Clipboard” and paste the URL into any browser.
If you change something in the code, you can recompile the application by simply reloading the web page. If you change configuration files, e.g. pom.xml or static content in webapp, you might have to restart SuperDevMode. Ctrl+C and mvn gwt:run stops and starts the execution, respectively.

Customizing your project

With the base project set up, we’ll now add the necessary external dependencies. At the same time, we’ll also remove some of the files and dependencies that are set up and generated by default when the starter application was built.

Add the vaadin gwt-polymer-elements dependency to your project by editing the pom.xml file.
```
<dependency>
 <groupId>com.vaadin.polymer</groupId>
 <artifactId>vaadin-gwt-polymer-elements</artifactId>
 <version>${gwtPolymerVersion}</version>
 <scope>provided</scope>
</dependency>
```
Note: Replace the ${gwtPolymerVersion} placeholder with the current version (as of this writing 1.0.2.0-alpha3) or add the corresponding property in your pom.xml
Update the gwt-maven-plugin configuration to support the experimental JsInterop feature.
```
<plugin>
  <groupId>org.codehaus.mojo</groupId>
  <artifactId>gwt-maven-plugin</artifactId>
  ...
  <configuration>
    <jsInteropMode>JS</jsInteropMode>
    ...
  </configuration>
</plugin>
```
Note: JsInterop is an experimental flag in GWT-2.7.0 and you need to enable it explicitly. In future versions of GWT it will be enabled by default.

Update TodoList.gwt.xml module file so that we can use the new gwt library.

<module rename-to="todolist">
  ...
  <inherits name="com.vaadin.polymer.Elements"/>
  ...
</module>

Update TodoList.html

Configure the <meta> viewport to handle mobile layouting.
Import the polyfill <script> for non web-component capable browsers.
Remove the content inside the tag.

    <!doctype html>
    <html>
    <head>
     <meta name="viewport"
       content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
     <script src="todolist/bower_components/webcomponentsjs/webcomponents.js"></script>
     <script type="text/javascript" src="todolist/todolist.nocache.js"></script>
    </head>
    <body>
    </body>
    </html>

Remove greetServlet and its mapping in WEB-INF/web-xml
```
<web-app>
</web-app>
```
Remove all unnecessary files.
- Remove the folder and shared folders located in src/main/java/org/gwtproject/tutorial.
- Remove GreetingService.java and GreetingServiceAsync.java from the client package.
- Remove the example tests in src/main/test.

Update the EntryPoint.

Replace the content of TodoList.java with

package org.gwtproject.tutorial.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.vaadin.polymer.paper.widget.PaperButton;

public class TodoList implements EntryPoint {
  public void onModuleLoad() {
    // Use Widget API to Create a <paper-button>
    PaperButton button = new PaperButton("Press me!");
    button.setRaised(true);
    RootPanel.get().add(button);
  }
}

Note: The example above shows how to add a PaperButton element using the Widgets API.

Run the application again.
You should see a web page containing a Material Design button.

What’s next

In this lesson we learned how to:

Create a new GWT maven project from scratch.
Run and debug our application in SuperDevMode
Add external dependencies to our project.
Configure our project to use the experimental JsInterop mode.
Replace the starter application code with our own.

We’re now prepared to design the UI of the TodoList application. There are two ways we can go about it: using GWT widgets (classic) or the Elements API (modern).

Step 2a: Building the User Interface using Widgets

Step 2b: Building the User Interface using Elements

DISCLAIMER