May 27, 2009

QuickConnectiPhone download now made smaller

Posted in iPhone development, mac development tagged , , , , , at 4:23 pm by tetontech

I have reposted the QuickConnectiPhone Beta 8 installer on sourceForge.  I was able to reduce the size of the movies included in the Mac example dramatically and now the download is a reasonable size.

By the way, the Mac port will now play and loop any movie of any type your QuickTime player will handle.

Advertisements

May 26, 2009

QuickConnectiPhone 1.5 Beta 8 is now available!

Posted in iPhone development, mac development tagged , , , , , at 7:38 pm by tetontech

I have merged the installers for QCiPhone, QCMac, and QCPHP.  They are now part of the QCiPhone download from sourceForge.

You can now make a Bonjour service on your Mac and connect to it from your iPhone or iPod touch or switch it around and publish the service on your iPhone or iPod touch and connect to it from your Mac.

The download is larger due to the videos included in the Mac Device Catalog example.  I’ll try to pare this down for the final release.

The Mac port has begun to catchup with the iPhone version.

After 1.5 ships I’ll start shipping more of the OS 3.0 functionallity as 1.5.x betas.

The changes for this beta include:

iPhone 1.5 beta 8:

  1. Fixed stateSaving Example
  2. Simplified and fixed the asynchronous call handling code so that multiple asynchronous calls can be made in any order and intermingled with synchronous calls.
  3. Created an example of using native footers.
  4. Added an image display to show the default.png file if one exists to ‘hide’ the web view as it loads the JavaScript, CSS, and HTML files.
  5. Added a function to allow you to programatically turn copy-paste on and off.
  6. I still need to create an example of and the code for native headers and navigation bars.

Mac 1.0 beta 2:

  1. Simplified and fixed the asynchronous call handling code so that multiple asynchronous calls can be made in any order and intermingled with synchronous calls.
  2. Added recording and playing of audio.
  3. Added recording and playing of video.
  4. Added Shipped audio and video playing.
  5. Added Looping of audio and video.
  6. Added Bonjour networking (Client and Server)
  7. Added Error Logging and debug messages
  8. Fixed database interaction for both native and in browser databases

May 14, 2009

UIWebView and Native Footers

Posted in iPhone development tagged , , , , , , , , , , , at 7:18 pm by tetontech

At the request of a couple of QuickConnectiPhone users I have been playing around with a way to combine native footers and/or headers with the UIWebView and specifically the QuickConnectiPhone framework.

I am pleased to say that I have something that should make this easy.  As of the next release of QCiPhone you can create native, Objective-C based footers and buttons for the footers.  You can also hide and display them and the UIWebView containing your QCiPhone application will be resized so that the footer doesn’t cover any of your display.  When you hide the footer the UIWebView expands to fill the space made available by not displaying the footer.

Here is a snapshot of the QCiPhone example app without the footer displayed.

The native footer example application before the Show Footer button is pressed.

The native footer example application before the Show Footer button is pressed.

Here is the native footer being displayed.

The example application after the Show Footer button is pressed.

The example application after the Show Footer button is pressed.

The button is an HTML button in the UIWebView and JavaScript calls are made to show and hide the native footer.

Here is the code from the JavaScript onload event handler that creates the native footer and buttons and then assigns the buttons to the footer for display.  Notice that the last button created uses an image instead of text for it’s cue to the user.

footer = new QCNativeFooter(‘mainFooter’, ‘black’, false);

//examples of using full JavaScript function calls with staticly defined parameters

var lineButton = new QCNativeButton(‘line’, ‘Line’, ‘displayName(“Line”)’, false);

var pieButton = new QCNativeButton(‘pie’, ‘Pie’, ‘displayName(“Pie”)’, false);

var barButton = new QCNativeButton(‘bar’, ‘Bar’, ‘displayName()’, false);

var imageButton = new QCNativeButton(‘image’, ‘puzzleIcon.png’, ‘displayName(“Image Button”)’,true);

footer.setButtons([lineButton, barButton, pieButton, imageButton]);

The QCNativeFooter constructor is defined as in this following line of code.

function QCNativeFooter(uniqueId, color, translucentFlag)

It takes three parameters

  1. A unique identifier for the footer.  You can have as many footers as you wish.
  2. The color of the desired footer as a string.  The iPhone options are ‘black’ and ‘standard’.  Standard is blue.
  3. A boolean flag indicating if the footer should be semi-transparent.

The code to display the footer is seen here.

footer.show();

It is all that is needed to display the footer and automatically resize the display of your application.  To hide the footer simply call

footer.hide();

To change buttons being displayed all you need to do is call the QCNativeFooter object’s setButtons method and pass in an array of buttons that you want to replace the old ones.  The first code snippet in this posting has an example of this call.

These methods and objects are just facades for calls to Objective-C using the QCiPhone framework.  A complete description of all of the Objective-C executed for these calls would be to large for a blog posting.

This example application, as well as a couple of others, will be added to the next version of QCiPhone.  The framework’s template will also be modified to contain all of the Objective-C and JavaScript to allow you to make the calls described in this posting.

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

}

}

%d bloggers like this: