Friday May 22, 2009

Yahoo Map Navigation...JavaFX

Extremely sorry for not responding to the question in few of the last blog posts. Here is the Yahoo Map navigation. I started liking Yahoo Web Service, it is so cool.

Please use your App-ID, if you are putting this code somewhere else, because this code uses default Yahoo Key.  Now, any web service work need these API use :

PullParser - A parser for structured Data. JDK6 can also do parsing in same way.

HttpRequest - Can use for Async HTTP or RestFul web services.

This code is so easy and monotonous that you will start copying it after 2-3 go :). Here it goes for Yahoo Map + Navigation code I have added addition here for both key and mouse.

JNLP for the same : 


Main.fx :
package yahoomapnavigation;

import java.lang.Math;
import javafx.scene.Cursor;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.input.MouseEvent;
import javafx.scene.Scene;
import javafx.stage.Stage;
import yahoomapnavigation.MapLocate;


/\*\*
 \* @author Vaibhav
 \*/

var ml: MapLocate = MapLocate{zip:"10001"}; // 10001 - Newyork, i guess
var x1: Number = 0;
var y1: Number = 0;
var im: Image = bind Image {
    url: ml.location
}
/\* Image of the map from Yahoo WS \*/
var imview = ImageView {
    cache: true
    translateX: bind x1
    translateY: bind y1
    image: bind im
    cursor: Cursor.MOVE
    /\* Navigation from Mouse event\*/
    onMouseDragged: function( e: MouseEvent ):Void {
        if(e.dragX < 0 and x1 < 0) {
            x1 = x1 + 5;
        }
        if(e.dragX > 0 and Math.abs(x1  -  240) < im.width) {
            x1 = x1 - 5;
        }
        if(e.dragY < 0 and y1 < 0 ) {
            y1 = y1 + 5;
        }
        if(e.dragY > 0 and Math.abs(y1  -  320) < im.height) {
            y1 = y1 - 5;
        }
    }
    /\* Navigation from key event \*/
    onKeyPressed: function( e: KeyEvent ):Void {
        if(e.code == KeyCode.VK_LEFT)
                    {
            if(x1 < 0) {
                x1+=10;
            }
        }
        if(
                    e.code == KeyCode.VK_RIGHT)
                    {
            if(Math.abs(x1  -  240) < im.width) {
                x1-=10;
            }
        }
        if(
                    e.code == KeyCode.VK_DOWN)
                    {
            if(Math.abs(y1  -  320) < im.height) {
                y1-=10;
            }
        }
        if(e.code == KeyCode.VK_UP)
                    {
            if(y1 < 0) {
                y1+=10;
            }
        }
    }
};
Stage {
    title: "Yahoo Map Navigation"
    width: 240
    height: 320
    scene: Scene {
        content: [
            imview
        ]
    }
}
MapLocate.fx :
package yahoomapnavigation;

import java.lang.Exception;
import javafx.data.pull.PullParser;
import javafx.io.http.HttpRequest;

/\*\*
 \* @author Vaibhav
 \*/

/\* Class to show Map from Yahoo Web service, input zip code \*/
public class MapLocate {
    public var location: String;
    public var zip: String;
    public var isguid: Boolean = false;
    var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=P6pToNnV34GfP9zgTALgVW3CUTL5qHTnKjz5bLXPikqNjcMZTkF6h1xsnhm.P1WIs3U-&zip={zip}";
    var p: PullParser;
    var h: HttpRequest;
    init {
        if (url.length() > 0) {
            h = HttpRequest {
                location: url
                onException: function(exception: Exception) {
                    print("Please check the internet connectivity/Data Input");
                }

                onInput: function(input) {

                    p = PullParser {
                        input: input
                        onEvent: function(event) {

                            if ((event.type == PullParser.END_ELEMENT)) {
                                if (event.qname.name == "Result") {
                                    isguid = true;
                                    location = event.text;
                                }
                            }
                        }
                    };
                    p.parse();
                    p.input.close();
                }
                onDone: function() {
                  
                }
            };
            h.enqueue();
        }
    }
}
</pre>

Please let me know if there is any issue, with JNLP or code :). Have fun !

Wednesday Apr 15, 2009

JavaFX + Web Service + Maps + Navigation

Just a small demo of JavaFX + Web Services. From JavaFX, its quite easy to work on Web Services like maps, search, pictures .. There are lot of Web services demo in the sample space

Here I have contact list of person, which has name, email ID, phone no, address and thumbnail images. Everything has a different work but here we are willing to see the address work. On clicking contact list's, will show me his location in maps. Actually there are two ways to do that, fast way and good way. We can store the maps in Database and use it when required, other is we call the web service and take the map on demand from Yahoo or Google API, which will be slow. So, we will go with good way.

Considering only one contact.


Some fancy stuff, like clicking the + sign will open address option. Now, on clicking the address, we will call the yahoo maps API for showing the location of the person Joseph J.

Actually its a mobile application, and can be viewed in mobile as well(just that I am not putting image). So, in basic code of Map show, we did :

// in place of Sunnyvale and CA, it will be {city} and {state} which will be the variables and passed from main code.

var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=GetApp;city=Sunnyvale&state=CA";

   var p: PullParser;
   var h: HttpRequest;
   init {
           if (url.length() > 0) {
           h = HttpRequest {
               location: url
                onException: function(exception: Exception) {
                }

                onInput: function(input) {

                   p = PullParser {
                       input: input
                       onEvent: function(event) {

                           if ((event.type == PullParser.END_ELEMENT)) {
                               if (event.qname.name == "Result") {
                                   location = event.text; //this will give a URL for image
                               }
                          }
                       }
                   };
                   p.parse();
                   p.input.close();
      .......

Lot of further code. Important of it is OnDone method where we have to write some code of cleaning or loading prev. data. I have also embed my long back code of navigation, which will help us into navigation in the map.

Ignore some minor mistakes, have a look at the jnlp:

Soon, I will post the whole application with code, but the basic idea is simple and can be doable. 

About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today