Gotcha: Including Jquery mobile in the page will hide all page elements

If you are using phoneGap inside dreamweaver, and setup a mobile site, but don’t use Jquery library to make the UI, don’t forget to remove the CSS and JS references to the mobile library that dreamweaver puts there by default, because if you don’t, your document will not show any HTML at all, confusing the heck out of you for awhile…

mobile: cache offline apps and cache-manifest files

A manifest file indicates the browser what files are needed to run the app offline, so the browser will store them locally for when there is no internet connection.

Example, if you create demo.manifest and put it on your web root, and the content of the file is as below, the files listed will be set locally so the app can run when no internet connection available:

CACHE MANIFEST

index.html

logo.jpg

scripts/demo.js

styles/screen.css

The paths can be absolute or relative.

Then the manifest link should be added to your html document as follows:

<html manifest="demo.manifest">

This file must be served with a specific MIME type in order to be ok, here are the apache settings for it:
AddType text/cache-manifest .manifest

In addition to your apache settings, if you want to stop caching the actual “demo.manifest” file, you can do the following:

<Files offline.manifest>
ExpiresActive On
ExpiresDefault “access”
</Files>

 

You can also specify files that will always be fetch in the NETWORK section, and FALLBACK will indicate what to do if the networks is not available:

NETWORK:
logo.jpg
FALLBACK:
logo.jpg offline.jpg

Another Network / Fallback example:

NETWORK:
*
FALLBACK:
/ /offline.html

In this case, we indicate we want all the files to be pulled from the network, when the network is available, and if we have to fallback for the root file, we want to pull offline.html

mobile: SQL client side database storage

You hear it right: it is available on Safari on the iphone… Example here:

http://onsubject.com/mobile_examples/iphone_local_storage/

Users have 5MB default db size, after that the app will ask them if they want to increase it. Here’s an example on how to create one:

var shortName = ‘Kilo’; var version = ‘1.0’; var displayName = ‘Kilo’; var maxSize = 65536; db = openDatabase(shortName, version, displayName, maxSize); db.transaction( function(transaction) { transaction.executeSql( ‘CREATE TABLE IF NOT EXISTS entries ‘ + ‘ (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, ‘ + ‘ date DATE NOT NULL, food TEXT NOT NULL, ‘ + ‘ calories INTEGER NOT NULL );’ ); } );

On your Safari browser, you will be able to see it under: Settings→Safari→Databases, or in the desktop side: Develop→Show Web Inspector and then databases

Here’s an example of inserting records, with a callback function, and error handling:

db.transaction( function(transaction) { transaction.executeSql( ‘INSERT INTO entries (date, calories, food) VALUES (?, ?, ?);’, [date, calories, food], function(){ refreshEntries(); jQT.goBack(); }, errorHandler ); }

function errorHandler(transaction, error) {
    alert('Oops. Error was '+error.message+' (Code '+error.code+')');
    return true;
}

Example of deleting a row:

function deleteEntryById(id) {
    db.transaction(
        function(transaction) {
            transaction.executeSql('DELETE FROM entries WHERE id=?;', 
              [id], null, errorHandler);
        }
    );
}

mobile: client side local storage for Safari on the iphone

localStorage.setItem('age', 40); // Stores "age" js variable locally
var age = localStorage.getItem('age'); // Gets the value
localStorage.removeItem('age'); // Remove the item
localStorage.clear(); // Removes all local storage

Use sessionStorage instead if you just want to store it for as far as the window session is alive.

mobile: Dissecting a JQTouch app

http://onsubject.com/mobile_examples/JQTouch_example/

1) By default, it runs in full iphone screen mode, and adding an icon and styling the top nav bar is a breeze:

<script type=”text/javascript”> var jQT = $.jQTouch({ icon: ‘kilo.png’, statusBar: ‘black’ }); </script>

2) <ul class=”edgetoedge”> does the magic of creating the iphone tab-like system with the li’s

3) Notice how the href links point to the divs with the respective ids, when you click on the links, those divs show up

4) href=”#” usually means just go back to the prior panel where you were before. Class “toolbar” will do the magic of putting the header HTML for you:

<div> <h1>New Entry</h1> <a href=”#”>Cancel</a> </div>

5) Check how attributes like placeholder=”Food” Put “Food” as the default value in certain input fields

6) Notice how we can add the flip effect to a button just by adding a class: <a href=”#settings” class=”button flip”>Settings</a>

Other useful stuff about JQTouch:

jQT.goBack(); // Go back in history one panel

$(‘#settings’).bind(‘pageAnimationStart’, loadSettings); // Binds to the panel when page animation starts, calls function loadSettings in this case

Mobile: creating an icon for the iphone

When a user bookmark your web page, you can control the icon that will show on the iphone screen as the shortcut to your app as follows:

<link rel=”apple-touch-startup-image”
media=”(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)”
href=”iphone.png” />

<link rel=”apple-touch-startup-image”
media=”(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)”
href=”iphone4.png” />

<link rel=”apple-touch-startup-image”
media=”(max-device-width: 1024px) and (orientation: portrait)”
href=”ipad-portrait.png” />

<link rel=”apple-touch-startup-image”
media=”(max-device-width: 1024px) and (orientation: landscape)”
href=”ipad-landscape.png” />

Mobile: creating a simple ajax pattern for mobile pages

This is a really interesting and simple way to handle ajax request using a sort of “controller” sitting in between your page and the different pages that get served in your mobile app (see real example at: http://onsubject.com/mobile_examples/iphone_ajax/iphone.html)

1) A page with an empty container is served. The empty container is loaded via load(), based on the page that we are fetching from the server, plus an identifier #content so we only serve part of the response

2) The page to serve is parsed off the href

3) Load also gets a callback anonymous function, that reattach link click events to the HTML

4) Note the use of text-overflow: ellipsis; to avoid long titles distorting the UI