Manoj's Blog: March 2014

Wednesday, March 26, 2014

Google map with PhoneGap app

In previous post I was described the PhoneGap development with visual studio using Nomad extension. Today I'm going to make post about create a app using a google map. Here I'm using google map API v3 for do operation with map. following shows html page of the app.


<!DOCTYPE html>
<html>
<head>
    <title>Map View</title>

    <link href="style/jquery.mobile-1.4.2.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div data-role="page" id="map-page" data-url="map-page">
        <div data-role="header">
            Map
        </div>

        <div data-role="content" data-position="fixed" id="map_canvas">

            <!-- map loads here... -->
        </div>

        <div data-role="footer">
            Page footer
        </div>
    </div>

    <script type="text/javascript" src="scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.mobile-1.4.2.js"></script>
    <script type="text/javascript" src="scripts/cordova.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=true&amp"></script>


    <script type="text/javascript" src="scripts/JS/MapView.js"></script>

    <script type="text/javascript">
        $(document).ready(
            function () {

                var mapView = new PhoneGapMapApp.MapView();
                mapView.init();
            }
        );

    </script>


</body>
</html>

Im using here Jquery Mobile and wrote JavaScript class called MapView.js which is using custom object pattern. Page contain with mainly 3 parts such as header, content and footer. Content div use to create the map. Following show the MapView.js which is include the basic operations for the map.




PhoneGapMapApp = {}

PhoneGapMapApp.MapView = function () {

    this._map = null;
}


PhoneGapMapApp.MapView.prototype = {

    init: function () {

        this._defaultLocation = new google.maps.LatLng(6.5006036, 80.2711642);
        this._attachEventHandlers();
    },

    /**
    * Attach event handlers.
    */
    _attachEventHandlers: function () {

        document.addEventListener("deviceready", this._onDeviceReady(this), false);
        
    },

    /**
    * device APIs are available.
    */
    _onDeviceReady: function (obj) {
        console.log('device ready');

        obj._getRealContentHeight();
        obj._loadMap();
    },

    /**
    * Setup the content hieght.
    */
    _getRealContentHeight: function () {
        
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();

        var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
        if ((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        }
        
        $('#map_canvas').height(content_height);
    },

    /**
    * create map.
    */
    _loadMap: function () {

        var myOptions = {
            zoom: 4,
            center: this._defaultLocation,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };    

        this._map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        // Add an overlay to the map of current lat/lng
        var marker = new google.maps.Marker({
            position: this._defaultLocation,
            map: this._map,
            title: "Greetings!"
        });
    }
}

To load the map here I'm using DeviceReady event belong to cordova. This event fire when phonegap fully loaded. The _getRealContentHeight method setup the height for the shows the map in the page. The _loadMap method create the map object and set the marker for already know location. In following image show the result of all this effort.

Monday, March 17, 2014

Phonegap App development with VS and Nomad

Recently I was working with cross-platform mobile application development and I'm in a situation how to do it with visual studio. Another requirement was debug application with simulator. For fulfil these requirement I found Nomad extension for visual studio. This is support visual studio 2013, 2012 and 2013. I'm going to show you how to start development with nomad and visual studio.

First of all download extension form this link.
After you install nomad extension it will show up in visual studio project templates as shown in below.

For create nomad project first you have to create PhoneGap build account or if you already have account use it. When project creating in visual studio, pop-up will appear and ask the credential of PhoneGap account. Enter login details create the project as shown in below. Enter project name as "MyFirstMobileApp". Then you can see visual studio create the project with basic files needed to develop cross-platform mobile application.

Project files contain with basic files of Jquery mobile javascript and style. Most importantly thing is project files contain with cordova.js file and PhoneGap configuration file. And also this contain with index.html file which is the start page of the application all the time.

Go to project properties. In General tab shows the project settings as shown in below. In project setting page you can configure app display name, version, build option, cordova vesrion and preview your mobile app. In preview your mobile app section give you the option see your app through default browser or through Ripple emulator.

In Android and IOS tab you can configure build setting for PhoneGap. You have to setup those configuration first to make the build file from PhoneGap. Last tab in project properties is Artwork. In this tab you can upload splash screen and icons for Android and IOS.

As I mention earlier in this post project files contain with PhoneGap configuration file. You can do all PhoneGap configuration with config.xml file. Below image shows configuration file. Its shows all the configuration set up and icons uploaded to android and ios.

Run your project selecting Nomad for visual studio simulator from project properties under preview your mobile app. Then Ripple simulator shows up as shown in below.

You can see in this simulator shows many details like in native app development simulators.You can select different set of devices for android development. Also this shows the settings for accelerometer, geo location, device and network settings and events. Clicking on 'Open Dev Tools' you can debug your JavaScript code and check your html.

In this article describe the information for the start cross-platform mobile app development with Nomad and Visual Studio. In next article describe the creating mobile application with Nomad and JQuery Mobile.