Developing PhoneGap mobile project. Part 2

In the part one of these series we have checked what PhoneGap mobile application framework is, downloaded its latest version and have created our initial first project for iOS smartphone platform. I have also outlined frame for example mobile app we are going to build and the set of web APIs that we will be using to make this example application somewhat useful for its users.

In this part of the tutorial we will take a closer look to PhoneGap framework structure, its main files and will write code to consume data from the web based APIs. Lets call it slightly advanced “Hello World” example which instead of printing just simple text will display 5 yummy receipts retrieved from external web service.
We will continue working on the code of the initial project created in the part one of this tutorial. You can follow the steps we took last time, they are quite simple.
As we have much more code in this part, the all source code for today’s finished tutorial is located at the bottom of the post. Feel free to download and use it for testing. Now, lets get started.

PhoneGap structure for iOS mobile project

Let’s take a look at the structure and contents of the project created by PhoneGap script. Open the project with XCode (key tool for developing iOS based mobile applications). The structure will look the same as I have pictured below, with the key files for iOS project as well as PhoneGap specific www directory and few configuration files.
For iOS apps main.m objective-c implementation file represents the main loop application is constantly running. From the contents of this file we see that AppDelegate is being referenced as a main controller. Quick view to AppDelegate.m implementation file shows us that it sets some configuration parameters for the mobile project. Cache size, window size, splash screen, default start page for view controller (project default is always index.html) and other properties. The main directory where all application files have to be placed is www and they will be served via special custom view (web view).

AppDelegate.m implementation file for newly created PhoneGap iOS project.

PhoneGap project files for iOS

HoverIntent in WordPress

Whenever you’re working on a new WordPress theme that includes hover (mouseover) effects, especially dropdown or flyout menus, you might want to include hoverIntent. HoverIntent is a term that describes a concept through which you delay a hover action until a certain amount of time has passed, in order to make sure that the user really intended to trigger that action.

We’ve all been on websites with dropdown menus that tend to get in the way of the content, and pop open as soon as your mouse touches even a small portion of them, and we’ve most likely all been annoyed by it. The idea behind hoverIntent is to measure the speed of the mouse movement, attempting to determine whether the user actually intended to stop on the item or not. If the mouse just moves over an item with a hover effect, but doesn’t stop on it, the hover effect should not be triggered; if, however, the user’s mouse does slow down enough or stop on the item, the hover effect should be triggered.

Using jQuery in your WordPress plugins

This evening on Twitter, @viper007Bond posted a quick tip about using jQuery in your WordPress plugins (also applicable to themes). His initial tweet was:

Using jQuery in your WordPress plugin? Make sure you’re using quotes in your selector strings! http://api.jquery.com/category/selectors/

Then, @dimensionmedia, @viper007Bond and I had the following brief conversation:

Using Google’s CDN for WordPress JavaScript

As you probably know by now, Google hosts most of the major JavaScript libraries on its own content distribution/delivery network (CDN) for everyone to use. However, WordPress actually comes bundled with many of the same JavaScript libraries. So, what are you to do when you want to use Google’s copy? Sure, you could simply include the call to the Google JavaScript library of your choice in your theme files, but that would cause the library to load twice in many cases (potentially causing conflicts all over the place).

The way to handle this, quite simply, is to tell WordPress not to use its local copy of the library; but to use Google’s copy instead. To do so, you simply “deregister” the WordPress copy (for these examples, I will be showing how to use Google’s jQuery library), then register (and potentially enqueue) the Google copy.

jQuery Fundamentals Training – Free for Next 36 Hours

The Plural Sight training group has launched a new course around jQuery.  The course is listed as a beginner class and apparently is available for free for the next 36 hours. I haven’t watched any sections of the course yet but plan to this evening. I wanted to get the link out to ya’all now in case you want to participate you will have the maximum free time to participate.

Here’s part of the topics that will be covered:

  • jQuery Fundamentals: Introduction, Referencing a jQuery Script, Using Content Delivery Networks, Using the jQuery Ready Function, Getting to Know the jQuery Documentation
  • Using jQuery Selectors: What are Selectors?, Selecting Nodes by Tag Name, Selecting Nodes by ID, Selecting Input Nodes
  • Interacting with the DOM: Iterating Through Nodes, Modifying Properties and Attributes, Adding and Removing Nodes, Modifying Styles
  • Handling Events: jQuery Event Model Benefits, Handling Events, Binding to Events, Handling Hover Events
  • Working with Ajax Features: jQuery Ajax Functions, Loading HTML Content from the Server, Making GET Requests, Making POST Requests

Update – the free period is now over, if you want to watch the videos you will need to buy a subscription.

Form Input Placeholder Text

One of the new features coming in HTML5 is placeholder text for form inputs. The concept of placeholder text has been around for quite a while, and is fantastic for usability. Basically, placeholder text is text that appears inside of a form input when the page loads, but disappears when the user places the cursor in that form input.

Because HTML5 is still only partially supported, it’s still necessary to use javascript (you could conceivably use CSS to achieve most of the functions of placeholder, but most of the browsers that don’t support the HTML5 placeholder attribute also don’t support the necessary CSS to achieve this anyway). Within this article, I’m going to show you a few different options to add support for placeholder in all browsers.

Pages: