So wurde ich damals von Marc auf das Palm Pre aufmerksam gemacht. Es hat eine gute Integration von Googles Diensten, ein offenes System und eine riesige Community, welche mich mit allen möglichen Extras versorgen kann. Mit der App-Anzahl eines Apple AppStores kann es zwar nicht mithalten, aber ein gutes Handy bringt ja das wichtigste an Software bereits mit. Also wurde es das gute Ding.

Doch nun, nach einiger Zeit gibt es ein Paar Dinge, die mich dermaßen stören, dass ich drauf und dran bin, mir ein neues Telefon zuzulegen. Vor einiger Zeit erschien webOS 2.1, welches offiziell für mein Palm Pre nicht erschien, aber mit ein paar Tricks war auch das kein Problem. Allerdings löste das Update nicht wirklich meine Probleme oder Dinge, die mich (mittlerweile) nerven.

Fangen wir mal an. Der “Desktop” vom Pre, er ist riesig, ich kann mir einen schönen Hintergrund anzeigen lassen und sonst nichts. Warum kann ich dort nicht einfach eine Liste mit Terminen oder Notizen hinterlegen oder sonst was? Also ich habe eigentlich nicht ständig irgendwelche Programme laufen, die mir die Sicht versperren. Selbst mein altes Nokia konnte das besser.

Oder häufig habe ich das Problem, dass der Speicher nicht ausreichend ist. Obwohl kein Programm läuft, bekomme ich beim Programmstart die “Zuviele Karten”-Fehlermeldung. Unter webOS 1.x war es so schlimm, dass ich praktisch NIE Angry Birds spielen konnte. Dies hat sich glücklicherweise mit webOS 2.1 deutlich verbessert, tritt aber dennoch ab und an noch auf. Ist schon nett, wenn man jemanden anrufen will, aber das Anrufprogramm nicht starten kann.

Seit dem Update auf 2.1 meckerte mir meine Email / Kalender Synchronisation ab und an die Ohren voll, dass die Zugangsdaten nicht stimmen würden. Warum auch immer, trat sowohl bei Google als auch beim dienstlichen Exchange-Server auf. Manchmal ging es einfach wieder, manchmal musste ich die Daten neu eingeben oder im schlimmsten Fall das Handy neustarten. Direkt nach dem Update trat der Fehler praktisch mehrmals täglich auf, mittlerweile auch eher nur sporadisch (obwohl ich nichts gemacht habe).

Wie auch meine Kollegen habe ich ab und an das Problem, dass das Pre die Verbindung zur Sim-Karte verliert. Sehr ärgerlich, da mein Handy meistens nur rumliegt und ich es daher erst spät mitbekomme. Man ist also nicht erreichbar.
Allerdings habe ich auch sehr häufig das Phänomen, dass mein Handy Empfang hat und auf einmal bekomme ich eine SMS von wegen mich hätte jemand versucht anzurufen. Mein Handy hat aber nicht geklingelt. Ich kann hierbei aber nicht genau sagen, ob es an o2 oder am Pre liegt, mir fehlte bis jetzt die Motivation, es mit anderen Karten zu testen.

Und dann die Akkulaufzeit. Ich habe auf dem Handy selten irgendwas laufen, meistens werden also nur Email, Kalender und Kontakte abgerufen / synchronisiert. Auch habe ich unterwegs eigentlich G3 und WLan ausgeschaltet, um die Akkulaufzeit zu verlängern. Sollte ich dennoch einmal Abends vergessen, mein Telefon aufzuladen (oder ich lege es nicht korrekt auf den TouchStone), kann ich es nächsten Tag auch zu Hause lassen. Ab und an hab ich auch das Problem, dass das Handy mir einen Akkustand von 50% anzeigt, aber es bereits komplett aus ist, wenn ich rund eine halbe Stunde später wieder nach schaue. Ohne Grund, ohne Warnton ohne alles.

Dann zu meinem Lieblingsthema, die Uhr. Wie jedes Moderne Telefon kann sich das Handy die Zeit aus dem Mobilnetz holen. Nur leider scheint o2 dort nach zu gehen, ich weiß es nicht. Ich hatte sehr häufig unterschiede zur “realen” Zeit bis zu einer Stunde. Auch ein aktualisieren brachte nichts. Dann hab ich das Synchronisieren mit der Netzzeit deaktiviert und manuell gestellt. Sollte nun aber das Telefon einfach ausgehen (wie oben beschrieben z.B.), zählt die Uhr nicht weiter. Ich lade es nun wieder auf und vergesse die Uhr nachzustellen, dann sitze ich halt nachts um drei auf Arbeit, also laut meinem Pre. Da ich keine Armbanduhr trage, muss ich mich auf mein Handy verlassen können, was ich aber augenscheinlich nicht kann.

Mal abgesehen vom verschenkten Desktop-Platz sind das alles Anforderungen, welche ein modernes Telefon erfüllen sollte. Und das Palm Pre tut es leider nicht.

Dazu brauchen wir erstmal das Palm Pre SDK. Dabei wird gleich eine virtuelle Maschine per Java Virtual Box mit einem WebOS installiert. Ansonsten wird alles installiert, was ihr braucht, um eine WebOS App zu erstellen. Wenn ihr wollt könnt ihr nun mit jedem beliebigen Texteditor loslegen.
Ich habe mich für Eclipse mit der webOS-Erweiterung entschieden. Du kannst die App von hier aus direkt in der VM starten, was einfacher ist, als die Apps jedes mal per Command-Tool in entsprechende Formate zu konvertieren und in die VM zu portieren.
Wie ihr das ganze installiert, könnt ihr hier nachlesen.

Nun will ich euch zeigen, wir ihr eine App für das Palm Pre erstellt. Als Beispiel entwickeln wir ein simples TicTacToe für zwei Spieler. Inspiriert wurde ich durch eine OpenSource Variante von TicTacToe namens Tics’n'Tacs, welche aber für Anfänger doch recht oversized wirkt (enthält eine KI etc.)

Da webOS mit dem Javascript Framework “Prototype” arbeitet, welches man natürlich auch lokal nutzen kann, habe ich beschlossen, die Spiellogik erstmal für den Browser zu erstellen, und diese dann fürs Palm zu portieren und zu erweitern.

Als erstes erstellen wir eine Klasse in Javascript (kann man da von Klasse sprechen?):

function Game() {
}

/*
 * Setzt das Spielfeld zurück *
*/
Game.prototype.reset = function() {
	this.gameRunning = true;
	this.grid = [[ 0, 0, 0], [0, 0, 0], [0,0,0]];
	this.fieldsLeft = 9;
}

/*
 * Click abfangen und entsprechend reagieren
 */
Game.prototype.handleFieldClick = function(event, x, y) {
    // Spiel läuft nicht mehr oder Feld bereits von jemanden belegt!
	if(!this.gameRunning || this.grid[x][y] != 0) {
		return;
	}

	// Feld für den aktuellen Spieler reservieren
	this.grid[x][y] = this.currentPlayer;
	var id = "field" + x + y;
	$(id).addClassName("p" + this.currentPlayer);

	// Züge reduzieren
	this.fieldsLeft--;

	// Prüfen, ob er gewonnen hat oder alle Felder belegt!
	if(this.checkForWin()) {
		// Hat gewonnen, callback funktion aufrufen!
		this.endGameCallback(this.winner);
		return;
	}
	// Aktuellen Spieler ändern
	this.currentPlayer = (this.currentPlayer == 1) ? 2 : 1;		

}

/*
 * Dient als Zeiger für die Callback Funktion, wird aufgerufen, sobald das Spiel vorbei ist.
 */
Game.prototype.endGameCallback = null;

/*
 * Startet das Spiel und setzt die Eventhandler auf die Felder.
 */
Game.prototype.start = function() {
	var id;
	this.reset();
	for(var i = 0; i < 3; i++) {
		for(var j = 0; j < 3; j++) {
			id = "field" + i + j;
			Event.observe($(id), "click", this.handleFieldClick.bindAsEventListener(this, i, j));
		}
	}

}	

/*
 * Gibt die Debugmeldung für das Spielfeld aus
 */
Game.prototype.debug = function() {
	alert(this.grid[0][0] + " " + this.grid[0][1] + " " + this.grid[0][2] + "\n" +this.grid[1][0] + " " + this.grid[1][1] + " " + this.grid[1][2] + "\n" +this.grid[2][0] + " " + this.grid[2][1] + " " + this.grid[2][2] + "\n");
}

/*
 * gibt true zurück, wenn ein Spieler gewonnen hat oder Spiel zuende ist
 */
Game.prototype.checkForWin = function() {
	if(this.checkWinDiagonal() || this.checkWinCol() || this.checkWinRow()) {
		this.gameRunning = false;
		return true;
	}

	if(this.fieldsLeft == 0) {
		this.winner = 3;
		return true;
	}
}

/* Prüft, ob Spieler diagonal eine Reihe hat */
Game.prototype.checkWinDiagonal = function() {
	if(	(
			(this.grid[0][0] == this.grid[1][1] &&
			this.grid[1][1] == this.grid[2][2]) ||
			(this.grid[2][0] == this.grid[1][1] &&
			 this.grid[1][1] == this.grid[0][2]))
		&& this.grid[1][1] != 0) {
			this.winner = this.grid[1][1];
			return true;
		}
	return false;
}

/* prüft ob Spieler eine Spalte voll hat */
Game.prototype.checkWinCol = function() {
	for(var i = 0; i < 3; i++) {
		if(	this.grid[0][i] == this.grid[1][i] &&
			this.grid[1][i] == this.grid[2][i] &&
			this.grid[0][i] != 0) {
				this.winner = this.grid[0][i];
				return true;
			}
	}

	return false;
}

/* prüft ob Spieler eine Reihe voll hat */
Game.prototype.checkWinRow = function() {
	for(var i = 0; i < 3; i++) {
		if(	this.grid[i][0] == this.grid[i][1] &&
			this.grid[i][1] == this.grid[i][2] &&
			this.grid[i][0] != 0) {
				this.winner = this.grid[i][0];
				return true;
			}
	}

	return false;
}

// 0: game running, 1: player 1, 2:player 2, 3: draw
Game.prototype.winner = 0;
Game.prototype.fieldsLeft = 9;
Game.prototype.gameRunning = false;
Game.prototype.currentPlayer = 1;
Game.prototype.grid = null;

Das Spielfeld:

<html>
<head><title>Tic Tac Toe</title>
<script type="text/javascript" src="prototype.js" />
<script type="text/javascript" src="game.js" />
  <link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<script type="text/javascript">

var game = null;
function startgame() {
	game = new Game();
	game.start();
	game.endGameCallback = spielEnde;
}

function spielEnde(winner) {
	if(winner == 1 || winner == 2) {
		alert("Gewonnen hat Spieler " + winner);
	}
	else {
		alert("Keiner hat gewonnen!");
	}

	//game.debug();
}

</script>
<body>

<div id="spielfeld">
	<div class="row row1">
		<div id="field00" class="cell col1">1</div>
		<div id="field01" class="cell col2">2</div>
		<div id="field02" class="cell col3">3</div>
	</div>
	<div class="row row2">
		<div id="field10" class="cell col1">4</div>
		<div id="field11" class="cell col2">5</div>
		<div id="field12" class="cell col3">6</div>
	</div>
	<div class="row row3">
		<div id="field20" class="cell col1">7</div>
		<div id="field21" class="cell col2">8</div>
		<div id="field22" class="cell col3">9</div>
	</div>
</div>
<div style="clear:both;"></div>

<input type="button" onclick="startgame();" value="start game"/>

</body>
</html>

Per div-Container und CSS wird ein Spielfeld geformt. Nach einem Klick auf “start game” wird die Klasse initialisiert und die Variabeln gesetzt (game.start()). Dort werden “OnClick”-Events auf die einzelnen Spielfelder gesetzt. Klickt nun ein Spieler auf ein Feld, wird geprüft, ob es noch frei ist und für den Spieler reserviert und durch hinzufügen der entsprechenden CSS-Klasse auch mit einer entsprechenden Grafik visuell markiert. Danach wird geprüft, ob das Spiel vorrüber ist (weil einer gewonnen hat oder kein Zug mehr möglich ist) und bei Bedarf die Funktion “endGameCallback()” aufgerufen. Wenn ihr noch eine Runde spielen wollt, müsst ihr die Seite neuladen.

Damit ihr das nun nicht alles per Copy&Paste selbst machen müsst, habe ich euch alles in einer ZIP-Datei zusammen gepackt: tictactoe.zip

Nun erstellen wir daraus eine webOS Applikation. Dazu legen wir in Eclipse eine neue Mojo App an:

Nun legen wir eine neue Mojo-Scene an und nennen sie “game”:

Wir legen (der Übersicht halber) unter dem Ordner “app” einen Ordner “model” an und kopieren die game.js von oben dortrein.

Damit die “game.js” später in der App bekannt ist, muss sie in der Datei “sources.json” eingetragen werden. Erweitert sie in etwa so:

[
    {"source": "app/assistants/stage-assistant.js"},
    {
        "scenes": "game",
        "source": "app/assistants/game-assistant.js"
    },
    {
    	"source": "app/model/game.js"
    }
]

In der Datei “/app/views/game/game-scene.html” füge ich nun das Spielfeld hinzu. Wichtig ist, dass ich hier keinen Header einbaue.

<div class="palm-page-header">
  <div class="palm-page-header-wrapper">
    <div class="icon app"></div>
    <div class="title">Tic Tac Toe</div>
  </div>
</div>
<div id="spielfeld">
	<div class="row row1">
		<div id="field00" class="cell col1">1</div>
		<div id="field01" class="cell col2">2</div>
		<div id="field02" class="cell col3">3</div>
	</div>
	<div class="row row2">
		<div id="field10" class="cell col1">4</div>
		<div id="field11" class="cell col2">5</div>
		<div id="field12" class="cell col3">6</div>
	</div>
	<div class="row row3">
		<div id="field20" class="cell col1">7</div>
		<div id="field21" class="cell col2">8</div>
		<div id="field22" class="cell col3">9</div>
	</div>
</div>

Die beiden Bilder 1.png und 2.png kopiere ich in den Ordner “/images”. Den Inhalt der style.css kopiere ich in die Datei “/resources/tictactoe.css” und passe die Pfade für die beiden Bilder an.

Nun müssen wir die Spiellogik der game.js in die App einbauen. Das ist ähnlich, wie in der HTML-Datei am Anfang des Beitrags. Dazu bearbeite ich die “/app/assistants/game-assistant.js” und erweitern die vorhandenen Funktionen wie hier (bzw. fügen sie hinzu):

var game = null;
GameAssistant.prototype.setup = function() {
	this.game = new Game();
	this.game.start();
	this.game.callback = this.spielEnde;
}

GameAssistant.prototype.spielEnde = function(winner) {

	var endText;
	if(winner == 3) {
		endText = "Das Spiel endete unentschieden.";
	} else {
		endText = "Gewonnen hat Spieler " + winner;
	}
	Mojo.Controller.errorDialog(endText);
}

Unterschiedlich ist hier nur die Callback-Funktion. Sie ruft die Funktion “errorDialog()” auf. Dies ist ein webOS Dialog. Es gibt noch andere Dialoge, aber halten wir es mal einfach. Das Ergebnis seht ihr später.

Nun müssen wir der App auch sagen, dass es die Szene “game” starten soll, dies geschieht in der “stage-assistant.js”:

StageAssistant.prototype.setup = function() {

this.controller.pushScene("game");
}

Nun starten wir die App (Emulator muss schon laufen), in dem wir aufs Projekt rechtsklicken und “Run” -> “Mojo Application” auswählen. Nach einem kurzen Moment startet die App im Emulator. Das Ergebnis:

Und zu guter letzt noch das ganze Eclipseprojekt als Download: tictactoe-eclipse.zip