Service2Max » Javascript Archiv – Blog für Programmierer und Software-Architekten http://blog.service2max.ch Technik, die begeistert Sat, 14 May 2011 16:47:40 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 ExtJS.com Webseite down und nicht erreichbar http://blog.service2max.ch/extjscom-webseite-und-nicht-erreichbar/ http://blog.service2max.ch/extjscom-webseite-und-nicht-erreichbar/#comments Fri, 19 Feb 2010 09:12:21 +0000 Patrick Matsumura http://blog.service2max.ch/?p=213

Update: Mittlerweile ist die Webseite wieder in vollem Umfang erreichbar.

Scheinbar wurde die Domain extjs.com gedropped. Somit ist sie nicht mehr erreichbar und damit auch die Dokumentation, der Premium Support, das Forum und die Downloadmöglichkeiten.

Damit man trotzdem keinen Entwicklungsengpass bekommt und Antworten auf seine Fragen findet, kann man die Dokumentation unter http://extjs.net/deploy/dev/docs/ benutzen. Generell ist unter http://extjs.net/ eine “Kopie” der .com Seite. Leider verweisen viele Links auf extjs.com und damit ins Leere.

Evtl. werde ich auf der Domain http://extjs.li/ ein Ersatzforum einrichten. Bitte sagt mir in den Kommentaren was ihr davon haltet.

]]> http://blog.service2max.ch/extjscom-webseite-und-nicht-erreichbar/feed/ 0 Tutorial: ExtJS 3.x einrichten http://blog.service2max.ch/tutorial-extjs-30-einrichten/ http://blog.service2max.ch/tutorial-extjs-30-einrichten/#comments Sat, 12 Dec 2009 14:19:23 +0000 Patrick Matsumura http://blog.service2max.ch/?p=151

Update: Dieses Tutorial funktioniert mit allen Versionen von ExtJS 3.x.

ExtJS ist ein in Javascript programmiertes Ajax-Framework, das zum Erzeugen von “echten” Webanwendungen verwendet werden kann. Es bietet nette Features wie Windows, Grids, schöne MessageBoxes und vieles mehr an. In diesem Artikel möchte ich zeigen, wie einfach das Framework zu installieren und zu nutzen ist.

Vorbereitungen

Damit eine erste kleine “Hallo Welt” Applikation mit ExtJS geschrieben werden kann, sind einige Voraussetzungen zu erfüllen. Zunächst muss die ExtJS Bibliothek heruntergeladen und in ein Verzeichnis entpackt werden. Ich schlage eine Verzeichnisstruktur wie auf dem Bild vor:
ExtJS Projekt: Ordnerstruktur
Ausserdem empfehle ich dringend Firebug. Ein Webentwickler sollte heutzutage ohne Firebug Plugin nicht mehr arbeiten. Es erleichtert das Finden von Fehlern, das direkte Anpassen von CSS und HTML und das Analysieren vom Datenverkehr zwischen Server und Browser. Jetzt wird noch ein Webserver zum Hosten und ein FTP-Zugang zum Speichern der HTML-Dateien benötigt.

Aufbau der HTML Seite

Ich gehe ab hier davon aus, dass grundlegende HTML-Kenntnisse  vorhanden sind. Damit ExtJS überhaupt funktionieren kann, braucht man natürlich eine HTML-Seite, die das Framework lädt. Nachfolgend ein kleines Grundgerüst, das ExtJS nutzbar macht.

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css"/>
        <link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" />
        <script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script>
        <script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script>
        <title>Tutorial: ExtJS HTMl-Grundgerüst</title>
    </head>

    <body>
        Willkommen beim ExtJS Tutorial: Wie richtet man ExtJS 3.0 ein.
    </body>

</html>

Zunächst müssen wir die CSS-Dateien laden, damit die ExtJS-Elemente auch so aussehen, wie sie sollen. Ich habe mich für das blaue Theme entschieden und daher mit

<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-3.0.3/resources/css/xtheme-blue.css" />

erst das “Grund-CSS” geladen und danach aufbauend das XTheme-Blue geladen. Evtl. werde ich ein Tutorial verfassen, wie man seine eigenen Themes erstellt und in ExtJS einbindet.

Die Zeilen

<script src="/js/ext-3.0.3/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="/js/ext-3.0.3/ext-all-debug.js" type="text/javascript"></script>

laden zunächst den ExtJS Basisadapter und danach die gesamte ExtJS Bibliothek in der Debugversion. Während der Entwicklung sollte die Debugversion verwendet werden, da sie in Firebug (oder jeder anderen Javascriptkonsole) “schönere” Fehlermeldungen anzeigt. Sobald das Projekt in einer Produktivumgebung laufen soll, ist es ratsam ext-all.js zu verwenden.  Diese Version ist kompakter und enthält nur sehr stark verkürzte Fehlermeldungen. Ausserdem wurden die Variablennamen häufig auf einen Buchstaben verkürzt und unnötige Zeichen wie Leerzeichen entfernt. Diesen Vorgang des “Komprimierens” nennt man auch minifying. Es verringert die Ladezeit erheblich und die Geschwindigkeit beim Ausführen von ExtJS wird um einiges höher. Eine weitere Optimierung bringt es, die Daten mit Gzip zu übertragen.

Nachdem das HTML-Grundgerüst steht und es auf einen Webserver gespeichert wurde, wird die Seite aufgerufen. Ich habe sie in das Rootverzeichnis (oberhalb vom js-Verzeichnis) als index.html gespeichert. Wenn in Firebug unter dem Reiter “Netzwerk” das Resultat in etwa so aussieht, wie auf dem Screenshot, dann ist ExtJS installiert und bereit genutzt zu werden.

Initialisierung ExtJS

Damit das versprochene “Hallo Welt”-Fenster im Browser erscheint, werde ich den body-Bereich der Webseite etwas erweitern. Und zwar so:

<script type="text/javascript">
Ext.onReady(function () {
    Ext.MessageBox.show({
        title: 'Willkommen zu ExtJS',
        msg: 'Hallo Welt!',
        buttons: Ext.MessageBox.OK,
        minWidth: 250,
        modal: false
    });
});
</script>

Das Ergebnis diese kleinen Code-Schnipsels sieht dann so aus:
Hallo Welt Messagebox

Was dieser Code genau macht, werde ich in einem weiteren Tutorial erläutern, da dieses hier ausschliesslich dem Einrichten von ExtJS gewidmet ist.

Verbesserungsvorschläge, Kritik oder Lob bitte als Kommentar hinterlassen. Um immer auf dem Laufenden zu bleiben, einfach kostenlos und unverbindlich den RSS-Feed abbonieren. Danke für die Mithilfe,

Patrick

]]> http://blog.service2max.ch/tutorial-extjs-30-einrichten/feed/ 0 Sortierbare Liste mit Drag & Drop in Ajax http://blog.service2max.ch/sortierbare-liste-mit-drag-drop-in-ajax-tutorial/ http://blog.service2max.ch/sortierbare-liste-mit-drag-drop-in-ajax-tutorial/#comments Thu, 20 Nov 2008 19:12:29 +0000 Patrick Matsumura http://blog.service2max.ch/?p=36

In diesem Tutorial möchte ich erklären, wie man mit script.aculo.us und dem Javascript Framework Prototype eine sortierbare Liste mit Drag & Drop-Funktionalität aufbaut. Der Clou an der Sache ist, dass die Liste sich ihren Zustand dauerhaft merken wird. Damit das einwandfrei funktioniert, ist es notwendig die Informationen zu speichern. Als Datenspeicher dient eine MySQL Datenbank.

Hier sind vorab die Links zur Vorschau und zum Download der Tutorialfiles.

Zunächst braucht man Prototype und script.aculo.us. Danach werden die Javascript-Dateien in einen Ordner gespeichert und in die HTML-Datei eingebunden. Ich habe die Javascripts in den Ordner “js” gespeichert. Man sollte unbedingt darauf achten, dass Prototype VOR script.aculo.us eingebunden wird.

So bindet man die beiden Bibliotheken ein:

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>

Nachdem das Grundgerüst steht, kann ich mit der MySQL Datenbank anfangen. Dazu lege ich mir eine Tabelle mit folgendem Code an:

CREATE TABLE `sortable_ajax_list` (
`ID` TINYINT(4) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`list_value` VARCHAR(64) NOT NULL ,
`sort_order` TINYINT(4) NOT NULL
) ENGINE = MYISAM

Ich erkläre kurz die Bedeutung der einzelnen Felder. ID wird benutzt um einen eindeutigen Bezeichner für jeden Datensatz zu haben. Dieser Wert erhöht sich durch das AUTO_INCREMENT automatisch um eins, sobald ein neuer Datensatz angelegt wird. Gleichzeitig ist ID auch der Primary Key. Im Feld list_value speichere ich den Wert des Listenelements und in sort_order wir die Sortierreihenfolge festgehalten.

Damit sind die beiden Bibliotheken eingebunden und Die MySQL Tabelle angelegt. Als nächstes werde ich eine HTML-Liste mit einem kleinen Stück PHP-Code generieren. Der Code soll die aktuelle Bezeichnung und die Reihenfolge der Listenelemente aus der Datenbank laden und entsprechend darstellen.

Aber vorher will ich noch eine kleine Konfigurationsdatei für alle weitern PHP-Scripts anlegen. In dieser Datei werden die Logindaten für die Datenbank eingetragen und die Verbindung hergestellt. Diese Datei nenne ich config.php und speichere sie in meinem Stammverzeichnis ab. 

<?

####
# Konfigurationsdaten für die Datenbank
####

$dbhost = 'localhost';
$dbuser = 'benutzer';
$dbpass = 'passwort';
$dbname = 'meine_db';

$connection = mysql_connect($dbhost, $dbuser, $dbpass); // Stellt die Verbindung zur Datenbank her

mysql_select_db($dbname, $connection); // Wählt die entsprechende Datenbank aus
?>

Nachdem ich jetzt meine Konfiguration fertig habe, kann ich sie in die HTML-Datei einbinden. Auch kann ich meine MySQL-Datenbank abfragen und so die Liste erzeugen. Das sieht nun so aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable List in Ajax</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<ul id="ajax_liste">

<?php
	include_once('config.php'); //Konfigurationsdatei einbinden

    $result = mysql_query("SELECT * FROM sortable_ajax_list ORDER BY sort_order"); // Anfrage an die Datenbank stellen und Ausgabe sortieren

    while($data = mysql_fetch_array($result))
    {
		echo '<li id="item_'. $data[ID] .'">'. $data[list_value] .'</li>';
		echo "\n";
	}
?>

</ul>
</body>
</html>

Jetzt, wo die Liste vom PHP-Code generiert wurde, soll sie auch noch sortierbar sein und sich ihren Zustand merken. Das Speichern soll nicht “spürbar” sein und darum machen wir den Request mit Ajax.Request von Prototype. Die Aktualisierung soll nach jeder Änderung der Reihenfolge vorgenommen werden. Darum setze ich den Request in die onUpdate Methode und übermittle an die PHP-Datei “sort_function.php” die serialisierten Daten der Liste. Der Code dafür sieht so aus:

<script type="text/javascript">
Sortable.create("ajax_liste",
	{
	onUpdate:function()
		{
		new Ajax.Request('sort_function.php',
			{
			method: "post",
			parameters: {data: Sortable.serialize("ajax_liste")}
			});
		}
	});
</script>

Wichtig: Das Javascript muss im HTML-Code NACH der Liste kommen, sonst wird es nicht angewendet. Als nächstes brauche ich die Funktion zum Speichern der Reihenfolge. Diese schreibe ich in die Datei “sort_function.php” und speichere sie in meinem Stammverzeichnis. Das ganze sieht so aus:

<?php
include_once('config.php');

parse_str($_POST['data']);

for ($i = 0; $i < count($ajax_liste); $i++) {
	if(is_int($i)) {
		mysql_query("UPDATE sortable_ajax_list SET sort_order = $i WHERE ID = $ajax_liste[$i]");
	}
	else {
	exit;
	}
}

?>

Man sollte beachten, dass in diesem Codestück nur wenig Überprüfung der übermittelten Daten erfolgt. Das kann unter Umständen missbraucht werden, um schädlichen Code einzuschleusen. Also ist es wichtig, die Daten zuerst genauer zu prüfen und dann zu speichern.

Jetzt ist alles fertig und die Liste kann sortiert und ihr Zustand gespeichert werden.

Kommentare und Verbesserungsvorschläge sind erwünscht.

Bis zum nächsten Tutorial,

Patrick

]]> http://blog.service2max.ch/sortierbare-liste-mit-drag-drop-in-ajax-tutorial/feed/ 52