Unterschiedliche Views in einer Single Page Application

Für ein kleineres Projekt habe ich vor einiger Zeit eine HTML5-Single-Page-Application entwickelt und stand dann vor dem Problem wie ich unterschiedliche Views innerhalb dieser Seite realisiere. Da ich möglichst ohne schwerfälliges Framework auskommen wollte, habe ich mich für eine Lösung mittels jQuery entschieden. Im HTML habe ich dazu mehrere Views definiert:

<div id="options" class="widget" style="display: none">
</div>

<div id="game" class="widget">
</div>

Der Inhalt des div-Elements mit der Id options ist dabei standardmäßig ausgeblendet. Nun kann die Ansicht der beiden Views mittels der Funktion switchView gewechselt werden:

switchView() {
	  
    if(this.activeView==this.Views.Game) {
        $("#game").css({"display": "none"});
        $("#options").css({"display": "block"});
        this.activeView = this.Views.Options;
    }
    else if (this.activeView==this.Views.Options) {
        $("#options").css({"display": "none"});
        $("#game").css({"display": "block"});
        this.activeView = this.Views.Game;
    }
}

In der Funktion wird das CSS der jeweiligen div-Elemente manipuliert. Dadurch wird die Sichtbarkeit der Blöcke gewechselt und man hat eine einfache View Umschaltung realisiert.

jQuery Ajax Abfrage synchron durchführen

Zwar steht AJAX für Asynchronous JavaScript, aber trotzdem kann man solche Abfragen auch synchron durchführen. Mit jQuery kann man das ganze dabei wie folgt bewerkstelligen:

$.ajax({url: "getName.php", 
	type: "get",
	data:{lang:"american"},
	success: function(result){
		name=result;
}, async: false});

Wichtig ist, das der Schlüssel async auf false gesetzt ist – das Verhalten ist in neueren Versionen von jQuery als veraltet gekennzeichnet, kann aber noch genutzt werden.

UKI

Wenn man native Applikation entwickelt, ist die Wahl der Komponenten für die grafische Oberfläche schnell erledigt. Meinst nimmt man das UI Kit, welches dem “Plattform-Standard” entspricht. Bei Webseiten bzw. Webbapplikationen ist die ganze Sache komplizierter. Hier gibt es eine Reihe von Lösungen, wie jQuery UI, JxLib, YUI und andere. Eine schöne Alternative zu den genannten Lösungen ist UKI.

Eine UKI Beispielanwendung

Die Bibliothek setzt dabei auf direkt auf Javascript auf und benötigt keine weiteren Frameworks. Das ganze ist unter http://ukijs.org/ zu finden. UKI ist dabei freie Software und steht unter der MIT-Lizenz.

innerHTML in jQuery

Gegeben sei folgender Quelltext:

<div class="divbox">Wert: 42</div>

In diesem Quelltext sollte der Wert je nach Position eines Sliders anpasst werden. Im ersten Moment versuchte ich es mit der jQuery Funktion replaceWith:

$(".divbox").replaceWith("Wert " + value);

Leider führt diese Methode dazu das der gesamte div Tag ersetzt wird was natürlich nicht erwünscht ist. Zum Glück gibt es in jQuery eine Entsprechung für das innerHTML, diese Funktion hört auf den Namen html:

$(".divbox").html("Wert " + value);

Damit wird nur der Text zwischen den div Tags geändert. Wichtig ist es dabei darauf zu achten das jQuery hier nur die innerHTML Eigenschaft des Browsers durchreicht und dies z.B. dazu führen kann das beim Internet Explorer Attribute in Anführungszeichen zurückgegeben werden.

Weitere Informationen gibt es unter:
http://api.jquery.com/html/
http://api.jquery.com/replaceWith/

Selektoren in jQuery

Gestern habe ich mich ein wenig mit jQuery beschäftigt. Dazu erst einmal ein kleineres Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="jquery.js"></script>

    <script type="text/javascript">
    $(document).ready(function(){    
            $("a#hide").click(function(){
                $("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
            })
    });
    </script>

  <title>jQuery Test</title>
</head>
<body>
  <div id="valuesInit" style="background-color:#ADADAD">
  <p><b>Initialwerte</b></p>
  Lorem Ipsum dolor sit amet...
  </div>

  <p><a href="#" id="hide">Verstecken</a></p>
</body>
</html>

In diesem Beispiel wird eine div Box mit der ID valuesInit und der Klasse divbox angelegt. Oben wird für den Link mit der ID hide eine Klickfunktion definiert. Diese Klickfunktion sucht dabei das Element mit der ID valuesInit und lässt es verschwinden. Nun gibt es verschiedene Möglichkeiten etwa zu selektieren:

  • nach Element
$("div").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  • nach ID
$("#valuesInit").animate({ height: 'hide', opacity: 'hide' }, 'slow');
  • nach Klasse
$(".divbox").animate({ height: 'hide', opacity: 'hide' }, 'slow');

Weitere Informationen gibt es unter:
http://docs.jquery.com/Main_Page
http://www.very-clever.com/jquery-tutorial.php
http://www.andreas-schlapsi.at/2008/10/10/jquery-dom-elemente-auswahlen/