NetBeans IDE wartet so ziemlich mit allen gängigen Features auf, die man von einer modernen Entwicklungsumgebung erwartet:

• Debugging
• SVN Unterstützung für Subversion, CVS und Mercurial
• Refactoring
• Html,XML, CSS, Javascript Support

Die Oberfläche präsentiert sich aufgeräumt und läßt sich auf eigene Bedürfniss schnell anpassen. Sehr schön gelöst ist die Codevervollständigung, die über Strg+Leertaste mögliche Befehle samt Beschreibung auflistet:

Wie ihr sehen könnt, funktioniert es mit WordPress Dateien hervorragend. Diese Codevervollständigung funktioniert natürlich mit allen intergrierten Programmiersprachen und Bibliotheken. Also auch bei Html, CSS, jQuery usw.

Fazit:

NetBeans IDE ist ein hervorragendes, professionelles Produkt, welches sich neben Aptana Studio oder Zend Studio für Eclipse nicht verstecken muß. Außerdem ist es kostenlos. Einzig die Möglichkeit, wie in Aptana Studio Snippets zu erstellen, scheint in NetBeans nicht ganz so einfach zu sein.

Zum Schluss soll die Application auf einer Subdomain laufen. Ein SVN mit dem dazugehörigem Code ist auch eingerichtet. Hoffentlich lesen ein paar der WordPress-Developer mit

• Zend Framework Beta 0.9.1. released
• Zend Framework 1.0 Production Release
• Zend Framework 0.9.0 released
• Zend One Video Channel
• Aptana mit CSSDoc erweitern

Nehmen wir mal an, die erste Selectbox wird aus der Datenbank mit Fahrzeugherstellern gefüllt. Die zweite Selectbox soll dann zum jeweiligen Hersteller die Typen listen.

Der HTML Quellcode sieht so aus:

<label for="hersteller">Hersteller</label>
<select name="hersteller" id="hersteller">
	<option value="all">- alle -</option>
	<option value="1">Audi</option>
	<option value="2">BMW</option>
	<option value="3">Citroen</option>
</select>

<label for="typ">Typ</label>
<select name="typ" id="typ">
	<option value="all">- alle -</option>
</select>

Der PHP Code, der die Typen zurückliefert:

if (isset($_GET['id']) && $_GET['id'] != 'all' ) {
	$herst_id = (int)$_REQUEST['id'];
	$json = array();
	//Verbindung zur Datenbank herstellen...
	$query = "SELECT typ_id, typ_name
			FROM typ
			WHERE hersteller_id = " . $herst_id ;
	$result = mysql_query($sql);
	while ($row = mysql_fetch_assoc($result)) {
		array_push($json, array(
			'oV' => $row['typ_id'],
			'oT' => $row['typ_name']
		));
	}
	echo json_encode($json);
}

Achtung! Die Funktionen json_encode und json_decode stehen erst ab PHP 5.2 zur Verfügung.

Wir bekommen aus der ersten Selectbox den jeweilige Hersteller-Id und lesen dazu die Typen aus der Datenbank. Dieses stark vereinfachte Codefragment sollte jedem geläufig sein.

Nun der jQuery Part.

$(function() {
	$('#hersteller').change(function(){
		$.ajax({
			url: ('seite_mit_dem_script.php'),
			data: 'id=' + $(this).val(),
			type: 'GET',
			timeout: 2000,
			dataType: 'json',
			error: function() {
				alert('Error loading json data!');
			},
			success: function(json){
				var output = '';
				for (p in json) {
					output += '<option value=\"' + json[p].oV + '\">' + json[p].oT + '</option>\n';
				}
				$('#typ').html(output);
			}
		})
	});
});

Sobald etwas aus der Hersteller-Selectbox ausgwählt wurde (change) wird ein Ajax Request mit der Hersteller ID gesendet und die Daten werden in die Typ-Selectbox reingeschrieben. Easy, oder?

• Jack Slocums Ext Ajax Library
• Javascript Artikel Reihe
• YAML Builder Preview
• Wir starten unser Blog
• Twitter-Icons, Xtreme, jQuery Bug

Von den zahlreichen neuen Widgets der Ext hat mir besonders das Grouping Grid gefallen. Damit lassen sich sehr übersichtliche Zusammenfassungen realisieren.

Ich habe mir für dieses Beispiel etwas mit Autos ausgedacht. Hier können wir nach Hersteller, nach Motorart und nach Baujahr gruppieren. Der fiktive Autohändler hat mit den Möglichkeiten des Grouping Grid eine super Übersicht über die Struktur seines Fahrzeugbestands.
Also bauen wir dem Autohändler sein ultimatives Tool.

Vorbereitungen

Wir benötigen einen lokalen Webserver (XAMPP oder ähnliches) und erstellen in dem Verzeichnis htdocs ein neues Verzeichnis grouping-grid. In dieses Verzeichnis entpacken wir das komplette Ext 2.0 Downloadpaket. Dann erzeugen wir ein HTML Grundgerüst und speichern es mit dem Namen grouping-grid.php ab. Da wir das Grid direkt in den Body rendern, bruachen wir kein zusätzliches Markup. Wir binden lediglich die benötigten Stylesheets und Scriptbibliotheken ein.

<?php
$url = "http://localhost/grouping-grid";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>A Ext JS 2.0 Grouping Grid</title>
<link rel="stylesheet" type="text/css" href="<?php echo $url; ?>/ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<?php echo $url; ?>/ext-2.0/ext-all.js"></script>
<script type="text/javascript" src="grouping.js"></script>
<script type="text/javascript">
	Ext.BLANK_IMAGE_URL = '<?php echo $url; ?>/ext-2.0/resources/images/default/s.gif';
</script>
<style type="text/css">
	.icon-grid {
		background-image:url(<?php echo $url; ?>/ext-2.0/examples/shared/icons/fam/grid.png) !important;
    }
	.x-panel {margin:40px}
</style>
</head>

Ich habe extra eine PHP Seite gewählt, da ich das Beispiel anschließend online stellen möchte. Damit ich nicht jeden einzelnen Pfad editieren muß, habe ich in der ersten Zeile des Dokuments die Variable $url definiert, die ich später durch meine Blog-Url ersetzten werde. Ihr könnt genauso gut eine HTML Datei benutzen und die Pfade manuell notieren.
Wichtig ist nur die richtige Reihenfolge der Scripte. Die Datei grouping.js müssen wir noch anlegen.
Die Ext.BLANK_IMAGE_URL gehört normalerweise in die Ext.onReady Funktion, da ich das Pfad-Problem umgehen möchte, habe ich sie hier im Dokumentkopf notiert. Es ist der Pfad zu einer 1×1 Pixel transparenten GIF Datei. Diese wird in unserem Grid für die automatisch erzeugten Grid-Menue-Icons benötigt.
Abschließend habe ich noch ein Stylesheet mit den Klassen icon-grid und x-panel definiert. icon-grid läd ein kleines Hintergrundbild als Icon neben der Gridüberschrift. Unser Grid wird später in einem Div mit der Klasse x-panel erzeugt. Ich habe einen Abstand von 40px angegeben. Damit ist die Seite für unser Grid fertig.

Das Javascript

Wir erzeugen eine leere Datei und speichern sie als grouping.js ab. Dann fügen wir folgenden Code ein:

Ext.onReady(function(){
	alert("Ext geladen....");
});

Jetzt rufen wir im Browser die Datei grouping-grid.php auf und es sollte die Meldung “Ext geladen….” erscheinen. Falls nicht, bitte die Scriptpfade überprüfen.

Da ich online nicht extra eine Datenbank aufsetzten wollte, habe ich mich für ein Array mit Daten entschieden. Dieses Array kommt unter die Ext.onReady Funktion.

Ext.grid.kfzData = [
	[1,'Volvo','S60','2002','69300','13800,- €','Diesel'],
	[2,'BMW','323i','1999','74700','14780,- €','Benzin'],
	[3,'BMW','316','2003','13600','18330,- €','Benzin'],
	[4,'BMW','525i Touring','2005','2500','54050,- €','Benzin'],
	[5,'Mercedes-Benz','E 270 CDI','2002','4520','27900,- €','Diesel'],
	[6,'Renault','Laguna 2.0','1999','75000','4950,- €','Benzin'],
	[7,'Renault','Modus','2004','1030','9999,- €','Benzin'],
	[8,'Mercedes-Benz','C 220 CDI','2001','79100','19900,- €','Diesel'],
	[9,'Mercedes-Benz','SLK 200','2002','65000','24900,- €','Benzin'],
	[10,'Mercedes-Benz','ML 55','2001','105000','29900,- €','Benzin'],
	[11,'Ferrari','360 Modena','2005','15000','119900,- €','Benzin']
];

Wir haben in dem Array pro Datensatz die Felder id, hersteller, modell, baujahr, kilometer, preis und motor. Um diese Daten einlesen zu können, benötigen wir den Ext-ArrayReader.

Ext.onReady(function(){

	Ext.QuickTips.init();

	var xg = Ext.grid;

	var reader = new Ext.data.ArrayReader({}, [
		{name: 'id'},
		{name: 'hersteller'},
		{name: 'modell'},
		{name: 'baujahr'},
		{name: 'kilometer'},
		{name: 'preis'},
		{name: 'motor'}
	]);

});

Wir müssen dem ArrayReader die Felder exakt in der Reihenfolge zuweisen, wie sie im Array definiert sind, da ja kein Feld id oder hersteller existiert. Kommen wir nun zu dem Grid. Das Grid selbst ist eigentlich nichts weiter als eine Konfiguration von Parametern. Wir benötigen nicht eine einzige selbstgeschriebene Funktion, um das Beispiel auszuführen. Hier der Code:

