Showing posts with label cordova. apache. Show all posts
Showing posts with label cordova. apache. Show all posts

Wednesday, June 6, 2012

PhoneGap Android Application Preferences Plugin

So I'm working on a side app that I get to touch about once a month for about 15 minutes and one of the things I ran into is that I need a way to store user preferences. Well I realized that I could build my own HTML page and store the data in localStorage but I wouldn't learn anything new that way. In the end I decided to do a plugin that would allow PhoneGap developers to use Android Application Preferences and I modelled it after the existing iOS plugin by originally by Tue Topholm (Randy McMillian ported it to the updated Plugin API on iOS).

First if you are unsure about how application preferences are setup on Android go read this tutorial and then come back I'll wait. Oh great, your back. Let's crack on with things.

Functionality

Okay, so the application preferences plugin will provide you with four methods that you can use to interact with the native Android preferences.

get(key, success, fail)

If the key exists in the preferences it will be returned as the single parameter of the success callback that you provide. If the key does not exist the failure callback will be executed with an error object with error.code set to 0 which means no property.

    window.plugins.applicationPreferences.get(key, function(value) {
        console.log("The value is = " + value);
    }, function(error) {
        console.log(JSON.stringify(error));
    });

set(key, value, success, fail)

If the key exists in the preferences then value will be saved and your the success callback will be executed. If the key does not exist the failure callback will be executed with an error object with error.code set to 0 which again means no property.

    window.plugins.applicationPreferences.set(key, value, function(value) {
        console.log("set correctly");
    }, function(error) {
        console.log(JSON.stringify(error));
    });



load(success, fail)

Calling load will have the native side loop through all the preferences creating a JSON object that will be returned as the single parameter of your success callback.

    window.plugins.applicationPreferences.load(function(value) {
        console.log("The object is = " + JSON.stringify(value));
    }, function(error) {
        console.log(JSON.stringify(error));
    });


show(activity, success, fail)

Calling show passing in the class name of your PreferenceActivity class will cause the native Android GUI to be shown so your user can interact with the preferences. If the class name you pass in doesn't exists your failure callback will be called with an error object with error.code set to 1 which means no preferences activity.

    window.plugins.applicationPreferences.show("com.simonmacdonald.prefs.QuickPrefsActivity");

which brings up a GUI that looks like this:


Installation

Installation of the Plugin follows along the common steps:

  1. Add the script tag to your html:
    <script type="text/javascript" charset="utf-8" src="applicationPreferences.js"/>
  2. Copy the Java code into your project to the src/com/simonmacdonald/prefs folder.
  3. Create a preferences file named res/xml/preferences.xml following the Android specification.  
  4. Finally you'll need to create a class that extends PreferenceActivity in order to be able to view/modify the preferences using the native GUI. Refer back to the tutorial I mentioned for more details. 
That's about it. Give the plugin a try if you need to store native preferences and let me know what you think.

Oh, and I'm pretty sure that Darren McEntee has already included this plugin in his Live Football on TV app which means this plugin is already in the wild.

Enjoy!

Monday, April 30, 2012

PhoneGap Android SplashScreen Just Got Better

One PhoneGap 1.7.0 is released in the next day or so doing a splash screen on PhoneGap Android is going to get a lot better. First off the long standing issue of using 9-patch images has been fixed. Really and truly it has this time. I've tested the fix on three different screen sizes.

Secondly, when you setup a splash screen you do the following:



super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);
This would show your splash screen 10 seconds then your index.html page would be loaded. Notice I said then. Yup, that's right showing the splash screen is a blocking call. While the splash screen is being displayed your .html/.js/.css is not being loaded in the background. Well, that is all changing so that your splash screen is shown on one thread while your application loads underneath the splash screen in another thread. The best thing is you don't need to make any changes to your code. Just keep calling the splash screen like you normally would.

But wait, I'm anticipating your next question "What if I want the splash screen to go away once my application is loaded before the timeout value is reached?" Okay, I've got good news it's coming. The official way to do this on iOS and Android once the 1.8.0 release is out will be to call:
navigator.splashscreen.hide();
but that call isn't ready yet. However, if you want to be on the bleeding edge you should be able to call:
cordova.exec(null, null, "SplashScreen", "hide", []);
but you are wait out on the edge there so don't blame me if it doesn't work. Then you'll be able to tell the splash screen to go away once you have "deviceready".
document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    console.log("We got device ready");
    cordova.exec(null, null, "SplashScreen", "hide", []);
    // Soon to be
    // navigator.splashscreen.hide();
}
That's all for now.

Wednesday, April 18, 2012

FileTransfer.download on PhoneGap/Apache Cordova 1.5.0

Sorry for being gone so long, vacation put me off my posting stride but hopefully this week will get things back on track.

Today I'd like to talk about using the FileTransfer.download() command with PhoneGap. In PhoneGap 1.5.0 we introduced common JavaScript. This is a sub project which has each platform that PhoneGap supports pulling it's JS from a common source. One of the changes introduced because of this is that all FileEntry.fullPath's would start with the "file://" protocol.

Unfortunately the native FileTransfer.download() code was not updated to take care of the new input. I've raised CB-539: FileTransfer.download fails when target starts with "file://" to track this issue. I've already got a fix for this checked into the source repository and it'll be in the 1.7.0 release of PhoneGap.

In the meantime you'll need to strip the "file://' from the target path you pass into FileTransfer.download().  Something like this:
var localPath = fileEntry.fullPath;
if (device.platform === "Android" &&
  localPath.indexOf("file://") === 0) {
    localPath = localPath.substring(7);
}
Here is a full example and don't forget to whitelist "http://i3.kym-cdn.com":