Was EaselJS für mich so richtig interessant macht, ist die Tatsache, dass jedes Objekt auf dem Canvas eigenständig bleibt – so wie ich das Canvas-Element verstehe (als eine Art Bitmap/BitmapData), ist das nicht immer so? Dadurch kann man diesem kleinen Ball aus meiner Demo zum Beispiel einen Click-Handler geben, wie soeben geschehen.

Dabei ist mir Folgendes aufgefallen: Wenn ich tatsächlich nach und nach mehrere (ausgefeiltere) Demos bauen will, dann würde es der Übersichtlichkeit dienen, wenn ich diese voneinander separieren könnte. Am Liebsten in ihrem jeweils eigenen Objekt, von denen ich dann jeweils eines instanziiere. Nur: Wie funktioniert objektorientiertes Programmieren in JS? Meine JS-Kenntnisse sind etwas eingerostet, aber hier gibt es eine nette Basic- (!) Einführung.

Das Ergebnis kann man sich im Quellcode ansehen: Alle Variablen, die nur zur (bisher einzigen) Demo gehören, sind in “Klasse” “A” ausgelagert… I like! Nun könnte es eigentlich/vielleicht losgehen.

UPDATE:

Hm, andererseits wäre es auch interessant, “richtiges” OOP zu sehen, z.B. das Beerben von EaselJS’ Klassen. Angenommen, ich möchte ein TicTacToe-Spiel bauen, dann hätte ich Kreuze und Kreise, die beide (mir fällt grad kein besserer Begriff ein) Spielsteine (engl. “Tile”)sind, der wieder meinetwegen ein Shape ist. Wenn ich diese etwas ausgefeiltere Einführung als Ausgangspunkt nehme, sieht das so aus:

Tile.prototype = new Shape();
Tile.prototype.constructor = Tile;
Tile.prototype.g;
function Tile()
{
	this.g = new Graphics();
	Shape.prototype.initialize.call( this, this.g );
}

Circle.prototype = new Tile();
Circle.prototype.constructor = Circle;
function Circle()
{
	this.g.setStrokeStyle( 1 );
	this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );
	this.g.drawCircle( 0, 0, 10 );
}

Cross.prototype = new Tile();
Cross.prototype.constructor = Cross;
function Cross()
{
	this.g.setStrokeStyle( 1 );
	this.g.beginStroke( Graphics.getRGB( 0, 0, 0 ) );
	this.g.moveTo( 0, 0 );
	this.g.lineTo( 18, 18 );
	this.g.moveTo( 0, 18 );
	this.g.lineTo( 18, 0 );
}

Potential für Verbesserung sehe ich hier:

• Kreis und Kreuz nur je einmal zeichnen und wiederverwenden (siehe Doku zu Shape), statt jedes mal im Konstruktor.
• DisplayObject.cache() verwenden.

Meinungen?

Mittelfristig möchte ich da random das anzeigen, was bei meinen Spielereien so abfällt. Bis auf weiteres muss es aber eine Abwandlung einer Demo von Mike Chambers tun.

Facebook.api( ‘/me/feed’, _publishPostHandler, params, URLRequestMethod.POST );

oder als Javascript-Overlay:

Facebook.ui( ‘feed’, data, null, null );

oder als Pop-Up

Facebook.ui( ‘feed’, data, null, ‘popup’ );

Das data-Object beinhaltet die in den Docs unter “Publishing” beschriebenen Parameter.

<div id=”fb-root”></div>
<script type=”text/javascript” src=”http://connect.facebook.net/en_US/all.js”></script>
<script type=”text/javascript” charset=”utf-8″>
FB.Canvas.setSize();
</script>

an das Ende des body hängen, also direkt vor </body>. Wichtig: Der div “fb-root”. Viele Lösungen im Netz basieren offenbar darauf, dass ein solches Element schon da ist – was zumindest bei mir nicht der Fall war.

Ich habe für den body außerdem padding und margin auf 0, sowie overflow auf hidden und height auf die Höhe des IFrames gesetzt.

Youtube empfiehlt zwar die Verwendung von swfobject, dann funktioniert’s aber nicht auf dem iPhone – man sieht nix. Es gibt aber tatsächlich (XHTML-valide) Möglichkeiten, zB diese hier auf Learning the world. Man sieht dann das Preview-Bild, das einem auch zB in der youtube-Suche angezeigt wird. Bei Klick darauf öffnet sich die Youtube-App.

Mich würde allerdings mal interessieren, was man sieht, wenn man sich die Youtube-Videos auf diesem meinen Blog mit dem iPhone ansieht… verdammter Mist. Wieso haben wir eigentlich den IE6 überstanden, nur damit nun die nächste Firma anfängt, dem Web seine Extrawürste aufzuzwingen?? m(

Wer abgerundete Ecken auf seiner Webseite will, und keine Lust auf Photoshop-Orgien hat (oder CSS3 verwenden will^^), sollte sich mal die Corner Demo für jQuery ansehen. Danke an Moritz, once again!

“Normalerweise” besteht so ein responseText aus einem XML-Fragment. Das baut man dann dynamisch in seine Seite und gut ist. Javascript wird dabei nicht mehr ausgeführt.

Ein Trick zum dynamischen Abrufen (und Ausführen) von JS besteht darin, dass der responseText an eval() übergeben und so ausgeführt wird… dazu muss der responseText aber natürlich reines JS sein.

Wenn man nun aber beides will, so erzeuge man einen responseText a la

<script type=”text/javascript” id=”theScript”>
alert( ‘yeah’ );
</script>
<div id=”theContent”>…</div>

und voila (hier am Beispiel von ExtJS):

var ajaxRequest = Ext.Ajax.request
({
url: ‘index.php?fooBar,
params: {},
disableCaching: false,
success: onResponseDoMe,
failure: function(){}
});

hier nun der Zauber:

function onResponseDoMe( xhr )
{
var newContent = xhr.responseText;
Ext.get(‘targetDiv’).update(newContent);
eval( Ext.get(‘theScript’).dom.innerHTML );
}

Der Trick ist also einfach: Packe das JS in einen <script>-Knoten, und gebe diesem eine ID, um darauf zugreifen zu können

NACHTRAG: In ExtJS kann man natürlich auch einfach den Parameter loadScripts von Ext.Element.update() nutzen

Man liest von ExternalInterface-Problemen, die darauf basieren, dass von Javascript aus AS-Funktionen aufgerufen werden, bevor das SWF geladen ist – etwa bei onLoad. Als Lösung gilt: “Rufe aus dem SWF heraus eine JS-Funktion auf. Dann (und erst dann) weiß JS, dass das SWF bereit ist.”

So weit, so gut.

Was man dazu wissen muss, und was man deutlich weniger schnell findet im Netz: Ein SWF, das außerhalb des sichtbaren Bereiches liegt (etwa bei “position: absolute; top: -10px; left: -10px;”), ruft im Firefox 3/Windows keine ExternalInterface-Funktion auf. Gar keine, nie. Obwohl ExternalInterface.available true ist, und obwohl das SWF eigentlich angezeigt wird.

HTH.

The Neckar rulez: Guckst Du hier (funktioniert nur in neuesten Browsern)