The following examples briefly outline simple design and development of Raju’s-GUI-Classes. The example shows a method to build a sample reusable GUI-class: “Airplane”. This type of component may be used in real-time simulation, games or applications, such as, Air Traffic Control (or ATC) systems.

The Airplane component displays an interactive Airplane at a given location on the screen. One may use a city map component in the background. The Airplane component may support numerous services, such as: on-click event the component may request the server for the latest status information and display the information in a Table. In regular intervals (e.g. every 2 seconds), it may get location from the airline servers to update its location on the screen. It may provide many visual clues, for example, to assist the operators. It may use color-coding for the flights to show certain information visually, for example, in-coming, out-going, military or passing-through air space etc.

The section-1 of the code contains the Class definition, it comprise of data variables, for example, to save the state; and many service functions. Lets discuss some service functions:

highlight( stat ): This service function enlarges the Airline image and shows more information, if “stat” is not Zero. If “stat” is Zero, it restores the normal size

update_location(nx, ny, dir, set): This service function updates the location of the Airplane image. If the “set” is true, it uses the values as it is; else it uses the values to increment or adds the values to the current location to determine the new location.

ajax_update_loc (loc_url) : The service function requests the server for the current location of the Airline. It sets the private function get_loc_data(data) to read the location data asynchronously and updates the location of the Airline. This service function may be called at regular intervals to update the flight’s location.

ajax_show_info ( ): This service function requests the server for the latest data for the Airline. It sets the private (or local) function get_url_data(data) to read the information asynchronously and display the information in a table. This service function may be called upon Click on the Airline image.

The service functions determine the functionality of the Airline component. Based on the requirements for the application, one may add more service functions or design his service functions to satisfy his specific needs. If you are experienced in creating such reusable custom components for VC++, most of that experience may be translated into creating the custom online-GUI-classes.

The section-2 instantiates an Object and initializes the Airplane Object. The section-3 contains necessary SVG-Code to present each Subcomponent. Please review the comments included along with the SVG-graphics elements above for details.

The sample Airline AC is tested using following test web page. The web page has external push-boxes to test the Airplane AC’s services. Upon clicking on the Box, it exercises the respective service. Please play with the following example. You may click right button to open pop-up menu, and select View source code to inspect the SVG-code.

Once the SVG component code it created and tested, it is quite mechanical and straightforward to create reusable Java-class for any component. It usually takes between half-an-hour to an hour to create the reusable Java-class. We may even create an utility tools to further automate the tasks, such as, a tool that takes the SVG (or DHTML) component code and automatically create the CGM() method. This task is almost similar to the utility that takes the JSP file and coverts into Servlet (which is normally what happens today to execute the JSP files).

Note: For most components, it requires mostly SVG experience to create the best sample component to support all required features. Once the sample-AC is created, one may create the Java-class in less than an hour. This is advantageous, because SVG or XAML programmers could create the AC/Java-class and the application programmers can just use the reusable-Java-class to build his web application.

Please review the java-class code. The Java-class code may provide further customization and option to choose other alternative features/implementations, which can be dynamically determined based on the requirements for each specific component in the web page. For example, the sample component implementation used B737 image for testing the sample component.

However, the application may require appropriate image to be displayed for each airplane. This can be either handled in the AC or in Java-class. In this example, this is handled at the server side. The Java-class could define “SVG-code” to present the image for each model of the Airplane. Then dynamically select appropriate image-code to present the Airline.

The Java-class has constructor and other methods to initialize and configure the component. The Java-class supports Code generation method (e.g. CGM), which uses this input information to generate the component. The Java-class also supports few get and set methods for the “Integration Logic”

The java-class’s CGM includes the JavaScript class file (the Class code is placed in an external file), in the component code. Also, it uses the input information to generate the section-2, which instantiates and initializes the JavaScript object for the component. The CGM() also generate additional code to talk to external component, if Integration logic provides name of the service functions of other ACs.

Please DOWNLOAD sample GUI classes and see the “flight_test3.jsp”, which uses the Airline Objects to present multiple components over San Francisco city map.

Please see the function JFK_air_trafic(PrintWriter out) in “ATC_CF.java”, which uses the Airline Objects to present multiple components over New York city map.

Please see “atc_test.jsp” to see how the “ATC_CF.java” may be used to build ATC for one or more cities and use them in RotateBanner and display one city at a time using Radio-buttons.