var grid = new xg.GridPanel({
	store: new Ext.data.GroupingStore({
		reader: reader,
		data: xg.kfzData,
		sortInfo:{field: 'hersteller', direction: "ASC"},
		groupField:'hersteller'
	}),
	columns: [
		{id:'id',header: "Hersteller", width: 40, sortable: true, dataIndex: 'hersteller'},
	    {header: "Modell", width: 40, sortable: true, dataIndex: 'modell'},
		{header: "Motor", width: 20, sortable: true, dataIndex: 'motor'},
		{header: "Baujahr", width: 20, sortable: true, dataIndex: 'baujahr', align: 'right'},
		{header: "Kilometer", width: 20, sortable: true, dataIndex: 'kilometer', align: 'right'},
		{header: "Preis", width: 20, sortable: true, dataIndex: 'preis', align: 'right'}
	],
	view: new Ext.grid.GroupingView({
		forceFit:true,
		groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Fahrzeuge" : "Fahrzeug"]})'
	}),
	frame:true,
	width: 700,
	height: 450,
	collapsible: true,
	animCollapse: false,
	title: 'Mein Fahrzeugbestand',
	iconCls: 'icon-grid',
	renderTo: document.body
});

Einfach, oder? Wir haben den GroupingStore definiert, die Spalten unseres Grids, einen GroupingView sowie ein paar Einstellungen zum Grid. Alles andere handelt die Ext. Sämtliche Kofigurationsparameter findet ihr in der Ext API Dokumentation, welchhe dem Downloadpaket beliegt und wirklich sehr gut und ausführlich ist.

Wenn wir uns das Grid jetzt anschauen, sehen wir, das eine Menge Funktionalität drin steckt. Wir können das Grid auf- und zuklappen, die Spalten vergrößern/verkleinern. Wir können jede Spalte auf- und absteigend sortieren. Die Gruppen können auf- und eingeklappt werden. Ein Klick auf den rechten Pfeil im Spaltenkopf bringt ein Menü zum Vorschein. Dort können einzelne Spalten ein- btzw. ausgeblendet werden. Mit Show in Groups kann die Gruppierung aufgehoben bzw. erzeugt werden und mit Group this Field wird nach der gewählten Spalte gruppiert. Einfach genial.

Onlinedemo Ext 2.0 Grouping Grid

• Ext JS News 02
• Ein XML Grid mit der Ext Library
• 960 Gridder Bookmarklet
• Templates mit der Ext Library
• Jack Slocums Ext Ajax Library

via PHP Magazin

• Zend Framework Beta 0.9.1. released
• Zend Framework 1.0 Production Release
• Zend Framework Blog Tutorial
• Zend Framework 0.9.0 released
• Video zum YAML Green Theme online

Ausblick auf die Ext 2.0

Im Ext JS Blog gibt es einen Ausblick auf die kommende Version 2.0 der Ext JS Library.

Diese neue Version ermöglicht es, desktop-ähnliche Applikationen zu entwickeln. Auf dieser Seite könnt ihr euch ein Bild davon machen. Mir gefallen besonders  Web Desktop, Grouping Grid und  Column Tree.

• Da kommt Freude auf
• Wenig Zeit
• Fotogalerie online
• Startseite und Blogseite in der Navigation anzeigen
• Zend One Video Channel

Ext User Extension: File Upload Form Widget

Jozef Sakalos (aka Saki), einer der fähigsten Köpfe der Ext Community hat ein File Upload Widget entwickelt. Man kann mehrere Dateien in ein Queue aufnehmen und dann auf einen Rutsch zum Server übertragen. Dabei wird ein Fortschrittsbalken angezeigt.

• UploadForm wiki page
• Onlinedemo

Ext User Extension: File Tree Widget

Ebenfalls von Jozef Sakalos ist das File Tree Widget. Es stellt dem Nutzer ein Interface für File-Managment zur Verfügung. Momentan implementierte Funktionen:

• Ajax load and display of nodes
• File type icons
• File upload
• Folder create
• File or folder delete
• File or folder rename
• File or folder move by drag & drop
• On demand folder reload

Links:

• FileTree wiki page
• Online Demo

• Da kommt Freude auf
• Wenig Zeit
• Fotogalerie online
• Startseite und Blogseite in der Navigation anzeigen
• Zend One Video Channel

• Spket IDE und Ext 1.1
• Aptana Studio 1.0 released
• Aptana mit CSSDoc erweitern
• Jack Slocum bloggt wieder
• WordPress Snippets für Aptana Studio

Nach dem man in Preferences/ExtJS auf das source/ext.jsb verlinkt hat, kann es auch schon losgehen. Code completion und Syntax highlighting funktionieren hervorragend. Im Profile Explorer sieht man alle Klassen der Ext.
Mein erster Eindruck: Eine kleine IDE, die sich gut für Ext Projekte eignet. Allerdings fehlen zahlreiche Features, die Aptana und Co zu bieten haben. Ich werde Spket weiter testen.

• Aptana und Spket zusammen

Bisher erschienen:

• JavaScript – 1. Einführung
• JavaScript – 2. Lexikalische Struktur
• JavaScript – 3. Datentypen und Werte
• JavaScript – 4. Variablen
• AJAX – 1. Einführung
• AJAX – 2. Methoden der Datenübertragung

• Frameworks oder schlanker Code ?
• Topartikel besser präsentieren
• Nochmal WordPress Galerie
• XSS Artikel bei bueltge.de
• WordPress Plugin WP Commentable Block