Archive for April 23, 2009

Ajax Integration with Google Maps

Geomapping Technology and the Internet

One of the advantages of web application development is that you can easily integrate or mashup your organizational data with the large array of detailed information made freely available on the internet. A good example of this is geographical mapping data. The uses of having geo mapping data within your business application are virtually endless. For example:

  • Provide your customers with interactive directions to your facilities.
  • Incorporate directional mapping into routing applications, e.g. customer deliveries, repair/installation, or home health care visits.
  • Show analytic data points overlaid on a map view, for example to clearly show management where your best customers are located.

In the past in order to run your own private map server and software, IT management had to budget a rather sizeable investment in servers, maps, application software, and integration programming. However, to make appropriate use of today’s freely available map data from google, yahoo, mapquest, and many others it is a completely different ball game – you just need a little JavaScript and a developer’s API key (usually free for most uses, but check out the license agreement).

Google Maps

Google Maps (accessed googlemaps.com) is one of the classic examples of a useful and impressive Ajax application. The smooth scrolling and interactivity of the map (point to point directions, pushpin pop-ups with shadows, traffic, street view, etc.) is reminiscent of a sophisticated desktop application. However, Google actually accomplishes all this working within a standard browser without special plug-ins or add-on software.

 

Google Maps is one of the best examples of how RIA (Rich Internet Application) techniques are revolutionizing business application development. Yes, I’m sure that the code involved to render the complex maps in a browser is non-trivial – but you can leave that to Google’s team to write and maintain in JavaScript. However, the code necessary to integrate maps into your CA Plex WebClient i+ application IS trivial, and even better we have written the technical parts of it for you.

Create your own Geo-map pattern

The easiest way to start with geo-mapping is simply to try the example in the rest of the blog. Most developers find they can create their own WebClient i+ pattern and get an example running in less than 30 minutes.

Step 1

Create your own pattern or function that contains the address data on standard CA Plex panel with standard CA Plex fields. Feel free to download our WebClient sample model for an example of this.

To follow our example, create a pattern called ~MapUrlPopop which inherits from WEBCLIEN/~DetailPopup, and pass in the appropriate address fields as input parameters. Give the pattern function an implementation name of MapUrlPopup, which corresponds to the html template file name in the next step.

The panel field edit controls should contain the following control names to match up with our mapurlpopup-root:

  • AddressLine1
  • AddressLine2
  • City
  • State
  • Zip

Step 2

Copy the attached mapurlpopup-root to your templates directory in Eclipse. Note the following section of code.

Template attachment 
function() {
            /(!AttachPoint:name=JSOnLoad)

 

            var fAddLine1 = /(AddressLine1);
            var fAddLine2 = /(AddressLine2);
            var fCity = /(City);
            var fState = /(State);
            var fZip = /(Zip);
            var fStreetAdd = fAddLine1 + " " + fAddLine2 + " " +  fCity + " " + fState + " " + fZip

 

            if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
                  var geocoder = new GClientGeocoder();

 

                  geocoder.getLatLng(fStreetAdd, function(point){
                        var p = point;
                        map.setCenter(p, 13);
                  })

 

Also make note of the Google API site key at the start of the file. If you are planning to implement this example, please replace the API key with one you obtain directly from Google Maps website: http://code.google.com/apis/maps/signup.html.

Step 3

Inherit from or call your new pattern directly, generating and building as normal for WebClient, and view the results. It is really that simple!

 

Want to learn more? This simple templating example shows some of the power of WebClient Ajax templates, but the possibilities are endless. Visit http://wiki.webclientiplus.com for complete documentation on WebClient i+ templating.

Running CA Plex Java Apps in Eclipse

Experienced WebClient i+ developers usually find it useful to run their Java applications as client-server prior to publishing to the web server for final testing.

The reasons are as follows:

  • “Smoke test” the application quickly for basic business functionality
  • Test basic database access
  • Eliminate customized html and java script as a potential reason for application failures
  • Test complex functionality like security frameworks

Fortunately the Eclipse / Rational integrated development environment makes it easy to run applications as either Java client-server, or as web applications (i.e. WebClient i+). This is a quick start guide to running your application in Java client-server from Eclipse or Rational (running application in the web browser is already well documented on the WebClient i+ wiki http://wiki.webclientiplus.com).

Set up guide

Step 1

Set up a new application under the Eclipse run application tool bar item.

Select Java application and press the new icon

Step 2

Enter the CA Plex java class information on the first tab

Step 3

Enter the entry class information and function information as arguments on the second tab, for example

Step 4

Run the application. That was easy!

Note: Although WebClient i+ applications can use a variety of standard web graphic types, CA Plex Java client-server applications cannot reference bitmap graphic files (.BMP) on panels. This sometimes presents a cosmetic problem, especially if you are deploying both client-server and web application versions of the same application. So if you want your application to look good in client-server, you need to create .GIF equivalents of your custom.BMP files. CA Plex provides .GIF equivalents of the standard .BMP files that ship with the product.

WebClient i+ Technical Bulletin 20090408

WebClient i+ Developers –

 

 

Best Regards,

 

The Websydian WebClient i+ development team

WebClient Japanese Manuals Posted

Japanese language manuals have been posted to the Websydian WebClient documentation wiki.
The translation was done by the Japanese WebClient distributor, Takaya Corporation.

 
 
© 2013 CM First Group - All rights reserved