Applications File Structure in VistaFei Beta 2: A Tutorial

Introduction

This release of VistaFei supports:

1. Design on the basis of What You See is What You Get

2. Supports all GWT Widgets and Panels,

3. Multiple Sheets (containing Views and RPCs)

4. Supports RPC

5. Automatic Code Generation,

6. Themes and Styles,

7. Advanced Image Handling

8. Internationalization.

In this tutorial we shall address some these features to clarify how best to use them. The focus will be on the file structure of a typical AJAX application in VistaFei

Assumptions

The reader is assumed familiar with creating and using Design Sheets in VistaFei

Structure of AJAX application in VistaFei

In a simplified way, a dynamic web application (or a website) is a number of views and/or pages that are presented to the user based on their profiles and activities. These views and pages have their own html, JavaScript's, CSS, etc, and some of their contents is fetched from some form of a backend server based. Browsing is basically jumping between these views or pages through the business logic of the dynamic application and the user's choice.

VistaFei supports multiple Sheets, which are reference-able from anywhere within the application.

There are four main components of an AJAX application in VistaFei:

1- The Application Entry Point (ApplicanName.GWTApp). Any application must have one and only one Application Entry Point

2- The Views, or the UI of the application. These can be simple views, and composite views (pages) that can are basically composites of many simple views. These have file names with extension  .GWTView and an application may have as many of these as required.

3- The Remote Call Procedures (RPCs). These have file names with extension .RPC. An application may have as many of these as needed.

4- The Application Business Logic. These are user-defined Java Classes that perform two main functions:

1. Assemble the Composite views that need to be displayed to the user based on the state of the application, the user's profile and activities,

2. Carry out the transitions between these views following some business logic.

VistaFei provides a visual way to create the views or the UI of the application (1 & 2) above with complete code generation, and a visual way to design RPCs but require user's manual intervention to complete code. In this it has a rich set of features to allow UI design on the basis of What You See Is What You Get. Once these are designed graphically, VistaFei generates the necessary Java Classes according to well defined structure.

For the User-defined Classes, VistaFei provides a feature rich Java Editor.

A simple Application

Lets design a simple application, consisting of a single Page, a view and two data connections (or RCPS).

The Page is Home_Page.GWTApp, which is also the entry point to the application, containing a button, a check box and the Products View below.

The View is Products.GWTView which is basically a Vertical Panel containing an image and a List Box,

The RCPs are contained in an RCP Design Sheet (Products_Services.RCP). There are two Sevices (or RCPs):

1. Fetch_Profiles

2. Save_Updates.

These are shown in screenshots below

Code Generation

When code is generated for the screen above (Right Click Project, Wirelexsoft, Generate Code), the source files in the screenshot below are created.

Notes:

1. The code for the files in WXDesignFolder is generated completely such that after compilation using the GWT compiler should generate the UI effects they are designed to.

2. The RPC Java classes are populated with stubs that need to be populated by the user. Example: screenshot below:

User Defined Classes

Users are not expected to write code in the source files auto generated by VistaFei. They will be overwritten next time you generate code. The user should place their own code in separate user-defined classes which will not be affected by VistaFei. The user can access the source code generated by VistaFei by instantiating the Java Classes it creates. There is a clear pattern to this as will be explained below.

It is recommended to create own package for the user defined Classes, and call it "my_Package" for example.

Of course, you can have as many classes as you want, as many packages as you want. VistaFei will not touch them during code generation.

How the Design Sheets are mapped to Java Classes

The screenshot above showed in effect this mapping. However, there is a predefined pattern for this mapping, as follows:

1. Each Design Sheet is mapped into a Java Class (minus any of the Objects below),

2. Any of the following are mapped each to their own class:

   1. Composite

   2. Dialog

   3. Absolute Panel

   4. Popup

   Based on this you can see that a separate class has been created for the Composite contained within the Home_Page.GWTApp.

   

For the RPC, in total there are six classes generated. For RPC Fetch_profile

Themes

VistaFei supports Themes. A Theme in this context is the Style Sheet and Images that give the application a different feel and look.

In the css folder under projects you can create Themes folder. Each may contain a css directory (to contain possible style sheets for that Theme) and images folder (to contain the images for that Theme). You can create as many of these themes as you like.

Style Selection

To select a particular css for the theme, you need to go to the application-wide properties (click on white pace in application entry point Design Sheet).

Once an Style Sheet is selected, the styleName of various components may then be previewed using the Style Wizard.

Images

The Images folder in the Themes may be populated directly, or through using the Image Wizard as explained before.

End of Tutorial