facebook

ME2015 CI4 Phonegap & jQuery Mobile Example

  1. MyEclipse IDE
  2.  > 
  3. Mobile Tooling
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #351163 Reply

    Lofi
    Participant

    Here’s a ME2015 CI4 example for those who found use with my testing code here:

    https://www.genuitec.com/forums/topic/me2015-phonegap-testing/

    This version supports jQuery Mobile. ie you get nice menus and such and a properly aligned display.

    Here’s what you have to do:

    * create phonegap project
    * add all plugins
    * choose template: jQuery Mobile Multi-Page Application

    The files:

    index.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    
            <link rel="stylesheet" href="./css/jquery.mobile-1.4.3.css" />
            
            <script type="text/javascript" src="./js/jquery-2.1.1.js"></script>
            
            <!-- must be loaded before jquery mobile is loaded -->
            <script src="./js/jquery-mobile-init.js"></script>
            
            <script type="text/javascript" src="./js/jquery.mobile-1.4.3.js"></script>
            <script type="text/javascript" src="phonegap.js"></script> 
            <script type="text/javascript" src="./js/phonegap-examples.js"></script>
            <script type="text/javascript" src="./js/main.js"></script>
    
            <link rel="stylesheet" href="./css/style.css" />
    
    
    
            <title>Hello World</title>
            
        </head>
        <body>
    
        <!-- Start of first page: #one -->
        <div data-role="page" id="pageMain">
            <div data-role="header">
                <a href="#menuPanel" data-rel="panel" data-role="button" data-icon="bars">Menu</a>
                <h1>PhoneGap Test</h1>
            </div><!-- /header -->
    
            <div data-role="content">
                <p>
                
                <ul data-role="listview">
    
                    <li><a href="#pageAccelerometer">Accelerometer</a></li>
                    <li><a href="#pageCompass">Compass</a></li>
                    <li><a href="#pageGeolocation">Geolocation</a></li>
                    <li><a href="#pageGeolocationCurrent">Geolocation Current</a></li>
                
                    <li><a href="#pageConnection">Connection</a></li>
                    <li><a href="#pageContacts">Contacts</a></li>
                    <li><a href="#pageDeviceProperties">Device Properties</a></li>
                    <li><a href="#pageNotifications">Notifications</a></li>
                    <li><a href="#pageGlobalization">Globalization</a></li>
                    <li><a href="#pageCamera">Camera</a></li>
                    <li><a href="#pageSplashScreen">Splash Screen</a></li>
                    
                </ul>
                
                </p>
                
                <br/>
                
                <p>
                <button type="button"  onclick="exitApp(); return false;">Exit</button>
                </p>
                
            </div><!-- /content -->
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div><!-- /footer -->
        </div><!-- /page one -->
    
    
        <!-- ------------------------------------------------ -->
        <!-- Accelerometer                                         -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageAccelerometer">
    
            <div data-role="header">
                <h1>Accelerometer</h1>
            </div>
    
            <div data-role="content">
    
                <p id="accelerometer"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button"  onclick="stopWatchAccelerometer();">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
        
        <!-- ------------------------------------------------ -->
        <!-- Compass                                         -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageCompass">
    
            <div data-role="header">
                <h1>Compass</h1>
            </div>
    
            <div data-role="content">
    
                <p id="compass"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button" onclick="stopWatchCompass();">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
        
        <!-- ------------------------------------------------ -->
        <!-- Geolocation                                         -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageGeolocation">
    
            <div data-role="header">
                <h1>Geolocation</h1>
            </div>
    
            <div data-role="content">
    
                <p id="geolocation"></p>
            
                <p id="geolocationList"></p>
                
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button" onclick="stopWatchGeolocation();">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>    
    
        <!-- ------------------------------------------------ -->
        <!-- Geolocation Current                                        -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageGeolocationCurrent">
    
            <div data-role="header">
                <h1>Geolocation Current</h1>
            </div>
    
            <div data-role="content">
    
                <p id="geolocationCurrentPosition"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>    
        
        <!-- ------------------------------------------------ -->
        <!-- connection                                         -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageConnection">
    
            <div data-role="header">
                <h1>Connection</h1>
            </div>
    
            <div data-role="content">
    
                <p id="connection"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
    
        <!-- ------------------------------------------------ -->
        <!-- contacts                                         -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageContacts">
    
            <div data-role="header">
                <h1>Contacts</h1>
            </div>
    
            <div data-role="content">
    
                <p id="contacts"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
    
    
        <!-- ------------------------------------------------ -->
        <!-- device properties                                -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageDeviceProperties">
    
            <div data-role="header">
                <h1>Device Properties</h1>
            </div>
    
            <div data-role="content">
    
                <p id="deviceProperties"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
    
    
        <!-- ------------------------------------------------ -->
        <!-- Notifications                                     -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageNotifications">
    
            <div data-role="header">
                <h1>Notifications</h1>
            </div>
    
            <div data-role="content">
    
                <p>
                    <button type="button"  onclick="showAlert(); return false;">Show Alert</button>
                    <button type="button"  onclick="showConfirm(); return false;">Show Confirm</button>
                    <button type="button"  onclick="showPrompt(); return false;">Show Prompt</button>
                    <button type="button"  onclick="playBeep(); return false;">Play Beep</button>
                    <button type="button"  onclick="vibrate(); return false;">Vibrate</button>
                </p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
    
    
        <!-- ------------------------------------------------ -->
        <!-- Globalization                                     -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageGlobalization">
    
            <div data-role="header">
                <h1>Globalization</h1>
            </div>
    
            <div data-role="content">
    
                <p id="globalizationPreferredLanguage"></p>
            
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
        <!-- ------------------------------------------------ -->
        <!-- camera                                  -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageCamera">
    
            <div data-role="header">
                <h1>Camera</h1>
            </div>
    
            <div data-role="content">
    
                <p>
                    
                    <button onclick="capturePhoto();">Capture Photo</button> <br>
                    <button onclick="capturePhotoEdit();">Capture Editable Photo</button> <br>
                    <button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo Library</button><br>
                    <button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">From Photo Album</button><br>
                    <img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
                    <img style="display:none;" id="largeImage" src="" />
                    
                </p>
                
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
        
        <!-- ------------------------------------------------ -->
        <!-- splash screen                                     -->
        <!-- ------------------------------------------------ -->
        <div data-role="page" id="pageSplashScreen">
    
            <div data-role="header">
                <h1>Splash Screen</h1>
            </div>
    
            <div data-role="content">
    
                <p>
                    <button type="button"  onclick="showSplashScreen(); return false;">Show Splash Screen (TODO)</button>
                    <button type="button"  onclick="hideSplashScreen(); return false;">Hide Splash Screen (TODO)</button>
                </p>
                <p>
                <a href="#pageMain" data-direction="reverse" data-role="button">Back</a>
                </p>
                
            </div>
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div>
        </div>
    
    
        <!-- ------------------------------------------------ -->
        <!-- menu panel                                       -->
        <!-- ------------------------------------------------ -->
        <div data-role="panel" id="menuPanel" data-position="left" data-display="overlay" data-theme="b">
            <!-- panel content goes here -->
            <ul data-role="listview" id="menuNavList">
                      <li data-role="list-divider">Divider 1</li>
                      <li data-icon="false"><a href="javascript:alert('menu pressed');return false" data-icon="">Menu 1</a></li>
                      <li data-icon="false"><a href="javascript:alert('menu pressed');return false" data-icon="">Menu 2</a></li>
                      <li data-icon="false"><a href="javascript:alert('menu pressed');return false" data-icon="">Menu 3</a></li>
                      <li data-role="list-divider">Divider 2</li>
                      <li data-icon="false"><a href="#" data-rel="close">Close Menu</a></li>
            </ul>            
        </div>
        <!-- /menuPanel -->
    
    
    
    
    
        <!-- Start of third page: #popup -->
        <div data-role="page" id="popup">
            <div data-role="header">
                <h1>Dialog</h1>
            </div><!-- /header -->
    
            <div data-role="content">
                <h2>Popup</h2>
                <p>
                    I have an id of "popup" on my page container and only look like a
                    dialog because the link to me had a
                    <code>data-rel="dialog"</code>
                    attribute which gives me this inset look and a
                    <code>data-transition="pop"</code>
                    attribute to change the transition to pop. Without this, I'd be
                    styled as a normal page.
                </p>
                <p>
                    <a href="#one" data-rel="back" data-role="button" data-inline="true"
                        data-icon="back">Back to page "one"</a>
                </p>
            </div><!-- /content -->
    
            <div data-role="footer" data-position="fixed">
                <h4>(Page Footer)</h4>
            </div><!-- /footer -->
        </div><!-- /page popup -->
    
    
    
    
        </body>
    </html>
    

    js/main.js

    //Initialize function
    var init = function () {
    
        console.log("init() called");
        
        // Wait for Cordova to connect with the device
        //
        document.addEventListener("deviceready", onDeviceReady, false);
    
        // init all panels (needed for menu panels, they must be initialized manually)
        $(function () {
            $("[data-role=panel]").panel().enhanceWithin();
        });
        
        // initialize pages when they are displayed
        $('#pageAccelerometer').on('pagebeforeshow', function(event) {
            startWatchAccelerometer();
        });
        
        $('#pageCompass').on('pagebeforeshow', function(event) {
            startWatchCompass();
        });
        
        $('#pageGeolocation').on('pagebeforeshow', function(event) {
            startWatchGeolocation();
        });
        
        $('#pageGeolocationCurrent').on('pagebeforeshow', function(event) {
            startGeolocationCurrentPosition();
        });
        
        $('#pageConnection').on('pagebeforeshow', function(event) {
            showConnection();
        });
        
        $('#pageContacts').on('pagebeforeshow', function(event) {
            showContacts();
        });
        
        $('#pageDeviceProperties').on('pagebeforeshow', function(event) {
            showDevice();
        });
    
        $('#pageGlobalization').on('pagebeforeshow', function(event) {
            showGlobalizationInfo();
        });
        
        // ------------------------------------------------------------------------------------------------------
        // Exit the application via back button event. Note: this works on android, not on ios. Apple doesn't allow exit 
        // ------------------------------------------------------------------------------------------------------
        document.addEventListener("exitButton", function() {
            exitApp(); 
         });        
        
    };
    $(document).ready(init);
    

    js/phonegap-examples.js

    // ------------------------------------------------------------------------------------------------------ 
    // Accelerometer
    // ------------------------------------------------------------------------------------------------------
    
    // The watch id references the current `watchAcceleration`
    var watchIDAccelerometer = null;
    
    // Start watching the acceleration
    //
    function startWatchAccelerometer() {
    
        // Update acceleration every 100 ms
        var options = { frequency: 100 };
    
        watchIDAccelerometer = navigator.accelerometer.watchAcceleration(onSuccessAccelerometer, onErrorAccelerometer, options);
    }
    
    // Stop watching the acceleration
    //
    function stopWatchAccelerometer() {
        if (watchIDAccelerometer) {
            navigator.accelerometer.clearWatch(watchIDAccelerometer);
            watchIDAccelerometer = null;
        }
    }
    
    
    // onSuccess: Get a snapshot of the current acceleration
    //
    function onSuccessAccelerometer(acceleration) {
        var element = document.getElementById('accelerometer');
        element.innerHTML = 'Acceleration X: ' + acceleration.x         + '<br />' +
                            'Acceleration Y: ' + acceleration.y         + '<br />' +
                            'Acceleration Z: ' + acceleration.z         + '<br />' +
                            'Timestamp: '      + acceleration.timestamp + '<br />';
    }
    
    // onError: Failed to get the acceleration
    //
    function onErrorAccelerometer() {
        alert('onErrorAccelerometer!');
    }
    
    // ------------------------------------------------------------------------------------------------------ 
    // Compass
    // ------------------------------------------------------------------------------------------------------
    
    // The watch id references the current `watchHeading`
    var watchIDAccelerometer = null;
    
    // Start watching the compass
    //
    function startWatchCompass() {
    
        // Update compass every 100ms
        var options = { frequency: 100 };
    
        watchIDCompass = navigator.compass.watchHeading(onSuccessCompass, onErrorCompass, options);
    }
    
    // Stop watching the compass
    //
    function stopWatchCompass() {
        if (watchIDCompass) {
            navigator.compass.clearWatch(watchIDCompass);
            watchIDCompass = null;
        }
    }
    
    // onSuccess: Get the current heading
    //
    function onSuccessCompass(heading) {
        var element = document.getElementById('compass');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }
    
    // onError: Failed to get the heading
    //
    function onErrorCompass(compassError) {
        alert('Compass error: ' + compassError.code);
    }
    
    // ------------------------------------------------------------------------------------------------------ 
    // Geolocation Watch
    // ------------------------------------------------------------------------------------------------------
    // The watch id references the current `watchPosition`
    var watchIDGeolocation = null;
    var watchGeolocationList = [];
    
    // Start watching the Geolocation
    //
    function startWatchGeolocation() {
    
        // Get the most accurate position updates available on the device
        var options = { timeout: 31000, enableHighAccuracy: true, maximumAge: 90000 };
        watchIDGeolocation = navigator.geolocation.watchPosition(onSuccessGeolocation, onErrorGeolocation, options);
    
    }
    
    // clear the watch that was started earlier
    //
    function stopWatchGeolocation() {
        if (watchIDGeolocation != null) {
            navigator.geolocation.clearWatch(watchIDGeolocation);
            watchIDGeolocation = null;
        }
    }
            
    // onSuccess Geolocation
    //
    function onSuccessGeolocation(position) {
        var element = document.getElementById('geolocation');
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                            'Longitude: '          + position.coords.longitude             + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          + position.timestamp                    + '<br />';
        
        // keep a list of previous locations
        traceGeolocation( position.coords.latitude + " / " + position.coords.longitude);
        
    }
    
    function traceGeolocation( msg) {
        var now     = new Date();
        
        var hour    = now.getHours();
        var minute  = now.getMinutes();
        var second  = now.getSeconds(); 
        
        if(hour.toString().length == 1) {
            var hour = '0'+hour;
        }
        if(minute.toString().length == 1) {
            var minute = '0'+minute;
        }
        if(second.toString().length == 1) {
            var second = '0'+second;
        }   
        
        watchGeolocationList.push( hour + ":" + minute + ":" + second + "   " + msg);
        
        // max 10 entries
        if( watchGeolocationList.length > 10) {
            watchGeolocationList.shift();
        }
        
        element = document.getElementById('geolocationList');
        element.innerHTML = watchGeolocationList.join( "<br/>");
    }
    
    // onError Callback receives a PositionError object
    //
    function onErrorGeolocation(error) {
        
      traceGeolocation( 'code: ' + error.code + ', message: ' + error.message);
    //  alert('onErrorGeolocation ' +
    //        'code: '    + error.code    + '\n' +
    //        'message: ' + error.message + '\n');
      
    }
    
    
    // ------------------------------------------------------------------------------------------------------ 
    // Geolocation Current Position
    // ------------------------------------------------------------------------------------------------------
    function startGeolocationCurrentPosition() {
        var options = { timeout: 31000, enableHighAccuracy: true, maximumAge: 90000 };
        navigator.geolocation.getCurrentPosition(onSuccessGeolocationCurrentPosition, onErrorGeolocationCurrentPosition, options);  
    }
    // onSuccess Geolocation
    //
    function onSuccessGeolocationCurrentPosition(position) {
        var element = document.getElementById('geolocationCurrentPosition');
        element.innerHTML = 'Latitude: '           + position.coords.latitude              + '<br />' +
                            'Longitude: '          + position.coords.longitude             + '<br />' +
                            'Altitude: '           + position.coords.altitude              + '<br />' +
                            'Accuracy: '           + position.coords.accuracy              + '<br />' +
                            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
                            'Heading: '            + position.coords.heading               + '<br />' +
                            'Speed: '              + position.coords.speed                 + '<br />' +
                            'Timestamp: '          + position.timestamp                    + '<br />';
    }
    
    // onError Callback receives a PositionError object
    //
    function onErrorGeolocationCurrentPosition(error) {
        alert('onErrorGeolocation' + ": " +
              'code: '    + error.code    + '\n' +
              'message: ' + error.message + '\n');
    }
    
    
    
    
    // ------------------------------------------------------------------------------------------------------ 
    // Connection
    // ------------------------------------------------------------------------------------------------------
    function showConnection() {
    
        var networkState = navigator.connection.type;
    
        var states = {};
        states[Connection.UNKNOWN]  = 'Unknown connection';
        states[Connection.ETHERNET] = 'Ethernet connection';
        states[Connection.WIFI]     = 'WiFi connection';
        states[Connection.CELL_2G]  = 'Cell 2G connection';
        states[Connection.CELL_3G]  = 'Cell 3G connection';
        states[Connection.CELL_4G]  = 'Cell 4G connection';
        states[Connection.CELL]     = 'Cell generic connection';
        states[Connection.NONE]     = 'No network connection';
    
        var element = document.getElementById('connection');
        
        element.innerHTML = 'Connection type: ' + states[networkState];
    
    }
            
            
    // ------------------------------------------------------------------------------------------------------ 
    // Contacts
    // ------------------------------------------------------------------------------------------------------
    function showContacts() {
    
        // specify contact search criteria
        var options = new ContactFindOptions();
        options.filter = "";      // empty search string returns all contacts
        options.multiple = true;  // return multiple results
        var filter = ["displayName"]; // return contact.displayName field
    
        // find contacts
        navigator.contacts.find(filter, onSuccessContacts, onErrorContacts, options);
    
    }
    
    // onSuccess: Get a snapshot of the current contacts
    //
    function onSuccessContacts(contacts) {
    
        // show only <limit> number of contacts
        var limit = 10;
    
        var html = "";
        for (var i=0; i<contacts.length; i++) {
            
            html += "<br/>";
            html += contacts[i].displayName;
            
            if( i >= limit)
                break;
            
        }
        
        var element = document.getElementById('contacts');
        element.innerHTML = 'Contacts:<br/>' + html;
        
    };
    
    // onError: Failed to get the contacts
    //
    function onErrorContacts(contactError) {
        alert('onErrorContacts!');
    }
    
    // ------------------------------------------------------------------------------------------------------ 
    // Device
    // ------------------------------------------------------------------------------------------------------
    function showDevice() {
        
        var element = document.getElementById('deviceProperties');
    
        var s = 'Device Name: '     + device.name     + '<br />' +
                            'Device Model: '    + device.model    + '<br />' +
                            'Device Cordova: '  + device.cordova  + '<br />' +
                            'Device Platform: ' + device.platform + '<br />' +
                            'Device UUID: '     + device.uuid     + '<br />' +
                            'Device Version: '  + device.version  + '<br />';
        
        element.innerHTML = s;
        
    }
    
    // ------------------------------------------------------------------------------------------------------
    // Notifications
    // ------------------------------------------------------------------------------------------------------
    
    // Alert
    // ------------------------------------------------------------------------------------------------------
     
            // alert dialog dismissed
    function alertDismissed() {
        // do something
    }
    
    // Show a custom alertDismissed
    //
    function showAlert() {
        navigator.notification.alert(
            'Alert Message',  // message
            alertDismissed,    // callback
            'Alert Title',     // title
            'Button Name'      // buttonName
        );
    }
    
    
    
    // Confirm
    // ------------------------------------------------------------------------------------------------------
    
    // process the confirmation dialog result
    function onConfirm(buttonIndex) {
    
        alert('You selected button index ' + buttonIndex);
        
    }
    
    // Show a custom confirmation dialog
    //
    function showConfirm() {
        navigator.notification.confirm(
            'Confirm Message!', // message
             onConfirm,            // callback to invoke with index of button pressed
            'Confirm Title',           // title
            ['Button 1','Button 2']         // buttonLabels
        );
    }
    
    
    // Prompt
    // ------------------------------------------------------------------------------------------------------
    // process the promptation dialog result
    function onPrompt(results) {
        alert("You selected button number " + results.buttonIndex + " and entered " + results.input1);
    }
    
    // Show a custom prompt dialog
    //
    function showPrompt() {
        navigator.notification.prompt(
            'Prompt message',  // message
            onPrompt,                  // callback to invoke
            'Prompt title',            // title
            ['Button 1','Button 2'],             // buttonLabels
            'default text'                 // defaultText
        );
    }
    
    
    
    
    // Beep
    // ------------------------------------------------------------------------------------------------------
     
    // Beep 1 time
    //
    function playBeep() {
        navigator.notification.beep( 1);
    }
    
    // Vibrate
    // ------------------------------------------------------------------------------------------------------
    
    // Vibrate for 1 seconds
    //
    function vibrate() {
        navigator.notification.vibrate(1000);
    }
    
    // ------------------------------------------------------------------------------------------------------ 
    // Globalization 
    // Only Preferred Language so far
    // TODO: add more properties
    // TODO: in myeclipse web simulator the info isn't available, an error prompt appears
    // ------------------------------------------------------------------------------------------------------
    function showGlobalizationInfo() {
    
        navigator.globalization.getPreferredLanguage( onSuccessPreferredLanguage, onErrorPreferredLanguage);
        
    }
    
    function onSuccessPreferredLanguage( language) {
        
        // alert( 'Preferred language: ' + language.value);
        
        var element = document.getElementById('globalizationPreferredLanguage');
        
        element.innerHTML = "Preferred Language: " + language.value;
        
    }
    
    function onErrorPreferredLanguage( error) {
        alert('onErrorPreferredLanguage!');
    }
    
    // ------------------------------------------------------------------------------------------------------
    // Splash Screen 
    // TODO, no img available yet. 
    // see
    // http://docs.phonegap.com/en/3.3.0/cordova_splashscreen_splashscreen.md.html#Splashscreen
    // and 
    // http://docs.phonegap.com/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens
    // ------------------------------------------------------------------------------------------------------ 
    function showSplashScreen() {
        navigator.splashscreen.show();
    }
    
    function hideSplashScreen() {
        navigator.splashscreen.hide();
    }
    
    
    // ------------------------------------------------------------------------------------------------------
    // Exit the application with the click of a button 
    // ------------------------------------------------------------------------------------------------------
    function exitApp() {
    
        navigator.notification.confirm(
               'Do you want to exit the application?', 
               onConfirmExit, 
               'Confirm Exit', 
               ['OK','Cancel']  
            );
    }
    
    function onConfirmExit(buttonIndex) {
    
        if(buttonIndex == 1){
            navigator.app.exitApp();
        }
         
    }
    
    //------------------------------------------------------------------------------------------------------ 
    // Camera
    //------------------------------------------------------------------------------------------------------
    var pictureSource;   // picture source
    var destinationType; // sets the format of returned value 
    
    // Called when a photo is successfully retrieved
    //
    function onPhotoDataSuccess(imageData) {
      // Uncomment to view the base64-encoded image data
      // console.log(imageData);
    
      // Get image handle
      //
      var smallImage = document.getElementById('smallImage');
    
      // Unhide image elements
      //
      smallImage.style.display = 'block';
    
      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      smallImage.src = "data:image/jpeg;base64," + imageData;
    }
    
    // Called when a photo is successfully retrieved
    //
    function onPhotoURISuccess(imageURI) {
      // Uncomment to view the image file URI
      // console.log(imageURI);
    
      // Get image handle
      //
      var largeImage = document.getElementById('largeImage');
    
      // Unhide image elements
      //
      largeImage.style.display = 'block';
    
      // Show the captured photo
      // The in-line CSS rules are used to resize the image
      //
      largeImage.src = imageURI;
    }
    
    // A button will call this function
    //
    function capturePhoto() {
      // Take picture using device camera and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onCameraFail, { quality: 50,
        destinationType: destinationType.DATA_URL });
    }
    
    // A button will call this function
    //
    function capturePhotoEdit() {
      // Take picture using device camera, allow edit, and retrieve image as base64-encoded string
      navigator.camera.getPicture(onPhotoDataSuccess, onCameraFail, { quality: 20, allowEdit: true,
        destinationType: destinationType.DATA_URL });
    }
    
    // A button will call this function
    //
    function getPhoto(source) {
      // Retrieve image file location from specified source
      navigator.camera.getPicture(onPhotoURISuccess, onCameraFail, { quality: 50,
        destinationType: destinationType.FILE_URI,
        sourceType: source });
    }
    
    // Called if something bad happens.
    //
    function onCameraFail(message) {
      alert('Failed because: ' + message);
    }
    
    
    //------------------------------------------------------------------------------------------------------ 
    // Common
    //------------------------------------------------------------------------------------------------------
    // Cordova is ready to be used!
    //
    function onDeviceReady() {
        
        // camera
        pictureSource=navigator.camera.PictureSourceType;
        destinationType=navigator.camera.DestinationType;
        
    }
    

    Feel free to comment and improve 🙂

    Thanks to the MyEclipse devs, it’s become a joy now to implement hybrid mobile apps.

    #351164 Reply

    Lofi
    Participant

    Since I always prefer to see one myself before I test some code, here’s a screenshot for the curious ones.

    Attachments:
    You must be logged in to view attached files.
    #351278 Reply

    Brian Fernandes
    Moderator

    Lofi,

    Thank you for the kind words and the cool example project!

    There were a few custom files for which you hadn’t provided the source yet – we were interested in ./js/jquery-mobile-init.js

    Could you paste that here too?

    #351280 Reply

    Lofi
    Participant

    Sorry, didn’t notice. Of course, here it is. It’s just setting some default parameters for jQuery:

    ./js/jquery-mobile-init.js

    // override jquery mobile default settings
    // see http://api.jquerymobile.com/global-config/
    $(document).bind("mobileinit", function(){
        
        // change default transition
        $.mobile.defaultPageTransition = 'none';
    
        // prevent link binding (no changes in the url with eg #pageXYZ)
        $.mobile.linkBindingEnabled = false;
    });

    Transitions are cool, but I didn’t want them in that project. And I don’t want to see the hash-tag in the url in a multi-page-template. But that’s just me 🙂

    The proper jQueryMobile and PhoneGap initialization, ie waiting until both are ready, is missing in my example. Didn’t use it then, will have to add it at some point when I extend the example.

    #453416 Reply

    stephenwalker99
    Participant

    Hi.
    I realy enjoyed your tutorial on phonegap features, alas I have been trying to get the capturePhoto() and getPhoto() to work now for over a year with no success at all

    #453417 Reply

    stephenwalker99
    Participant

    Hi.
    I really enjoyed your tutorial on phonegap features, alas I have been trying to get the capturePhoto() and getPhoto() to work now for over a year with no success at all, as I am working on a project that I would like the user to be able to use that function. I have been using phonegap for a while now and have various apps(attempts) on my phone, you can view the app here… http://redcaronline.com/tees-bats/index.htm to view the code. Any help would be most appreciated.
    P.S. After copying and pasting your code, I realized that the stylesheet was not present, do you have a working version that I could see?

    Stephen Walker.

    Attachments:
    You must be logged in to view attached files.
    #453526 Reply

    support-swapna
    Moderator

    Stephen,

    Sorry that you are seeing this issue.

    Do you see any exceptions or errors when using the capturePhoto() and getPhoto() ? Also please share with us the PG version.
    Can you please check if a remote build works?

    –Swapna
    MyEclipse Support

Viewing 7 posts - 1 through 7 (of 7 total)
Reply To: ME2015 CI4 Phonegap & jQuery Mobile Example

You must be logged in to post in the forum log in