Please install Adobe's SVG-Viewer 3.0 (ASV3.0) plug-in from Adobe-site to view SVG Components: http://www.adobe.com/svg/viewer/install/

Use The Radio Button (Bottom Right) to select a City to see Air-traffic. 
  • Click bottom button to Show/Hide City-map (Just Below The SVG Component)
  • Move mouse over the flight to Zoom-in
  • Click Mouse on the flight to see more data
  • Please notice the radio buttons group at bottom right. Use them to switch cities

Note: The Airline components has all the hooks, so that they can be moved, if we can get location data at real-time.


The Source Code to use the Air Trafic Control Component Factories

<%

            PrintWriter pw=new PrintWriter(out,true);

// Instantiate "Component Factory" or CF for ATC of each City.

// The ATC_CF takes the Airport code and builds loosely coupled AC (A Mashup).

             ATC_CF Atc1 = new ATC_CF ("SFO");

            ATC_CF Atc2 = new ATC_CF ("LAX");

            ATC_CF Atc3 = new ATC_CF ("JFK");

 

// Pass the CF/AC information to a Rotate banner GUI Component

// It displays one component (or Mashup) at a time and offers service method

// to Hide-current component and display new component.

ATC_CF         City_list[] = {Atc1, Atc2, Atc3};

            RotateBanner3 RB = new RotateBanner3(City_list, 3);

            RB.CGM(pw, request);

%>

<script type='text/ecmascript'>

// Integration-Logic: Integrate Radio-Buttons AND Rotate Banner

function switch_the_city(grp, num) { // Impliment a Callback  

// Integration-Logic: Integrate Radio-Buttons AND Rotate Banner

            <% pw.print(RB.getBannerUpdateMethodName()); %>(num);  

// I am lazy to design the CF properly. This code should not be here,

// But, I am using following 2 lines spaghetti code to fix SVG/GIF bug.

<%       for (int i = 0; i < 3; i++)

                        pw.println(City_list[i].getName_RemoveBackground() + "()"); %>

}

</script>

<g transform='translate(750 400)'>

<%

// Control the Rotate banner component using a Radio-button group GUI component.

String   RadioB_list[] = { "SFO-San Francisco", "LAX-Las Angles", "JKF-New yark" };

            RadioButtons RadioB = new RadioButtons (RadioB_list, 3);

            RadioB.setCB_AddMethod("switch_the_city");

            RadioB.CGM(pw, request);

// This gives an example for how two GUI components are integrated (or Coupled).

%>

</g>

It has taken one and half days to create GUI-class for the interactive airplane and working prototype. (The full GUI-class code is included below, for the review. The actual code is about 125 lines, if we remove the SVG instructions for the flight-images. We also need a small JavaScript-class include file of about 100 lines, which support the interactive features of the Component)


Appropriate images are used to indicate the make and model of the Flight (e.g. B747, A340 or DC9 etc.)

The color coding is used to show various information (e.g. In-coming, out-going, passing through the air space or neighboring airport etc.)

The component provides many service methods to set visual clues, such as, small red-circle or large yellow circle, for example to indicate awaiting instructions or assigned to this Air-traffic controller. (e.g. Each Air-traffic-controller can recognize all the Airlines that are under his control or assigned to him. The assignments may be changed at real-time by the supervisor from his system.)

All the hooks are supported and if we have real data, we can stream the data using AJAX methods to move the images on appropriate paths. Only thing lacking is real data. We could do it with improvised data, however, just like we have created the flight images. There is no limit on number of flights on each map. For testing we have used just few images.


Test the services of each flight:

  1. The component exports service functions.
  2. Any external component in the web page could call them to get its services
  3. Please notice the square boxes at the bottom. Please click on them to test few services

The Sample Component for one City. The Sample code is given below:

The Java code for the City Air Traffic:

Airplane Al1 = new Airplane("TWA486","B737", 1, null);  // Instantiate the flight
Al1.setCallBackName("flight_info_table.Display_info");  // Integrate with info-table, to display the data
Al1.set_location (90, 50, -40); // Set the location and direction-angle
Al1.setSmallMessages("LAX-to-JFK", "Radio Ch#36");
Al1.CGM(pw, request);  // Generate the code to present the Image/JavaScript code

// In a real application, we get this information from the database in a For-LOOP
// But, for testing I am using static data.

Airplane Al2 = new Airplane("AA486","SF37", 2, null);
Al2.set_location (360, 180, 20);
Al2.setCallBackName("flight_info_table.Display_info");
Al2.setSmallMessages("SFO-to-LAX", "Radio Ch#27");
Al2.CGM(pw, request);

Airplane Al3 = new Airplane("UA486","DC10", 4, null);
Al3.set_location (400, 400, 45);
Al3.setCallBackName("flight_info_table.Display_info");
Al3.setSmallMessages("SFO-to-DFW", "Radio Ch#18");
Al3.CGM(pw, request);

