/* ADMIN */
// Use your own external URL logo link
function custom_url_login(){
return "http://www.anansi.com.au/"; /
}
add_filter('login_headerurl', 'custom_url_login');

// Custom WordPress Login Logo/CSS
function login_css() {
wp_enqueue_style( 'login_css', get_template_directory_uri() . '/login.css' );
}
add_action('login_head', 'login_css');


Geolocation

Geolocation API is usually used together with Google Maps to show the current location of the device.

Where would you use it?
Geolocation is an essential feature for applications that needs to know information about the device’s current location such as Store Locator, Cinema Finder and Get Directions.

Example

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(successcalllback, errorcallback);
} else {
  errorcallback('This feature is not supported on your device.');
}

function successcalllback(position) {
   console.log(position);
}

function errorcallback(message) {
  console.warn(message);
}

onLine

This HTML5 feature checks the status of Internet connection for the current device.

Where would you use it?
It is a good practice to check if a device has an Internet connection before making an AJAX request to a web service.

Example

var isonline = (navigator.onLine) ? true : false;

Audio and Video

<audio> and <video> are HTML5 elements that enable audios and videos to be displayed on web pages without using a third-party plugin like flash.

Where would you use it?
When you are developing a website or a web app for smartphones, you will want to use audio and video elements to embed media as it will enable those media to be played using the device’s default players, resulting in a better performance and user-experience.

Example

<audio controls="controls" autoplay="autoplay">
  <source src="audio.ogg" type="audio/ogg" />
  <source src="audio.mp3" type="audio/mp3" />
  This feature is not supported on your device.
</audio>

<video width="300" height="200" controls="controls">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  This feature is not supported on your device.
</video>

Local Storage

Local Storage acts like a client-side database which your application can use to store information. Unlike cookies, there is a lot of storage space available (5MB) and it is relatively easy to store information into and retrieve information from Local Storage.

Where would you use it?
As the name suggests, Local Storage resides on the user’s local browser and is useful if you wish to remember user’s perferences and usage history.

Example

if(typeof(Storage)!== "undefined")  {
     localStorage.setItem("name", "John Smith");   //save
     console.log(localStorage.getItem("name"));  //retrieve
     localStorage.removeItem("name"); //delete
} else {
     console.warn('This feature is not supported on your device.');
}

History

History API enables deep linking of ajax-powered pages without having to manipulate the current page’s URL.

Where would you use it?
If you have a page where content changes on user’s action without a page refresh, then History API can be used to manipulate browser history so user can move backward and forward between actions.

Example

var pages = [
        {
            "content": "Contentforpageone",
            "photo": "image1.jpg"
        },
        {
            "content": "Contentforpagetwo",
            "photo": "image2.jpg"
        },
        {
            "content": "Contentforpagethree",
            "photo": "image3.jpg"
        }
];

function update(data) {
        $('#content').html(data.content);
        $('#image').attr('src', data.photo);
}

$(function() {
    $('.next, .prev').live('click', function(e) {
        
        var pageno = e.target.getAttribute('href').split('/').pop(),
        data = pages[pageno] || null; 
        
        update(data);
        
        // add to history
        history.pushState(data, e.target.textContent, e.target.href);
        
        e.preventDefault();

    });

    window.addEventListener('popstate', function(e) {
      update(e.state);
    });

	history.replaceState({
	  content: pages[0].content,
	  photo:  pages[0].photo
	}, document.title, document.location.href);

});

<ul>
    <li><a href="/0" class="prev">Previous</a></li>
    <li class="current">1</li>
    <li><a href="/2" class="next">Next</a></li>
</ul>
<div id="content"></div>
<img src="noimage.jpg" alt="" id="image" />


add_action( 'show_admin_bar', '__return_false' );


Download

Checkout added to your cart

Features:
- Ready-to-deploy
- Built on phonegap-1.4.1 and JQuery Mobile 1.0.1
- Easy to customise code base
- Custom theming for jQuery Mobile
- Google Fonts API for custom fonts
- 180+ lines of CSS which can be customised to your desired look and feel
- Minimal use of images by utilising CSS3
- Internet connection check before displaying every screen. Handy if you plan to use a REST API that connects to a web server
- 4 pages, ready to add your own content

Screenshot

Code snippets

Download

Checkout added to your cart

Useful Links

• PhoneGap Wiki
• Getting Started Guides for PhoneGap
• PhoneGap Developer Portal
• jQuery Mobile
• jQuery Mobile Documentation

The App Structure

The following is the app folder structure. As mentioned in Part I, we used jQuery and jQuery mobile as the mobile javascript frameworks for the colour match app.

- www
-- js
--- jquerymobile.js
--- colourpicker
--- jquery.js
--- script.js
-- css
--- images
- phonegap.js
- index.html
- results.html
- details.html
- favourites.html
- picker.html
- popular.tml
- about.html
- plugins
....

The app structure for www folder is very similar to a website folder structure. In fact, you can basically take www folder and upload it onto a web server to run the app as a web app. The structure is very straight forward; javascript files in JS folder, CSS and presentation images in CSS folder and all the templates in the root folder. phonegap.js is the Javascript file that comes with PhoneGap and is necessary in order to use PhoneGap APIs and plugins.

The components from jQuery mobile used within the app are Single page template, Header bars, Buttons, Layout grids, Select menus, and List views. We created a custom theme in CSS so the look and feel of those components are customised for the app.

Troubleshooting XCode/PhoneGap Issues

We encountered a few issues with XCode and PhoneGap during development.

1. Unable to talk to web service APIs

When the app was running as a web app, everything was working well, but as soon as we put it onto XCode, the colour picker no longer worked – it didn’t return any result. This was caused by PhoneGap file download restriction and to resolve the issue, the following values in PhoneGap.plist file were updated:

OpenAllWhitelistURLsInWebView: YES
ExternalHosts
 - thedomainforapi.com

2. PhoneGap APIs and Plugins were not working

We were using a few PhoneGap APIs and Plugins but some of them were not working at all. It took us a while to isolate the issue, but the problem was because we were using Prototype Javascript Framework for Colour Picker and Prototype and PhoneGap don’t work together. Rather than trying to hack Prototype Framework, we removed it altogether and refactored the Colour Picker.

3. Some PhoneGap plugins were throwing ARC errors when compiling

Disabling ARC for specific files did the trick.

Installing certificates & provisioning profiles

Once we have the code ready and tested on Simulator, we wanted to make sure it worked well on the device as well. In order to deploy the app onto a real device, we had to install a provisioning profile and a certificate. The process requires a few steps, but if you follow this article, you should not have any problem. For installing certificate and profile for distribution (ie: submitting to the app store), we followed this article. (Thanks, David!)

iTunes App Store Submission Process

Surprisingly, the process of submitting the app to iTunes App Store wasn’t as hard as installing certificates & provision profiles. Refer to slide 32+ of this presentation for screenshots. The slides are a bit dated as we didn’t have to download Application Loader separately, it already came with XCode 4.

Finally… how long did it take to get it approved?

We submitted the app on Saturday (midnight Friday) but we had to cancel the first submission and resubmit the app again on Tuesday due to some last minute changes. The app was approved the following Monday around 4am (Australian Eastern Standard Time Zone (AEST)). We received an email from the app store around 2am which said the app was under review and at 4am, we received another email saying the app was approved and ready for sale. Reading the guidelines before submitting the app to ensure the app complies with the App Store Review Guidelines must have helped us.

Feel free to download the app from the app store to see it in action.

If you are interested in getting an iPhone/iPad application that uses web technologies for your company or organisation, contact us at Anansi Web Development to find out how we may be able to help you.

Other useful articles

We have written a few articles in the past on developing for iPhone and iPad and working with PhoneGap which you might find useful:

• Embed a YouTube video iframe in a phonegap app
• How to ‘Post on Facebook Wall’ on iPhone and Android using PhoneGap plugins
• 10 Useful Javascript Snippets for your mobile websites
• How to use hi-res images in web apps for iPhone4
• Top 10 jQuery Mobile Code Snippets that you need to know
• Five Important Steps into iPhone App Development for Beginners
• Designing and Optimising Websites for iPad
• How to disable text auto correction in iPhone web app
• Tips for iPhone Web App Development

Sample PhoneGap Project

If you would like to get a sample PhoneGap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.

Last week, we submitted an iPhone app to iTunes app store. This week, it was approved by Apple and the app is now available for download from the app store. Since everyone knows that HTML5 and app development is the future of mobile space, we’d like to share with you our experience of developing an HTML5 iPhone app using jQuery mobile & PhoneGap.

About the app
The app is called “Colour Match” and the purpose of the app is to allow users to pick any colour using a colour picker tool and display clothing & accessories that match the colour from Online Shopping USA database. Features of the app include a colour picker, a selection of most popular colours for easy browsing, favourites where users can save their favourite products and email, facebook and twitter sharing.

Technologies used
The technologies used for the app are:
- jQuery 1.7.1 + jQuery Mobile 1.0.1 (Javascript framework)
- PhoneGap 1.4.1
- HTML5 (template structure & Web SQL database storage)
- CSS3 (webkit animations and layout)
- PHP for web services (a few custom web services were written to obtain data from a mySQL database that resides on web server)

PhoneGap plugins used
We used the following PhoneGap plugins to provide native features that are not possible to implement using Javascript/HTML.
- Twitter
- ChildBrowser
- EmailComposer

Development timeline
It look us about a week to come up with the concept and fine-tune requirements before starting the actual development. The HTML5 + CSS development took less than a week as jQuery mobile made it pretty easy to have a working functional app within a few days. The design of the app took a few days. Most of the development time was spent on writing web services in PHP and writing a system that automatically scans images and picks the most appropriate colour. It took us half a day to set up Xcode, PhoneGap, provisional certificates etc (mind you, this wasn’t the first time we did this, but it still took us some time because we are not very familiar with a Mac computer). Then one full day was spent integrating and intalling PhoneGap plugins into the app, and finally submitting it to iTunes. All up, it took about 4 weeks from the start of the project to the day the app became available on iTunes app store.

—

Part II will cover more technical details such as the app structure, submission process to iTunes, installing certificates and troubleshooting XCode issues.

Sample PhoneGap Project

If you would like to get a sample PhoneGap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.

HTML:

Go to YouTube and get embed code for the video that you wish to include into your phonegap app. Note that not all YouTube videos can be played from a phonegap app due to restrictions placed in the videos.

<html>
	<head>
		<title>YouTube video</title>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<script src="phonegap-1.2.0.js"></script>
	</head>
	<body>
       
        <iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
        
    </body>
</html>

Changes to PhoneGap.plist

Change/add the following values in PhoneGap.plist file of your app.

MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
          *.youtube.com
          *.ytimg.com

And that’s it! You should now be able to run the app on Simulator or an iOS device and be able to play the youtube video using the default video player that comes with the device (for example, QuickTime player for iPhone and iPad).

If you would like to get a sample phonegap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.

A little info on jQuery mobile pagecreate event:

pagecreate
Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user’s wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.

