May 15, 2010
Blackberry Template Added to QuickConnectFamily
A template for development of Blackberry hybrid applications has been added to the QuickConnectFamily 1.6 beta 15. Instructions on how to install the Blackberry SDK, use the template, compile, and run your app in the Blackberry simulator can be found on the wiki.
Developing for Blackberry requires large amounts of RAM. It is suggested that you have 4 and preferably 8 Gig.
May 5, 2010
DHML, Firefox Strangeness
Among other things that I’ve been working on for the QuickConnectFamily 1.6 beta I have been creating the new QuickConnectFamily web site. The site, as it is designed now, accumulates information from this blog, the wiki, and the Google group.
One of the items I wanted to accumulate dynamically is the roadmap for each of the supported platforms. I wanted to do this in such a way that when a change to the roadmap was made in the wiki that it would automatically be seen in the new web site.
To do this I decided to apply DHTML techniques as I have in the past. So what I did was to make an AJAX call to the Web App Server running on the site host. The PHP code there made a call to the wiki page and returned the code for the page to the browser. The browser then created a temporary div and inserted the HTML string it got back.
I have done this before with no issues but this time the link tags in the head became active. This caused my pages CSS to be modified when run inside of Firefox. The solution was to remove the link nodes. Then all was displayed as it should be.
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.
March 25, 2010
Swapping View Divs
Let’s say you want to display multiple information views in your app. I’ll describe here how to to this with very few lines of code using HTML 5 principles. These examples can also be found in the latest QuickConnectFamily download as hybrid applications.
There will be two examples. The first is fading between views. The second is sliding views over the top of others. These examples work for both hybrid and web apps.
When a hybrid app is created it is often the case that you need to display several different views with different data being displayed. This may be due to some sort of ‘drill down’ behavior you need in your app or for some other reason such as a display of some sort of a login or configuration view.
You could use Dashcode and it’s Stack part but that has a lot of overhead in both code size and execution speed or you could do something like is described here.
The first example shows how to display multiple divs and then fade from one div to another without any change of position for the divs.
We start by adding the divs and navigation buttons to the HTML.
<!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’>
<input type=‘button’ value=‘Show View 2′ onclick=‘showView(2)’ />
<p>Here is some text for display in View 1.</p>
</div>
<div id=‘view2′ class=‘view’ style=‘background-color:lightgreen;’>
<input type=‘button’ value=‘Show View 1′ onclick=‘showView(1)’/>
<p>Here is some text for display in View 2.</p>
</div>
</body>
</html>
body {
margin: 0px;
min-height: 356px;
font-family: Helvetica;
background-repeat: repeat;
}
.view{
position:absolute;
top: 50px;
left: 20px;
background-color:lightBlue;
z-index:0;
opacity:0;
-webkit-transition: opacity 1s linear;
}
function load()
{
showView(1);
}
var currentView = null;
function showView(viewNumber){
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;
}
}
<!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 class=“stack”>
<div id=‘view1′ class=‘view’>
<input type=‘button’ value=‘Show View 2′ onclick=‘slideIn(2)’ />
<br/>
<input type=‘button’ value=‘Show View 3′ onclick=‘slideIn(3)’ />
<p>This is View 1.</p>
</div>
<div id=‘view2′ class=‘view’ style=‘background-color:lightgreen;’>
<input type=‘button’ value=‘Done’ onclick=‘slideOff()’/>
<p>This is View 2.</p>
</div>
<div id=‘view3′ class=‘view’ style=‘background-color:lightyellow;’>
<input type=‘button’ value=‘Done’ onclick=‘slideOff()’/>
<p>This is View 2.</p>
</div>
</div>
</body>
</html>
body {
margin: 0px;
min-height: 356px;
font-family: Helvetica;
background-repeat: repeat;
}
.stack{
position:absolute;
top: 50px;
left: 20px;
width: 200px;
height:200px;
border: solid 1px black;
overflow: hidden;
}
.view{
position:absolute;
left: 320px;
width:100%;
height: 100%;
background-color:lightBlue;
-webkit-transition: left .5s linear;
}
function load()
{
slideIn(1);
}
var viewStack = new Array();
function slideIn(viewNumber){
var nextView = document.getElementById(‘view’+viewNumber);
//if there is a view to change to
if(nextView){
nextView.style.zIndex = viewStack.length;
nextView.style.left = ’0px’;
//add the displayed view to the stack
viewStack.push(nextView);
}
}
function slideOff(){
var currentView = viewStack.pop();
currentView.style.left = ’320px’;
}
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.
May 1, 2009
Scrolling individual elements in hybrid or web applications
A request has been made to show how individual elements in a hybrid or web application can be scrolled on the iPhone. I have included some code below that has all of the JavaScript requried to accomplish this. It comes from the QCUtilities.js file of QuickConnect iPhone 1.5 release that will be posted within a couple of days.
Because it is from QuickConnect it includes the ability to add request handling for when the user touches the screen in preparation for scrolling, as well as each time the finger is moved and when the scroll action is complete. If you want to use this code outside of QuickConnect then remove everything regarding the startDragCmd, dragCmd, and dropCmd parameters.
If you want to use this within an older version of QuickConnectiPhone place the code in your version of the QCUtilities.js file and it works.
This approach uses the CSS transitions, proposed for HTML 5, available in WebKit instead of the standard JavaScript approach since that approach is much to slow for both the iPhone and iPod touch devices.
To make an element scrollable call the makeScrollable function and pass the element you want to be scrollable as the first parameter. If you want the element to not be scrollable below its original y axis location pass true as the second parameter of makeScrollable. Here is the onload event code from the scrollingElements example of the upcoming QuickConnectiPhone 1.5 release that sets three views in a view stack to be scrollable.
Making elements scrollable
function load()
{
dashcode.setupParts();
makeScrollable(document.getElementById(‘view1′));
makeScrollable(document.getElementById(‘view2′));
makeScrollable(document.getElementById(‘view3′));
}
Scrolling Functions to Add
/*
* Pass any DOM element to this function to make it scroll
* The *Cmd parameters are optional commands to be handled for
* scroll events.
*/
function makeScrollable(anElement, scrollBothUpAndDown, startDragCmd, dragCmd, dropCmd){
anElement.ontouchstart = prepareScroll;
anElement.ontouchmove = scrollIt;
anElement.ontouchend = scrollDone;
anElement.scrollBothUpAndDown = scrollBothUpAndDown;
//do not set or reset the commands if none are passed in.
if(startDragCmd){
anElement.startDragCmd = startDragCmd;
}
if(dragCmd){
anElement.dragCmd = dragCmd;
}
if(dropCmd){
anElement.dropCmd = dropCmd;
}
}
/*
* This function is triggered each time an ontouchmove event is
* fired for an element that has been passed to makeDraggable.
*/
function scrollIt(event)
{
stopDefault(event);
this.y = event.targetTouches[0].clientY – this.offsetY;
if(this.lastY){
this.y += this.lastY;
}
if(this.scrollBothUpAndDown || this.y < 0){
this.style.webkitTransform = ‘translate(0px, ‘ + this.y + ‘px)’;
}
else if(this.y >= 0){
this.style.webkitTransform = ‘translate(0px, 0px)’;
}
if(this.dragCmd){
var params = new Array();
params.push(event);
params.push(this);
handleRequest(this.dragCmd, params);
}
}
/*
* This function is triggered every time an ontouchstart event is
* fired for an element that has been passed to makeDraggable.
*/
function prepareScroll(event)
{
stopDefault(event);
//store off any timing and duration set anywhere else in the app
//and turn them off so they don’t interfere with the scrolling
this.timing = this.style.webkitTransitionTimingFunction;
this.style.webkitTransitionTimingFunction = null;
this.duration = this.style.webkitTransitionDuration;
this.style.webkitTransitionDuration = null;
this.touches = event.targetTouches;
this.offsetY = event.targetTouches[0].clientY;
if(this.startDragCmd){
var params = new Array();
params.push(event);
params.push(this);
handleRequest(this.startDragCmd, params);
}
}
/*
* This function is triggered every time an ontouchend event is
* fired for an element that has been passed to makeDraggable.
*/
function scrollDone(event)
{
//this.ontouchmove = null;
//this.ontouchend = null;
if(this.scrollBothUpAndDown || this.y < 0){
this.lastY = this.y;
}
else{
this.lastY = 0;
}
//restore any timing or duration that was set anywhere else in the app
this.style.webkitTransitionTimingFunction = this.timing;
this.style.webkitTransitionDuration = this.duration;
if(this.dropCmd){
var params = new Array();
params.push(event);
params.push(this);
handleRequest(this.dropCmd, params);
}
}
March 9, 2009
Genealogy QuickConnectiPhone Example
The people at FamilySearch asked me to create a video of a simple iPhone application accessing their web service to show at their upcoming conference. I have stuck the results on the QuickConnect wiki.
The wiki page that has a short explanation and the link to the video is here.
February 21, 2009
Navigation bars in hybrid applications
I have had a couple of questions regarding if it is possible to have navigation bars, at the top or bottom, in a hybrid application. The answer is an emphatic yes. In fact it is dead simple.
I have been working on a charting library QuickConnect that is soon to be released in QCiPhone 1.5 Beta 2. The example application uses a navigation/tool bar at the bottom of the screen to change the chart being displayed. The first picture below shows the application with a pie chart displayed. The second image shows the same application after the bar button has been selected. I am showing these running in Mobile Safari in the Dashcode emulator so Safari’s standard bar is below the button bar. This example also works when put into a QuickConnectiPhone Xcode project. There Safari’s bar would not exist.
Showing a pie chart.
Showing the bar chart after the bar button has been selected
The bar at the bottom is the same element in both pictures. The way to do this is to make the stack layout part shorter than the screen and place the bar at the top or the bottom. If you want the default navigation bar at the top of the screen like the Mail app use Dashcode’s Browser part rather than it’s Stack Layout part and the navigation bar will be created and handled for you.
The image below shows the development screen for the charting example app. The upper-left of the picture shows box3, the navigation/tool bar, with its’ contained buttons. It also shows the stackLayout with its’ contained views. Notice that box3 is not a sub-component of any of the contained views.
In the design portion of the Dashcode screen notice that box3 is below the stackLayout object. It will stay there as the views update.
The design screen for the example application showing the stack layout part and the box that is the navigation/tool bar at the bottom
I hope this helps you see that there is little that you can’t do in a hybrid application user interface that you can do in UI builder.
February 7, 2009
QuickConnectiPhone 1.1.3 now available
QCiPhone version 1.1.3 includes the following changes.
- Example applications updated to 1.1.3
- apostrophes in the data of native databases now handled correctly.
- a stopBounce() function added in the JavaScript. It stops the UIWebView from bouncing when the interface fits in the view. Thanks
to Aarpn for the initial code. I’ll work on getting it to be more
flexible. - A Default.png file added so you can replace it with your own.
If you are interested, QCiPhone 1.5 Beta 1 is now available. The announcement is here
June 30, 2008
QuickConnectiPhone framework beta 2
A new version of QuickConnectiPhone is now available. It includes the ability to push Core Location and Acceleration information up into the JavaScript running in your UIWebView. It is open-source and free. You can get it from sourceForge. If you checkout my Blogroll to the lower right of this page you will find a link to the site. Or you could go directly here.
As with Beta 1 it allows you to write your application in Dashcode using HTML, JavaScript, and CSS and then install it and run it on your device. You application will then run without any network connections of any type.
It also lets you store persistent data in SQLite using the new JavaScript API to SQLite. An easy to use wrapper is provided for you within the framework. If you do choose to get data from a web server the framework provides you with an easy to use wrapper for AJAX calls that has the same API as the SQLite wrapper.
Since you are writting your application to run inside of the UIWebView can also use the new CSS transitions, animations, etc. it makes available.
Give it a try and give me some feedback.
