March 26, 2010
Using HTML Links to Trigger Activity in Hybrid Applications
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.
October 31, 2009
QuickConnectiPhone 1.6 beta 3 now available
QCiPhone 1.6 beta 3 includes:
- All new Xcode apps created using the 1.6 beta 2 or later Xcode template will auto-update to a new version of QCiPhone when you run the QCFamily installer
- A fix for the permission build error in beta 2
- In application maps. This feature allows you to drop any number of pins as well as show the current location of the device.
- A new object, DBScript, that allows you to do bulk updates to the SQLite database in a transactionally safe fashion (in-browser only for now. Will work for native databases in the next beta.
Examples for both the in-app maps (MapExample) and DBScript (BrowserDBScript) exist in the iPhone Examples directory of the download.
The post just previous to this one shows how to use the DBScript object.
September 24, 2009
QuickConnectiPhone 1.6 Beta 1 is now available
QCiPhone 1.6 beta 1 is now available from the sourceForge repository. It includes access to the Contacts API via JavaScript as well as a new way of doing GPS locations and tracking. There are two new examples to show how to use the new functionality, GPSExample and Contacts Example.
The old in-application map functionality has been commented out in anticipation of Beta 2 which will include the access to the new 3.0 Map API and in-application email.
Push from within JavaScript and receiving pushes in JavaScript planned for Beta 3.
