Category Archives: code

Single Page Web Applications Book Review

Single Page Web Applications
JavaScript end-to-end
Michael S. Mikowski and Josh C. Powell

Set those frameworks aside – for the moment – and roll up your sleeves, Single Page Web Applications, by Michael Mikowksi and Josh Powell is the equivalent of eating your spinach. With nothing but javascript, jQuery and a couple plug-ins, and a database, they take you step by step through the process of building a out a javascript end-to-end single page chat application.

Coming from a class based coding language, I had this down in spades. But how to build complex apps in a proto-type functional coding language like Javascript without diving into a world a of pain?

The authors employ a repeating MVC pattern for architecting their code. If you’ve ever built anything of complexity – nothing new there. But if not, this is a good place to grok that concept.

But it’s the particulars of Javascript that of interest of course. Before they dive in the deep end – there are some javascript uniqueness to to tackle. I think I can say, that after reading this book, I finally, truly get closure.

In this book you learn to build feature modules – with well defined APIs and strong isolation. They start simple and add complexity and are careful to explain their reasoning all they way through.

Only once in this book did a hit a wall and that was setting up the MongoDb database on a mac.  I posted my issue on the discussion forum and got a quick response from the author.

I’m re-reading this book so that I can truly grok the concepts and techniques – and thereby sketch out and build well defined and scoped feature modules of any sort – a day planner, a slide show, a video player – that can be popped into the larger application with minimum fuss.

Buy this book. Read it – read it again – and jump on the discussion forum.

 

Javascript/CSS animation test – Oscillating dot animation

A test using greensock GASP and jquery – with:

Note that the animation plays  choppy on older mobile devices when the alpha is tweened.

var MYAPP={};
$(document).ready(function() {
	MYAPP._body = $('body');
	for (var i=0; i<100; i++) {
		initSQ(i);
	}
	$(window).on('resize', onResize);
	//get query string value
	if ($.url().param("tweenAlpha") == 'true') {
		MYAPP.tweenAlpha=true;
	} else {
		MYAPP.tweenAlpha=false;
	}
	onResize();
});
function onResize(){
	var origX = $(document).width()/2;
	var origY = $(document).height()/2;
	if (MYAPP.tweenAlpha) {
		TweenMax.set($("div.bip") , {x:origX, y:origY, opacity:0});
	} else {
		TweenMax.set($("div.bip") , {x:origX, y:origY});
	}
	$("div.bip").each(function(index, element) {
	   if (origX < origY) {
		   rad = origX/2;
	   } else {
		   rad = origY/2;
	   }
		var ang = Math.random()*2*Math.PI;
		var x2 = (rad)*Math.sin(ang) +  origX;
		var y2 = (rad)*Math.cos(ang)  +  origY;
		TweenMax.to(element , 2, {x:x2, y:y2, opacity:1, delay: index*.01, repeat:-1, yoyo:true});
    });
}
function initSQ(i){
	MYAPP._body.append("
"); }

 

Cloning a MouseEvent

I’ve seen the question of how to dispatch a MouseEvent through code, but i’ve never seen it answered. I figured it out so i’ll share it with your here.

Let’s say you have a BallSprite class and a RectSprite class (BallSprite being a graphic of a ball…..etc). And i want a MouseEvent.Click on an instance of BallSprite to trigger a MouseEvent.Click on an instance of RectSprite

Give the instance of BallSprite access to the instance of RectSprite. Note how i dispatch a clone of the click on the BallSprite instance. Now any MouseEvent.Click listeners on RectSprite instance will be triggered.

[cc lang=”actionscript”]
package myClasses
{
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.MouseEvent;
public class Ball extends Sprite
{

private var _rect:Rect;
public function Ball(dispObj:DisplayObject)
{
_rect = dispObj:DisplayObject;
this.addEventListener(MouseEvent.CLICK,clickHandler);
// add a graphic to our Ball instance
this.graphics.beginFill(0x00ff);
this.graphics.drawCircle(50,50,50);
this.graphics.endFill();
}

private function clickHandler(e:MouseEvent):void {
trace(‘ball click, now rect dispatches click’);
_rect.dispatchEvent(e.clone());
}
}
}

[/cc]

Random Tile class

Here’s an Actionscript 3 class I wrote the places tiles on a grid – either randomly or in order, with no overlap, and allows for a tile free zone.

You can see it in action here.
[cc lang=”actionscript3″ nowrap=”true” width=”550″]
/**
* coding by mike Connor – flashDeveloper@rocketnumber9.org
*
* randomly places tiles on a grid so that o not overlap and do not fall in dead tile zone
*/
package utils
{
import flash.display.DisplayObject;

public class RandomTile
{
private var numOfRows:uint;
private var numOfCols:uint;
private var rowArray:Array;
private var tileArray:Array;
private var unplacedArray:Array = new Array();
private var _gridW:uint;
private var _gridH:uint;
private var _maginTop:uint;
private var _marginLeft:uint;
private var _deadTiles:Array = new Array();
private var _randomLayout:Boolean;

public function RandomTile(r:uint, col:uint, ta:Array, gridW:uint = 76, gridH:uint = 76,
maginTop:uint = 2, marginLeft:uint=1, randomLayout:Boolean= true, deadTile:Array = null)
{
rowArray = new Array();
_randomLayout = randomLayout;

numOfRows = r;
numOfCols = col;
tileArray = ta;
_gridW = gridW;
_gridH = gridH;
_maginTop =maginTop;
_marginLeft = marginLeft;
if (deadTile !=null) _deadTiles = deadTile;
if (numOfRows * numOfCols < (tileArray.length - _deadTiles.length)) { throw new Error("Error - too many tiles, not enough spaces"); } else { init(); } } private function init():void { for (var i:uint=0; i= numOfCols){
colCount = 0;
rowCount++;
}

}
Debug.trace_msg(“DONE placeTiles in order”, Debug.DEBUG_VERBOSE);
}

private function placeTilesRandomly(arr:Array):void {
for (var i:uint = 0; i

Frustrating FireFox bug with ExtnernalInterface – resolved

Looks like I had a problem with my JavaScript. I need to add:
var swfDiv = document.getElementById(‘swfDiv’);

Checks out now in FireFox 3.5 mac, FireFox PC (version?), IE 8 on the pc.

[cc lang="JavaScript" nowrap="true" width="550"]

[/cc]

The original problem laid out here

Source file for this little test are here:

Thank you to Nikolai of FlashCodersNY

Frustrating FireFox bug with ExtnernalInterface

I have a swf with some html copy below it. It should (seemingly) expand when clicking the button and contract when clicked again.

see example

I need to swap the z-Index of the divs containing the SWF and the html copy. The swf is embeded using SWFObject.

I have two simple javascript methods for re-assigning the SWF div’s z-index, but in FireFox these  from the actionscript to the  javascript methods are not getting through.  It works  in Safari and in IE (version ?) on the pc.

Download all source files here.

The ActionScript looks like this:
[cc lang=”actionscript3″ nowrap=”true” width=”550″]
import flash.events.MouseEvent;
import flash.external.ExternalInterface;

var expandedBool:Boolean = false;

bt.addEventListener(MouseEvent.CLICK, onClicked);
bt.label = “putFlashOnTop”;
function onClicked(evt:MouseEvent) {
if (expandedBool){
gotoAndStop(“closed”);
expandedBool = false;

if (ExternalInterface.available) {
ExternalInterface.call(“putFlashOnBottom”);
} else {
tf.text = “ExternalInterface not available”;
}
bt.label = “putFlashOnTop”;
} else {
gotoAndStop(“open”);
expandedBool = true;

if (ExternalInterface.available) {
ExternalInterface.call(“putFlashOnTop”);
} else {
tf.text = “ExternalInterface not available”;
}
bt.label = “putFlashOnBottom”;
}
}
[/cc]