jQuery Plugin Development Beginner’s Guide
Build powerful, interactive plugins to implement jQuery in the best way possible
- Utilize jQuery’s plugin framework to create a wide range of useful jQuery plugins from scratch
- Understand development patterns and best practices and move up the ladder to master plugin development
- Discover the ins and outs of some of the most popular jQuery plugins in action
- A Beginner’s Guide packed with examples and step-by-step instructions to quickly get your hands dirty in developing high quality jQuery plugins
jQuery is a javascript framework that simplifies javascript development life cycle for web applications. Its greatest force comes from the ease of use and the huge number of plugins available. As a result of which javascript developers are exposed to a large number of enterprise components like Sort Tables, Editable Tables with Ajax and also web application components for animation, data manipulation.
One such plugin with very powerful effects is the jQTouch; this plugin can be used by any web application developer with small experience in jquery to build applications for iPhone, iPad and Android devices. For now, just to get a feel, you can point your internet enabled iPad, iPhone or Android device to http://www.afrovisiongroup.com/twigle and test the application. Other examples of applications that can be developed using jQtouch include Gmail for the iPad or facebook touch.
Getting Started
Before we start using jQTouch, I would love to put across a few facts about jQTouch.
jQTouch is a plugin for jQuery which means it only enhances jQuery to build smartphone applications that support swiping, and all the other touch gestures. Before you begin development with jQTouch, I would suggest you get comfortable with jQuery.
jQTouch applications are not developed like regular web applications, where in an index page will be loaded with links that lead to other pages, and each page is loaded from the server every time a visitor clicks on a link. With jQTouch, all the pages are loaded once inside the index.html and each page is represented as a seperate div element in the index page. For example, the following html code snippet (<div id=’page_name’>content</div>) represents a page in your jQTouch application and a link to that page is as follows (<a href=’#page_name’>link to page name</a>). You can have as many pages as you want with all the pages having links to other pages inside the index.html file, but remember all this is stored in one single file index.html. The link clicks and navigation actions are implemented using javascript inbuilt into jQTouch. You will get to understand this as we implement twigle. Let’s first get to know more about twigle. It is a twitter search application for smartphones loaded from the web. We will use jQTouch for client side development, jQuery ajax plugin for the server side communication and PHP in the backend to get the search results from the twitter Search API.
jQTouch comes with javascript files and css files with themes. This defines the look and feel of the application. You won’t have to bother about the design as the plugin already comes with predefined styles and graphics from which you can use as the base and extend it further to create your own unique looks. There are two themes that come with the plugin: apple theme and jqt theme. Just like the name implies, the apple theme looks and feels like native iPhone OS apps.
The plugin styles are predefined for the toolbar, rounded button, etc. You will discover this as we move on.
jQTouch applications are basically developed in a single file, usually index.html. It contains the html code, javascript code and the styling. Everything in your application happens inside this file which gets loaded into your smartphone once like gmail and the other google applications.
For example
[code] <html> <head> </head> <body> <div id='home'> <div class='toolbar'> Home Page </div> <div> this is the home page </div> </div> </body> </html> [/code]
The above html code should produce the following:
After installing and initializing the jQtouch plugin with the apple theme, you should have the following:
Notice how the <div class=’toolbar’><h1>Home Page</h1></div> gets styled into the iPhone or iPad toolbar’s look and feel. Now, on the whole, the page looks more or less like a native iPhone application.
Developing with jQTouch
To develop your iPhone OS or Android OS applications with jQtouch you need to have jQuery and jQTouch libraries which you can download from http://www.jqtouch.com/.
Next, get your favorite code editor (dreamweaver, notepad ++, etc) and we can get started.
Remember, we are going to look at how to develop an application like twigle here. You can check out the demo of the application at http://www.afrovisiongroup.com/twigle. This is a twitter search application for smartphones loaded from the web. We will use jQTouch for client side development, jQuery ajax plugin for the server side communication and PHP in the backend to get the search results from the twitter Search API.
Lets Get to work:
Create a folder on your local web server directory called twigle
Download the jQTouch package and unzip it into the folder twigle, this will give you the following structure:
twigle/demos(this folder contains the sample applications. You can look at the source to learn more about these)
/extensions(this folder contains jQTouch extensions that are like its own plugins)
/jqtouch(this folder contains the javascript and css files needed for jQTouch to work)
/themes (this folder contains the theme files and you can create your own themes too)
/license.txt
/readme.txt
/sample.htaccess
Now we create two files in the twigle folder: index.html and twigle.php
The index.html will hold our application views(pages represented as html DIV Tags) and the twigle.php will be our business logic backend that connects the twitter API to our index.html front end. Javascript and AJAX communications comes between the index.html and the twigle.php to load twitter search results for any given search request.
Paste the following code into the index.html file:
[code] <!doctype html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div id="home"> <div class="toolbar"> <h1>TWIGLE</h1> <a href="#info" class="button leftButton flip">Info</a> <!-- <a href="#search_results" class="button add slideup">+</a> --> </div> <form id="search"> <ul class="rounded"> <li id="notice"> Type your search term below and hit search twitter</li> <li> <input type="text" id="keyword" name="keyword" placeholder="type your search term here"> </li> </ul> <a href="#" class="whiteButton submit">SEARCH TWITTER</a> </form> </div> </div> <div id="info"> <div class="toolbar"> <a href="#home" class="button leftButton flip">back</a> <h1>TWIGLE BY mambenanje</h1> </div> <div> <ul class='rounded'> <li>mambenanje is CEO of AfroVisioN Group - www.afrovisiongroup.com<br /> And TWIGLE is a tutorial he did for packtpub.com</li> <li>TWIGLE runs on iPhone and Android because its powered by jqtouch and it helps users search twitter from their internet connected handhelds</li> </ul> </div> </div> <div id="search_results"> <div class="toolbar"> <a href="#home" class="button leftButton flip">back</a> <h1 id="search_title">Search results</h1> </div> <div> <ul class="rounded" id="results"> </ul> </div> </div> </body> </html> [/code]
Thats the DOM structure for our application. Taking a close look at it, you will see three main div siblings of the <body> tag. These divs represent the pages our application will have and only one of these divs appears at a time in a jQTouch application. Note the toolbar class that is called inside each of those divs to represent the app view’s toolbar(title bar + menu) on every given page.
The <ul classs=’rounded’> is also needed to represent rounded listed items typical for iPhone applications.
So in summary our application has three pages which would be home, info and search_results.
Lets explain the DOM for every page:
Home:
[code] <div id="home"> <div class="toolbar"> <h1>TWIGLE</h1> <a href="#info" class="button leftButton flip">Info</a> <!-- <a href="#search_results" class="button add slideup">+</a> --> </div> <form id="search"> <ul class="rounded"> <li id="notice"> Type your search term below and hit search twitter</li> <li> <input type="text" id="keyword" name="keyword" placeholder="type your search term here"> </li> </ul> <a href="#" class="whiteButton submit">SEARCH TWITTER</a> </form> </div> </div> [/code]
The home page has a toolbar that contains the TWIGLE heading, along with a jQTouch button that is left aligned and when clicked, flips to the next page which is Info. The other button which leads to the search_results page is commented out using html comments. Its there to show that you can add more buttons to the toolbar.
Next is the form which has the id:search. This is how jQTouch works with forms with no action or method. The form submission is done via javascript which will be explained later.
The rest is instruction and the keyword input field. Look closely at the search twitter button. Its not a typical input button, but an anchor tag styled with jQTouch theme classes that tells jQTouch this is a white button. It is responsible for initiating the form submission.
The home page is the most important page in this application as it contains the form and like every home page it is also the welcome page of the application.
The Info Page:
[code] <div id="info"> <div class="toolbar"> <a href="#home" class="button leftButton flip">back</a> <h1>TWIGLE BY mambenanje</h1> </div> <div> <ul class='rounded'> <li>mambenanje is CEO of AfroVisioN Group - www.afrovisiongroup.com<br /> And TWIGLE is a tutorial he did for packtpub.com</li> <li>TWIGLE runs on iPhone and Android because its powered by jqtouch and it helps users search twitter from their internet connected handhelds</li> </ul> </div> </div> [/code]
Its a tradition in software development to always have an about page for the software and iPhone/Android apps are no exception. The info page was created to give users of the twigle application an idea how this application came about. Closely look at the toolbar. It contains a button that leads to the home page and is styled to appear like a button. It flips to the home page when clicked.
The rest is just literature that is presented in rounded lists.
