May 15, 2010

Blackberry Template Added to QuickConnectFamily

Posted in Blackberry development tagged , , , , , , at 10:38 pm by tetontech

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

Posted in Uncategorized tagged , , , , , , at 6:30 pm by tetontech

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

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.

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.

September 24, 2009

QuickConnectiPhone 1.6 Beta 1 is now available

Posted in iPhone development tagged , , , , , , , , , , , , , at 9:42 pm by tetontech

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

Posted in Uncategorized tagged , , , , , , , , , , , , at 6:24 pm by tetontech

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

Posted in iPhone development tagged , , , , , , , , at 6:09 am by tetontech

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

Posted in iPhone development tagged , , , , , , , , , , , , , at 9:03 pm by tetontech

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 a pie chart.

Showing the bar chart after the bar button has been selected

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

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

Posted in iPhone development tagged , , , , , , , , , , , , , , , , , , , at 11:37 pm by tetontech

QCiPhone version 1.1.3 includes the following changes.

  1. Example applications updated to 1.1.3
  2. apostrophes in the data of native databases now handled correctly.
  3. 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.
  4. 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

Posted in iPhone development tagged , , , , , , , , , , , , , at 10:51 pm by tetontech

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.

Follow

Get every new post delivered to your Inbox.

Join 307 other followers

%d bloggers like this: