Skip to content

February 6, 2012

1

PhoneGap Notifications and jQuerry Mobile Buttons

by Colin

In this tutorial we will cover PhoneGap Notifications and jQuery Mobile Buttons.

We will use following PhoneGap Notifications:

  • A custom yet simple notification.
  • A confirmation notification.
  • A Beep notification. (Only working on the device, doesn’t work in simulator)
  • A vibrate notification. (Only working on the device, doesn’t work in simulator)
  • Buttons basics, icons and themes.

jQuery Mobile Buttons used here

  • Buttons basics, icons and themes.

phonegap notifications

jQuery Mobile Buttons

If you haven’t setup your project already follow this tutorial on how to setup your project for building on an Android device. Also if you don’t know how to setup the jQuery Mobile framework you can follow the basics tutorial. In order to fully understand this tutorial it is recommended to go through both of these tutorials before starting.

The PhoneGap notifications only work on the simulator or on a device so download the source code and test it yourself on your device or simulator and follow the rest of tutorial on the source code.

The project contains two pages, one is used to example the notifications and is called Notifications and the other is used to example the buttons and is called Buttons. The code for the pages is written in one file: index.html. I didn’t use multiple files for pages to keep things as simple as possible but you can do this yourself which is recommended to better learn PhoneGap notifications.

Let’s take a look at the notifications page:

<!-- Start of Notifications page -->
  	<div data-role="page" id="notifications">
	    <div data-role="header" data-position="fixed">
	    	<h1>Phonegap Notifications</h1>
	    </div>
	    <div data-role="content">
	    	<p style="text-align: center">Displays a custom message notification</p>
	    	<p><a href="#" onclick="customAlert(); return false;" data-role="button">Custom Alert</a></p>
	    	<p style="text-align: center">Displays a confirmation notification.</p>
	  		<p><a href="#" onclick="showConfirm(); return false;" data-role="button">Show Confirm</a></p>
	  		<p style="text-align: center">Beeps 3 times</p>
	    	<p><a href="#" onclick="playBeep(); return false;" data-role="button">Play Beep</a></p>
	    	<p style="text-align: center">Vibrate 2 seconds</p>
	    	<p><a href="#" onclick="vibrate(); return false;" data-role="button">Vibrate</a></p>
	    </div>
	    <div data-role="footer" data-position="fixed">
		    <div data-role="navbar">
		        <ul>
		            <li><a href="#notifications" data-icon="home" class="ui-btn-active ui-state-persist">Notifications</a></li>
		            <li><a href="#buttons" data-icon="grid">Buttons</a></li>
		        </ul>
			</div>
	    </div>
	</div>
<!-- /Notifications page -->

We have three divs that act as the header data-role="header", the content area data-role="content" and the footer which is our menu for the two pages data-role="footer". For the footer to act like a menu we need to place a div inside it and asign a data-role="navbar" attribute. This is the main structure of both our pages. We will go through the Buttons page after we finish this section or you can skip ahead if your interested only in the buttons section.

In our header we set the page title

<h1>Phonegap Notifications</h1>

In the content area we have four buttons that will show different notifications when they are pressed.

  • If you hit the Custom Alert button you will trigger the customAlert() function:
// Show a custom alert
    function customAlert() {
        navigator.notification.alert(
            'Alert triggered on click',  // message
            alertDismissed,         // callback
            'customAlert()',            // title
            'Done'                  // buttonName
        );
    }

This function contains a message which displays Alert trigged on tap when you tap it. It also contains a callback function which is triggered after the function ends it’s purpose. It has a title which I’ve set to show the function name and a button called done.

  • If you hit the Show Cofirm button the showConfirm() function is triggered:
// Show a custom confirmation dialog
    function showConfirm() {
        navigator.notification.confirm(
            'Are you sure you want to quit?',  // message
            onConfirm,              // callback to invoke with index of button pressed
            'showConfirm()',            // title
            'Yes,No'          // buttonLabels
        );
    }

This function contains a fictional message Are you sure you want to quit? which gives you two choices of answer Yes and No and after a button has been pressed onConfirm() function tells you which one of the two buttons has been pressed:


// process the confirmation dialog result
    function onConfirm(button) {
        alert('You selected button ' + button);
    }
  • If you hit the Play Beep button the playBeep() function is triggered:
// Beep three times
    function playBeep() {
        navigator.notification.beep(3);
    }

This function makes the phone play a sound 3 times (this works only on the device, it won’t work in the simulator).

  • If you hit the Vibrate button the vibrate() function is triggered:
// Vibrate for 2 seconds
    function vibrate() {
        navigator.notification.vibrate(2000);
    }

This function makes the phone vibrate for 2 seconds (this works only on the device, it won’t work in the simulator).

