Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Super Contributor
pp
Posts: 278
Registered: ‎11-04-2010
My Device: 4.5 and above
My Carrier: none

NativeApi callback to javascript in browserfield

Hi all,

 

This is part of  javascript code

<!DOCTYPE html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>Good Road</title>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDjkq7VRAUXlR4ll9ZFylZ_JYxppYhmwR0&sensor=true"></script>
    <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100%; width:100% }
             #view_canvas { height: 100%; width:100%; display:none }
        #send_data {
            width: 220px;
            height: 55px;
            background-color: #ffca06;
            position: absolute;
            margin:0 50px;
            top:210px;
            background:#333;
            display:none;
            color:#fff;
        }
        #send_data p{text-align:center}
        </style>
</head>    
<body style="padding:0px;margin:0px" >
    <div id="map_canvas">Loading Google Map</div>
    <iframe id="view_canvas" src="" scrolling="no"></iframe>
    <span id="send_data" align="left" ><p>Sending Data.....</p></span> 
</body>
<script type="text/javascript">
    /*Media JS api embeded*/
    var Media = {
        callbacksCount : 1,
        callbacks : {},
        
        Callback : function (callbackId, resultArray) {
            alert("callbackId "+callbackId);
            var callback = Lukup.callbacks[callbackId];
            callback(resultArray);
        },
        
        Ask : function (functionName, callback, args) {
            //alert(functionName+' '+callback+' '+args);
            var hasCallback = callback && typeof callback == "function";
            var callbackId = hasCallback ? Lukup.callbacksCount++ : 0;
            if (hasCallback){
                Lukup.callbacks[callbackId] = callback;
            }else{
                args=callback;
            }
            //alert('lukup');
            var iframe = document.createElement("IFRAME");
            // alert('fn : '+functionName);
            iframe.setAttribute("src", "js-frame:" + functionName + ":" + callbackId+ ":" + encodeURIComponent(JSON.stringify(args)));
           
            //alert("source "+iframe.getAttribute("src"));
            document.documentElement.appendChild(iframe);
            iframe.setAttribute("style","display:none");
            
            //iframe.parentNode.removeChild(iframe);
            //iframe = null;
        }
    };
    
    var buttonid;
    var  map;
    var marker;
    var city;
    /*function to initialize the google maps with current location*/
    function initialize(){
        Media.Ask('Location.location',locCallback,{frequency: 0});
        function locCallback(obj){
            alert("obj is "+obj);
            var lat = obj.latitude;
            var lon = obj.longitude;
            if(lat==0.000000)
            {
              Media.Ask('Location.stop');
                Media.Ask('Location.location',locCallback,{frequency: 0});   
            }
            else
            {
            var myLatlng = new google.maps.LatLng(lat,lon);
            mapStartLat = lat;
            mapStartLong = lon;
            var myOptions = {
                zoom: 15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            marker = new google.maps.Marker({
                                            position: myLatlng, 
                                            map: map,
                                            title:"Good Road"
                                            });
            }    
    }
    }
    window.onload = function(){
        var useragent = navigator.userAgent;
        var mapdiv = document.getElementById("map_canvas");
           var viewdiv = document.getElementById("view_canvas");
        if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
            mapdiv.style.width = '100%';
            mapdiv.style.height = '100%';
                       mapdiv.style.width = '100%';
            mapdiv.style.height = '100%';
        } else {
            mapdiv.style.width = '320px';
            mapdiv.style.height = '480px';
                   mapdiv.style.width = '320px';
            mapdiv.style.height = '480px';
        }
        initialize();
    }
    </script> 
</html>

 When browserfield onload it will call initialize() function.

part1 : when document is loaded, It will make call to Media.Ask(); This result will get in browserfield url -  js-frame:Location.location:1:{"frequency":0} 

here js-frame is used as wrapper between native call and our project.

part 2: Here I will call location class, get the location details and pass back to javascript like this - Media.Callback(1,{latitude: 43.4631, longitude: -80.5207, altitude:0.0, heading:0, speed:0.0, accuracy:0.0, altitudeAccuracy:0 }) 

 

Part 1 is done. Please help me for Part 2.

 

Regards,

pp

 

 

 

Please use plain text.