Airplane Al4 = new Airplane("NW63","A330", 3, null);
Al4.set_location (140, 225, 180);
Al4.setCallBackName("flight_info_table.Display_info");
Al4.setSmallMessages("LAG-to-SFO", "Radio Ch#45");
Al4.CGM(pw, request);

Airplane Al5 = new Airplane("SW36","B747", 6, null);
Al5.set_location (360, 320, -120);
Al5.setCallBackName("flight_info_table.Display_info");
Al5.setSmallMessages("ATL-to-SFO", "Radio Ch#27");
Al5.CGM(pw, request);


Airplane Al6 = new Airplane("DEL36","B340", 0, null);
Al6.set_location (63, 380, -80);
Al6.setCallBackName("flight_info_table.Display_info");
Al6.setSmallMessages("DUL-to-SFO", "Radio Ch#43");
Al6.CGM(pw, request);

JavaScript include file for the Animation & Interactivity:    'App1/Airline_class.js'

function airline_v1_1(flight_num, flight_url, al_id, img_id, loc_id )

{

    this.highlight = highlight;

    this.show_info = show_info;

    this.add_callback = add_callback;

    this.change_color = change_color;

    this.update_location = update_location;

    this.set_location = set_location;

    this.set_clues_ids = set_clues_ids;

    this.set_visual_clues = set_visual_clues;

    this.set_new_sms = set_new_sms;

 

    var flt_num = flight_num;

    var al_grp = al_id;

    var al_img = img_id;

    var al_loc = loc_id;

    var al_sms = null;

    var callback_func = null;

    var cx = 0, cy = 0, cd = 0;

    var cur_col = 'red';

    var clue1_id = null;

    var clue2_id = null;

    var airliner_url = flight_url;

 

    function add_callback( cb_name ) {

           callback_func = cb_name;

    }

    function highlight( stat ) {

        var svgobj = SVG_Document.getElementById(al_grp);

 

       if (svgobj != null){

            if (stat == 0) {

                  svgobj.setAttribute('transform', 'scale(0.2)');

                  // change_color( 'blue' )

                  // if(callback_func != null)            callback_func(null);

                  if(al_sms != null) {

                      svgobj = SVG_Document.getElementById(al_sms);

                      (svgobj.getStyle()).setProperty ('visibility', 'hidden');

                 }

             }

            else {

                  svgobj.setAttribute('transform', 'scale(0.75)');

                  // change_color( 'red' )

                  if(al_sms != null) {

                       svgobj = SVG_Document.getElementById(al_sms);

                       (svgobj.getStyle()).setProperty ('visibility', 'visible' );

                   }

            }

       }

    }

    var switch1 = 1;

    function show_info ( ) {

          var xml_info = webservices_get_flight_info(airliner_url, flt_num);

          if(callback_func != null)            callback_func( xml_info );

    }

   

    function change_color( new_col ) {

       var svgobj = SVG_Document.getElementById(al_img);

       cur_col = new_col;

       if (svgobj != null)

            (svgobj.getStyle()).setProperty ('fill', cur_col);

    }

    function update_location(nx, ny, dir, set) {

 

        if(set == 1) {                         // Set the new values.

                 cx = nx; cy = ny; cd = dir;

         }

         else {                                 // Else increment.

                 cx += nx; cy += ny; cd += dir;

        }

 

        var svgobj = SVG_Document.getElementById(al_loc);

        var trans_str = 'translate(' +cx+ ',' +cy+')';

        if (svgobj != null)                svgobj.setAttribute('transform', trans_str);

 

        var svgobj = SVG_Document.getElementById(al_img);

        var trans_str = 'rotate('+cd+')';

       if (svgobj != null)                svgobj.setAttribute('transform', trans_str);

    }

    function set_location (nx, ny, dir) {

        cx = nx; cy = ny; cd = dir;

    }

    function set_clues_ids (id1, id2, sms_id) {

           clue1_id = id1;

           clue2_id = id2;

           al_sms = sms_id;

    }

    function set_new_sms(msg1, msg2) {

       var str = 'm1_' + al_sms;

           SVG_Document.getElementById(str).firstChild.nodeValue = msg1;

 

           str = 'm2_' + al_sms;

           SVG_Document.getElementById(str).firstChild.nodeValue = msg2;

    }

    function set_visual_clues(clue_code, state) {

       if((clue_code == 1) && (clue1_id != null)) {

           var svgobj = SVG_Document.getElementById(clue1_id);

           (svgobj.getStyle()).setProperty ('visibility', (state == 1) ? 'visible' : 'hidden');

       }

       if((clue_code == 2) && (clue2_id != null)) {

          var svgobj = SVG_Document.getElementById(clue2_id);

          (svgobj.getStyle()).setProperty ('visibility', (state == 1) ? 'visible' : 'hidden');

       }

    }

}

SVG Code to present each Flight Component

// SECTION-1: Include the JavaScript Cass for the Airline
<script xlink:href='App1/Airline_class.js' language='text/ecmascript'/>

