March 26, 2010

Using HTML Links to Trigger Activity in Hybrid Applications

Posted in Android Development, Blackberry development, iPhone development, mac development tagged , , , , , , , , , , , at 5:28 pm by tetontech

For those of you who are wanting to use <a> link tags to trigger behavior I have put together an example of how to make these work.

The main problem when you want to use a link rather than a button, div, image, or some other HTML element is to stop the standard behavior of loading the new page.  This is readily accomplished using QuickConnect since the framework includes a method with the signature ‘stopDefault(event)’.

Any time you call this method the default behavior of any type of event whether it be load a page, scroll, etc. is not executed.  The code behind this method is very strait forward as you can see here.

//stop an event from doing its’ default behavior

function stopDefault(event){

if(event){

event.preventDefault();

}

}

The fully working QuickConnect example code is seen below.  This example will also be included in the next beta download and the first QC v1.6 release.  This example is built off of the ViewSwapping example and includes an addition of how to interact with the in-app map QuickConnect behavior.  Because of this the index.html file code is very similar to that seen in my previous post.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>

<html>

<head>

<title>QCXcodeTemplate</title>

<base href=“mobile/”>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<meta name=“viewport” content=“width=device-width, minimum-scale=1.0, maximum-scale=1.6”>

<meta name=“apple-mobile-web-app-capable” content=“YES”>

<link rel=“stylesheet” href=“main.css”>

<script type=“text/javascript” src=“Parts/parts.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“../QCJSLib/setupQC.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“main.js” charset=“utf-8”></script>

</head>

<body onload=“load();”>

<div id=‘view1’ class=‘view’>

<a href=“” onclick=‘showView(2)’ >Show View 2</a>

<p>Here is some text for display in View 1.</p>

</div>

<div id=‘view2’ class=‘view’ style=‘background-color:lightgreen;’>

<a href=“” onclick=‘showView(1)’ >Show View 1</a>

<p>Here is some text for display in View 2.</p>

</div>

<a href=“” onclick=‘triggerShowMap()’>Show Map</a>

</body>

</html>

The main difference shown here is that the buttons have been replaced by link (anchor) tags.  Notice that the src attribute is set to an empty string.  It can be set to anything but what ever it is set to is ignored because of a call to the stopDefault method described above.

Additionally I have included a link that activates the in-app map behavior.  This new map activation link is the last element shown in the body tag.

Since the CSS hasn’t changed between this example and the previous one I will not provide it again.  You can see it in my previous post.

The Javascript is very similar.  As you can see here the only difference between the ShowView example code and the UsingLinksAsTriggers is the inclusion of a call to the stopDefault method.

function load()

{

showView(1);

}

var currentView = null;

function showView(viewNumber){

//stop the loading of the new page since this is triggered by a link

stopDefault(window.event);

var nextView = document.getElementById(‘view’+viewNumber);

//if there is a view to change to

if(nextView){

//if at least one view has been displayed

if(currentView){

currentView.style.zIndex = 0;

currentView.style.opacity = 0;

}

nextView.style.zIndex = 10;

nextView.style.opacity = 1.0

//reset currentView

currentView = nextView;

}

}

The method for showing a map inside your application, triggerShowMap, is much like the method in the ShowMap example.  The difference is once again the addition of the call to stopDefault.

function triggerShowMap(event)

{

//stop the loading of the new page since this is triggered by a link

stopDefault(window.event);

//a location consists of a latitude, a longitude, and a description

var locationsArray = new Array();

var rexburg = new Array();

rexburg.push(43.82211);

rexburg.push(-111.76860);

rexburg.push(“County Court House”);

locationsArray.push(rexburg);

var wyoming = new Array();

wyoming.push(42.86);

wyoming.push(-109.45);

wyoming.push(“Wyoming Place”);

locationsArray.push(wyoming);

var wilderness = new Array();

wilderness.push(45.35);

wilderness.push(-115);

wilderness.push(“River of No Return Wilderness”);

locationsArray.push(wilderness);

var sandwichShop = new Array();

sandwichShop.push(42.86);

sandwichShop.push(-112.45);

sandwichShop.push(“Somewhere Sandwiches”);

locationsArray.push(sandwichShop);

/*

*  possible map types are standard, satelite, hybrid

*  The showMap method call is part of the QuickConnect Framework.

*  It is not a standard call

*/

var showDeviceLocation = true;

showMap(locationsArray, showDeviceLocation, ‘standard’);

}

The examples shown here don’t use the QuickConnect mappings and stacks but the same call to stopDefault would need to be made if you were calling the standard ‘handleRequest’ method.  I usually put the stopDefault call in the first control function executed for the given command.

Hopefully this clears up how to use a link within hybrid applications.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: