It’s been about a month since my last update, well I have some fun treats for everyone this time.  Let’s enter the world of mobile & touch devices.  Over the past month I’ve been working on some touch devices and have released a couple scripts to accelerate development on such devices.

There are a few things to keep in mind:

• Touch events are treated as the same event for each touch.
• Touch events do not coincide with mouse events, except on mobile devices.
• Currently, no stable release of a desktop browser supports touch events.
• IE10 will not support touch events as standardized by W3C.  (read more)

Well, now that you know [some] of what you’d be dealing with, you may understand why multi-touch platforms could be potentially cumbersome.  Web pages have been designed with one “pointer”, the mouse, in mind.  With one pointer you don’t have to manage touch events around multiple pointer inputs – so what happens when you start porting drag & drop code to multi-touch interfaces?  You get interference from other pointers.

Solution #1: jqTouchEvents

Well, I’ve got a simple solution for all of this called jqTouchEvents.  jqTouchEvents is a jQuery library designed to accelerate development of multitouch applications by allowing touch events to take exclusive control of an interacting element.  What does this mean?  You can prevent elements from responding to more than one touch event at a time.

Here’s a drag & drop example:

$(document).ready(function(){
	var startPoint, startPosition;
	var $dragElement = $('.dragElement');
 
	var processMove = function(touch) {		
		$dragElement.css({
			marginLeft: (touch.pageX - startPoint.pageX) + startPosition.left,
			marginTop: (touch.pageY - startPoint.pageY) + startPosition.top
		});
	}
 
	$dragElement.exclusiveTouch({
		anyEl: true, // Invoke move and end for the touch holding the element exclusively regardless of the target
		start: function(touch) {
			// Grab starting touch point
			startPoint = {pageX: touch.pageX, pageY: touch.pageY};
 
			// Grab current position of element
			startPosition = $dragElement.offset();
		},
		move: processMove,
		end: processMove // Call again when touch ends, for precision
	});
});

Solution #2: clickTouch.js

This is an easy one, if you want the mouse to act like a touch input, I’ve create a script for that called clickTouch.js.  It only needs to be included in your project and initialized.  You can also pass the boolean “true” if you wish to block all mouse events and only invoke touch events from the mouse.

Usage:

$(document).ready(function(){
	clickTouch.init(true);
});

Stay tuned, I’ll have more coming soon…

The Loader component in ExtJS 4 is great, but there’s a few quirks.  I thought I’d share for anyone else who may be running into issues similar to what I encountered.

Tip #1: Fix “disappearing” breakpoints.

Just because Ext disabled sends and extra parameter (“disableCachingParam” or “_dc”) to prevent caching, just about every browser loses breakpoints on page refresh. You might also want to install some cache clearing tools for your browser too, I could not get my scripts to clear from cache with just a refresh. (even hard refresh wont do)

Ext.Loader.setConfig({
	disableCaching: true
});

Tip #2: Don’t forget to define!

Be sure to define a class for each script you load. I’ve found not doing so can cause Ext to lock up on occassion. It won’t throw an error and it won’t freeze the browser, it will just stop running certain parts of code. This is especially good to know if you wish to auto-load oddly named overrides.

Tip #3: Test your code by auto-loading.

Auto-loading will always create excess http requests over loading one condensed script, but you can still use it for testing code structure. If your code isn’t structured (namespaced) properly it can still work perfectly when included, but will fail to auto-load. Just by testing your code with auto-loading, you can verify all file names and class definitions are correct.

Note: This post was sitting in my drafts awaiting additions for some time, not sure of anything to add, so *post*.

So the site was down for a long time and almost all worthy posts are lost.  The ironic thing is, they are lost in the database but still in cache.
I guess next step is to restore them…oh what fun that will be.

Update: Forget that, starting over fresh.