// SECTION-2: Instantiation and Init the Flight Object 
<script type='text/ecmascript'>
var airline_63 = new airline_v1_1( 'TWA486', 'http://flightinfo.twa.com', 'al_id_63', 'al_img_63', 'al_loc_63' );
airline_63.set_location( 70.0, 90.0, 10.0 );

// Visual clues for Air Trafic Controler
airline_63.set_clues_ids ('atc_clue1_63', 'atc_clue2_63', 'sms_63');

// Register a function to call, upon user click on the Airliner-image
airline_63.add_callback( flight_info_table.Display_info );
</script>

// SECTION-3: Include Vector Graphics code & Event handlers for the GUI component
<g id='al_loc_63' transform='translate(70.0, 90.0)'>
   <g id='al_id_63' transform='scale(0.2)' onmouseover='airline_63.highlight(1)' onmouseout='airline_63.highlight(0)' onclick='airline_63.show_info()'>
     <circle id='atc_clue1_63' cx='0' cy='0' r='50' style='fill:gold;opacity:.25;stroke:black;stroke-width:4;visibility:hidden;'/>
     <path id='al_img_63' fill='blue' stroke='red' stroke-width='.5pt' transform='rotate( 10.0)'
       d=' M 50 0 L 40 -4 L 35 -5 L -20 -5 L -38 -3 
M -25 0 L -25 -3 L -41 -3 L -41 0 
M -41 -2 L -44 0 L -32 -1 L -30 0 
M -29 -4 L -38 -15 L -42 -15 L -38 -3 
M 12 -5 L -15 -45 L -19 -45 L -8 -19 L -7 -5 
M 7 -12 L 13 -12 L 13 -18 L 3 -18

M 50 0 L 40 4 L 35 5 L -20 5 L -38 3
M -25 0 L -25 3 L -41 3 L -41 0 
M -41 2 L -44 0 L -32 1 L -30 0 
M -29 4 L -38 15 L -42 15 L -38 3 
M 12 5 L -15 45 L -19 45 L -8 19 L -7 5 
M 7 12 L 13 12 L 13 18 L 3 18 '>
     </path>

     <text font-family='Verdana' x='15' y='0' font-size='24' fill='black'> TWA486 </text>
     <text font-family='Verdana' x='15' y='25' font-size='24' fill='black'> B737 </text>
     <circle id='atc_clue2_63' cx='0' cy='0' r='12' style='fill:red;opacity:.75;stroke:black;stroke-width:4;visibility:hidden;'/>
     <g id='sms_63' transform='translate(-50,50)' style='visibility:hidden;' >
       <text d='m1_sms_63' font-family='Verdana' x='5' y='0' font-size='24' fill='black'> LAX-to-JFK </text>
       <text d='m1_sms_63' font-family='Verdana' x='5' y='25' font-size='24' fill='black'> Radio Ch#1116 </text>
     </g>
  </g>
</g>

The JSP Code that uses the GUI-class and instantiate/initialize each Airline for the above application

(Note: In real-application, we read the data from the data sources & use for-loop to create each Airplane)

            Airplane Al1 = new Airplane("TWA486","B737", 1, null);  // Instantiat an Aiplane Object

             // Set Callback for click. Call this function to display the information in the Table on the right-side

            Al1.setCallBackName("flight_info_table.Display_info");     

            Al1.set_location (90, 50, -40); // Give X, Y Coordinates and Direction in Degrees.

            Al1.setSmallMessages("LAX-to-JFK", "Radio Ch#36"); // Optional additional information, on mouse-over.

            Al1.CGM(pw, request);  // Include the Airplane component in the Web-page

           

            Airplane Al2 = new Airplane("AA486","SF37", 2, null);

            Al2.set_location (360, 180, 20);

            Al2.setCallBackName("flight_info_table.Display_info");

            Al2.setSmallMessages("SFO-to-LAX", "Radio Ch#27");

            Al2.CGM(pw, request);

           

            Airplane Al3 = new Airplane("UA486","DC10", 4, null);

            Al3.set_location (400, 400, 45);

            Al3.setCallBackName("flight_info_table.Display_info");

            Al3.setSmallMessages("SFO-to-DFW", "Radio Ch#18");

            Al3.CGM(pw, request);

 

            Airplane Al4 = new Airplane("NW63","A330", 3, null);

            Al4.set_location (140, 225, 180);

            Al4.setCallBackName("flight_info_table.Display_info");

            Al4.setSmallMessages("LAG-to-SFO", "Radio Ch#45");

            Al4.CGM(pw, request);

 

            Airplane Al5 = new Airplane("SW36","B747", 6, null);

            Al5.set_location (360, 320, -120);

            Al5.setCallBackName("flight_info_table.Display_info");

            Al5.setSmallMessages("ATL-to-SFO", "Radio Ch#27");

            Al5.CGM(pw, request);

 

            Airplane Al6 = new Airplane("DEL36","B340", 0, null);

            Al6.set_location (63, 380, -80);

            Al6.setCallBackName("flight_info_table.Display_info");

            Al6.setSmallMessages("DUL-to-SFO", "Radio Ch#43");

            Al6.CGM(pw, request);

As you know, we cannot access real-data, so I am emulating the remote request for testing:
Webservices_test.js

function webservices_get_flight_info ( airline_url, flt_num ) {

 

            // This method may use getURL() or any other method to

            // get the upto the minute fligt data from the server.

            // For example: getURL(airliner_url, set_info_table);

            //          Where, set_info_table(data) calls callback_func(xml_info);

            // For testing purpose, this pseudo-code function

            // using simple static string.

 

            // Alternatively, emerging AJAX techniques may be employed to get flight data.

            // Where, AJAX : Asynchronous JAvaScript + XML

            // Please see http://www.w3schools.com/xml/xml_http.asp, for an example

            // how we may get the XML-data string from the Airline's servers.

 

            var xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>UA486</airline> \n" +

                        "            <visibility> 250 Meters </visibility> \n" +

                        "            <make> DC10 </make> \n" +

                        "            <chanel> 12345 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   444      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     2        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'UA486')                                 return(xml_data_str);

 

                xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>TWA486</airline> \n" +

                        "            <visibility> 250 Meters </visibility> \n" +

                        "            <make> B737 </make> \n" +

                        "            <chanel> 12345 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   333      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     5        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'TWA486')                              return(xml_data_str);

           

                xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>AA486</airline> \n" +

                        "            <visibility> 250 Meters </visibility> \n" +

                        "            <make> SF37 </make> \n" +

                        "            <chanel> 12345 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   555      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     3        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'AA486')                                 return(xml_data_str);

 

                 xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>NW63</airline> \n" +

                        "            <visibility> 350 Meters </visibility> \n" +

                        "            <make> A330 </make> \n" +

                        "            <chanel> 345 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   333      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     4        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'NW63')                                  return(xml_data_str);

           

                 xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>SW36</airline> \n" +

                        "            <visibility> 150 Meters </visibility> \n" +

                        "            <make> B747 </make> \n" +

                        "            <chanel> 123 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   555      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     3        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'SW36')                                   return(xml_data_str);

 

           

                 xml_data_str = "<airplane id='xml_data' xmlns='#'> \n" +

                        "            <airline>DEL36</airline> \n" +

                        "            <visibility> 150 Meters </visibility> \n" +

                        "            <make> A340 </make> \n" +

                        "            <chanel> 123 </chanel> \n" +

                        "            <misc_list> \n" +

                        "                       <misc_info name1='altitude'>   555      </misc_info> \n" +

                        "                       <misc_info name1='longitude'>  25       </misc_info> \n" +

                        "                       <misc_info name1='hight'>     3500      </misc_info> \n" +

                        "                       <misc_info name1='speed'>      200      </misc_info> \n" +

                        "                       <misc_info name1='direction'> 3500      </misc_info> \n" +

                        "                       <misc_info name1='decending'> 350Ft/min </misc_info> \n" +

                        "                       <misc_info name1='runway'>     3        </misc_info> \n" +

                        "                       <misc_info name1='atc_id'>     25       </misc_info> \n" +

                        "            </misc_info> \n" +

                        "</airplane>"

            if (flt_num == 'DEL36')                                 return(xml_data_str);

}

Note: One may use Yahoo or Google maps-API to create his home town map and use the map (or satellite weather map) as background.

The Reusable Java Class for GUI Component: Airplane

package com.agile.templatelib;

 

import java.io.*;

import java.util.*;

import javax.servlet.http.HttpServletRequest;

 

public class Airplane {

            public static int TemplateCount = 0;

            String            UNQ_ID = ""+ (++TemplateCount);

 

            String            Flight_num = null, Model = null;

            String            callback_str = null;

            String            Service_func = null;

            String            img_path = null;

            String            sms1 = null, sms2 = null;

            String            data_url = null;

            double          dx = 0, dy = 0, dir = 0;

 

            final            String            in_coming                           = "green";

            final            String            out_going                            = "blue";

            final            String            passing_thru                        = "grey";

            final            String            high_priority                      = "red";

 

            final            String            neibouring_airport1         = "Light Yellow";

            final            String            neibouring_airport2         = "lavender";

            final            String            air_force                              = "Tan";

            final            String            unidentified             = "Rose";

 

            String            flt_color =  in_coming;

   

// Actual code is about 50 to 60 lines.

// This Flight-images are generated using a drawing tools, from Adobe or Microsoft.

// No one should hand create the Images. This SVG code displays proper flight image.

String B767 =         "d=' M 50   0 L 40    -5 L -30   -5 L -50   0 \n" +

                                    "M 15  -5 L -10  -50 L -15  -50 L  -5 -15 L -5 -5 \n" +

                                    "M -35 -3 L -45  -20 L -50  -20 L -47  -1 \n" +

                                    "M -50  0 L -30   -2 L -27    0 \n" +

                                    "M 10 -15 L 15   -15 L 15   -21 L   6 -21 \n" +

                                    "                      \n" +

                                    "M 50   0 L 40     5 L -30    5 L -50   0 \n" +

                                    "M 15   5 L -10   50 L -15   50 L  -5  15 L -5  5 \n" +

                                    "M -35  3 L -45   20 L -50   20 L -47   1 \n" +

                                    "M -50  0 L -30    2 L -27    0 \n" +

                                    "M 10  15 L 15   15 L 15    21 L   6  21'> \n";

 

String B757=            "d=' M 60 0 L 50 -4 L -45 -4 L -63 0 L -40 -1 L -37 0 \n" +

                                    "M 15 -4 L -8 -48 L -12 -48 L -5 -20 L -5 -4 \n" +

                                    "M -47 -4 L -58 -18 L -64 -18 L -58 -1 \n" +

                                    "M 10 -13 L 15 -13 L 15 -19 L 7 -19 \n" +

                                    "  \n" +

                                    "M 60 0 L 50 4 L -45 4 L -63 0 L -40 1 L -37 0 \n" +

                                    "M 15 4 L -8 48 L -12 48 L -5 20 L -5 4 \n" +

                                    "M -47 4 L -58 18 L -64 18 L -58 1 \n" +

                                    "M 10 13 L 15 13 L 15 19 L 7 19 '> \n";

 

String SF37 =         "d=' M 40 0 L 30 -5 L -30 -5 L -52 0 L -38 -1 L -35 0 \n" +

                                    "M -35 -4 L -40 -25 L -45 -25 L -48 -1 \n" +

                                    "M 5 -5 L 0 -57 L -4 -57 L -9 -5 \n" +

                                    "M 10 -26 L -8 -26 L -8 -30 L 10 -30 L 13 -28 L 10 -26 \n" +

                                    "M 11 -20 L 11 -36 \n" +

                                    " \n" +

                                    "M 40 0 L 30 5 L -30 5 L -52 0 L -38 1 L -35 0 \n" +

                                    "M -35 4 L -40 25 L -45 25 L -48 1 M 5 5 L 0 57 L -4 57 L -9 5 \n" +

                                    "M 10 26 L -8 26 L -8 30 L 10 30 L 13 28 L 10 26 \n" +

                                    "M 11 20 L 11 36 '> \n";

 

String SF34 =         "d=' M 60 0 L 50 -5 L -30 -5 L -55 0 \n" +

                                    "M 10 -5 L -10 -52 L -13 -52 L -5 -5 \n" +

                                    "M -45 -2 L -54 -17 L -58 -17 L -52 0 \n" +

                                    "M -55 0 L -33 -2 L -30 0 \n" +

                                    "M -23 -5 L -23 -10 L -37 -10 L -37 -5 L -23 -5 \n" +

                                    "M -37 -5 L -42 -3 \n" +

                                    "            \n" +

                                    "M 60 0 L 50 5 L -30 5 L -55 0 \n" +

                                    "M 10 5 L -10 52 L -13 52 L -5 5 \n" +

                                    "M -45 2 L -54 17 L -58 17 L -52 0 \n" +

                                    "M -55 0 L -33 2 L -30 0 \n" +

                                    "M -23 5 L -23 10 L -37 10 L -37 5 L -23 5 \n" +

                                    "M -37 5 L -42 3 '> \n";

 

String DC10 =         "d=' M 50 0 L 40 -5 L -20 -5 L -45 0 \n" +

                                    "M 10 -5 L -10 -52 L -13 -52 L -5 -5 \n" +

                                    "M -35 -2 L -44 -17 L -48 -17 L -42 0 L -23 -2 L -20 0 \n" +

                                    "M -13 -5 L -13 -10 L -27 -10 L -27 -5 L -13 -5 \n" +

                                    "M -27 -5 L -32 -3 \n" +

                                    "            \n" +

                                    "M 50 0 L 40 5 L -20 5 L -45 0 \n" +

                                    "M 10 5 L -10 52 L -13 52 L -5 5 \n" +

                                    "M -35 2 L -44 17 L -48 17 L -42 0 L -23 2 L -20 0 M -13 5 L -13 10 \n" +

                                    "L -27 10 L -27 5 L -13 5 \n" +

                                    "M -27 5 L -32 3 '>\n";

 

String B747 =         "d=' M 60 0 L 50 -5 L 40 -7 L -30 -7 L -65 0 \n" +

                                    "M 23 -7 L -22 -63 L -27 -63 L -7 -25 L -4 -7 \n" +

                                    "M -45 -4 L -61 -22 L -65 -22 L -60 -1 \n" +

                                    "M -65 0 L -40 -2 L -37 0 \n" +

                                    "M 12 -20 L 18 -20 L 18 -25 L 8 -25 \n" +

                                    "M -3 -38 L 3 -38 L 3 -43 L -7 -43 \n" +

                                    "            \n" +

                                    "M 60  0 L 50   5 L 40   7 L -30  7 L -65 0 \n" +

                                    "M 23  7 L -22 63 L -27 63 L -7  25 L -4  7 \n" +

                                    "M -45 4 L -61 22 L -65 22 L -60  1 \n" +

