| home / programming / software_engineering_for_ajax |
[previous] |
|
|
|
When you first load Eclipse, you are prompted by the dialog box shown in Figure 4-6 for the workspace location. This is the location on your computer that will hold your projects.
Figure 4-6 shows setting the workspace to C:\Projects and selecting the check box to save this as the default workspace, so the next time Eclipse opens this workspace is automatically loaded. Since this is a new workspace, when the main Eclipse window loads it will not have any projects listed in its Package Explorer. At this point we could start building a project manually in Eclipse for the HelloWorld application built earlier in this chapter, but GWT gives us a shortcut with the projectCreator script shown in Figure 4-7.
This creates an empty project that references GWT and can be easily loaded into Eclipse. To load the GWT project into Eclipse, choose File > Import to display the Import dialog box, shown in Figure 4-8.
In the Import dialog, select Exiting Projects into Workspace and then click Next. The next page of the Import dialog, shown in Figure 4-9, lets you select the projects you want to import.
In this dialog you first need to select the location of your project files. The dialog then presents the list of possible projects that you can import. Figure 4-9 shows the GwtApps project that we created with the GWT projectCreator script. Make sure this project is checked and then click Finish.
At this point Eclipse loads the project into the Eclipse workspace, and the HelloWorld application is listed under Package Explorer, as shown in Figure 4-10, since it was generated in the Projects directory.
You can add other applications to this project using the applicationCreator script, but since we're in Eclipse now we can take advantage of the -eclipse option with the script. When the HelloWorld application was run this option was not specified, so we do not have any Eclipse-specific files that allow you to launch the application from Eclipse. So let's run the applicationCreator script again, this time specifying the -eclipse option, as shown in Figure 4-11.
If you're creating a new application for use in Eclipse, you do not need the -overwrite option. This example used this option to overwrite the previously generated application, which did not have Eclipse support. Notice in Figure 4-11 that the new file HelloWorld.launch was created. This launch file allows you to select the Debug or Run command options for the HelloWorld application inside Eclipse. To see this change in Eclipse, refresh your project (right-click on the project and select Refresh), and then run the HelloWorld application in Debug mode by clicking on the Debug icon (see the bug icon on the toolbar in Figure 4-12). If your application isn't listed in the debug drop-down box, which shows a list of recently debugged configurations, you'll need to click Debug... in the drop-down menu to load the Debug dialog. You'll find the launch configuration for the HelloWorld application under Java Application.
The application will load in GWT' s hosted mode browser, and you can interact with it while still being connected to the Eclipse IDE. This means you can set breakpoints, change code, and perform other Eclipse functions while your application is running. The ability to do this shortens the code-test cycle dramatically and its ease promotes heavy testing.
Attaching GWT development to Eclipse, or any other Java IDE, is a giant step forward for Ajax application development. Let's look at some of the details of writing code with Eclipse.
Eclipse has many tools for writing Java code that provide hints and constraints on what is possible, shortcuts for common tasks, and refactoring functions for large code changes. Of course, you don't have to use these tools to produce Ajax applications with GWT, but they make writing Java code a lot easier.
First, let's look at Eclipse's tools for creating classes. Eclipse lets you create new classes or interfaces by clicking on the New Class icon on the top toolbar (shown in Figure 4-13). After clicking on the New Class icon, a dropdown menu presents a list of options. For a new class you need to click Class in the drop-down menu.
Clicking this icon displays a New Java Class dialog box that prompts you for the information required to create a class. This method is faster than writing a Java class file from scratch and it ensures that everything required to be in the file will be there and will be correct. Notice in Figure 4-13 that the com.gwtapps.examples.client package is listed. This is where the new class will go. When the New Java Class dialog appears, it displays this package as the default package. (See Figure 4-14.)
In this dialog, the name HelloWorldView is specified as the class name for the new class. The superclass is set to Composite. Clicking Finish creates the file and a usable Java class inside, as shown in Figure 4-15.
Actually, the new Java class isn't quite usable yet. We've specified a superclass that doesn't exist. Notice how Eclipse has unobtrusive indicators that let you know something is wrong. The Package Explorer has an X in a red square on the new Java file and on every parent node in the tree up to the project. If we had the project node closed, we would still know that there is an error somewhere in the project. Eclipse also displays a problems list at the bottom that shows a list of errors and warnings in the workspace. It also has the new problems listed. Double-clicking on any of the errors in this list brings you directly to the location of the error in an Eclipse Editor window. In this case there are two errors and the Editor window for the new Java class file is open. Inside the Editor window you can see a further indication of errors. On the right side of the Editor window red marks represent the location of the error within the file.
The file representation for this vertical space is the same scale as the vertical scroll bar. So if this was a bigger file and there were errors, you could quickly locate them by moving the scrollbar to the location of one of the red marks to see the error in the Editor window. Inside the Editor window, error icons display on the left side and the actual code producing the error has a jagged red underline. Furthermore, when you hover the mouse over the code with the error, a tooltip displays an error message, in this case "The import Composite cannot be resolved." The problem is that we selected just the simple class name as the superclass in the New Java Class dialog, but Eclipse requires the full class name. Often it's hard to remember the full class name for a class, but Eclipse helps us here as well. We can have Eclipse automatically suggest the full class name by clicking on the error and selecting the Source > Add Import command, as shown in Figure 4-16.
Alternatively, you could use the keyboard shortcut Ctrl+Shift+M to run the Add Import command. Eclipse automatically adds the required import information. In situations where there is more than one matching import, Eclipse presents you with a choice, as shown in Figure 4-17.
Choosing the GWT Composite class as the import fixes the errors and all of the error indications go away. Eclipse provides this type of early warning of errors for any compile-time errors instantly, instead of having to wait until you compile to get this feedback, as is typical with typed languages. Eclipse updates the IDE with this information as you develop, so you can catch errors immediately after they are created.
Now let's look at some of the unique features of the Eclipse Java editor. We'll start by adding some code to the constructor of the HelloWorld View class. We can save some typing and generate the constructor by choosing Source > Generate Constructors from Superclass..., as shown in Figure 4-18. Eclipse can also automatically suggest items from the Refactor menu if you press Ctrl+L when th e cursor is on a section of code. For example, if you implement an interface on a class but have not yet written the methods that must be implemented, you can press Ctrl+L for the suggestions and Eclipse presents a command to automatically implement the required methods.
Syntax may be all the compiler needs to understand code, but adding code syntax coloring in the editor makes it much easier for us to read the Java code, as illustrated in Figure 4-19. The default syntax coloring in Eclipse uses a bold purple font for Java keywords like class, super, extends, and public, a green font for all comments , a blue font for fields, and a blue italic font for static fields.
Now let's create a HorizontalPanel in the constructor and add a couple widgets to it. As you type, Eclipse watches for errors. After you type the word HorizontalPanel it will appear as an error, because the class has not been imported. Use the same technique as before to import it (Ctrl+Shift+M or Source > Add Import ). When you start typing to call a method on the panel, Eclipse's content assist feature displays a list of method suggestions, as shown in Figure 4-20.
Eclipse automatically shows the suggestions, or you can force them to display by pressing Ctrl+Spacebar. In this case we want the add method, but we can also get an idea of the other methods available. In a way, content assist not only helps speed up typing and locating method names, but it also acts as an educational tool for the class you're using. Instead of leafing through documentation, you can pick up quite a bit of information about a library through this feature.
Another way to educate yourself about a class you're using is to use the editor's Ctrl+Click feature, shown in Figure 4-21. Using Ctrl+Click on a variable, class, or method in the editor takes you to its source in the Eclipse editor. For example, if you click on a variable name, the editor takes you to the variable declaration. If you click on a class name, it takes you to the class' Java file, and if you click on a method , it takes you to the method declaration. This allows you to browse your source code with the same convenience and efficiency as browsing the web. This even works with classes in the GWT library, since the GWT jar file contains the Java source code.
When you can't find what you're looking for while browsing your code, Eclipse provides rich support for searching. First of all, there is a simple single file Find/Replace command which you can access from the Edit menu or by pressing Ctrl+F. This is a standard find and replace feature that you find in most editors. On top of this single file find, Eclipse provides a rich multifile search feature that you can access from the Search menu or by pressing Ctrl+H. Figure 4-22 shows the Search dialog.
The first tab in the Search dialog, File Search, lets you search for any string within any files in your workspace. The second tab, Java Search, provides a more restrictive search since it has an understanding of the Java language. In this tab you can search for specific instances of a certain string. For example, the dialog in Figure 4-22 shows searching for toString when it's being called as a reference. This search would ignore any other occurrence of toString, such as toString declarations or any comments.
The file search also allows you to replace matching values across files. This is helpful for refactoring code. For example, you could replace all occurrences of HelloWorld in our project files with MyFirstApp.
| home / programming / software_engineering_for_ajax |
[previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL:
Digg This
Add to del.icio.us