This covers the PhoneGap Notifications part of our tutorial, next we’ll go to the jQuerry Mobile Buttons page and see different types and styles for buttons.

The structure of our Buttons page:

<!-- Start of Buttons page -->      
    <div data-role="page" id="buttons">
          <div data-role="header" data-position="fixed">
            <a href="#" data-rel="back" data-icon="arrow-l">Back</a>
                <h1>JM Buttons</h1>
          </div>
          <div data-role="content">
            <p>
                  <p style="text-align: center">Inline buttons</p>
                  <a href="#" onclick="customAlert(); return false;" data-role="button" data-inline="true" data-icon="alert">Alert</a>
                        <a href="#" onclick="showConfirm(); return false;" data-role="button" data-inline="true" data-theme="b">Confirm</a>
                        <p style="text-align: center">Full width buttons</p>
                  <a href="#" onclick="playBeep(); return false;" data-role="button" data-icon="plus" data-iconpos="top">Play Beep</a>
                  <a href="#" onclick="vibrate(); return false;" data-role="button" data-icon="star" data-iconpos="bottom">Vibrate</a>
            </p>
            <div data-role="controlgroup">
                  <p style="text-align: center">Vertical group buttons</p>
                  <a href="#" onclick="yesBtn(); return false;" data-role="button" data-theme="a" data-icon="check">Yes</a>
                        <a href="#" onclick="noBtn(); return false;" data-role="button" data-theme="b" data-icon="delete">No</a>
                  <a href="#" onclick="maybeBtn(); return false;" data-role="button" data-theme="c" data-icon="alert">Maybe</a>
            </div>
            <div data-role="controlgroup" data-type="horizontal">
                  <p style="text-align: center">Horizontal group buttons</p>
                  <a href="#" onclick="yesBtn(); return false;" data-role="button" data-inline="true" data-theme="d">Yes</a>
                        <a href="#" onclick="noBtn(); return false;" data-role="button" data-inline="true" data-theme="e">No</a>
                  <a href="#" onclick="maybeBtn(); return false;" data-role="button" data-inline="true">Maybe</a>
            </div>
          </div>
          <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                    <ul>
                        <li><a href="#notifications" data-direction="reverse" data-icon="home">Notifications</a></li>
                        <li><a href="#buttons" data-icon="grid" class="ui-btn-active ui-state-persist">Buttons</a></li>
                    </ul>
                  </div>
          </div>
      </div>
<!-- /Buttons page -->

As you’ve probably noticed the structure remains pretty much the same, we added a back button to the header. You can do this by creating a button and adding the attribute data-rel="back" and I’ve also added an arrow shaped icon with the data-icon="arrow-l" attribute.

In the content div we have the first two buttons Alert and Confirm displayed inline, to do this you have to set the data-inline="true" attribute which also sets the width of the button to be relative to the text width. By default it’s using the full width of the device as you can see for Play Beep and Vibrate. The buttons have the same functionality as before.

Furthermore you can edit the themes of the buttons. To change the theme of a button can easily be done by setting the data-theme="e" attribute. The default theme at this time is data-theme="c". Check the jQuery mobile website for more information about themes.

To add an icon to a button set the data-icon=”check” attribute to the button. Also you can set the position of the icon to left, right, top or bottom by setting the data-iconpos=”top”. The default position of an icon is to the left. To see available icons visit the jQuery Mobile website. If your not satisfied with what’s provided by jQuery you can even customize your own icons.

You might want to group multiple buttons so they look as a navigation component. To obtain this effect you need to wrap the buttons in a div and set the data-role="controlgroup" attribute. By default it will display it vertical, if you want it to be horizontal you have to add the data-type="horizontal" attribute.

<div data-role="controlgroup" data-type="horizontal">
     <p style="text-align: center">Horizontal group buttons</p>
     <a href="#" onclick="yesBtn(); return false;" data-role="button" data-inline="true" data-theme="d">Yes</a>
     <a href="#" onclick="noBtn(); return false;" data-role="button" data-inline="true" data-theme="e">No</a>
     <a href="#" onclick="maybeBtn(); return false;" data-role="button" data-inline="true">Maybe</a>
</div>

Final words on this tutorial for PhoneGap Notifications and jQuery Mobile Buttons

PhoneGap Notifications and jQuerry Mobile Buttons are the base for developing portable mobile apps easy and without complicated C/C++/Objective C/Java programming knowledge. Using this tutorial as a starting point experiment with different PhoneGap Notifications and different jQuerry Mobile Buttons to better understand this environment.

That’s all. This concludes our tutorial on PhoneGap Notifications and jQuery Mobile Buttons, Good luck with mobile app development!

Leave a Reply

required
required

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments