Please click-here to see the code listing for the given interactive Flight-image. We need to customize this code for the Flight-image and include the code in the SVG Document to present each Flight in the SVG-page on the screen at client computer.

The component code for each Flight-image mainly contains three-parts, each of which is shown in a color box. The first section contains class definition and common to all Flights, which needs no customization and needs to be included only once, even if the SVG-page displays multiple Flights. The following function does that. At line number 4, checks if the Class definition is already included. When called first time, it saves the Class name in a tracking-list and returns False. If the “if-statement” at line 4, returns False, this function executes remaining lines to include Class definition in the SVG document.

            Please click here to see the code listing of full Java class that may be used to generate each Flight-image based on custom input parameters. To explain various parts of the Class-code, I have put each section of Java-class in a colored box. 

            The Java class contains constructors and set-methods to input data, for example, to configure or customize the Flight-image. Please review the code for the constructor and set-methods in the colored box containing code between lines 167 and 204. These methods initialize class variables, which are declared in the colored box that has code between lines 149 and 166.

            The ‘SECTION-2’ and ‘SECTION-3’ of the Flight component code must be customized, based on various input options. The Java Class supports constructors and few set-methods to input data to customize the Flight-image. User may use these methods to customize the Flight-image. For example, he may color code the Flight-image based on states such as, incoming or outgoing etc.

The function (shown in color-box containing lines between 229 and 241) generates ‘SECTION-2’ of the flight component. This function uses input data, which is stored in the variables (e.g. data-url and func_to_disply_info) to generate the ‘SECTION-2’ of the code for the Flight-image. Please notice the variables that configure the Flight-component’s JavaScript Object are highlight in red color.

The function (shown in color-box containing lines between 242 and 260) generates ‘SECTION-3’ of the flight component.. This function uses input data, which is stored in the Object variables (e.g. flt_color, Model, img_path, dx, dy and dir) to generate the ‘SECTION-3’ of the code for the Flight-image. Please notice the variables that customize the Flight-Image are highlight in red color.

            One must include both sections (i.e. ‘SECTION-2’ and ‘SECTION-3’) to present each Flight-image. If an application needs to present 100 Flight-images, one must include the both sections 100 times. Also, while including the code, one must customize the code for each Flight-image so that it displays proper information, image, state and location etc. As you can notice from the Java class, each Object instance of the GUI-Class does this customization, based on the data input to it using its set-methods. While including (or writing) the Flight-image code, the Java-Object alters (or updates) values of few attributes in the SVG-instructions and in the initialization code of Flight’s JavaScript-Object.

            Please notice that Java code is appending UNQ_ID to each identifier in the code for the Flight-image. The UNQ_ID is a string variable in the base class “AgileTemplate”. The constructor of the “AgileTemplate” sets unique value to the UNQ_ID. Appending the UNQ_ID assures that each identifier (e.g. variable or function name) is unique in the code for each Flight-image. Hence no two identifiers in the code for two different Flight-images would conflict with each other and cause bugs.

            Displaying interactive-Images in the webpage is not enough to build a complite application. We must also able to create communication code, so that these Images collaborate or exchange data with other images in the webpage. In the traditional desktop GUI applications, each component in the GUI applications may need to communicate with one or more components, for example to notify an user-event or request services of the other components.

            Therefore, Pioneer-soft’s GUI classes support certain special innovative methods, which can be used to generate communication code for the Flight-components, so that the Flight-component exchange messages with other components/images in the webpage.

            For example, the method Set_func_to_disply_info (shown in color-box containing lines between 211 and 214) may be used to input service function of a Table component. This Flight-image calls this function upon mouse-click and sends an XML-string that containing flight-information, so that, the Table component displays the flight-information.

            Likewise, a background component may get latest location of all the Flights from Radar-station and need to call service methods of each Flight-component to move the Flight-images to latest location. To generate this communication code, server side code needs to know the name of the service method of the Flight-component. The method getUpdateLocationMethodName (shown in color-box containing lines between 205 and 209) may be used to get the name of the Flight’s service function.

            Please carefully review the Java Class for the Flight-image. Although features may be different, the same pattern can be used to create reusable GUI Classes for other images, such as, an Image for Truck to be used in Truck/shipment-tracking system, or an Image for racecar to be used in online game.

            Although this java-class creates very simple interactive Flight-Image, this process is highly scalable to build complex interactive components and component hierarchies. These GUI-Classes can match or exceed similar GUI-Classes one can build for traditional desktop GUI platforms. Numerous examples are provided in this website to prove the scalability of this pattern. These Java classes can be easily refined to add more and more features or to adapt to evolving business needs.