Using VistaFei IDE 1.0 for GWT: A Tutorial

VistaFei Tutorial: HelloWorld Application

Follow the steps to see how a Web application may be developed in VistaFei.

Step 1 - Getting Started

To begin, open VistaFei.

The Welcome page appears on the screen. Close the window by clicking on the right top button.

Your working space is presented as a Default Perspective

Step 2: Creating a New Project

On the File menu select New à Project à

The Project Wizard is displayed. Open the Wirelexsoft folder and Select the VistaFei Project for Google Web Toolkit

Click the Next button. The GWT Project Wizard window is displayed, prompting for your project information.

Enter the Project Name. Type it in the Project Name field.

Enter the Package Name. Type it in the Package Name field

Enter the Application Name. Type it in the Application Name field

Enter the GWT directory path. Click the Browser button to navigate the file system to where GWT is installed.

.

Click the OK button

Click the Next button.

The Java Settings Dialog Box is displayed. Click the Finish button.

A pop up window is displayed asking you if you want to associate the Project to a Java Perspective. Click the Yes button.

Click the Finish button to switch to a Java Perspective.

After the Project is created the Design Sheet is displayed as a default view.
Click on the Arrow (see picture below) to expand the Palette

The Pallet is expanded.

Opening the Property View. From the Window menu Select submenu Show Views à Properties.

Inspecting the Property Sheet.

Step 3: Writing a “HelloWorld” Application

1. Drag a label widget from the palette and drop it into the Editor View (workspace).

2. Change the contents of the label widget from “text” to “HelloWorld”. Double click on the text.

3. In the property sheet change the value of the label called “text” to “HelloWorld”.

4. Click the Save button located on the top tool bar

Step 4: Automatic Code Generation

1. Select the project from the Package Explore View. Once selected, click the right button.

2. A drop down menu is displayed. Select VistaFei à Generate

3. The following message indicates that the code generator will remove previous generated code. Click the OK button to accept the request

4. From the Eclipse main menu Select RUN à run-à Java Application

5. Select the Project name and Click Run

6. The generated files are displayed in the left navigation bar.

5. After few seconds Google browser is launched by VistaFei.

Step 5: Viewing your Application

Your “HelloWorld” Application is displayed in the Google browser.

End of Tutorial