                                    "M -65 0 L -40  2 L -37   0 \n" +

                                    "M 12 20 L 18  20 L 18  25 L 8   25 \n" +

                                    "M -3 38 L 3   38 L 3   43 L -7  43 '> \n";

 

String A330 =         "d=' M 50 0 L -40 -5 L 35 -6 L -20 -6 L -55 0 L -33 -1 L -30 0 \n" +

                                    "M 15 -6 L -15 -60 L -20 -60 L -6 -20 L -5 -6 \n" +

                                    "M -15 -60 L -20 -64 L -22 -64 L -20 -60 \n" +

                                    "M -41 -3 L -50 -20 L -55 -20 L -50 -1 \n" +

                                    "M 9 -17 L 15 -17 L 15 -24 L 5 -24 \n" +

                                    "            \n" +

                                    "M 50 0 L -40 5 L 35 6 L -20 6 L -55 0 L -33 1 L -30 0 \n" +

                                    "M 15 6 L -15 60 L -20 60 L -6 20 L -5 6 \n" +

                                    "M -15 60 L -20 64 L -22 64 L -20 60 \n" +

                                    "M -41 3 L -50 20 L -55 20 L -50 1 \n" +

                                    "M 9 17 L 15 17 L 15 24 L 5 24 '> \n";

 

String A340 =         "d=' M 50 0 L -40 -5 L 35 -6 L -20 -6 L -55 0 L -33 -1 L -30 0 \n" +

                                    "M 15 -6 L -15 -60 L -20 -60 L -6 -20 L -5 -6 \n" +

                                    "M -15 -60 L -20 -64 L -22 -64 L -20 -60 \n" +

                                    "M -41 -3 L -50 -20 L -55 -20 L -50 -1 \n" +

                                    "M 9 -17 L 15 -17 L 15 -24 L 5 -24 \n" +

                                    "M -2 -37 L 4 -37 L 4 -44 L 6 -44 \n" +

                                    "            \n" +

                                    "M 50 0 L -40 5 L 35 6 L -20 6 L -55 0 L -33 1 L -30 0 \n" +

                                    "M 15 6 L -15 60 L -20 60 L -6 20 L -5 6 \n" +

                                    "M -15 60 L -20 64 L -22 64 L -20 60 \n" +

                                    "M -41 3 L -50 20 L -55 20 L -50 1 \n" +

                                    "M 9 17 L 15 17 L 15 24 L 5 24 \n" +

                                    "M -2 37 L 4 37 L 4 44 L 6 44 '> \n";

 

String MD11 =         "d=' M 50 0 L 40 -4 L 35 -5 L -20 -5 L -38 -3  \n" +

                                    "M -25 0 L -25 -3 L -41 -3 L -41 0  \n" +

                                    "M -41 -2 L -44 0 L -32 -1 L -30 0  \n" +

                                    "M -29 -4 L -38 -15 L -42 -15 L -38 -3  \n" +

                                    "M 12 -5 L -15 -45 L -19 -45 L -8 -19 L -7 -5  \n" +

                                    "M 7 -12 L 13 -12 L 13 -18 L 3 -18  \n" +

                                    "M -15 -45 L -20 -48 L -21 -48 L -19 -45  \n" +

                                    "            \n" +

                                    "M 50 0 L 40 4 L 35 5 L -20 5 L -38 3  \n" +

                                    "M -25 0 L -25 3 L -41 3 L -41 0  \n" +

                                    "M -41 2 L -44 0 L -32 1 L -30 0  \n" +

                                    "M -29 4 L -38 15 L -42 15 L -38 3  \n" +

                                    "M 12 5 L -15 45 L -19 45 L -8 19 L -7 5  \n" +

                                    "M 7 12 L 13 12 L 13 18 L 3 18  \n" +

                                    "M -15 45 L -20 48 L -21 48 L -19 45 '>  \n";

 

String B737 =         "d=' M 50 0 L 40 -4 L 35 -5 L -20 -5 L -38 -3  \n" +

                                    "M -25 0 L -25 -3 L -41 -3 L -41 0  \n" +

                                    "M -41 -2 L -44 0 L -32 -1 L -30 0  \n" +

                                    "M -29 -4 L -38 -15 L -42 -15 L -38 -3  \n" +

                                    "M 12 -5 L -15 -45 L -19 -45 L -8 -19 L -7 -5  \n" +

                                    "M 7 -12 L 13 -12 L 13 -18 L 3 -18   \n" +

                                    "            \n" +

                                    "M 50 0 L 40 4 L 35 5 L -20 5 L -38 3  \n" +

                                    "M -25 0 L -25 3 L -41 3 L -41 0  \n" +

                                    "M -41 2 L -44 0 L -32 1 L -30 0  \n" +

                                    "M -29 4 L -38 15 L -42 15 L -38 3  \n" +

                                    "M 12 5 L -15 45 L -19 45 L -8 19 L -7 5  \n" +

                                    "M 7 12 L 13 12 L 13 18 L 3 18 '>  \n";

 

