PhoneGap Toast plugin

1. Description

This plugin allows you to show a native Toast (a little text popup) on iOS, Android and WP8. It's great for showing a non intrusive native notification which is guaranteed always in the viewport of the browser.

• You can choose where to show the Toast: at the top, center or bottom of the screen.
• You can choose two durations: short (approx. 2 seconds), or long (approx. 5 seconds), after which the Toast automatically disappears.
• Compatible with Cordova Plugman.
• Officially supported by PhoneGap Build.
• Minimum iOS version is 6.

Example usages:

• "There were validation errors"
• "Account created successfully"
• "The record was deleted"
• "Login successful"
• "The battery is almost dead"
• "You are now logged out"
• "Connection failure, please try again later"

2. Screenshots

iOS

Android

Windows Phone 8

3. Installation

Automatically (CLI / Plugman)

Toast is compatible with Cordova Plugman, compatible with PhoneGap 3.0 CLI, here's how it works with the CLI (backup your project first!):

$ phonegap local plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git

or

$ cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git
$ cordova prepare

Toast.js is brought in automatically. There is no need to change or add anything in your html.

Manually

1. Add the following xml to your config.xml in the root directory of your www folder:

<!-- for iOS -->
<feature name="Toast">
  <param name="ios-package" value="Toast" />
</feature>

<!-- for Android -->
<feature name="Toast">
  <param name="android-package" value="nl.xservices.plugins.Toast" />
</feature>

<!-- for WP8 -->
<feature name="Toast">
  <param name="wp-package" value="Toast"/>
</feature>

For iOS, you'll need to add the QuartzCore.framework to your project (it's for automatically removing the Toast after a few seconds). Click your project, Build Phases, Link Binary With Libraries, search for and add QuartzCore.framework.

2. Grab a copy of Toast.js, add it to your project and reference it in index.html:

<script type="text/javascript" src="js/Toast.js"></script>

3. Download the source files and copy them to your project.

iOS: Copy the two .h and two .m files to platforms/ios/<ProjectName>/Plugins

Android: Copy Toast.java to platforms/android/src/nl/xservices/plugins (create the folders)

WP8: Copy Toast.cs to platforms/wp8/Plugins/nl.x-services.plugins.toast (create the folders)

PhoneGap Build

Toast works with PhoneGap build too, but only with PhoneGap 3.0 and up.

Just add the following xml to your config.xml to always use the latest version of this plugin:

<gap:plugin name="nl.x-services.plugins.toast" />

or to use this exact version:

<gap:plugin name="nl.x-services.plugins.toast" version="1.0" />

Toast.js is brought in automatically. There is no need to change or add anything in your html.

4. Usage

You have two choices to make when showing a Toast: where to show it and for how long.

• show(message, duration, position)
  • duration: 'short', 'long'
  • position: 'top', 'center', 'bottom'

You can also use any of these convenience methods:

• showShortTop(message)
• showShortCenter(message)
• showShortBottom(message)
• showLongTop(message)
• showLongCenter(message)
• showLongBottom(message)

You can copy-paste these lines of code for a quick test:

<button onclick="window.plugins.toast.showShortTop('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showShortTop</button>
<button onclick="window.plugins.toast.showLongBottom('Hello there!', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast showLongBottom</button>
<button onclick="window.plugins.toast.show('Hello there!', 'long', 'center', function(a){console.log('toast success: ' + a)}, function(b){alert('toast error: ' + b)})">Toast show long center</button>

jQuery.post()

$.post( "test.php" );

$.post( "test.php", { name: "John", time: "2pm" } );

$.post( "test.php", { 'choices[]': [ "Jon", "Susan" ] } );

$.post( "test.php", $( "#testform" ).serialize() );

$.post( "test.php", function( data ) {



  alert( "Data Loaded: " + data );

});

$.post( "test.php", { name: "John", time: "2pm" })



  .done(function( data ) {



    alert( "Data Loaded: " + data );



  });

$.get( "test.php" );

$.get( "test.php", { name: "John", time: "2pm" } );

$.get( "test.php", { "choices[]": ["Jon", "Susan"] } );

$.get( "test.php", function( data ) {



  alert( "Data Loaded: " + data );



});

$.get( "test.cgi", { name: "John", time: "2pm" } )



  .done(function( data ) {



    alert( "Data Loaded: " + data );



  });

Smaller code base

One tool to rule them all

meteor create myapp
cd myapp
meteor

Awesome community

Deploying is simple

meteor deploy myapp.meteor.com

A package for everything

• Efficient – learn a bit, achieve a lot
• Worthwhile – the skills are transferable
• Intuitive – the concepts appeal to our common sense
• Flexible – many different solutions including mobile apps

Super easy to install

curl https://install.meteor.com/ | sh

Full stack

meteor add coffeescript

//Client
if Meteor.isClient
  console.log 'What did the client say to the server?'

//Server
if Meteor.isServer
  console.log 'I dunno'

//Both 
console.log 'Maybe you should give him a callbacK?'

Step #5: Add mobile packages to your application.

• Camera, for taking photos on either mobile devices or desktop computers.
• Geolocation, for tracking the user’s location with a device’s GPS.
• Reload on Resume, which can notify users when an update is available for the application and encourage them to restart to see the changes.

meteor add mdg:camera

<head>
  <title>Camera Example</title>
</head>
<body>
  {{> takePhoto}}
</body>

<template name="takePhoto">
  <p><input type="button" class="capture" value="Take Photo"></p>
</template>

if(Meteor.isClient){
  Template.takePhoto.events({
    'click .capture': function(){
      console.log("Button clicked.");
    }
  });
}

MeteorCamera.getPicture();

• Options, such as setting the width and height for the photo.
• A callback function, for retrieving the data of the photo.

MeteorCamera.getPicture({});

MeteorCamera.getPicture({}, function(error, data){
  // something goes here
});

MeteorCamera.getPicture({}, function(error, data){
  console.log(data);
});

MeteorCamera.getPicture({}, function(error, data){
  Session.set('photo', data);
});

Template.takePhoto.helpers({
  'photo': function(){
    /// code goes here
  }
});

Template.takePhoto.helpers({
  'photo': function(){
    return Session.get('photo');
  }
});

<template name="takePhoto">
  <p><input type="button" class="capture" value="Take Photo"></p>
  <p>{{photo}}</p>
</template>

<template name="takePhoto">
  <p><input type="button" class="capture" value="Take Photo"></p>
  <p><img src="{{photo}}"></p>
</template>

Step #6: Test your application.

meteor run ios

meteor run android

Conclusion