Categories
Verschiedenes

Ein Trauerspiel

Gewisse Vorurteile über manche Firmen bestätigen sich immer wieder und sind wohlverdient. Heute bestätigte sich mein Eindruck einer Firma, die schon zu C64er-Zeiten für schlechte Computerbücher bekannt war. Inzwischen verkauft diese Firma auch Software zum Erstellen von Webseiten und Online-Shops.

Bei der Suche nach einer Software für einen Online-Shop ist mein Kollege über genau diese Firma gestolpert. Wir beide halten sehr wenig von dieser Firma. Ich meinte noch Scherzhaft: Die Software schickt die Artikelpreise bestimmt im POST-Request mit. (Dies war so ziemlich das dümmste, was mir in den Kopf kam, was eine Shop-Software tun könnte) Mein Kollege begab sich wagemutig einen der Referenzshops, die diese Firma angab, und warf einen Blick in den Quelltext der HTML-Seite. Dort offenbarte sich das ganze Drama. Die Shop-Software schickt die Preise im POST-Request mit! Auch beim Checkout werden diese Preise beibehalten!

An dieser Stelle habe ich dann diese Firma auf meine persönliche Blacklist gesetzt.

Categories
Internet Programmierung

Zebra-Tables zum dritten

Zebra-Tabellen scheinen sowas wie ein Steckenpferd von mir zu sein. (s. hier und hier) CSS3 ist leider immer noch nicht weiter vorangekommen. Aber dafür habe ich in der Zwischenzeit Prototype für mich entdeckt. Prototype ist ein Framework für Javascript, was die Programmierung von Anwendungen in Javascript erheblich vereinfacht. Ich hatte ja schon mal hier angedeutet, daß sich mit ein wenig Javascript eine Zebra-Tabelle dynamisch — ohne extra Markup — erzeugen läßt. Das ganze endete mit ca. 20 Zeilen Javascript Code. Das gleiche mit Prototype sind weniger als 10 Zeilen. (und auch nur so lang, weil ich es lesbar machen wollte)

var ZebraTable = {
  load: function() {
    $$('table.zebra tbody > tr:nth-child(2n+1)').each(function(elt) {
      elt.addClassName('rowodd');
    })
  }
}

Event.observe(window, 'load', ZebraTable.load);

Ja, das ist alles. Wer sich den Code ein wenig genauer anschaut, wird dort einen CSS3-Seketor finden. Dieser Selektor ist jedoch komplett in Javascript innerhalb von Prototype implementiert und somit Browserunabhängig. Der Browser muß also kein CSS3 beherrschen.

Wer den Code ausprobieren möchte, muß einfach nur Prototype und den Code oben in sein HTML-Dokument einbinden. Und schon werden alle ungeraden Zeilen, die sich im Tabellenrumpf (<tbody>) einer jeder Tabelle mit der Klasse zebra befinden, mit der Klasse rowodd versehen. Nun ist es nur noch eine Sache von einfachstem CSS, diese Klasse mit einer anderen Hintergrundfarbe auszustatten.

Categories
Internet

Zebra-Tables mal wieder

Vor einiger Zeit hatte ich mal über einige Features von CSS3 geschrieben, und wie sie mir (und hoffentlich auch anderen Menschen) das Leben vereinfachen werden. Besonders die sogenannten Zebra-Tabellen sind immer ein beliebtes Thema. Eine Möglichkeit habe ich damals gar nicht in Betracht gezogen: JavaScript. Zu dem Zeitpunkt kannte ich JavaScript noch aus seiner 1.0er Inkarnation und war der Meinung, daß es nicht zu mehr als zu lästigen Pop-ups gut ist. Doch mit dem letzten AJAX-Hype habe ich mir JavaScript nochmal angeschaut und dabei festgestellt, daß es deutlich Mächtiger ist, als ich angenommen habe. JavaScript erlaubt es, sich im DOM-Tree eines HTML/XML-Dokuments zu bewegen und die Knoten dynamisch zu verändern.

Folgendes JavaScript wird alle Tabellenzeilen in einem Dokument mit even/odd-Klassen versehen (vorausgesetzt, die Tabelle trägt die Klasse zebra und die Zeilen befinden sich in einem <tbody>.

function doZebra() {
	var tables = document.getElementsByTagName("table");
	for (var x = 0; x < tables.length; x++) {
		var table = tables[x];
		if (table.className != "zebra") continue;
		var tbodies = table.getElementsByTagName("tbody");
		for (var y = 0; y < tbodies.length; y++) {
			var tbody = tbodies[y];
			var even = false;
			var trs = tbody.getElementsByTagName("tr");
			for (var z = 0; z < trs.length; z++) {
				tr = trs[z];
				tr.className += (even ? " even" : " odd");
				even = !even;
			}
		}
	}
}

window.onload = doZebra;

Das war’s schon. Ich werde mir JavaScript in nächster Zeit genauer anschauen. Und vor allem die Kommunikation über XML mit dem Server, wie sie bei AJAX benutzt wird.