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.
SQLite bulk data update or insert
I just added SQLite bulk updates for in-browser databases (native databases coming soon) to the QuickConnect iPhone framework (1.6 beta 3). I did this by creating and adding to the framework an object called DBScript. It is transactionally safe. If one of your updates in the script fails all changes are rolled back.
It is also easy to use. The code below comes from the databaseDefinition.js file of the new BrowserDBScript dashcode example. In it a link to the database is established using the DataAccessObject. Then the DBScript object is created and a series of SQL statements are added to the script. Lastly, the script is executed. Notice that the script object works for both standard and prepared statements.
If you are using this after a data pull from a network resource or after querying the user for information to insert, make sure you use a prepared statement type call to avoid SQL insertion attacks.
/*
* An example of how to use the DBScript object to populate a database.
* This will be done as a single transaction and is transactionally safe.
* This means that all changes will be rolled back if any
* database error happens.
*/
//create or connect to the in-UIWebView database
var database = new DataAccessObject(“WelcomeExample”, “1.0″, “Welcome example”, 20);
//create the script object
var bulkInsertScript = new DBScript(database);
//add all statements to the script object
bulkInsertScript.addStatement(“CREATE TABLE IF NOT EXISTS names (id INTEGER UNIQUE, name TEXT)”);
bulkInsertScript.addStatement(“INSERT INTO names VALUES(1,’Bob’)”);
bulkInsertScript.addStatement(“INSERT INTO names VALUES(2,’Sue’)”);
//and example of using a prepared statement
bulkInsertScript.addStatement(“INSERT INTO names VALUES(?,?)”,[3,"Jose"]);
bulkInsertScript.addStatement(“INSERT INTO names VALUES(4,’Bjorn’)”);
bulkInsertScript.addStatement(“INSERT INTO names VALUES(5,’Jean’)”);
bulkInsertScript.addStatement(“INSERT INTO names VALUES(6,’Gustav’)”);
//execute all statements within a transaction
bulkInsertScript.executeSetDataScript();
August 28, 2009
HTML 5 Video and Audio in UIWebView and WebView
I have been playing with the video and audio tags in the UIWebView on the iPhone and WebView on the Mac. I tried them in the QT WebView as well on linux. I am pleased to announce that they work great! I have tried it with mp3, mp4, and wmv. All worked on all three platforms.
It looks like this is a good way to display videos for your users to play in your hybrid applications.
Let’s say you have a video called someCrazyMovie.mp4 that you want to display to your users. On the iPhone or the Mac put it in the Resources group of your Xcode project that uses a UIWebView. Point the UIWebView to a local html file, also in the resources file.
In this html file put the following code.
<video src=”someCrazyMovie.mp4>A movie description as an alt</video>
When you run your application you will see the first frame of the video used as a representational image. You can play it by clicking it. On the iPhone and iPod touch the movie player launches to play the movie.
The tag lets you size it, display or not display the video controls, etc.
The audio tag is used much the same way.
I’ll include an example for both the iPhone and the Mac in the 1.5.0 release of QuickConnectiPhone 1.5.0
March 5, 2009
Creating Line Graphs on the iPhone
I have finally been able to complete the line graphs(charts) portion of the Charting and Graphing QuickConnect library and am working on getting a final bug out of the Bar and Pie charts.
I plan on producing a video on how these are used and how to create them in your code but thought that a quick view of what is coming in V 1.5 beta 2 would be of interest.
I have put a few images here for you to see. The first is a line graph showing two separate data series being displayed. If you touch the data points, either directly or by moving your finger over them, the value and description of the point is displayed in the display area of the chart. You can also cycle through the values of a series by using the forward and backward arrows or by moving your finger across the color display bar.
A two series line chart
The next image is of the same data but drawn as a filled line chart.
A two data series filled line chart
If you touch any of the data points the series that contains that value is brought to the front as you can see in this next image.
A two series filled line chart showing the second series in front.
I have tried to make this as easy to use as I can. Here is the code to create the filled chart.
var fill = false;
var shadow = true;
lineDisplay.chart = new QCLineChart(document.getElementById(‘lineChartDisplay’), ‘Animals’, shadow, fill);
lineDisplay.chart.addSeries(‘Some Animals’,[['cats',15], ['hipos',2], ['fish',7], ['dogs',4]
, ['bears',20], ['mice',3], ['elephants',7], ['dogs',10], ['kangaroo',18]]);
lineDisplay.chart.addSeries(‘Other Animals’,[['gorillas',10], ['snakes',5], ['robins',3],['rats',4], ['moose',15], ['deer',14], ['tigers',0 ], ['jaguar',9], ['emu',9]]);
lineDisplay.chart.display();
To change it to a standard non-filled chart just change the fill variable to false.