            // Constructor, which also initializes the Object.

            public Airplane (String flt_num, String flt_model, int code, String url)      {

                        Flight_num = flt_num;

                        Model = flt_model;

                        data_url = url;

 

                        if (code == 1)                          flt_color        = out_going;

                        else if (code == 2)              flt_color        = passing_thru;

                        else if (code == 3)              flt_color        = high_priority;

                        else if (code == 4)              flt_color        = neibouring_airport1;

                        else if (code == 5)              flt_color        = high_priority;

                        else if (code == 6)              flt_color        = air_force;

                        else if (code == 7)              flt_color        = unidentified;

 

                        img_path = B747; // Default Image.

                        if (Model.equalsIgnoreCase("B737"))                                         img_path = B737;

                        else if (Model.equalsIgnoreCase("MD11"))               img_path = MD11;

                        else if (Model.equalsIgnoreCase("A340"))                img_path = A340;

                        else if (Model.equalsIgnoreCase("A330"))                img_path = A330;

                        else if (Model.equalsIgnoreCase("DC10"))               img_path = DC10;

                        else if (Model.equalsIgnoreCase("SF34"))                 img_path = SF34;

                        else if (Model.equalsIgnoreCase("SF37"))                 img_path = SF37;

                        else if (Model.equalsIgnoreCase("B757"))                 img_path = B757;

                        else if (Model.equalsIgnoreCase("B767"))                 img_path = B767;

            }

 

            public void setSmallMessages (String m1, String m2)

            {

                        sms1 = m1;

                        sms2 = m2;

            }

 

            public void set_location (double x, double y, double d)

            {

                        dx            = x;

                        dy            = y;

                        dir            = d;

            }

 

            // This Service Method of the CCG-Object that returns,

            // The Service Method name of the Application Component.

            public String getUpdateLocationMethodName()            {

                        String name = "airline_" + UNQ_ID + ".update_location";

                        return(name);

            }

            // This Service Method of the CCG-Object that returns,

            // The Object name of the Application Component.

            public String getAC_ObjectName()            {

                        String name = "airline_" + UNQ_ID + "";

                        return(name);

            }

            // Alternative method to get the reference to Service Method.

            // The Containr could pass the name of a Variable.

            // The CCG saves the name of the Variable in a Class variable.

            // If Service_func is not null, the CGM makes this INPUT

            // variable point to the Service Method of the Component

            public void setServiceMethodReference( String function_pointer)   {

                        Service_func = function_pointer;

            }

            public void setCallBackName( String cb_name)            {

                        callback_str = cb_name;

            }

            public String getCB_AddMethodName()       {

                        String name = "airline_" + UNQ_ID + ".add_callback";

                        return(name);

            }

private int generate_class_def(PrintWriter out, HttpServletRequest doc_info) {

int include_file = 1;

            if( include_file == 1) {

                        out.println("<script xlink:href='App1/Airline_class.js' language='text/ecmascript'/>");

                        return(0);

            }

            return(0);

}

 

private int generate_object_init(PrintWriter out, HttpServletRequest doc_info) {

out.println("// SECTION-2: Instantiation and Init the Flight Object ");

out.println(" ");

out.println("<script type='text/ecmascript'> ");

String            tmp_str;

if (data_url == null)

            tmp_str = " '"+Flight_num+"',  null, 'al_id_" + UNQ_ID + "', 'al_img_" + UNQ_ID + "', 'al_loc_" + UNQ_ID + "'";

else

            tmp_str = " '"+Flight_num+"', '" + data_url + "', 'al_id_" + UNQ_ID + "', 'al_img_" + UNQ_ID + "', 'al_loc_" + UNQ_ID + "'";

out.println("var airline_" + UNQ_ID + " = new airline_v1_1(" + tmp_str + " );  ");

out.println("airline_" + UNQ_ID + ".set_location( " + dx + ", " + dy + ", " + dir +" ); ");

out.println(" ");

out.println("// Visual clues for Air Trafic Controler ");

                        if ((sms1 != null) && (sms2 != null))            tmp_str = "'sms_" + UNQ_ID + "'";

                        else            tmp_str = "null";

out.println("airline_" + UNQ_ID + ".set_clues_ids ('atc_clue1_" + UNQ_ID + "', 'atc_clue2_" + UNQ_ID + "', " + tmp_str + "); ");

out.println(" ");

out.println("// Register a function to call, upon user click on the Airliner-image ");

                        if( callback_str != null)

out.println("airline_" + UNQ_ID + ".add_callback( " + callback_str + " ); ");

 

                        if( Service_func != null)

out.println(Service_func + " = airline_" + UNQ_ID + ".update_location");

 

out.println("</script> ");

out.println(" ");

            return(0);

}

 

private int generate_svg_code(PrintWriter out, HttpServletRequest doc_info) {

out.println("<g id='al_loc_" + UNQ_ID + "' transform='translate(" + dx +", " + dy + ")'>  ");

out.println("            <g id='al_id_" + UNQ_ID + "' transform='scale(0.2)' onmouseover='airline_" + UNQ_ID + ".highlight(1)' onmouseout='airline_" + UNQ_ID + ".highlight(0)' onclick='airline_" + UNQ_ID + ".show_info()'>  ");

out.println("              <circle id='atc_clue1_" + UNQ_ID + "' cx='0' cy='0' r='50' style='fill:gold;opacity:.25;stroke:black;stroke-width:4;visibility:hidden;'/> ");

out.println("              <path id='al_img_" + UNQ_ID + "' fill='" + flt_color + "' stroke='red' stroke-width='.5pt' transform='rotate( " + dir + ")' ");

out.println("                          " + img_path + " ");

out.println("              </path> ");

out.println("              <text font-family='Verdana' x='15' y='0' font-size='24' fill='black'> " + Flight_num + " </text> ");

out.println("              <text font-family='Verdana' x='15' y='25' font-size='24' fill='black'> " + Model + " </text> ");

out.println("              <circle id='atc_clue2_" + UNQ_ID + "' cx='0' cy='0' r='12' style='fill:red;opacity:.75;stroke:black;stroke-width:4;visibility:hidden;'/> ");

                        if ((sms1 != null) && (sms2 != null)) {

out.println("              <g id='sms_" + UNQ_ID + "' transform='translate(-50,50)' style='visibility:hidden;' > ");

out.println("                          <text d='m1_sms_" + UNQ_ID + "' font-family='Verdana' x='5' y='0' font-size='24' fill='black'> " + sms1 + " </text> ");

out.println("                          <text d='m1_sms_" + UNQ_ID + "' font-family='Verdana' x='5' y='25' font-size='24' fill='black'> " + sms2 + " </text> ");

out.println("              </g> ");

                        }

out.println(" ");

out.println("            </g> ");

out.println("</g> ");

return(0);

} // End of XML-graphics section

 

    // The Code Generation Method : CGM

    public int CGM (PrintWriter out, HttpServletRequest doc_info) {

            generate_class_def(out, doc_info);

            generate_object_init(out, doc_info);

            generate_svg_code (out, doc_info);

            return 0;

    }       // END of the CGM()

 

}           // END of the Class Definition.

The following shows an usage of a container Component factory. Below that is a pseudo code for the CGM of the container Component factory. Notice how simple it is to assemble the Components/Objects to build complex combinations (which are nearly impossible for the application developers, who only know Java and little experience in Vector Graphics).

Multi-City Air Traffic Monitor Component Factory

String   City_names[] = { "SFO-San Francisco", "LAX-Las Angles", "JFK-New yark" };
String   AirPort_Codes[] = { "SFO", "LAX", "JFK" };
// Air Traffic Monitor for Three US Cities
Multi_City_
ATC_CF Atc_USA = new Multi_City_ATC_CF(AirPort_Codes, City_names, Count = 3);

// Likewise ATC for Indian Air Ports
String   City_names[] = { "HYD-Hyderabad", "BEN-Bangalore", "MUM-Mumbai", "DEL-Delhi" };
String   AirPort_Codes[] = { "HYD", "BEN", "MUM", "DEL" };
// Air Traffic Monitor for Four Indian Cities
Multi_City_
ATC_CF Atc_India = new Multi_City_ATC_CF (AirPort_Codes, City_names, Count=4);

// Now these Objects may be used as Subcomponents
AgileTemplates CCGs[] = { Atc_USA, Atc_India}; // Array of CCG-Objects
String Titles[] = {"USA", "India"}; //Tab-Titles
Tab_GUI_Widget Tab = new Tab_GUI_Widget(CCGs, Titles); // Input subcomponents
Tab.CGM(out,request); // Call CGM to get its code. (or Tab may be passed as a Sub-AC)

Code Generatrion Method (CGM) of Multi_City_ATC_CF

int CGM (pw, request)
{

// Code To C
reate Rotate banner:
for(i = 0; i < Count; i++)
   City_list[i] = new ATC_CF (AirPort_Codes[i]); // Create ATC for Each City

RotateBanner3 RB = new RotateBanner3(City_list, Count);
RB.CGM(pw, request, 0, 0, null);

pw.println("<script type='text/ecmascript'>");

// Integration-Logic: Integrate Radio-Buttons AND Rotate Banner

pw.println("function switch_the_city(grp, num) { "); // Impliment a Callback  

// Integration-Logic: Integrate Radio-Buttons AND Rotate Banner

pw.print("    " + RB.getBannerUpdateMethodName() + "(num);");


    for (int i = 0; i < Count; i++) // Work around for PNG/SVG-player bug

         pw.println("   " + City_list[i].getName_RemoveBackground() + "()");

pw.println(" }" + \n" + "</script>");

//Code To create Radio Buttons:
RadioButtons RadioB = new RadioButtons (City_names, Count);
RadioB.setCB_AddMethod("switch_the_city"); // Integration Code to control Rotate banner
RadioB.CGM(pw, request, 750, 400, null);
}

Raju Chiluvuri (c) All Rights Reserved