$( '#aboutPage' ).live( 'pagecreate',function(event){
( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
});

And the snippets:

Javascript

function initialize(lat,lng) {
	var latlng = new google.maps.LatLng(lat, lng);

	var myoptions = {
		zoom: 12,
		center: latlng,
		disableDefaultUI: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	var map = new google.maps.Map(document.getElementById("googlemap"),myoptions);
	
	var icon = new google.maps.MarkerImage('images/marker.png',
			new google.maps.Size(20, 20), // size
			new google.maps.Point(0, 0), // origin
			new google.maps.Point(20, 20) // anchor
		);
	
	var mymarker = new google.maps.Marker({
		position: latlng,
		map: map,
		icon: icon
	});
}

$('.page-map').live("pagecreate", function() {
        var lat = -33.887418, lng = 151.17403;
	if(navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(function(position){
			initialize(position.coords.latitude,position.coords.longitude);
		}, function() { console.log('Error with getCurrentPosition'); });
	} else {
                // predefined location
		initialize(lat, lng);
	}
});

HTML

<div data-role="page" class="page-map">

	<div data-role="header">
		<h1>Google Map</h1>
	</div><!-- /header -->

	<div data-role="content">	
		 <div id="googlemap"></div>
	</div><!-- /content -->
	
	<div data-role="footer">
		<h4>Footer content</h4>
	</div><!-- /footer -->
	
</div><!-- /page -->

We’ve put together some of the best holiday sales for web designers and developers. Enjoy!

The book is written for jQuery Mobile Beta 2 which is the current version of jQuery Mobile and there are 3 parts to the book.

Part I covers the basics you need to know about jQuery Mobile. The thing I like about it is that it contains a lot of sample code, so if you like to create a website while reading the book, you can do so easily with the help of sample code. The tutorials in Part I is great for someone who wants to just get a simple mobile site up and running without wanting to worry too much about the UI and the nitty gritty details.

Part II focuses on the fundamentals of building user interfaces with jQuery Mobile. It covers dialogs, forms, navigations, lists, header, footer and other essential elements of a website. I particularly liked the “Creating Forms” chapter because it contains a lot of information about different input elements and attributes that you can use in jQuery Mobile. Forms are one of the most trickest elements in web designs and it is very helpful to have the whole chapter dedicated to this subject. If you are looking to create a mobile web application that uses forms, this chapter is a must-read.

Part III is titled Beyond the Basics and it contains 3 chapters; themeing jQuery Mobile, the jQuery Mobile API and a complete web app example. As you probably already knew, jQuery Mobile comes with 5 default themes that you can choose from, but more often than not, you need to create a custom theme that suits your website or web app. Themeing jQuery Mobile chapter explains just how you can do that with an example red theme. The jQuery Mobile API is another favourite chapter of mine because when I was developing in jQuery Mobile a few months ago, there weren’t a lot of resources available on how the API works, in particular, the methods and events available. It could have saved me a lot of time if only I had this book back then. The last chapter in Part III is a complete web app example. The web app example uses PHP5 for the back end and as the title suggest, it is a complete app, meaning you can take the example code, upload it to your web server and have a fully functional web app in jQuery Mobile.

Overall, the book is an excellent book for developers who want to dive into mobile app development with jQuery Mobile. There are a lot of screenshots, code examples and references to help you get started. What I like most about the book is that it’s written by a developer for developers which means the tutorials are easy to follow and will get you up to speed on the basics of app development in no time.

———–

Update (October 2012): The 3rd edition of the book is now available for purchase. It’s fully updated for jQuery Mobile 1.1 and 1.2, and covers everything from the new transitions through to the new popup widget, data attributes, and the latest versions of PhoneGap and XCode.

What’s new in the latest edition?

- Chapter 3: Covers the 2 new transitions, turn and flow, as well as the new transition system

- Chapter 6: The new main section on popups (about 2/3 of the chapter)

- Chapter 7: Covers the new data-mini attribute for mini form elements, as well as improvements to sliders

- Chapter 8: The section on the listviewbeforefilter event

- Chapter 9: The data-collapsed-icon and data-expanded-icon attributes, and collapsible listviews

- Chapter 11: Includes a lot of the new jQuery Mobile settings, as well as the new loading spinner and loading() method

- Chapter 13: Revamped “CityChums” app so it runs more smoothly, plus it’s updated for the latest versions of PhoneGap and Xcode, and the iPhone 5 display

———–

Sample PhoneGap Project

If you would like to get a sample PhoneGap project (uses jQuery mobile), you can download PhoneGap App using jQuery Mobile source code.