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.

Advertisement

March 25, 2010

Swapping View Divs

Posted in Android Development, Blackberry development, iPhone development, misc tagged , , , , , , , , at 10:44 pm by tetontech

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>

Nothing special in this HTML code.  Notice the onclick handler ‘showView’.  We’ll look at that in a minute, but first lets look at the CSS for the divs.
Here is the CSS from main.css

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;

}

You can see some very standard CSS in the view class that is applied to each of the view divs.  The only item that is different is the HTML 5 transition element.  It states that every time the opacity is changed by some Javascript call that the opacity change should be applied over one second and that the change should change consistently.
There are other transition types available other than linear such as ease-in, ease-out, ease-in-out, etc. but we will stick with linear for now.
Notice that the opacity of all of the divs is set to zero initially.  This means that all of the divs will be transparent when the application starts.  Also notice that the z-index of the divs are all set to zero.  Zero is the default value but this is added for clarity in the CSS.
The Javascript is very small.  When doing fading we need to track the current view so that we can cause it to fade out while the new view fades in.  This is why the currentView global variable is created and used.

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;

}

}

In the showView method  we change the opacity.  This triggers the transition defined in the CSS.  The zIndex is also changed.  If the zIndecies of the divs being switched are not changed then the transparent div can end up still being on top of the opaque div.  If this is the case then the touches or clicks will not be registered by the visible div.
That’s it.  No more code needed.  That is a lot less code than Apple generates in Dashcode.
Example 2 pushes divs over each other and then pops them off.  It does this by moving the divs using CSS 5 abilities.
The HTML for this example is very similar but contains 4 divs.  The first div is a container I’m calling ‘stack’ and holds a ‘stack’ of the divs that are used as view divs.  The other three divs are view divs.  I created three instead of two divs to make it easier to see how you could use this functionality.

<!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>

The CSS is also very similar to the previous example.  The major difference is that I have defined the width and height of the view and stack divs.  This allows me to move the view divs outside the viewable portion of the stack div.  Thus it appears that they disappear when they move.

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;

}

Notice that the transition is now activated when the left CSS value is changed.
The JavaScript is also very similar to what you saw before.  Instead of Changing the opacity and the z-index all that has to be changed is the left value.  This triggers the CSS 5 transition and the div moves to the new location in .5 seconds.

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’;

}

You can see that it doesn’t take much to do some very interesting stuff using the HTML 5 transitions.
I hope this helps those who want to improve their user interfaces.

March 16, 2010

Cloud Based File Sharing?

Posted in Uncategorized at 9:08 pm by tetontech

Recently Kadoo approached me to see if an API inclusion of connectivity to their services could be included in the QuickConnect framework.

From speaking with them and looking at their web site http://www.kadoo.com it looks like something of interest.  I’ll give a short description of what they do but checkout their site for more information.

Kadoo offers, among other things, the ability to upload files into a cloud based storage and then share them with others.  You get to decide if it should be shared with the world, if it is private, or you can also share it with a selected group of individuals.  It appears that the service is file type agnostic.

One of the nice things about Kadoo is that there are other services using their backend.  This means that if someone is already registered as a user on one of these other sites you can share with them without them registering with Kadoo.  From what I can tell, it would appear to you and the other user as if you were both registered with Kadoo.

It seems to me that this could be a good addition, especially for those of you considering iPad development, but I need feedback from you to gauge interest.

Please add a comment if you would like or not like this added to the framework.

March 13, 2010

Developing for Blackberry on the Mac

Posted in Blackberry development tagged , , , , , at 5:03 am by tetontech

After attempting to develop for Blackberry on the Mac in several ways I have finally come across a way that works.  Here is how you can get this to work.

  1. Download and install VirtualBox version 3.1.4 or greater.  The earlier versions do not work with the blackberry simulator.
  2. Install WinXP in VirtualBox.  This worked for me.  I have not tried Win7 yet but will in the near future.
  3. From within your Win installation download and install the blackberry JDE 5.0 not earlier versions.  Make sure you get the JDE not the eclipse plugin.

At this point you can use the JDE to develop, compile, and run in the blackberry simulator from within your Win installation.

There is another option.  I am compiling and creating the .cod Blackberry application file inside of Xcode.  I will soon be releasing a version of QuickConnect that has a Blackberry template based on what I am doing now.  At that point we should be able to create one application and run it on the iPhone, Android, Blackberry, and Palm WebOS.  In fact there will be one QuickConnect template that will build for all of these platforms in addition to templates for each individual platform.

After I compile the application and generate the .cod file in Xcode I then place the .cod file in a VirtualBox shared directory.   I can then launch the simulator directly by running the .bat file for the 9559 simulator called 9550.bat.  It is found in the Simulator directory of the JDE 5.0 installation directory.

With the simulator running I select file->Load Java Program and pick the .cod file from the shared directory.  Using the Blackberry simulator I then run the application.

March 1, 2010

QuickConnect used in Health Care Industry App

Posted in Uncategorized at 9:31 pm by tetontech

Concerro, a major health industry software provider, has just announced their latest application iRES-Q.  It is an iPhone app written using QuickConnect and the Enterprise Data Sync functionality.

Here are the URLs to the press releases.

http://res-q.com/press.html
http://www.concerro.com/news/pr.html

Many thanks to those involved on their end in funding the development and testing of sync.

%d bloggers like this: