WPF-Blogger.com [Language: de]

Neuerdings im Web (April 2012)

Mario Priebe — 2012-05-02T08:41:08

Einen schönen Round-Up bringt uns NETTUTS über derzeitige Features und neuen nützlichen Javascript/jQuery Libraries für die Webentwicklung. Gut finde ich jQuery Scroll Path "jQuery Scroll Path is a plugin that lets you define your own custom scroll path. What this means exactly is best understood by checking out the demo. The plugin uses canvas flavored [...]

Nachlese zur Visual Studio 2011 Beta Roadshow

Kazim Bahar — 2012-05-01T22:01:12

Am 25.April habe ich die Roadshow zu den Neuerungen von Visual Studio 11 in Frankfurt besucht und möchte nun einige der vielen Features, die in der fünfstündigen Veranstaltung erörtert wurden, kurz vorstellen. Auf den ersten Blick fallen die Änderungen am User Interface auf. So wurden alle Icons neu gestylt und die Toolbars aufgeräumt. Beispielsweise wurden die Icons für [...]

Buch: Perry Rhodan Neo 1 - Sternenstaub - Frank Borsch

Norbert Eder [MVP] — 2012-04-23T14:13:51

Das Jahr 2036: Überbevölkerung, Klimawandel und Terrorismus - die Menschheit steht kurz vor dem Untergang. Zudem steigen die Spannungen zwischen den Machtblöcken. In dieser Lage startet der amerikanische Astronaut Perry Rhodan mit drei Kameraden zum Mond - denn dort geschieht Unheimliches. Mit einer uralten Rakete brechen die vier Astronauten ins Abenteuer ihres Lebens auf. Auf dem Mond treffen sie auf die menschenähnlichen Arkoniden. Rhodan erkennt die Schwäche der Aliens - und er schlägt ihnen einen gewagten Handel vor. Sein Ziel: Er will Frieden für die Menschheit. Sein Preis: Er muss sich gegen alle Regierungen der Welt stellen.

Bis jetzt hatte ich immer einen Bogen um Perry Rhodan gemacht. Warum kann ich nicht genau sagen, unterschwellig müssen wohl dennoch Gründe vorhanden gewesen sein. Mit der Anschaffung eines Kindle habe ich dann aber dann doch den Sprung gewagt und mich via Neo an den Neustart von Perry Rhodan gemacht. Ohne also irgendeiner Altlast aufzusitzen, ohne Vorurteile, ohne den ständigen Vergleich, konnte ich mich daher auf den Inhalt und die Erzählung konzentrieren. Und ich muss sagen: Ich bin begeistert. Die einzelnen Charaktere sind gut herausgearbeitet, die Story selbst ist interessant und modern. Für mich ein gelungener Einstieg und ganz klar empfehlenswert!

Bewertung: 5/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Interaction Event-Trigger als Style auslagern

Mario Priebe — 2012-04-23T12:26:31

In einem Caliburn.Micro Projekt setze ich den EventTrigger ein, um meine Commands an einem ViewModel zu binden. Nun möchte ich gerne immer den selben EventTrigger an mehreren Stellen einsetzen und verhindern, dass der Code an “tausend” Stellen redundant eingesetzt wird. Aus diesem Grund, soll diese Interaktion als Style zu Verfügung gestellt werden. Der folgende Code [...]

Outlook als GTD Applikation

Mario Priebe — 2012-04-18T09:05:57

GTD steht für Getting Things Done und beschreibt Methodiken, seinen täglichen Aufgaben produktiv und effizient zu erledigen. Lesenswerte Artikel zum Thema GTD stehen am Ende des Tutorials. Zieldefinition Ziel ist es, im Outlook ein Dashboard bereit zu stellen, welches einem alle Aufgaben, den Posteingang, den Kalender, Notizen und die Kontakte anzeigt. Das Besondere dabei ist, [...]

Working Hours Tracker 1.4 - Vorabinfo

Norbert Eder [MVP] — 2012-04-11T18:37:44

In Kürze wird die Version 1.4 der kostenlosen Zeiterfassung Working Hours Tracker für Windows Phone veröffentlicht. In dieser Version wurden sehr große Änderungen und Erweiterungen vorgenommen. Dieser Beitrag gibt einen Überblick über neue Funktionen und Verbesserungen, die mit der neuen Version verfügbar sein werden. Zusätzlich gibt es Informationen zum Beta-Test.

Beta-Test

Aktuell startet ein größer angelegter Beta-Test. Dieser soll etwaige Fehler, Hindernisse in der Bedienung und offene Fragen beseitigen. Zusätzlich zu den eigenen Tests soll so die Stabilität weiter verbessert werden. Wer daran teilhaben möchte, möge sich bei mir via http://devtyr.norberteder.com/contact.aspx melden. Ich bitte um die Angabe der E-Mail-Adresse, unter der man auf seinem Windows Phone an Windows Live angemeldet ist, damit eine Freischaltung erfolgen kann.

Neue Funktionen

Die Version 1.4 bringt sehr sehr viele Neuerungen mit sich. Hier seien die wichtigsten neuen Funktionen kurz aufgezählt:

Projekte können nun mit einer Pauschale hinterlegt werden
Verwaltung von Tätigkeiten (inkl. Standard-Stundensatz) und Zuweisung zu Projekten (mit geänderten Stundensätzen)
Erfassung von Pausenzeiten
Zusätzlich zur zeitlichen Sicht auf die Zeiteinträge gibt es nun eine Projektsicht
Beim Export von Daten zu einem Monat können zusätzlich die zu exportierenden Projekte gewählt werden

Zusätzlich zu diesen Erweiterungen wurde der gesamte Start-Bereich erneuert. Hier existiert nun ein Schnellzugriff auf die Historie der App, News und der Möglichkeit, die Anwendung zu bewerten. Ebenfalls neu ist eine integrierte Hilfe, die eine grundlegende Einführung geben soll.

Verbesserungen

Der größte Teil betrifft die Verbesserung von bestehenden Funktionalitäten, sowohl in Richtung Oberfläche, als auch unter der Haube. Hier eine ausgewählte Übersicht:

Wesentliche Steigerung der Performance
Umstellung auf neuen Anmeldeprozess für Dropbox
Erneute Anmeldung an Dropbox ist nicht mehr notwendig
Erweiterung des Exports (Tätigkeiten, Zeitsumme, etc.)
Optimierungen der UI - viele Schritte sind nun wesentlich schneller durchzuführen
Vergrößerung der Icons des Timers
Die Software-Tastatur passt sich nun durchgehend an die einzugebenden Daten an
App-Tile passt sich dem eingestellten Theme an
Via den “Über”-Schirm kann direktes Feedback gesendet werden. Dabei werden Systeminformationen (Typ Handy, Version des Betriebssystems etc. ebenfalls übermittelt)
Aufgetretene Fehler werden gespeichert und können über den “Über”-Schirm direkt gesendet werden (Schaltflächen sind nur aktiv, wenn Fehler vorhanden sind)
E-Mail-Adresse für das Exportieren von Daten via E-Mail wird gespeichert und muss nicht erneut eingegeben werden
Unterstützung Querformat bei Eingabe

An vielen Stellen werden nun verbesserte Meldungen ausgegeben, das Design wurde verbessert und Löschungen erfordern nun eine Bestätigung. Sämtliche Texte wurden überarbeitet.

Behobene Fehler

Natürlich wurden auch bekannte bzw. gemeldete Probleme behoben:

Diverse Übersetzungsfehler
Upload bei Umlauten im Dateinamen für deutschsprachige Benutzer
Aktualisierung der Zeit des Timers beim erneuten Start der Anwendung

Screenshots

Nachfolgend ein paar Screenshots.

Weitere Screenshots können hier bezogen werden.

Weitere Informationen & Feedback

Eine gesamte Liste aller Veränderungen und Erweiterungen ist unter http://devtyr.com/wht.html zu finden. Über diese Seite können auch Erweiterungswünsche etc. eingebracht werden. Gerne nehme ich Feedback auch hier im Blog entgegen.

Unable to write * ‘obj\Release\

Mario Priebe — 2012-04-11T08:18:16

Bekommt man diese, oder eine ähnliche Fehlermeldung “Unable to write * ‘obj\Release\”, löscht man am besten einmal den obj Ordner und prüft ob dieser eventuell im TFS mit eingecheckt wurde, was verhindert, das der Schreibschutz effektiv aufgehoben wird. Also dann einfach auf dem TFS löschen, einchecken und Projekt bauen. Viel Spaß beim entwickeln : [...]

Buch - Engelssturz - Timothy Zahn

Norbert Eder [MVP] — 2012-04-10T18:26:25

Stellen Sie sich vor, alle Politiker der Welt wären selbstlos, vernunftorientiert und unfähig zu lügen. Unmöglich? Nicht in Empyrea, einer menschlichen Kolonie in den Weiten des Alls. Doch hinter den vorbildlichen Staatsmännern verbirgt sich ein gefährliches Geheimnis, und das feindliche Imperium der Pax ist entschlossen, dieses zu ergründen und Empyrea notfalls unschädlich zu machen.

Timothy Zahn steht für Qualität. Das ließ also viel für dieses Buch erhoffen. Die Story selbst ist an sich gut gelungen. Gut ausgeprägte Charaktere, ein tolles Konzept. Leider aber etwas langatmig geraten. In Teilen wird die Geschichte verschleppt, wenngleich sie sich aber dennoch gut lesen lässt. Der Schluss ist - aus meiner Sicht - erste Sahne, wenn auch einige Fragen (leider) offen bleiben. Aus dieser Idee hätte man mehr machen können.

Bewertung: 3/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

WPF und Windows Forms – Die Wahl zwischen den Windows GUI Technologien.

Mario Priebe — 2012-04-07T15:11:36

Wenn wir Entwickler für Windows grafische Benutzeroberflächen (GUIs) entwickeln möchten, haben wir die Wahl zwischen Windows Forms und WPF. Jede dieser Technologien haben ihre Vor- und Nachteile. In diesem Artikel möchte ich auf die Hauptunterschiede beider Technologien eingehen und bei der Entscheidung helfen, welche der beiden für den Einsatzzweck vom Vorteil ist. Windows Forms Windows [...]

MVVM in der Praxis

Kazim Bahar — 2012-03-28T15:09:01

Das Entwurfsmuster MVVM (Model-View-ViewModel) erfreut sich größter Beliebtheit beim Einsatz der XAML-Technologien WPF, Silverlight und WP7. Die mächtigen Frameworks Prism und Caliburn.Micro bieten weit mehr als nur die Unterstützung zur Umsetzung des MVVM Design Patterns. Die Entkopplung der Komponenten per Dependency Injection oder Konzepte zur Kommunikation zwischen den Modulen sind nur einige unter vielen anderen Features. Allerdings ist die Einarbeitungszeit [...]

BASTA! on Tour & SharePoint Summit 2012

Mario Priebe — 2012-03-25T20:07:29

BASTA! on Tour – Architecture & Good Practices – Das große Trainingsevent für .NET-Architekturen Am 25. bis 27. April 2012 startet in Köln die nächste Ausgabe der BASTA! on Tour – Architecture & Good Practices. Das große Trainingsevent bietet eine Vertiefung von wichtigen Themen der BASTA! – der größten unabhängigen .NET-Konferenz im deutschsprachigen Raum. Entwickler [...]

Visual Studio Tipps für XAML Entwickler

Kazim Bahar — 2012-03-22T20:18:26

Ich habe ich hier ein paar Tipps und Tricks zusammengestellt, die die tägliche Arbeit mit XAML-Dateien innerhalb der Visual Studio Umgebung erleichtern. Legen wir gleich mal los … Tipp 1: Zeilenummern im XAML-Editor einblenden Um Fehlermeldung mit Zeilenangaben besser nachgehen zu können, kann man Zeilennummern im C# Code Editor einschalten. Ich schätze, diese Option kennen bereits [...]

Liste von Strings mittels Entity Framework speichern

Mario Priebe — 2012-03-15T10:03:56

Wenn man eine Liste von Strings in die Datenbank mittels Entity Framework (4.2) speichern möchte, muss man entweder eine extra Klasse dafür erstellen, oder sich mit folgendem Workaround behelfen. public string Staatsangehoerigkeit { get { return Staatsangehoerigkeiten != null ? String.Join(";", Staatsangehoerigkeiten) : null; } set { Staatsangehoerigkeiten = value.Split(';').ToList(); } } [NotMapped] public List<String> [...]

Kostenloses E-Book zu Knockout.js - Endstand und Conclusio

Norbert Eder [MVP] — 2012-03-14T08:51:20

In den letzten Wochen wurde mein E-Book zum Thema Knockout.js kostenlos über eine Aktion verteilt. Seit Anfang dieser Woche ist die Aktion beendet, da das Maximum erreicht wurde. Insgesamt wurden 250 Exemplare zur Verfügung gestellt. Zusammen mit der Aktion wurde eine Umfrage zu interessanten Themen gestellt, zu denen ein weiteres E-Book erwünscht wäre. Laut der Zwischenauswertung hatte das Thema HTML5 die Nase vorne. Hat es einen Führungswechsel gegeben?

Auswertung

Zur Erinnerung: Folgende Themen standen bei der Umfrage zur Auswahl:

Backbone.js
HTML5
Bootstrap
Node.js
Microsoft LightSwitch

Insgesamt haben 81,6% aller Teilnehmer ihre Stimme abgegeben (Mehrfachnennungen möglich). Nachfolgend nun das Ergebnis.

Die Änderung im Vergleich zum erhobenen Zwischenstand:

Die Umfrage zeigt schon ganz gut, in welche Richtung die Interessen gehen. Dass hierbei Microsoft LightSwitch (quasi als Kontrastprogramm) nicht mithalten kann, hatte ich zwar angenommen, war dann aber doch wegen die Deutlichkeit überrascht.

Wie geht es weiter?

Aktuell wird das E-Book in die Formate MOBI und EPUB gebracht. Alle Teilnehmer an dieser Aktion werden zusätzlich diese Formate zugesandt bekommen. Danach wird das E-Book veröffentlicht. Im Anschluss beginnt die Arbeit an einem neuen E-Book.

Feedback

Natürlich freue ich mich über Feedback zum E-Book. Dieses kann jederzeit unter http://books.norberteder.com/contact.html abgegeben werden. Gerne auch kritische Stimmen.

JavaScript-Validierung im Visual Studio Build mit Node.js und JSLint

Norbert Eder [MVP] — 2012-02-29T14:10:00

Webentwicklung, viel JavaScript. Da benötigt man recht bald eine saubere Validierung. JSLint von Douglas Crockford hat sich hier durchgesetzt und wird weitläufig verwendet. Es gibt zahlreiche Add-Ins für Visual Studio, Web-Validatoren usw. Meine Anforderung bestand nun darin, alle JavaScripts einer Solution bei einem Build zu validieren und gefundene Fehler in der Error-Liste zu haben. Zusätzlich sollte dies ohne Installation in einer Team-Umgebung funktionieren, wodurch sämtliche Add-Ins nicht von Relevanz sind. Dieser Beitrag zeigt, wie dieser Task innerhalb einiger Minuten erledigt werden kann.

Voraussetzungen

Wie der Titel schon besagt, werden sowohl Node.js, als auch JSLint benutzt. In meinem Fall kommt Node.js für Windows zum Zuge. Dieses wird als MSI-Paket ausgeliefert und kann direkt installiert werden. Damit nun aber nicht jedes Team-Mitglied dieses ebenfalls zu installieren hat, empfiehlt es sich, alles aus

%ProgramFiles(x86)%\nodejs

in ein Verzeichnis, welches im Source Control liegt, zu kopieren. Dazu sollte entsprechend auch die Struktur vorhanden sein. Hier meine Struktur als Beispiel:

Kurze Erklärung, soweit nicht selbstsprechend: 3rdPartyLibraries beinhält alles von externen Anbietern (Node.js wäre in diesem Fall so jemand), Build alle Dateien, die für das Build (sowohl Client als auch Server) notwendig sind. Unter Sources ist die tatsächliche Solution zu finden.

In meinem Falle würde also Node.js für Windows in ein Unterverzeichnis von 3rdPartyLibraries kopiert werden. In Node.js inkludiert ist der Package-Manager npm. Darüber muss nun JSLint installiert werden:

npm install jslint

Damit ist das Modul vorhanden und kann adaptiert bzw. verwendet werden.

Hinweis: Es stehen weitere Module zur Verfügung, in unterschiedlichen Ausprägungen, teilweise angepasst an das gewünschte Verhalten des jeweiligen Entwicklers. Hier muss man mitunter ein wenig experimentieren, um herauszufinden, welches Modul die eigenen Anforderungen am besten abdeckt.

Wenn nun auch noch PowerShell zur Verfügung steht, sind alle Grundvoraussetzungen erfüllt.

Anpassungen für Visual Studio

Eine der Anforderungen für mich ist die Anzeige der gefundenen Fehler in der Error-Liste von Visual Studio, schließlich möchte ich diese auf einen Blick sehen. Im normalen Output-Fenster (der Build-Ergebnisse) würden diese mitunter untergehen bzw. nicht berücksichtigt werden. Dafür muss eine kleine Änderung im installierten Modul vorgenommen werden. Die Datei reporter.js für vom jslint-Modul für die Ausgabe der Fehler verwendet. Damit die Ausgabe jedoch von Visual Studio erkannt und in die Error-Liste eingetragen wird, muss diese speziell formatiert werden. Nachfolgend meine aktualisierte Variante.

     /*jslint forin: true */

    var color = require("./color");

    var log = console.log;

    exports.report = function (file, lint, colorize) {

        'use strict';

        var options = [], key, value, line,

            i, len, pad, e, fileMessage;

        for (key in lint.options) {

            value = lint.options[key];

            options.push(key + ": " + value);

        }

        fileMessage = "\n" + ((colorize) ? color.bold(file) : file);

        if (!lint.ok) {

            len = lint.errors.length;

            for (i = 0; i < len; i += 1) {

                e = lint.errors[i];

                if (e) {

                    log(file + '(' + e.line + ',' + e.character + '): warning: ' + e.reason);

                }

            }

        } else {

            log(fileMessage + " is " + ((colorize) ? color.green('OK') : 'OK') + ".");

        }

        return lint.ok;

    };

Von spezieller Bedeutung ist diese Zeile:

log(file + '(' + e.line + ',' + e.character + '): warning: ' + e.reason);

Hier wird die Ausgabe genau so formiert, dass Visual Studio die Meldung als Warning erkennt und in der Error-Liste zur Anzeige bringt. Zusätzlich wurden einige Zeilen entfernt, die für diesen Anwendungsfall nicht benötigt werden. Bei einer Aktualisierung des Modules ist jedoch darauf zu achten, dass die Änderungen wieder nachgezogen werden.

Tipp: Wer die JSLint-Meldungen lieber als tatsächlichen Fehler erhalten möchte, muss lediglich warning gegen error tauschen.

Nun fehlt noch die Einbindung ins Build.

Einbindung Build

Auch diese Aufgabe lässt sich einfach bewältigen. Im einfachsten Fall wird ein kleines Powershell-Script geschrieben, welches ins Pre-build Event des Hauptprojektes eingebunden wird. Das Script kann in etwa so aussehen:

    $node_js_path = ($args[0]).Trim()

    $js_files_path = ($args[1]).Trim()

    $jslintmodule = "$node_win_dir" + "\node_modules\jslint\bin\jslint.js"

    $js_files = get-childitem $js_files_path -include *.js -recurse -force

    Set-Location $node_win_dir

    foreach ($file in $js_files)

    {

        .\node.exe $jslintmodule "--sloppy" "--white" "--undef" $file

    }

    popd

Das Script enthält zwei Parameter. Der erste Parameter legt fest, wo sich Node befindet, der zweite Parameter beschreibt, in welchem Pfad sämtliche JavaScripts zu finden sind. Das PowerShell-Script durchsucht diesen Pfad rekursiv und übergibt alle Files an Node unter Aufruf des entsprechenden Moduls.

Fertig. Natürlich ist dieser Schritt an die Gegebenheiten der jeweiligen Umgebung anzupassen und stellt daher nur die Minimalumsetzung dar.

Fazit

Mit ein paar wenigen Handgriffen lässt sich JSLint mit Hilfe von Node.js und einen Schuss Powershell ins Visual Studio Client-Build einbinden. Läuft dies über ein Source Control funktioniert diese Variante für alle Team-Mitglieder ohne Installation und Konfiguration. Zusätzlich finden sich alle Meldungen übersichtlich in der Error-Liste von Visual Studio und sind dadurch mit Sprungmarken versehen, um direkt an die jeweilige Stelle springen zu können.

Buch - Justifiers 5: Sabotage - Boris Koch

Norbert Eder [MVP] — 2012-02-29T11:56:42

Der Forschungsbeauftragte eines Großkonzerns verschwindet scheinbar spurlos und mit ihm ein mysteriöser schwarzer Koffer. Es beginnt ein Wettrennen zwischen den Mächtigen, jeder will der Erste sein, der den Verschwundenen aufspürt. Schließlich werden die Justifiers eingeschaltet, um das Problem zu lösen, doch die finden sich plötzlich auf einem abgelegenen Planeten wieder, wo sie es mit äußerst aggressivem Grünzeug, Mafiakillern und einem Verräter in den eigenen Reihen zu tun bekommen …

Das neue Abenteuer der Justifiers wird eindrucksvoll und schnell erzählt. Kaum lange Pausen, schon gar keine Langatmigkeit. Alexeij, der Hauptprotagonist, ist der Lead des Justifier-Teams und wird vom Konzernchef abgesetzt. Er muss sich einem cholerischen Bisonbeta unterordnen. Kein leichtes Unterfangen, befinden sie sich - schneller als sie schauen können - auf einem verlassenen Planeten wieder, in den eigenen Reihen einen Verräter und kaum etwas zu tun. Man kann sich sehr schnell in seine Rolle versetzen, wenngleich die Gedankengänge in einigen Situationen nicht ganz nachvollziehbar sind.

Die erzählte Geschichte ist gut und bis 20 Seiten vor dem Schluss geht es richtig dahin. Dann kommt ein - für meinen Geschmack - etwas sehr abruptes Ende, welches mir wenig durchdacht erscheint. Entweder wurde hier bereits eine vorgeschriebene Seitenanzahl erreicht, oder es wollte einfach kein besserer Schluss einfallen. Schade eigentlich, denn bis dahin war Spannung angesagt, auch wenn dieser Teil zur Gänze ohne Aliens auskommt.

Bewertung: 3/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Kostenloses E-Book zu Knockout.js - Zwischenstand

Norbert Eder [MVP] — 2012-02-27T07:49:42

Vergangenen Freitag wurden die Exemplare des Knockout.js E-Books für Aktion 1 und Aktion 2 versandt. Zeitgleich startete die 3. Aktion, zu der noch einige kostenlose Exemplare verfügbar sind. Wer also noch eines möchte, schnell handeln, sonst sind sie weg. Mit der Registrierung gab es auch eine Umfrage über interessante Themen, zu denen ein E-Book gerne gesehen würde. Damit die ersten beiden Aktionen nun aus meiner Sicht vollkommen abgeschlossen sind, wurden diese ausgewertet. Das bisherige Ergebnis möchte ich an dieser Stelle teilen.

Auswertung

Insgesamt stehen fünf Auswahlmöglichkeiten zur Verfügung:

Backbone.js
HTML5
Bootstrap
Node.js
Microsoft LightSwitch

Im Zuge von Aktion 1 und 2 haben 78% aller Teilnehmer an der Umfrage teilgenommen und ihre Stimme abgegeben (Mehrfachnennungen möglich). Das Zwischenergebnis ist für mich wenig überraschend:

Da Aktion 3 noch am Laufen ist, kann es noch zu gravierenderen Änderungen kommen. Ich bin auf jeden Fall gespannt, wie das Ergebnis aussehen wird und ob sich das eine oder andere Thema noch an HTML5 vorbei schieben kann.

Wer’s noch nicht hat: Jetzt mitmachen!

E-Books für Entwickler - Aktion

Norbert Eder [MVP] — 2012-02-22T18:05:21

Ab sofort steht mein neuestes Projekt unter http://books.norberteder.com online zur Verfügung. Darüber werden zukünftig E-Books zu unterschiedlichsten Entwickler-Themen publiziert. Ziel ist es, ansprechende, gut aufbereitete, Literatur für Entwickler zu einem günstigen Preis zur Verfügung zu stellen. Dabei werden die einzelnen Themen sorgfältig aufbereitet und sowohl eine Einführung in die Thematik, als auch aussagekräftige Praxisbeispiele geboten. Eine mühsame Suche quer durch das Internet entfällt. Immer wieder dieselben Einführungsbeispiele ebenso. Auch das Wälzen von 700 Seiten starken Büchern. Auf das Thema fokussiert, übersichtlich und praxisorientiert ist die Devise. Das erhaltene Wissen soll sofort in einem realen Projekt einsetzbar sein.

Einführungsaktion

Den Startschuss macht das E-Book zu Knockout.js - und das gleich mit einer Aktion. Wer schnell genug ist, ergattert ein kostenloses Exemplar des knapp über 70 Seiten starken E-Books.

Wie funktioniert es?

Die Aktion ist in insgesamt 3 Stufen eingeteilt. Sobald eine Stufe erfüllt ist, gilt sie als abgeschlossen und die entsprechenden Registrierungen zählen. D.h. alle, die sich registriert haben, bekommen per E-Mail ein kostenloses Exemplar dieses E-Books zugesandt. Solange eine Stufe nicht erfüllt ist, kommt es zu keiner Aussendung. Die genauen Modalitäten sind hier zu finden.

Was ist zu tun?

Nicht viel. Es ist lediglich ein Tweet abzusetzen und das darauffolgende Registrierungsformular auszufüllen. Dieses erfordert die E-Mail-Adresse. Es müssen keine weiteren Angaben gemacht werden.

Hinweis: Mit den anzugebenden E-Mail-Adressen wird sehr behutsam umgegangen. Es werden lediglich Informationen zu neu erschienenen Büchern bzw. neuen Aktionen versendet. Die Daten werden niemals an Dritte weitergereicht.

Was bringt die Zukunft?

Die Entscheidung liegt nicht ausschließlich bei mir. Vorerst sind einige Themen in Planung. Im Zuge der Registrierung kann jedoch (auf freiwilliger Basis) an einer Abstimmung teilgenommen werden. Das Resultat wird in weitere Überlegungen einfließen.

Feedback

Hast du zu diesem Projekt oder zur Aktion Feedback, dann lasse es mich bitte wissen und hinterlasse einen Kommentar. Gerne kann auch bezüglich Kooperationen auf mich zugekommen werden.

Basta Spring 2012 – Ticket für Kurzentschlossene

Mario Priebe — 2012-02-22T12:16:27

Achtung, ich habe für den ersten Kurzentschlossenen eine Freikarte zur Hauptkonferenz. Dieses findet vom 28.02.-01.03. im Rhein-Main Hotel in Darmstadt statt . Wer ernsthaftes Interesse hat, hin zu fahren, sollte sich bitte bei mir melden. Checkt das aber vorher mit Eurem Arbeitgeber ab, nicht das ich das Ticket halte und dann klappt es nicht und [...]

Buch - Kolyma - Tom Rob Smith

Norbert Eder [MVP] — 2012-02-20T09:22:19

Als Leo Demidow ins Zimmer seiner beiden Adoptivkinder kommt, tut Soja so, als würde sie schlafen. Aber der ehemalige KGB-Polizist hat genug Erfahrung mit Gefangenen, um zu erkennen, dass Soja hellwach ist und auf jede seiner Bewegungen mit Anspannung lauscht. Kurz zuvor hatte sie, wie schon so viele Nächte vorher, ein Messer an seine Halsschlagader gehalten. Aber dann war sie durch einen Anruf aufgeschreckt und davon abgehalten worden, ihre Tat vielleicht zumindest dieses Mal durchzuführen.

Der nächtliche Anruf ist für Leo Demidow mehr als unangenehm. Er kommt von einem betrunkenen Kollegen, der sich schuldig fühlt. Er hat eine Schuld auf sich geladen, an der auch Demidow seinen Anteil hat. Das ganze Lügengebäude einer heilen Familie scheint endgültig zusammenzubrechen. Dann wird auch noch Soja entführt und der Ex-KGB’ler und jetzige Leiter eines von der Sowjet-Regierung verschwiegenen Morddezernats auf perfide Art und Weise erpresst. Wenn ihm das Leben seiner Adoptivtochter lieb ist, so fordern die Entführer, solle er sich ins Gulag an den Rand Sibiriens einschleusen lassen und dort einen Priester befreien, für dessen Internierung vor sieben Jahren er selbst verantwortlich zeichnet. Demidow lässt sich auf den Handel ein – und wird im Strafgefangenenlager prompt enttarnt. Von diesem Zeitpunkt an scheint seine Ermordung nur noch eine Frage der Zeit zu sein...

Der Roman spielt in der Post-Stalin-Ära und arbeitet recht gut das totalitäre System heraus. Gespickt um die langsame Aufweichung des Regimes und der damit verbundenen Gegenwehr. Ein interessanter Roman, der auch die Gegenseite beleuchtet. Die Geschichte an sich ist tragisch und unvorstellbar - wenn man ein derartiges Regime nicht kennt. Der Erzählfluss ist ein guter, die Charaktere sind klar definiert und nicht bloß kurz umschrieben. Der letzte Teil mutet dem Leser dann allerdings etwas zu viel zu, wird denn auch die Ungarische Revolution 1956 ins Spiel gebracht. Die Geschichte verliert dabei an Spannung und wird unnötig in die Länge gezogen. Schade eigentlich, weniger wäre hier durchaus mehr gewesen.

Bewertung: 3/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Diskussion und Integration von Disqus

Norbert Eder [MVP] — 2012-02-14T12:44:00

In regelmäßigen Abständen würde ich gerne die Kommentarfunktion meines Blogs überarbeiten. Ich finde sie einfach unzureichend für die heutige Zeit und sie macht auch nicht wirklich große Lust, seine Meinung zu sagen. Aber gerade für mich hat Feedback einen hohen Stellenwert, erweitert es doch häufig den eigenen Horizont durch zusätzliche Informationen oder Gesichtspunkte. Nun bietet BlogEngine.NET von Haus aus die Möglichkeit an, Disqus zu verwenden. Nachdem mich nun @michaelhorkavy diesen Gedanken wieder aufgefrischt hat, werfe ich nochmals einen Blick darauf und versuche das Thema für mich zu Hinterfragen. Das Resultat ist nicht nur eine Grundsatzdiskussion, sondern auch ein How-To (und das nicht nur für Blogger auf Basis BlogEngine.NET).

Diskussionsgrundlage

Meine Beweggründe, die Kommentarfunktion immer wieder aufs Neue gedanklich zu diskutieren sind einfacher Natur. Aber sehen wir uns zuvor doch einmal an, wie die Kommentarfunktion zum Zeitpunkt des Schreibens dieses Posts aussieht (zur Dokumentation, sollte eine tatsächliche Umstellung geschehen):

Klar, hier könnte man per Styling schon etwas nachhelfen, dass eine größere Lust zum Kommentieren aufkommt. Der Vorteil dieser Variante liegt ganz klar darin, dass ich als Besucher keinen Account besitzen muss, um meine Meinung zu sagen. Der Nachteil für mich als Betreiber ist hingegeben, dass so sehr viel Spam zu bereinigen ist (natürlich stehen hierfür zahlreiche Helferlein zur Verfügung, die sind aber manchmal weniger gründlich und manchmal mehr als einem lieb ist). Abgesehen davon, habe ich in vielen Fällen einfach keine Ahnung woher der Kommentar kommt. Ist das wichtig? Ich sage: ja! Manchmal tun sich durch einen Kommentar Fragen auf, die zu diskutieren es lohnt. Kann ich aber nicht, wenn ich den Schreiber nicht kontaktieren kann (siehe beispielsweise Mail-Adressen via http://10minutemail.com/).

Eine weitere nette Funktionalität nennt sich Benachrichtige mich bei neuen Kommentaren. Wunderbar. Ich bekomme eine Email, wenn sich Neues bei den Kommentaren getan hat. Bin ich gar mitten in einer Diskussion, möchte ich aber unmittelbar antworten. Kann das aber nicht, da diese Funktionalität schlicht nicht unterstützt wird. Ich werde zu einem Medienbruch genötigt, da ich meine Mails verlassen und das Blog besuchen muss, um weiter zu diskutieren. Eine recht große Hürde - wie ich meine. Zumindest fällt mir das immer wieder sehr schwer, wodurch ich diesen “Task” auf später verschiebe. Nur dazu kommt es dann kaum.

Hier braucht es eine bessere Lösung. Ein Ansatz über den ich schon lange nachdenke kommt von Disqus.

Disqus - Das bessere Kommentarsystem?

Vor längerer Zeit ging mal das Kommentarsystem von Facebook herum. Will ich schlicht nicht einsetzen, da zu einschränkend. Außerdem möchte ich Facebook nicht noch mehr Daten vermitteln, als dies ohnehin schon der Fall ist. Eine weitere Variante besteht durch Disqus (weil, wie bereits angesprochen, auch durch BlogEngine.NET unterstützt). Aber wie kann Disqus hier helfen?

Vorteile

Sehen wir uns vorerst einmal an, welche Vorteile ein Einsatz von Disqus bringen kann.

Wichtig: Ich gehe hier nur auf die kostenfreien Funktionen ein. Kostenpflichtig sehen weit mehr Möglichkeiten zur Verfügung, kommen für mich jedoch nicht in Frage. Wer einen Überblick haben möchte, sei auf die Featureübersicht verwiesen.

Benachrichtigungen und Antwortmöglichkeiten. Benachrichtigungen werden per Email zugestellt. Antworten sind ebenfalls per Email möglich, auch das Löschen, Freischalten und Markieren von Spam. Kein Medienbruch mehr notwendig - eine klare Minimierung einer großen Hürde.
Einbinden von multimedialen Inhalten. Derartige Inhalte sind meist deaktiviert, werden sie doch meist missbraucht. Wenn sauber implementiert können derartige Inhalte eine Diskussion durchaus bereichern.
Kompatibilität zu mobilen Geräten. In meinem Fall sollte dies nachrangig sein, scheint aber hin und wieder doch Probleme zu bereiten.
Integration von sozialen Netzwerken. Die meisten Besucher sollten einen Account auf Disqus selbst, Google, Twitter, Facebook, Yahoo oder eine OpenID haben. Dem Verfassen von Kommentaren sollten keine Steine in den Weg gelegt sein.
Sharing. Besucher können mitteilen, ob ihnen ein Beitrag oder ein Kommentar gefällt und diesen teilen. Auf Facebook, Twitter und anderen Netzwerken.
Tweets und Reaktionen. Unterhaltungen oder Reaktionen auf Twitter werden gesammelt und ebenfalls angezeigt. Schön gesammelt beim ursprünglichen Beitrag.

Und dann gibt es natürlich noch weitere Funktionen wie Statistiken, Blacklists, Whitelists, verbotenen Worten, Spamfilter bis hin zu Importen und Exporten.

Wo ist nun der Haken?

Bis jetzt klingt das doch positiv. Oder nicht? Irgendwo muss aber jetzt ein Haken sein. Klar. Die Kommentare liegen nicht auf meinem System, sondern auf einem Fremdsystem. Was bedeutet dies konkret?

Ein Backup meines Systems umfasst keine Kommentare. Diese werden hoffentlich vom Fremdsystem, als Disqus, gesichert. Wovon auszugehen ist.
Ein Umstieg auf ein anderes Blogsystem kann mitunter nicht so einfach werden. Disqus kann zwar grundsätzlich sehr einfach eingebunden werden, unterstützt werden jedoch nur die wirklich weit verbreiteten Systeme á la Wordpress, Blogger und Co. D.h. hier ist manuelle Arbeit notwendig.
Disqus verwendet für Importe und Exporte das WordPress eXtended Rss (WXR) Format. BlogEngine.NET setzt beispielsweise auf BlogML. Da hätten wir dann schon mal unterschiedliche Formate.
Was tun sollte Disqus dicht machen? Ist ein Rückführen der Kommentare dann möglich? Ja, ist es. Allerdings wieder mit manuellem Aufwand verbunden.

Umstellung auf Disqus

Schrecken die erwähnten Nachteile nicht ab, kann eine Umstellung recht einfach erfolgen. Nachfolgend die notwendigen Schritte um das Blog (hier wird die Umstellung eines BlogEngine.NET Systems beschrieben, Hinweise auf andere Systeme aber ebenfalls gegeben).

Registrierung Blog / Benutzer

Notwendig ist hierzu eine Registrierung des Blogs und eines Benutzers (Verwaltungs-Account). Wichtig hierbei ist der anzugebende Shortname, der in allen Fällen des Zugriffs benötigt wird. Alle anderen Einstellungen können jederzeit geändert werden.

Wie im Screenshot zu sehen, habe ich bereits einen Benutzer. Ist keiner vorhanden, kann dieser im selben Schritt erstellt werden. Soweit ist diese Seite fertig. Damit wäre diese Sache erledigt.

Export der Kommentare

Ein bestehendes System (wie es meines ist) hat für gewöhnlich bestehende Kommentare. Diese würden bei einer Freischaltung von Disqus am Blogsystem zwar nicht verloren gehen, kämen allerdings nicht mehr zur Anzeige. Schade um die vielen Informationen, die unsere Besucher bisher bereichert haben. Also müssen bestehende Kommentare importiert werden. Weiter oben habe ich bereits angesprochen, dass die BlogEngine.NET das BlogML-Format unterstützt und damit nicht von Haus aus in Disqus importiert werden kann (Wordpress, Blogger und Co. sind hier natürlich schön im Vorteil).

Um nun die eigenen Kommentare zu konvertieren, wird ein Tool namens BlogMLtoDisqus.exe verwendet. Dieses setzt das .NET Framework 4.0 voraus. Zuvor müssen die Daten jedoch im benötigten Format exportiert werden. Dieser Schritt ist über die Administration auszuführen, erreichbar unter Einstellungen -> Importiere & Exportiere -> Exportiere.

Das Resultat kann nun einfach über die Konsolenanwendung konvertiert werden:

Wichtig: Das Konvertierungstool schreibt leider für jedes Post inkl. Kommentare keinen Wert für dsq:thread_identifier (dsq ist als XML-Namesapce auf http://www.disqus.com einzubinden). Dies sollte (zumindest im Falle BlogEngine.NET) die eindeutige Post-Id sein. Dieser Wert wird von Disqus herangezogen, um den disqus_identifier zu bilden. Dies ist eine eindeutige Id mit der der Post-Thread angesprochen werden kann und wird benötigt, um die Kommentare und den Kommentarzähler auf das Posting zu mappen. Ist dieser Wert nicht gesetzt, vergibt Disqus einen eigenen Wert, der im eigenen Blogsystem natürlich nicht zur Verfügung steht. Der Entwickler des Konvertierungstools wurde von mir darauf hingewiesen. Sollte es ein Update geben, werde ich dies kund tun. Oder aber einen Blick auf ILSpy werfen :).

Import der Kommentare

Wurde die Konvertierung erfolgreich durchgeführt, muss die resultierende Datei auf Disqus importiert werden, auch hier in der Administration, jedoch unter Tools, zu finden.

Der Import wird nicht sofort durchgeführt, sondern landet in einer Queue. Sobald diese abgearbeitet wurde, erhält man eine Benachrichtigung. Man kann also nur hoffen, dass zwischenzeitlich keine neuen Kommentare am alten System hinzukommen, oder beinhart sein, und umschalten.

Disqus unter BlogEngine.NET aktivieren

Wer denn nun auf Disqus umsteigen möchte, der muss nun wieder in die Administration von BlogEngine.NET wechseln. Unter Einstellungen -> Kommentare findet sich ein entsprechender Disqus-Block:

Sobald die neuen Einstellungen gespeichert wurden, ändert sich bereits das Erscheinungsbild der Kommentare:

Das war es dann fast.

Kommentarzähler anpassen

Wer, wie ich, einen Kommentarzähler anzeigt mag jetzt vielleicht enttäuscht sein, oder sich in seiner Annahme bestätigt fühlen. Hierfür muss eine weitere Änderung durchgeführt werden. Dazu wird folgendes Script benötigt:

     <script type="text/javascript">    

        var disqus_title = '<%=Post.Title %>';    

        var disqus_identifier = '<%= Post.Id.ToString() %>';    

        var disqus_url = '<%= Post.AbsoluteLink %>';    

        var disqus_developer = '<%= BlogEngine.Core.BlogSettings.Instance.DisqusDevMode ? 1 : 0 %>';    

        (function() {        

            var dsq = document.createElement('script'); 

            dsq.type = 'text/javascript'; 

            dsq.async = true;        

            dsq.src = 'http://<%=BlogEngine.Core.BlogSettings.Instance.DisqusWebsiteName %>.disqus.com/embed.js';        

            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);    

        })();

    </script>

Über das Setzen der Post-Id als Identifier wird kein eigener von Disqus gesetzt, wodurch die Kommentare beispielsweise auch wieder rückgeführt werden könnten.

Hinweis: Diese Anpassung ist in der Datei Post.aspx durchzuführen (hierfür ist bereits ein entsprechender JS-Block vorhanden, der noch wie oben beschrieben zu erweitern ist).

Der Kommentarzähler kann dann im Anschluss so bezogen werden:

    <a rel="nofollow" href="<%=Post.AbsoluteLink %>#disqus_thread" identifier="<%= Post.Id.ToString() %>"><%=Resources.labels.comments %></a>

Fertig.

Fazit

Natürlich muss sich jeder selbst Gedanken machen, ob ein Abgaben der Kommentare an ein Fremdsystem gewünscht ist. Im Falle des Falles macht Disqus einen recht netten Eindruck, zumal die Funktionen in der Gratis-Variante durchaus ansprechend sind und auch die Referenzen für sich sprechen. Eine Einbindung kann recht flott durchgeführt werden, wenngleich auch im Falle BlogEngine.NET einige manuelle Schritte vorzunehmen sind. Mit der gezeigten Einbindung ist es allerdings auch wieder möglich, Kommentare zurück ins eigene System zu bringen, sollte man von dieser Entscheidung zurücktreten wollen.

Mobile Developer Conference 2012 in Hamburg

Gordon Breuer — 2012-02-14T12:38:19

Für mich war die MDC 2012 eine Doppelpremiere: Zum einen war ich das erste Mal dort, zum anderen stand ich auch das erste Mal als Sprecher selber auf der Bühne. Für alle, welche die Folien, Link-Sammlungen und Beispiel-Projekte zu meinen Vorträgen haben möchten, stehen die Daten nun auch hier im Blog online zur Verfügung.

Lese den vollständigen Artikel von Gordon Breuer auf anheledir.NET…
Read the complete article by Gordon Breuer at anheledir.NET…

Der Weg zurück zu LaTeX

Norbert Eder [MVP] — 2012-02-13T10:23:15

Vor vielen, vielen Jahren habe ich LaTeX für mich entdeckt. Ein Paket, um das Textsatz-Tool TeX einfacher verwenden zu können. Der Grund lag damals in meiner anstehenden Diplomarbeit. Nach dem Schreiben dieser habe ich eigentlich (nach anfänglichen, kurzen Liaisonen) wieder den Weg zurück zu Microsoft Word gefunden. Einfach, da in der Geschäftswelt kaum etwas anderes - hinsichtlich Dokumente - verwendet wird. Das galt sowohl für Mitschriften (die dann zwar teilweise per Microsoft OneNote geschrieben wurden), als auch für größere Dokumente, Artikel und Dokumentationen. Da nun aber wieder etwas längere Artikel/Beiträge anstehen, habe ich meine uralte LaTeX-Umgebung wieder ausgegraben, aktualisiert und in Betrieb genommen. Warum eigentlich?

Vielmals wird ja behauptet:

Wäre Microsoft Word für das Schreiben von Büchern gedacht, dann würde man es Microsoft Book nennen.

Darüber kann man nun streiten. Word hat schon seine Berechtigung. Vor allem die Verbreitung spricht für sich. Auch verlangen sehr viele Verlage (eigentlich alle, mit denen ich je zu tun hatte) sämtliche Beiträge, Artikel und Bücher im Word-Format. Dazu werden (mehr oder weniger gute) Vorlagen angeboten, die das Schreiberlebnis vereinfachen sollten. Naja, weniger das Schreiberlebnis, vielmehr die Übernahme in eine tatsächliche Textsatz-Software. Dem kann man sich auch kaum entziehen, was ich äußerst schade finde, da es einfachere und bessere Systeme gäbe.

Eines vorweg: Ich möchte hier keine Grundsatzdiskussion über Word und Konsorten lostreten. Wenn ich hier Word schreibe, dann kann man getrost auch OpenOffice Writer, LibreOffice Writer und was es sonst noch so alles in diesem Genre gibt, einsetzen.

Für die Fälle, die mich unabhängig von Verlagen machen und in denen massig Inhalt zusammen kommt, steht mit LaTeX (und TeX) ein vollwertes Textsatzsystem zur Verfügung, das es unheimlich einfach macht, Texte zu verfassen - ohne Stress.

Vorteile von LaTeX

Dann kommen wir zu den Vorteilen von LaTeX und warum ich persönlich dessen Einsatz befürworte.

Plain-Text: Alle Texte stehen in Plain-Text zur Verfügung. Keine proprietären Formate, keine Quasi-Standards und auch kein Gezippe. Ideal über mit jedem erdenklichen System damit zu arbeiten. Zum Schreiben wird nichts als ein einfacher Texteditor benötigt.
Source Control: Da nur mit Textdateien gearbeitet wird (abgesehen von eingebundenen Grafiken) eignet sich ein beliebiges Source Control System dazu, die Dateien darauf abzulegen und so eine Versionierung zu erreichen. Arbeiten mehrere Personen daran, greifen auch sämtliche Merge-Operationen.
Der Inhalt zählt! Beim Einsatz von Word und Co. muss erheblicher Aufwand geleistet werden, bis das Dokument so aussieht, wie man möchte. Ständig sind Umformatierungen notwendig, dann werden wieder Fußnoten nicht so angezeigt, wie sie sollten, Referenzen sind mit einem Mal ungültig usw. Je größer das Dokument wird, umso schwieriger die Verwaltung. Anders bei LaTeX. Hier zählt der Inhalt. Die Formatierung wird durch das Satzsystem vorgenommen. Während des Schreibens kann man sich voll und ganz auf das zu Schreibende konzentrieren. Es gibt kein Verrutschen einer Grafik, das einen aufhält. Keine Referenz, die nicht gesetzt werden will. Keine Seitenumbrüche, die den Kontext vernichten.
Styles / Formatierungen: Gerade bei aufwändigeren Formatierungen, beispielsweise der ordentlichen und übersichtlichen Formatierung von Sourcecodes und/oder Formeln) zeigt sich die Mächtigkeit von LaTeX gegenüber von Word und Konsorten. Einmal definiert, sieht das Ergebnis immer gleich aus, es gibt keine “externen” Einflüsse.
Erweiterungen: Für jeden Zweck stehen Erweiterungen (zB. via CTAN) zur Verfügung. Damit kann wirklich alles konfiguriert und angepasst bzw. unterstützt werden. Und auch hier: Man bleibt von ungewollten Ablenkungen verschont.
Gleicher Output - überall! Schon einmal mühsam das Word so hingebogen, dass alle Seitenumbrüche an der richtigen Stelle sind, Tabellen und Grafiken korrekt positioniert sind und dann doch auf einem anderen Rechner gedruckt? Ja? Dann sollte man sich LaTeX genauer ansehen :)

Schon eine Menge Vorteile und es ließen sich weitere finden …

Nachteile von LaTeX

Natürlich hat dieses System auch Nachteile, die hauptsächlich für Einsteiger eine große Hürde darstellen:

Änderungen sind nicht sofort sichtbar. Das Dokument muss zuvor “kompiliert” werden.
Word und Konsorten sind intuitiver
Hohe Verbreitung

Damit man versteht, was ich meine, hier ein Beispiel einer Tabelle unter LaTeX:

Die Ausgabe sieht dann in etwa so aus (je nach unterstützten Styles):

Das sieht nun zwar etwas kompliziert aus, geht aber nach einer Eingewöhnungsphase recht gut von der Hand. Und der Vorteil: Alle Tabellen sehen auch wirklich gleich aus und werden korrekt gesetzt. D.h. es muss nicht jede Tabelle extra mit einer Vorlage oder einem Styling versehen werden (was gerade bei längeren Dokumenten in unterschiedlichen Formatierungen resultiert).

Weitere Hürden?

Die einzige Hürde, die es hier zu betonen gibt trifft beim Thema Kollaboration zu: Hier ist es so, dass gerade für die Businessanwendung (wenn mehrere Personen an den selben Dokumenten arbeiten) die Akzeptanz sehr gering ist, da eben Word und Co. einfacher zu bedienen und mit einem WYSIWYG-Editor ausgestattet sind. Als Standard kann das Dokument eben mal an einen Kollegen und/oder Kunden gesendet werden, der seine Kommentare dazu abgibt (was jedoch auch mit einem PDF funktionieren würde). Daher eignet sich LaTeX wohl eher hauptsächlich im wissenschaftlichen Bereich, oder wenn man alleine bzw. in einem eingeschworenen Team arbeitet (bzw. gemeinsam an einem Dokument schreibt).

Gerade in letzterem Fall stellt sich LaTeX sehr schnell als Vorteil heraus. Zwar kann Word auch mit mehreren Dokumenten umgehen, die zu einem Hauptdokument zusammengefasst werden, jedoch sind mir dabei bis dato noch nie Probleme erspart geblieben.

Es gilt also durchaus abzuwägen, wann dann doch lieber zu Word gegriffen wird …

Was wird unter Windows benötigt?

Wie schon eingangs erwähnt ist es bei LaTeX unerheblich, unter welchem System gearbeitet wird. Die wohl größte Anzahl an Tools etc. findet sich in der Linux-Welt, aber auch unter Windows lässt sich bequem damit arbeiten. Hier eine kurze Auflistung der eingesetzten Tools:

MiKTeX: Eine aktuelle Implementierung von TeX für Windows inklusive aller notwendigen ausführbaren Dateien (um beispielsweise PDF, PS etc. zu erzeugen) und einem Package-Manager zum einfachen Nachinstallieren von gewünschten Erweiterungen.
TeXnicCenter: Ich verwende als Editor für gewöhnlich TeXnicCenter. Darüber werden viele Dinge einfacher gemacht (das Erstellen der Ausgaben, Hilfe bei einschlägigen Befehlen etc.). Dies steht sowohl in einer stabilen Version 1.0 zur Verfügung, als auch einer Alpha-Version 2.0 (diese habe ich im Einsatz und zeigt sich recht stabil).

Das war es schon an benötigten Tools. Wie gesagt, zum Schreiben selbst ist ein einfacher Editor ansich ausreichend (wer um all die notwendigen Befehle Bescheid weiß). Zur Erstellung der Ausgabe wird MiKTeX verwendet. Für die bequemeren dann eben eine entsprechende grafische Umgebung. Hier stehen neben TeXnicCenter noch Alternativen bereit, teilweise speziell für Windows, teilweise auch plattformunabhängige Lösungen, darunter unter anderem Kile, TeXstudio usw.

Ich möchte mehr Information!

Wer sich eingehender mit LaTeX beschäftigen möchte, dem sei das LaTeX-Kompendium ans Herz gelegt. Es gibt einen wirklich guten Überblick über diese Materie und bringt die wichtigsten Eigenheiten/Befehle näher, um schnell loslegen zu können. Nachdem LaTeX gerade im wissenschaftlichen Bereich eine große Verbreitung hat, finden sich viele Informationen und Hilfen im Internet, einfach nach dem Gewünschten suchen. Es sollte kaum eine Frage offen bleiben.

User Interfaces – Zukunftsvisionen

Kazim Bahar — 2012-02-12T23:43:05

Wie werden wohl Benutzeroberflächen künftig aussehen? Zwei sehr interessante Videos geben Eindrücke von User Interfaces von morgen. Die Firma Corning zeigt mit ihrem Video unterschiedliche Arten von Glas und den dazugehörigen UIs. A Day Made of Glass 2 Auch Microsoft zeigt in einem Video seine Zunkunftsvisionen. Productivity Future Vision (2011)

.NET BlogBook: Over and out

Norbert Eder [MVP] — 2012-02-09T11:16:23

Am 4. Januar 2007 wurde das .NET BlogBook von mir und Kai Gloth ins Leben gebracht. Dabei handelte es sich um eine Aufarbeitung der zum Thema .NET angefallenen Blogbeiträge unserer beider Blogs. Insgesamt sieben Ausgaben wurden veröffentlicht, die mehr als 50.000 Mal herunter geladen wurden. Eine ordentliche Leistung - wie ich meine - mit entsprechend viel positiver Rückmeldung. Aber die Zeit dreht sich weiter und dieses Format verlor zunehmend an Berechtigung. Aus diesem Grund habe ich mich dazu entschlossen, dieses Projekt nun gänzlich einzustellen. Die Downloads werden bis auf Weiteres erhalten bleiben und auf einer neuen, aber einfacheren, Site präsentiert.

.NET BlogBook im Laufe der Zeit

Und so haben sich die einzelnen Ausgaben im Laufe der Zeit verändert, beginnend mit Ausgabe 1

Danke

An dieser Stelle ein herzliches Dankeschön an alle, die dieses Projekt unterstützt haben. Sei es Kai, der fleißig mitgewirkt hat, sei es Thomas, der uns beim Cover-Design unterstützt hat, oder aber alle Leser mit ihren zahlreichen Rückmeldungen. Danke!

Multiple types were found that match the controller named ‘xxx’

Mario Priebe — 2012-02-07T14:06:05

Wenn man mit Areas innerhalb eines MVC Projektes arbeitet, dann wäre es ja sinnvoll beispielweise auch auch einen Controller namens Home zu verwenden. Das Problem ist nur, wenn man eben schon einen HomeController in der Anwendung hat, dass man vorerst die Fehlermeldung “Multiple types were found match the controller named “xxx” bekommt. Diese bekommt man [...]

Buch - Code Zero - Stel Pavlou

Norbert Eder [MVP] — 2012-02-06T16:00:00

8. März 2012. In der Antarktis, im Amazonas und unter der Sphinx stößt man auf mysteriöse kristallartige Artefakte mit hieroglyphenartigen Beschriftungen. Zwischen den drei Fundorten zirkuliert ein merkwürdiges Signal, dessen Botschaft ein Team internationaler Wissenschaftler verzweifelt zu entschlüsseln versucht. Doch es könnte bereits zu spät sein: Eine entsetzliche Prophezeiung droht sich zu erfüllen…

Klingt interessant. Ist es grundsätzlich auch. Eine Geschichte über abenteuerlustige Wissenschaftler, einer Handvoll Marines und einer unglaublichen Bedrohung. Die Welt will gerettet werden, doch dazu ist ein 12.000 Jahre altes Geheimnis zu lüften. Rund um den Sprachwissenschaftler Scott wird versucht uralte Glypten zu entschlüsseln. Dabei geraten sie immer weiter in einen gefährlichen Strudel.

Das Buch beginnt äußerst spannend, die Geschichte hinterlässt jedoch den Geschmack des Wiedergekauten. Schon oft hat man so ähnliche Stories gelesen, wenn auch vielleicht nicht mit diesem Grad an Aufarbeitung. Dennoch muss gesagt werden, dass der anfängliche Lesefluss recht stark nachlässt, da sich die Geschichte immer weiter verstrickt und leider in zu vielen Details und langatmigen Erklärungen untergeht. Kurzweilig stelle ich mir anders vor. Auch das Setting ist mittlerweile etwas langweilig, zu oft wurde man mit genau dieser Konstellation (Wissenschaftler werden zusammen gerufen, haben keine Zeit, müssen ein Problem lösen usw.) bereits konfrontiert. Das Ende selbst ist - kurz gesagt - für Hollywood geschrieben. Einfach too much. Es macht sich vielleicht auf einer Leinwand ganz gut, dennoch hätte ich mir einfach mehr erwartet.

Im Großen und Ganzen kann ich dieses Buch nicht komplett empfehlen, lediglich die erste Hälfte. Das ist nicht nicht genug. Schade, hätte die Story selbst Potential.

Bewertung: 1/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Jetzt Backbone.js lernen: JavaScript und Suchmaschinen

Norbert Eder [MVP] — 2012-02-06T12:00:00

Der letzte Teil der Serie Jetzt Backbone.js lernen beschäftigte sich mit dem Konzept des zu Grunde liegenden Projektes. Dieser Beitrag geht nun auf ein oftmals unterschätztes Thema der Webentwicklung ein, der Optimierung für Suchmaschinen in Verbindung mit JavaScript. Oder besser: Worauf sollte ich bezüglich Suchmaschinen aufpassen, wenn massig JavaScript eingesetzt wird. So soll ein stimmiges Bild entstehen, welches klar und deutlich hervorhebt, für welche Bereiche des Projektes JavaScript eingesetzt wird, und für welche nicht. Hierfür wird auch auf das Thema der Hashbangs eingegangen.

Abgrenzung

Wer sich in diesem Beitrag zahlreiche Tipps erwartet, wie sich denn das eigene Projekt für Suchmaschinen optimieren lässt, der wird an dieser Stelle nicht abgeholt. Hierzu findet sich bereits zahlreiches Material im Internet. Hier geht es darum festzustellen, welche Teile des Projektes sinnvoll über JavaScript abgewickelt werden und wie Content, der via AJAX bezogen wird, dennoch für Suchmaschinen zu finden ist.

Suchmaschinen und JavaScript

Um festlegen zu können, welche Teile einer Website statisch geliefert und welche dynamisch erzeugt werden, bedarf es zwei wichtiger Informationen. Zum Einen muss das Konzept der Website stehen. Dieses muss klar definieren, welche Inhalte vermittelt werden und worauf der Fokus gelegt wird. Zum Zweiten muss bekannt sein, wie Bots arbeiten.

Fälschlicherweise wird oftmals angenommen, dass Googlebot und Co. die Website gleich “sehen”, wie das ein normaler Besucher via Browser tut. Dem ist aber natürlich nicht so. Ein Bot kann (noch) nicht mit dynamischen Inhalten umgehen, lediglich statischer Inhalt ist für ihn sichtbar und kann somit ausgewertet werden. Verwendet man nun beispielsweise JavaScript, um Daten vom Server zu laden, um diese dann per Template etc. anzuzeigen, dann sind dies Daten, die für einen Bot nicht zur Verfügung stehen.

Ein gutes Beispiel hierfür findet sich in der Serie Jetzt Knockout.js lernen: In diesem Beispiel werden Daten vom Server bezogen und via Template zur Anzeige gebracht. Sieht man sich den Quelltext der Seite an, erhält man ein Bild des Bots auf diese Seite. Herzlich wenig für eine Indizierung.

Bei Interesse kann man sich Genaueres auch hier ansehen.

Hashbangs

Eine Möglichkeit dem ein wenig zu entgehen sind sogenannte Hashbangs (#!). Hierzu hat sich Google (schon vor langer Zeit) etwas einfallen lassen: Making AJAX Applications Crawable. Auch Bing kann damit mittlerweile umgehen, wodurch diese Lösung durchaus in Betracht gezogen werden kann und sollte. Wer darin noch nicht so versiert ist, sollte einen Blick darauf werfen.

So funktioniert ein Hashbang

Historisch gesehen wird ein Hash (#) als Named Anchor verwendet, also ein benannter Anker innerhalb eines Dokumentes, an den per Link gesprungen werden kann. Alles was in einem URI nach dem Hash angegeben wird, wird daher nicht an den Server gesendet, sondern rein clientseitig verwendet/ausgewertet. Oftmals ist es nun aber so, dass der Ankerpunkt nicht vorhanden ist, sondern per AJAX-Call nachgeladen wird. Dies kann nun natürlich von keiner Suchmaschine ausgewertet werden.

Der Ansatz von Google geht nun dahin, dass anstatt eines reinen Hashs ein Hashbang (#!) verwendet wird. Trifft der Googlebot auf einen derart aufgebauten Link, wird dieser umgewandelt. Aus

http://devtyr.norberteder.com/#!/series

wird dann

http://devtyr.norberteder.com/?_escaped_fragment=/series

Dieser URI wird vom Googlebot erneut aufgerufen und muss nun den dahinter verborgenen Content statisch zurückliefern. Somit kann der Inhalt indiziert werden. In der Anzeige von Suchergebnissen wird jedoch der “saubere” Link verwendet.

Da Bing und Co. ebenfalls nachgezogen haben, stellt diese Lösung keine größere Problematik mehr da bzw. wird keine größere Suchmaschine ausgegrenzt.

Anwendungsgebiete Hashbangs

Für welche Bereiche des Projektes kann dies sinnvoll sein? Rufen wir uns das Konzept in Erinnerung. So werden in der Header-Leiste Aktionen angeboten, beispielsweise das Umschalten der Sprache, zu der Ergebnisse anzuzeigen sind. Auch diverse Statistiken auf der rechten Seite. Diese könnten nun so gestaltet werden, dass nicht die gesamte Seite durch den Server aufbereitet werden muss, sondern lediglich der Inhaltsbereich bezogen wird. Ein klassischer Fall für AJAX. Und somit auch für die Verwendung von Hashbangs, da somit auch der dahinter liegende Inhalt indiziert werden kann.

Anregungen für weitere Anwendungsgebiete kann man sich unter anderem auch von Twitter holen.

Wo nun JavaScript verwenden?

Ein weiteres wichtiges Faktum ist, dass die geladene Seite Inhalte für die Indizierung bereit gestellt (nicht nur gefüllte META-Tags). Daher ist es anzuraten, die initiale Seite vollständig am Server aufzubereiten. Erst durch den Benutzer folgende Aktionen sollen nun via JavaScript und AJAX ausgewertet und verarbeitet werden. Dies betrifft daher unter anderem folgende Punkte:

Aufgrund der Browsersprache wird anfänglich entschieden, aus welchem Pool Einträge anzuzeigen sind. Hier werden die ersten n Einträge fix ausgeliefert. Per JavaScript kann es nun allerdings möglich sein, auf das Scrollverhalten des Benutzers zu reagieren und ein Infinite Scroll zu implementieren.
Das Wechseln der Sprache (und dem damit verbundenen Austausch des Inhaltsbereiches) kann am Client passieren. Durch entsprechendes Anbieten von Hashbangs können Suchmaschinen alle angebotenen Sprachen durchforsten und indizieren.
Etwaige Verlinkungen der Statistiken werden ebenfalls am Client gehandhabt. Die Statistiken selbst werden jedoch bereits am Server zusammengebaut. Hier sollte es völlig ausreichend sein, diese nur bei jedem erneuten Laden der Seite zu aktualisieren.
Im Bereich für angemeldete Benutzer ist eine Indizierung durch Suchmaschinen wenig zielführend, ja sogar gänzlich unerwünscht. Sämtliche Eingabeformulare, Übersichten, Statistiken etc. können komplett via JavaScript und AJAX-Calls abgewickelt werden.

Diese Punkte geben den grundsätzlichen Rahmen vor, der auch auf andere Stellen angewandt werden kann. Es sollte so jedoch durchaus gut vermittelt werden, welche Bereiche durch JavaScript (und in weiterer Folge Backbone.js) abgedeckt werden.

Fazit

Wer eine Website implementiert möchte natürlich auch, dass diese gefunden wird. Die Auswahl der einzusetzenden Technologien ist hierbei allerdings nur die halbe Miete. Beste Technologie verschafft noch immer keine Besucher. Daher ist auf das Thema der Suchmaschinen unbedingt Rücksicht zu nehmen und sollte ihnen die Chance geben, die Website zu indizieren. Dieser Beitrag hat einige grundlegende Informationen vermittelt, um auch Seiten mit starker JavaScript-Verwendung für Suchmaschinen zu optimieren. Auf weitere Optimierungen ist bewusst nicht eingegangen worden, da es hierzu zahlreiche Inhalte im Internet gibt.

Nachdem nun viele wichtige Fragen geklärt wurden (das Konzept steht, wir wissen, wann wir JavaScript einsetzen sollten und wann nicht), kann es ab dem nächsten Teil dieser Serie ans Eingemachte gehen. Es folgt eine Einführung in Backbone.js.

Jetzt Backbone.js lernen: Konzept WPF-Blogger

Norbert Eder [MVP] — 2012-01-31T12:00:00

Bevor es so richtig mit Backbone.js los geht, möchte ich das neue Konzept von WPF-Blogger vorstellen, die grundlegenden Features beschreiben und über den generellen Aufbau als solchen berichten. Es sind zahlreiche Änderungen angedacht. Aus dem Feed-Aggregat soll eine Site mit weit mehr Benutzer-Interaktion entstehen. Einige Funktionalitäten stellen jedoch auch lediglich Überlegungen dar, die ich gerne zur Diskussion freigeben möchte. Aber mehr in dieser Vorstellung.

Status Quo

WPF-Blogger war ursprünglich als reines Feed-Aggregat konzipiert. Ziel war es, Feeds zum Thema WPF zu bündeln und Interessierten gesammelt zur Verfügung zu stellen. Folgende Features wurden in der ersten Version inkludiert:

Feed-Aggregation von ausgesuchten Blog-Feeds
Mehrsprachigkeit
Registrierung von neuen Feeds
Übersicht aller registrierten Feeds
Archiv inklusive Suche
Gesamtfeed und Sprachfeeds
Statistiken

Umgesetzt wurde die Website mit ASP.NET und WebForms und ganz, ganz wenig JavaScript.

Feed-Aggregat

Für das Aggregieren der Feeds läuft ein eigener Job, der zeitgesteuert sämtliche Feeds hin auf Neuigkeiten prüft bzw. bereits importierte Artikel aktualisiert. Dieser bleibt durch die Neuentwicklung der Website unberührt, da alle wesentlichen Funktionen enthalten sind.

Quo vadis?

Das ursprüngliche “Konzept” war hauptsächlich auf mich persönlich zugeschnitten. Es sollte eine Stelle sein, an der ich alle interessanten Blogs zum Thema WPF sammeln kann. Da dies auch für andere von Interesse sein konnte, hatte ich mich damals kurzer Hand entschlossen, eine eigene Website online zu stellen.

Im Laufe der Zeit hat sich gezeigt, dass das Interesse für diese Site da ist, jedoch fehlt vielen (auch mir) die Möglichkeit selbst Informationen einzustellen bzw. gute Inhalte zu teilen - kennt man schließlich auch von anderen Webangeboten. So das Feedback.

Nun gut, aber wie sieht es um den geplanten Funktionen aus?

Login über Drittanbieter. In der ersten Implementierungsphase wird Twitter implementiert. Als Erweiterung sollen Facebook und Google Plus ebenfalls angeboten werden, um möglichst wenige auszuschließen. Gewisse Funktionalitäten sind nur im eingeloggten Zustand möglich.
Suche. Eine Suche war bis dato über das Archiv bereits möglich. Dies wird weiterhin möglich sein, soll aber präsenter platziert werden.
Sprachauswahl. Wie bisher soll auch die Sprachauswahl weiter bestehen bleiben. Durch diese wird bestimmt, aus welcher Sprache Ergebnisse anzuzeigen sind. Die generelle Sprache der Website ergibt sich durch die Browsersprache.
Sharing Content. Es soll möglich sein, einzelne Artikel über unterschiedliche Kanäle zu verteilen, um guten Content bestmöglich verteilen zu können. Angeboten sollen Twitter, Facebook und Google Plus werden. Zusätzlich soll es möglich sein, Artikel für das spätere Lesen zu markieren. Dies kann wahlweise in der Applikation selbst (man muss angemeldet sein) oder über die Anbindung von Drittanbietern (Read It Later etc.) geschehen.
Statistiken. Diese sollen helfen, gute und interessante Inhalte schnell aufzufinden. Diese beziehen sich auf Topics, Autor und Aufrufen.

Nachfolgend findet sich ein Screen-Mock, der den Aufbau im ausgeloggten Zustand näher beschreibt.

Loggt sich der Benutzer ein, erhält er neue Möglichkeiten. Im ersten Schritt ist angedacht, ein Blog bzw. einen neuen Artikel einzustellen. Unter den Aktionen (rechts oben) können dann benutzerspezifische Einstellungen vorgenommen werden. Der Rest der Seite bleibt unverändert.

Allgemeine Verwendbarkeit

Eines der Ziele dieser Umsetzung ist, dass die entstehende Anwendung breiter eingesetzt werden kann. Sie soll den Grundstock für Feed-Aggregationen bieten, jedoch nicht auf diesen speziellen Anwendungsfall beschränkt bleiben.

Eingestellte Blogs und Artikel

Sämtlicher eingestellter Inhalt, der nicht aus einer vertrauenswürdigen Quelle stammt wird geprüft. D.h. ein neu eingestelltes Blog wird nicht automatisch aggregiert, sondern landet auf einer Liste von zu prüfenden Quellen. Damit soll zum Einen vermieden werden, dass Spam in der Auswahl landet, zum Anderen ist es durchaus sinnvoll, sich zuerst die Erlaubnis des Blogbetreibers einzuholen (wenn dies im Internet offensichtlich auch kaum üblich ist).

Neue eingestellte Artikel werden ebenfalls geprüft und freigeschalten. Auch hier soll es vermieden werden, dass Spam publiziert wird. Beiträge von Benutzern, die bereits 2 (oder eine andere zu konfigurierende Anzahl) freigeschaltete Artikel eingestellt haben, werden automatisch publiziert, da diese als vertrauenswürdig eingestuft werden. Dies kann über die Administration jederzeit rückgängig gemacht werden.

Administration

Die Administration soll im Wesentlichen folgende Funktionen bieten:

Benutzerverwaltung
Verwaltung der Blogs
Verwaltung der eingestellten Beiträge (Beiträge via Blog-Feeds werden in dieser Liste nicht behandelt)
Verfügbare Sprachen
Diverse Einstellungen

Die Administrationsseite wird Benutzern mit entsprechender Rolle über die Aktionen angeboten.

Nichtziel

Es ist kein Ziel von WPF-Blogger, die gesamten Inhalte anzuzeigen. Der Autor soll honoriert werden. Aus diesem Grund werden auch weiterhin nicht die gesamten Beiträge angezeigt, sondern lediglich ein Teaser.

Offene Fragen / Feedback erwünscht

Es gibt meinerseits einige Überlegungen, die grundsätzlich gut zur Neuentwicklung von WPF-Blogger passen würden, bei denen ich mir allerdings nicht zu 100% sicher bin. Ich möchte sie an dieser Stelle zur Diskussion stellen, in der Hoffnung auf Feedback.

Bewertung

Von einschlägigen Seiten (siehe beispielsweise DotNetKicks oder der deutschsprachigen Umsetzung) ist man es gewohnt, Beiträge bewerten zu können, um so die Spreu vom Weizen zu trennen. Das ist grundsätzlich eine gute Sache. Im Endeffekt ist mein Ansatz aber der Aktualität gewidmet. Der Benutzer soll einen schnellen Überblick erlangen, was sich in den abgedeckten Bereichen tut. Nichts desto trotz sollte er - meiner Meinung nach - doch auch eine Rückmeldung erhalten, welcher Inhalt von anderen empfohlen wird. Anstatt einer direkten Bewertung kann dies aber auch durch die eigentliche Statistik-Auswertung geschehen. Links, die häufig geklickt werden, scheinen grundlegend interessanter zu sein, als solche mit wenigen Aufrufen. Daraus könnte eine Bewertung abgeleitet werden, ohne den Benutzer zu einer Bewertung zu nötigen.

Kommentare

Wünschenswert wäre eine Möglichkeit Kommentare zu hinterlassen. Die Ideallösung wäre, dass sämtliche Kommentare an das eigentliche Blog zurückfließen und dem Verfasser des Artikels zu Gute kommen. Allerdings habe ich hierfür noch keine zufriedenstellende Lösung gefunden, wodurch ich die gesamte Funktionalität in Frage stelle. Meinungen?

Ausblick

Der nächste Artikel der Serie über Backbone.js beschäftigt sich mit dem Thema der Suchmaschinen. Darin wird hinterfragt, für welche Teile der Website der Einsatz von Backbone.js tatsächlich geeignet ist. Soll heißen, welche Inhalte werden statisch ausgeliefert und welche erst durch den Client erstellt.

Jetzt Backbone.js lernen: Die Serie

Norbert Eder [MVP] — 2012-01-28T14:36:24

Nach der erfolgreichen Serie über Knockout.js und dem durchwegs positiven Feedback, möchte ich - wie bereits angekündigt - eine neue Serie starten. Diese beschäftigt sich mit Backbone.js. In dieser Vorabinformation möchte ich kurz darauf eingehen, was der Leser erwarten darf. Und das ist eine ganze Menge, da diese Serie einen gänzlich anderen Weg einschlagen wird.

Praxisbeispiel

Im Rahmen der Knockout.js-Serie wurden unterschiedliche Beispiele behandelt. Diese wurden möglichst nahe an der Realität gehalten, aber es mussten auch Teile konstruiert werden. Dies soll in dieser Serie anders sein.

Im Rahmen der Backbone.js-Serie wird ein bereits bestehendes Projekt neu implementiert. Konkret geht es um meine Website http://wpf-blogger.com. Diese aggregiert Feeds von Bloggern zu WPF, Silverlight und Windows Phone in mehreren Sprachen. Damit soll einschlägigen Entwicklern eine zentrale Anlaufstelle für aktuelle Tipps, Tricks und Techniken auf Basis der genannten Technologien geboten werden.

Diese Entscheidung hat mehrere Hintergründe: So besteht die aktuelle WPF-Blogger bereits unverändert seit mehreren Jahren und bedarf zahlreicher Neuerungen. Da mir eine Weiterentwicklung auf der aktuellen Basis wenig zielführend erscheint, habe ich mich dazu entschieden, auf aktuelle Technologien und Techniken zu setzen, auch wenn manches davon als Hype angesehen werden kann.

Was kann der Leser nun erwarten?

Da ein konkretes Projekt zur Umsetzung gelangt, wird die Backbone.js-Serie einen hohen Grad an Praxiswissen und - im Rahmen der Umsetzung gemachten - Erfahrungen aufweisen. Ideal, um sich ein Bild über diese Bibliothek zu machen und einen etwaigen eigenen Einsatz besser abschätzen zu können.

Ein weiterer Mehrwert besteht sicherlich darin, dass ich - als der Autor dieser Serie - Backbone.js gerade erst lerne. Daher sind zahlreiche Hinweise auf Fallen und Tücken zu erwarten, in die ich getreten bin - oder noch treten werde.

Großes Augenmerk werde ich auch auf die Themen Konzept und Testing legen.

Eingesetzte Technologien und Bibliotheken

Das Projekt soll aus aktueller Sicht folgende (Quasi-)Standards, Technologien und Bibliotheken umfassen:

HTML5
CSS3
jQuery
Backbone.js
.NET

Sollte sich die Notwendigkeit ergeben, weitere Bibliotheken zu verwenden, wird diese Liste entsprechend erweitert.

Hinweis: Die obige Liste setzt auf weit mehr als nur Backbone.js. Auch diese werden in dieser Serie teilweise besprochen/diskutiert. Das Hauptaugenmerk wird jedoch auf Backbone.js gelenkt.

Sourcecode / Sharing

Jeder soll sich den aktuellen Sourcecode ansehen, aber auch für eigene Projekte verwenden können. In der Knockout.js-Serie habe ich hierfür teilweise JSFiddle verwendet, ist aber in diesem Rahmen nicht sehr zielführend. Aus diesem Grund habe ich mich entschieden, das gesamte Projekt auf github zu hosten.

Inhalt

Die einzelnen Teile dieser Serie sind nicht im Vorab festgelegt, sondern ergeben sich aus der laufenden Entwicklung des Projektes. Die untenstehende Liste ist daher als flexibel anzusehen und wird ständig erweitert bzw. auf dem aktuellen Stand gehalten.

Jetzt Backbone.js lernen: Die Serie (dieser Beitrag)
Jetzt Backbone.js lernen: Konzept WPF-Blogger
Jetzt Backbone.js lernen: JavaScript und Suchmaschinen
Jetzt Backbone.js lernen: Grundlagen Backbone.js
Weitere Teile: TBD

Auf neue Teile wird zusätzlich über Twitter hingewiesen.

Feedback

JavaScript, HTML5 und CSS3 waren bis dato nicht mein Hauptscope. Daher ist es sehr wahrscheinlich, dass jede Menge meines Codes einfacher, schöner und besser geschrieben werden kann. Damit die Leser, die, so wie ich, ebenfalls keine Gurus auf diesem Gebiet sind, sich weiterentwickeln, hoffe ich auf zahlreiches Feedback. Darum bitte ich schon jetzt die Gurus unter meinen Lesern, mit ihrer Meinung nicht hinter den Berg zu halten.

Jetzt Knockout.js lernen: Mapping

Norbert Eder [MVP] — 2012-01-27T12:30:00

Im letzten Teil meiner Serie zu Knockout.js beschäftigen wir uns mit dem Mapping Plugin. In einigen der letzten Beispiele wurde mit JSON gearbeitet und so Daten simuliert, die vom Server stammen. Damit diese an eine View gebunden wurde, musste das ViewModel (welches Observables enthält) manuell aufgefüllt werden. Das Mapping Plugin bietet hier eine Unterstützung, die in diesem Anwendungsfall sehr viel Aufwand spart. Dieser Artikel zeigt wie es funktioniert.

Voraussetzungen

Damit das Mapping-Plugin verwendet werden kann, muss es via github bezogen werden. Hier der Direktlink zur aktuellsten Version. Das Script ist dann natürlich entsprechend einzubinden.

Grundlagen / Wiederholung

In den letzten Teilen dieser Serie wurden alle ViewModels manuell erstellt und sahen - mehr oder weniger - so aus:

     var MyViewModel = function() {

        this.title = ko.observable();    

        this.author = ko.observable();

        this.pages = ko.observable();

    }

Die Daten wurden dann so gesetzt:

    myViewModel.title('Ein Buch');

    myViewModel.author('Ein Autor');

    myViewModel.pages(500);

So musste das für jede Variable vorgenommen werden. Ein recht großer Aufwand, vor allem, wenn die Struktur komplexer wird.

Knockout.mapping kann diesen Aufwand für uns stark minimieren.

Beispiel

Nun aber zu einem Beispiel an Hand dessen wir uns ansehen, wie knockout.mapping funktioniert. Dazu benötigen wir eine View, die mit einer Schaltfläche ausgestattet ist. Bei einem Klick darauf werden JSON-Daten vom Server geladen und an die View gebunden. Hier vorerst die View:

    <div id="control">

        <input type="button" data-bind="click: loadData" value="Load data"></input>

    </div>

    <div id="data">

        <h2>Loaded Data</h2>

        <p>

            <span data-bind="text: userName"></span><br/>

            <span data-bind="text: tweetCount"></span>

        </p>

    </div>

Soweit noch nichts Neues, aber wenden wir uns der JavaScript-Seite zu.

    $(function(){

    var OverallViewModel = function() {

        this.loadData = function() {

            $.getJSON('http://dl.dropbox.com/u/30654117/Demos/JavaScript/Knockout.js/Mapping/data/data.json', function(data) {

                var viewModel = ko.mapping.fromJS(data);

                ko.applyBindings(viewModel, document.getElementById('data'));

            });

        };

    }

    var firstViewModel = new OverallViewModel();

    ko.applyBindings(firstViewModel, document.getElementById('control'));

    });

Hier wird ein ViewModel namens OverallViewModel definiert und an das DIV mit der Id control gebunden. Darin enthalten ist die Funktion loadData, welche bei einem Klick auf die Schaltfläche ausgelöst wird.

Darin wird im ersten Schritt das JSON vom Server bezogen. Im Anschluss wird ko.mapping.fromJS mit den Daten als Parameter aufgerufen. Das Ergebnis ist ein ViewModel, welches die entsprechenden Eigenschaften, welche im JSON definiert sind (als Observables) besitzt.

Der Vollständigkeit halber hier das JSON:

    {

        "userName": "Norbert Eder",

        "tweetCount": 10000

    }

Das resultierende ViewModel wird nun via ko.applyBindings an das DIV mit der Id data gebunden und die Daten kommen sofort zur Anzeige. Das einfache Beispiel ist fertig. Aber das Plugin kann noch mehr.

Ins Mapping eingreifen

Meine erste Frage - und das wird vermutlich jedem so gehen, war:

So ein einfaches ViewModel ist ganz nett, aber was, wenn ich Funktionen, berechnete Eigenschaften etc. benötige?

Aber auch hierfür gibt es eine entsprechende Lösung.

Erweitern wir obiges Beispiel ein wenig. Zu den rudimentären Tweet-Informationen sollen nun einzelne Tweets hinzugefügt und angezeigt werden. Jeder Eintrag soll mit einer Schaltfläche bestückt werden, mit deren Hilfe ein Retweet durchgeführt werden kann. Auch das sollte nun recht einfach gehen, haben wir uns doch bereits mit Templates beschäftigt. Die Herausforderung ist jedoch, die Tweets mit einem eigenen ViewModel zu versehen, welches eine entsprechende Funktion retweet anbietet, um eben diese Aktion ausführen zu können.

Zuerst aber ein Blick auf die Daten, zwecks Übersicht der durchgeführten Änderungen:

    {

        "userName": "Norbert Eder",

        "tweetCount": 10000,

        "tweets": [

            {

                "content": "Ein Testtweet der mit Sicherheit 140 Zeichen nicht überschreitet."

            },

            {

                "content": "Knockout.js ist schon eine sehr feine Sache!"

            },

            {

                "content": "Bin schon gespannt auf Backbone.js. Soll auch nett sein."

            }

        ]

    }

Nun muss die View umgebaut und mit einem Template versehen werden, auch noch nicht spektakulär:

    <div id="control2">

        <input type="button" data-bind="click: loadData" value="Load data"></input>

    </div>

    <div id="data2">

        <h2>Loaded Data</h2>

        <p>

            <span data-bind="text: userName"></span><br/>

            <span data-bind="text: tweetCount"></span>

        </p>

        <div data-bind="template: { name: 'tweet-template', foreach: tweets }"></div>

    </div>    

    <script type="text/html" id="tweet-template">

        <p data-bind="text: content"/>

        <input type="button" value="Retweet" data-bind="click: retweet"/></input>

    </script>

Interessant ist das ViewModel, oder besser gesagt, sind die beiden ViewModels, da für die Anzeige eines einzelnen Tweets ein weiteres ViewModel (nennen wir es TweetViewModel) definiert werden muss. Immerhin möchten wir eine Funktion unterbringen. Darin sehen wir nun auch bereits den ersten Trick:

    var TweetViewModel = function(data) {

        ko.mapping.fromJS(data, {}, this);

        this.retweet = function() {

            alert("retweeted");

        };

    }

Die Funktion retweet ist einfach und zeigt hier lediglich einen Alert an. Zumindest kann so die Funktionalität getestet werden. Interessanter ist, dass das ViewModel Daten als Parameter übergeben bekommt und diese via ko.mapping.fromJS auf sich selbst appliziert. Damit werden für die in den Daten enthaltenen Eigenschaften korrespondierende Observables am ViewModel erzeugt. Erster Teil erledigt.

Nun muss noch ein Weg gefunden werden, eine Instanz von TweetViewModel pro Item zu erzeugen. Dazu muss das Haupt-ViewModel ein wenig adaptiert werden.

Hinweis: Dieses wurde mit einem anderen Namen als im einfachen Beispiel zu sehen, da es im gleichen Beispiel zu finden ist, Download siehe weiter unten.

Sehen wir es uns an:

    var AnotherViewModel = function() {

        this.loadData = function() {

            $.getJSON('http://dl.dropbox.com/u/30654117/Demos/JavaScript/Knockout.js/Mapping/data/data2.json', function(data) {

                var viewModel = ko.mapping.fromJS(data, mapping);

                ko.applyBindings(viewModel, document.getElementById('data2'));

            });

        };    

    }

Abgesehen davon, dass die Daten nun von einer anderen Quelle bezogen werden, sticht diese Änderung ins Auge:

var viewModel = ko.mapping.fromJS(data, mapping);

Es wird ein neuer Parameter übergeben. Eine Konfiguration für das Mapping.

    var mapping =  {

        'tweets':  {

            create: function(options) {

                return new TweetViewModel(options.data);

            }

        }

    }

Darin wird ein create-Callback definiert, der sich auf das Array tweets bezieht (siehe Daten weiter oben) und für alle Einträge aus dem tweets-Array (siehe Daten) aufgerufen. Als Parameter werden options übergeben. Diese enthalten:

data: Ein JavaScript-Objekt mit den Daten
parent: Das Eltern-Objekt oder das Array zu dem die Daten gehören

Schlussendlich definiert die Zeile

return new TweetViewModel(options.data);

dass eine neue Instanz von TweetViewModel instanziiert werden soll. Die Daten werden als Parameter übergeben und innerhalb des ViewModel weiterverarbeitet (siehe weiter oben).

Das wunderschön gestaltete Ergebnis:

Fazit

Diese beiden Beispiele zeigen sehr schön, dass man sich mit Hilfe des Mapping Plugins jede Menge Schreibarbeit - und damit durchaus auch Fehler - sparen kann. Durch das mögliche Eingreifen in die Erstellung der ViewModels sind alle notwendigen Szenarien vorstellbar und keine Grenzen gesetzt.

Download / Showcase

Getestet werden können die beschriebenen Beispiele hier. Gleich untenstehend der Download des gesamten Paketes:

Feedback

Gerne nehme ich jegliches Feedback zu diesem Beitrag, als auch zur gesamten Serie zu Knockout.js entgegen. Hat dir die Serie geholfen? Hast du Anmerkungen, Anregungen? Fehlt ein Teil, sprich, wurde ein wichtiges Thema nicht besprochen? Teile es mir doch einfach mit und verfasse gleich einen Kommentar.

Jetzt Knockout.js lernen: Die Serie

MVC / Razor Style-Switcher – Quicky

Mario Priebe — 2012-01-26T13:25:17

Heute möchte ich zeigen, wie man sich einen einfachen Style-Switcher mittels jQuery in einem MVC / Razor Projekt einbauen kann. Den Basis-Style setzen wir zu Beginn, wenn die Seite zum ersten Mal geöffnet wird. Wichtig ist, das wir eine Id setzen, um in unserer jQuery Funktion dieses Element wieder zu finden. <link id="jQ" href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css")" rel="Stylesheet" [...]

Jetzt Knockout.js lernen: Formularvalidierung mit Undo

Norbert Eder [MVP] — 2012-01-25T11:30:00

In Jetzt Knockout.js lernen: Observables erweitern der Serie zu Knockout.js wurde gezeigt, wie Observables erweitert werden können. Als Beispiel diente eine Validierung auf Basis von einzelnen Observables. Nun hängen diese in der Regel aber in einem Formular zusammen, wodurch eine Gesamtvalidierung und eine damit verbundene Freischaltung von Schaltflächen bzw. weiteren Interaktionsmöglichkeiten einhergeht. Dieser Beitrag greift das Validierungsbeispiel auf und erweitert es im Rahmen dieser Anforderung.

Ausgangspunkt

Den Ausgangspunkt dieses Beitrags bietet dieses Beispiel, zu dem Florian einen sinnvollen Erweiterungswunsch hinterlassen hat:

Interessant wäre noch ein Save-Button, der nur aktiv ist, wenn es keine Fehler auf dem gesamten Formular mehr gibt, sowie ein Cancel- bzw. Undo-Button der bei eventuellen Fehlern, die Werte zurücksetzt auf den ursprünglichen Wert.

Aus meiner Sicht handelt es sich hierbei um eine gängige Anforderung, die ich natürlich aufgegriffen habe. Wer den Hintergrund des Beispiels erfahren möchte, kann dies hier vollständig nachlesen. Als Zusammenfassung: Das Beispiel zeigt, wie ein eigener Extender für Observables unter Knockout.js geschrieben werden kann, um einzelne Observables zu validieren. Als Validierung wurde eine Erweiterung hinsichtlich Pflichtfelder implementiert. Eine Gesamtvalidierung war nicht vorgesehen.

Gesamtvalidierung

Aktuell wird jedes Observable einzeln validiert. Entsprechend der Anforderung sollen nun zwei Schaltflächen für das Speichern, als auch das Zurückstellen auf die zuletzt gültigen Werte (im Fehlerfalle) hinzugekommen. Damit diese auch entsprechend freigeschalten sind, muss das ViewModel bekannt geben, in welchem Status es sich gesamt befindet. Dieser ergibt sich aus den Status jedes einzelnen Observables. Dies können wir uns berechnen lassen (ko.computed) und nennen wir hasErrors.

     self.hasErrors = ko.computed(function() 

    { 

       return self.title.hasError() || 

              self.author.hasError() || 

              self.pages.hasError(); 

    });

Hinweis: self ist eine Referenz auf this und wurde im Vergleich zum originalen Beispiel hinzugefügt, um innerhalb der anonymen Funktion auf die Eigenschaften und Funktionen des ViewModels zugreifen zu können.

Damit könnten nun auch bereits die beiden neuen Schaltflächen gesteuert werden:

    <input type="button" value="Save" data-bind="disable: hasErrors"></input>

    <input type="button" value="Undo" data-bind="enable: hasErrors"></input>

Auf die Speichern-Schaltfläche möchte ich an dieser Stelle nicht weiter eingehen, viel spannender ist hier der Undo-Button. Dieser soll ja - im Fehlerfalle - die zuletzt gültigen Werte hinterlegen. Dies bedeutet, dass diese erfasst werden müssen.

Nun ist es so, dass die einzelnen Eingabefelder eine value-Bindung besitzen und das Durchschreiben der Werte via valueUpdate auf den Wert afterkeydown gesetzt wurde. Das ViewModel wird also in Echtzeit aktualisiert. Darauf können wir also nicht aufbauen, da der Benutzer beispielsweise per Backspace alle Zeichen von “Beispiel” löschen könnte, durch die Echtzeit-Aktualisierung würde der zuletzt valide Wert durch “B” repräsentiert. Worauf wir uns jedoch hängen können ist das Verlassen des Fokus, also dem OnBlur-Ereignis.

Dazu brauchen wir eine Funktion, die uns den beim Verlassen vorhandenen - gültigen - Wert übernimmt:

    self.updateLastValidValue = function(observable) {

      if (!observable.hasError()) {

          observable.lastValidValue(observable());

      }

    };

Als Parameter wird das an das Eingabefeld gebundene Observable übergeben. So kann auch auf die durch den Extender geschriebenen Eigenschaften (siehe hasError) zugegriffen werden. Läuft die Validierung ohne Fehler, dann ist ein entsprechender Wert vorhanden und kann übernommen werden. Hierzu wird eine neue Eigenschaft namens lastValidValue mit dem Wert gesetzt.

Damit dies nun bei allen Eingabefeldern berücksichtigt wird, ist deren Bindung zu aktualisieren, hier an Hand der Titel-Eingabe:

    <input data-bind='value: title, valueUpdate: "afterkeydown", event: { blur: function() { updateLastValidValue(title); }}' />

So werden die Werte nun weiterhin in Echtzeit übernommen und zusätzlich beim Verlassen des Feldes die Funktion updateLastValidValue des ViewModels aufgerufen. Das ist allerdings noch nicht alles, denn ein etwaiger initial gesetzter Wert würde nicht berücksichtig werden. An dieser Stelle bietet es sich an, den bereits existierenden Extender (requireField) zu erweitern:

    ko.extenders.requiredField = function(target, message) {   

        target.hasError = ko.observable();

        target.validationMessage = ko.observable();

        target.lastValidValue = ko.observable();

        function validate(newValue) {

           target.hasError(newValue ? false : true);

           target.validationMessage(newValue ? "" : message || "* required");

        }

        function setInitialValueIfValid() {

            if (!target.hasError()) {

                target.lastValidValue(target());

            }  

        }

        validate(target());

        setInitialValueIfValid();

        target.subscribe(validate);

        return target;

    };

Neu ist die Funktion setInitialValueIfValid(). Diese wird beim Erstellen von requiredField durchlaufen (siehe den Aufruf direkt nach der initialen Validierung) und, wenn ein Wert vorhanden ist, lastValidValue mit dem entsprechenden Wert beschrieben.

Zu guter Letzt fehlt noch das tatsächliche Zurückschreiben der Werte, wenn die Undo-Schaltfläche geklickt wird. Dazu benötigen wir eine Funktion, nennen wir sie resetToValidValues:

    self.resetToValidValues = function() {

      self.title(self.title.lastValidValue());

      self.author(self.author.lastValidValue());

      self.pages(self.pages.lastValidValue());

    };

Außerdem muss die click-Bindung auf der Schaltfläche gesetzt werden:

    <input type="button" value="Undo" data-bind="enable: hasErrors, click: resetToValidValues"></input>

Fertig ist die Gesamtvalidierung des Formulars, inklusive der Möglichkeit, die zuletzt gültigen Werte zurück zu schreiben.

Ergebnis

An dieser Stelle nun zwei Screenshots, die die Implementierung visuell veranschaulichen. Der erste Screenshot zeigt das gesamte Formular ohne Validierungsfehler:

Und hier nun im Fehlerfalle:

Download / Showcase

Wie immer gibt es auch dieses Beispiel vollständig für eigene Tests. Unter http://jsfiddle.net/VgvuK/ findet sich die entsprechende Spielwiese. Wer möchte, kann sich dies auch unterhalb ansehen, sollte hierbei allerdings auf die Nutzung eines IE verzichten:

Fazit

Die notwendigen Erweiterungen der “Feld-Validierung” konnte in meinen Augen mit sehr wenig Aufwand auf eine Gesamtvalidierung erweitert werden, wodurch für den Benutzer sehr schnell ersichtlich ist, welche Aktionen zur Verfügung stellen. Ein äußerst sauberer Weg, durch die mögliche Auftrennung.

Feedback

Gerne nehme ich - wie immer - konstruktive Kritik, Anregungen und Anmerkungen entgegen. Einfach einen kurzen Kommentar hinterlassen, es findet sich sicherlich die eine oder andere Verbesserungsmöglichkeit.

Jetzt Knockout.js lernen: Die Serie

Google API jQuery UI 1.7.2 Theme Übersicht + Razor-Layout

Mario Priebe — 2012-01-24T15:02:13

Im folgenden eine kleine Übersicht von Google API jQuery UI 1.7.2 Designs, so vorbereitet, dass diese schnell im Header eines Razor Layouts eingefügt werden können. base <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css")" rel="Stylesheet" type="text/css" /> blitzer <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css")" rel="Stylesheet" type="text/css" /> dark-hive <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css")" rel="Stylesheet" type="text/css" /> eggplant <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css")" rel="Stylesheet" type="text/css" /> flick <link href="@Url.Content("http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css")" rel="Stylesheet" type="text/css" /> [...]

Jetzt Knockout.js lernen: Observables erweitern

Norbert Eder [MVP] — 2012-01-24T10:00:00

Im vergangenen Teil der Serie zu Knockout.js wurden benutzerdefinierte Bindungen behandelt. Dieser Teil beschäftigt sich nun damit, wie Observables auf eigene Bedürfnisse hin erweitert werden können. Knockout.js unterstützt das Lesen und Schreiben von Werten, als auch Benachrichtigungen bei Wertänderungen. In zahlreichen Fällen (zum Beispiel Validierung) möchte man dieses Verhalten jedoch erweitern. Dieser Beitrag zeigt, wie dies umgesetzt werden kann.

Extender zur Validierung erstellen

Knockout.js bietet mit Extendern eine Erweiterungsmöglichkeit an, sich an Observables zu hängen. Das nachfolgende Beispiel erweitert Observables durch die Möglichkeit einer Validierung.

Im ersten Schritt erstellen wir ein einfaches ViewModel, welches an eine View gebunden wird. Hier das ViewModel:

     function BookViewModel(title, author, pages) {

        this.title = ko.observable(title).extend({ requiredField: "Please enter a title" });

        this.author = ko.observable(author).extend({ requiredField: "Please enter an author" });

        this.pages = ko.observable(pages).extend({ requiredField: "" });

    }

    var viewModel = new BookViewModel("Windows Presentation Foundation 4.5 - Einführung und Praxis", "Norbert Eder", 400);

    ko.applyBindings(viewModel);

Und passend dazu die View:

    <div id="bookform">

        <h3>Title</h3>

        <p>

            <input data-bind='value: title' />

        </p>

        <h3>Author</h3>

        <p>

            <input data-bind='value: author' />

        </p>

        <h3>Pages</h3>

        <p>

            <input data-bind='value: pages' />

        </p>

    </div>

Soweit nichts Neues. Nun möchten wir aber, dass eingegebene Werte validiert werden. In diesem Fall beschränke ich mich darauf, Felder als benötigt zu definieren. Ein Extender wird daher benötigt. Um einen Extender zu schreiben muss ko.extenders um eine Funktion erweitert werden, nennen wir sie requiredField. Diese enthält als Parameter das Ziel der Erweiterung und eine Nachricht (die für die Anzeige einer Meldung verwendet werden kann).

    ko.extenders.requiredField = function(target, message) {   

        target.hasError = ko.observable();

        target.validationMessage = ko.observable();

        function validate(newValue) {

           target.hasError(newValue ? false : true);

           target.validationMessage(newValue ? "" : message || "* required");

        }

        validate(target());

        target.subscribe(validate);

        return target;

    };

Der Extender hängt dem Ziel zwei Eigenschaften hasError und validationMessage um. Die erste beschreibt, ob ein Validierungsfehler vorliegt, die zweite, welcher Fehler dies genau ist. Zusätzlich wird eine Funktion validate benötigt, welche die Validierung schlussendlich durchführt. Dies ist in diesem Beispiel recht einfach. So muss lediglich auf Vorhandensein eines Wertes geprüft werden. Ist dies nicht der Fall wird die über den Parameter message übergegebene Meldung angezeigt - wurde keine eigene Meldung übergeben, wird ein Fallback auf eine Standardmeldung verwendet.

Via validate(target()); wird eine initiale Validierung durchgeführt. Per target.subscribe(validate); wird ein Abonnement hinsichtlich Wertänderungen hinzugefügt, damit auch in diesen Fällen die Validierung durchgeführt wird.

Anschließend wird das ursprüngliche Observable zurück geliefert. Das war alles, was auf JavaScript-Seite zu implementieren war. Nun ist noch die View anzupassen, um etwaige Meldungen sichtbar zu machen.

    <div id="bookform">

        <h3>Title</h3>

        <p data-bind="css: { error: title.hasError }">

            <input data-bind='value: title, valueUpdate: "afterkeydown"' />

            <span data-bind='visible: title.hasError, text: title.validationMessage'> </span>

        </p>

        <h3>Author</h3>

        <p data-bind="css: { error: author.hasError }">

            <input data-bind='value: author, valueUpdate: "afterkeydown"' />

            <span data-bind='visible: author.hasError, text: author.validationMessage'> </span>

        </p>

        <h3>Pages</h3>

        <p data-bind="css: { error: pages.hasError }">

            <input data-bind='value: pages, valueUpdate: "afterkeydown"' />

            <span data-bind='visible: pages.hasError, text: pages.validationMessage'> </span>

        </p>

    </div>

Für die Erweiterung der View wurden insgesamt drei Schritte unternommen:

Für die input-Felder wird die Aktualisierung des Wertes im ViewModel durch valueUpdate auf afterkeydown geändert, damit jede Änderung sofort im ViewModel wirksam wird und so schon zur Eingabe eine Validierung stattfinden kann.
Es wird ein span-Element eingeführt. Dieses enthält eine visible-Bindung auf die Eigenschaft hasError - ist also nur sichtbar, wenn ein Validierungsfehler aufgetreten ist. Der anzuzeigende Wert des span-Elementes wird auf die validationMessage gebunden.
Die umschließenden p-Tags wurden um eine css-Bindung erweitert. Dadurch wird bei Vorhandensein eines Validierungsfehlers eine CSS-Klasse error auf das Element gehängt, wodurch ein Styling einfach gemacht wird. So sieht es aus:

Download / Showcase

Das Beispiel kann unter http://jsfiddle.net/zHFEU/ getestet und bezogen werden. Untenstehend findet sich das JSFiddle in eingebundener Form, benötigt aber einen Browser ungleich IE.

Fazit

Dieses Beispiel hat gezeigt, wie einfach es möglich ist, ein Verhalten á la Validierung per Knockout.js und Extender zu realisieren. Auch hier gilt wieder, dass die Zuständigkeiten sauber getrennt sind und einfach gewartet werden.

Jetzt Knockout.js lernen: Die Serie

Jetzt Knockout.js lernen: Benutzerdefinierte Bindungen

Norbert Eder [MVP] — 2012-01-23T06:50:32

In den vorangegangenen drei Teilen der Serie über Knockout.js haben wir uns mit einer generellen Einführung, einer beispielhaften Bindung an Formulare und Listen als auch der Verwendung von Vorlagen beschäftigt. Dieser Teil beschäftigt sich nun mit der Möglichkeit der benutzerdefinierten Bindungen. So wird gezeigt, wann diese sinnvoll verwendet werden und wie sie denn überhaupt funktionieren.

Bindungen im Allgemeinen

Vordefinierte Bindungen stehen für die unterschiedlichsten Bereiche zur Verfügung. Abgedeckt werden Bindungen um Text und Darstellung zu kontrollieren (z.B. visible, text, html, css usw.), um mit Formular-Feldern zu arbeiten (submit, checked, value, etc.) und zur Ablaufsteuerung (foreach, if, ifnot, with).

Eine vollständige Übersicht findet sich in den Slides des ersten Teils.

Trotz der mannigfaltigen Möglichkeiten, besteht der Bedarf an eigenen Bindungen, gerade dann, wenn Werteänderungen spezielle Auswirkungen auf DOM Elemente haben sollen. Äußerst hilfreich sind benutzerdefinierte Bindungen auch dann, wenn Steuerelemente von Drittanbietern zum Einsatz kommen und so spezielle oder zusätzliche Attribute/Verhalten bedient werden sollen.

Grundlagen

Eine benutzerdefinierte Bindung wird durch folgenden Code erstellt, wobei myBindingName mit dem tatsächlichen Namen der Bindung zu ersetzen ist:

     ko.bindingHandlers.myBindingName = {

        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        },

        update: function(element, valueAccessor, allBindingsAccessor, viewModel) {

        }

    };

Von Bedeutung sind die beiden Funktionen init und update:

init: Wird nur beim ersten Auswerten der Bindung aufgerufen. Ideal für die Initialisierung, beispielsweise dem Setzen von Eventhandlern.
update: Hier kann darauf reagiert werden, wenn sich gebundene Werte verändern. Der Aufruf erfolgt, wenn die Bindung das erste Mal angewandt wird und bei jeder Änderung des gebundenen Wertes. Sollte verwendet werden, um DOM Elemente auf Basis des geänderten Wertes zu manipulieren/aktualisieren.

Beide Funktionen sind mit insgesamt vier Parametern ausgestattet:

element: Das DOM Element der Bindung. Dadurch ist es nicht notwendig, dem Element eine Id oder Ähnliches zuzuweisen.
valueAccessor: Dahinter verbirgt sich eine Funktion, die Zugriff zum gebundenen Wert gibt. Die Funktion liefert ein Observable zurück, nicht den tatsächlichen Wert. Wird ein Ausdruck für die Bindung verwendet, dann wird dieser zurück geliefert.
allBindingsAccessor: Eine Funktion, die alle Bindungen auf dieses DOM Element zurück liefert.
viewModel: Das ViewModel-Objekt, das via ko.applyBindings gebunden wurde. Bei einer verschachtelten Bindung wird das gebundene Datenelement zurückgeliefert.

Doch sehen wir uns ein einfaches Beispiel an.

Beispiel

Sehen wir uns die benutzerdefinierte Bindung anhand eines kleinen Beispiels an. Es soll ein Eingabeformular geben. Hier können sowohl der Vor- als auch der Nachname erfasst werden. Die Daten werden darüber als Zusammenfassung angezeigt. Wird ein Wert in der Eingabe verändert, soll die Wertänderung in der Zusammenfassung mit Hilfe eines Fade-In-Effekts angezeigt werden.

Dazu ist ein einfaches ViewModel notwendig, welches an das User Interface gebunden wird:

    var viewModel = {

        firstName: ko.observable("Norbert"),

        lastName: ko.observable("Eder")

    };

    ko.applyBindings(viewModel);

Die View selbst sieht dann so aus:

    <div class="overview">

        <h2>First name</h2>

        <span data-bind="text: firstName"></span>

        <h2>Last name</h2>

        <span data-bind="text: lastName"></span>

    </div>

    <div class="data">

        <h2>First name</h2>

        <input data-bind="value: firstName" /><br/>

        <h2>Last name</h2>

        <input data-bind="value: lastName" /><br/>

    </div>

Soweit noch nichts aufregendes. Bei einer Werteveränderung, wird dies sofort in der Zusammenfassung nachgezogen. Nun soll aber noch der Einblendeffekt hinzukommen. Dazu erstellen wir eine benutzerdefinierte Bindung, die auf eine Wertänderung reagiert (update-Funktion).

    ko.bindingHandlers.fade= {

        update: function(element, valueAccessor) {

            $(element).hide().fadeIn(1000);

        }  

    };

Da lediglich auf die Wertänderung, ohne Berücksichtigung des tatsächlichen Wertes, reagiert werden muss, ist die update-Funktion ausreichend. Auch muss auf den Wert selbst nicht zugegriffen werden. Stattdessen wird lediglich das Element versteckt und via fadeIn eingeblendet.

Hinweis: Müsste auf den Wert reagiert werden, kann dieser via ko.utils.unwrapObservable(valueAccessor()) bezogen werden.

Damit dies auch tatsächlich funktioniert, muss die benutzerdefinierte Bindung noch in der View gesetzt werden:

    <div class="overview">

        <h2>First name</h2>

        <span data-bind="text: firstName, fade: firstName"></span>

        <h2>Last name</h2>

        <span data-bind="text: lastName, fade: lastName"></span>

    </div>

    <div class="data">

        <h2>First name</h2>

        <input data-bind="value: firstName" /><br/>

        <h2>Last name</h2>

        <input data-bind="value: lastName" /><br/>

    </div>

Fertig ist eine einfache Verwendung.

Download / Showcase

Das Bespiel kann unter http://jsfiddle.net/SvAHr/ getestet und bezogen werden. Oder aber auch untenstehend (IE streikt hier leider):

Fazit

Auch wenn das gezeigte Beispiel ein sehr einfaches ist, können benutzerdefinierte Bindungen sehr gut eingesetzt werden, um komplexe Verhalten zu steuern. Der Vorteil liegt darin, dass so wiederverwendbare Bindungen erstellt werden können. Im einfachsten Fall können darüber Standardverhalten/-einstellungen gesetzt werden, die jedoch nur an einer einzelnen Stelle zu implementieren/verwalten sind.

Jetzt Knockout.js lernen: Die Serie

Suche der BlogEngine.NET mittels Knockout.js verbessern - ein Praxisbeispiel

Norbert Eder [MVP] — 2012-01-19T15:25:52

In meiner Serie zu Knockout.js habe ich bereits gezeigt, was diese Bibliothek leisten kann. Nichts liegt also näher, als das eigene Blog ein wenig auf Vordermann zu bekommen. Stein des Anstoßes ist die Suche, die bei BlogEngine.NET sehr altertümlich wirkt und in meinem neuen Design daher bis dato nicht berücksichtigt wurde. Mit Knockout.js sollte eine verbesserte Variante schnell implementiert sein. Da die Suchergebnisse durch diverse Bots auch nicht indiziert werden müssen, kann Knockout.js bedenkenlos eingesetzt werden. Hier mein Erfahrungsbericht.

Kontext

Um den Kontext für diejenigen zu setzen, die sich weder mit der BlogEngine.NET beschäftigt haben, noch dies wollen, ein kurze Einführung wie die Zusammensetzung hinsichtlich der Suche ist und was alles benötigt wird. Wenn Erfahrungen mit eben diesem System bestehen, kann dieser Abschnitt übersprungen werden.

Die Suche der BlogEngine.NET besteht aus folgenden Teilen:

Klasse Search, welche die Suche übernimmt und Ergebnisse zurück liefert.
Ein Steuerelement SearchBox, welches ein Input-Feld, eine Schaltfläche und noch ein paar andere Dinge rendert. Das Input-Feld selbst reagiert auf ein Enter und leitet eigentlich nur auf die Suchseite weiter.
Ein Widget, welches das Steuerelement verwendet
Eine Suchseite (search.aspx), welche ebenfalls das angesprochene Steuerelement verwendet.

Das ist grob alles. Um das gesamte User Interface der Suche ersetzen zu können, ist es also notwendig, ein einzelnes Steuerelement (zum Einbinden im Header etc.), ein Widget und eine dedizierte Suchseite anzubieten.

Suche via AJAX ermöglichen

Die Suchfunktionalität besteht bereits (durch die Klasse Search). Diese sollte soweit bestehen bleiben, um auch mit zukünftigen Versionen kompatibel zu sein.

Was allerdings fehlt, ist ein Service, um dies nutzen zu können. Damit das Ergebnis am Client gut verarbeitet werden kann, liefert dieses JSON zurück. Zusätzlich werden auf Einstellungen des Blogsystems zurück gegriffen, um die Beschreibungen der Posts für die Ergebnisliste entsprechend zu kürzen. Der Code hierfür kann man sich dann im Download-Package ansehen.

Knockout.js ViewModel

Damit in der UI die notwendigen Bindungen gesetzt werden können, ist ein entsprechendes ViewModel notwendig, nennen wir es FastSearchViewModel. Welche Möglichkeiten soll es bieten?

Es muss der Suchbegriff abgefasst werden.
Der Benutzer kann wählen, ob Kommentare durchsucht werden sollen. Diese Information ist ebenfalls durch das ViewModel zu halten.
Die AJAX-Suche muss unter Angabe des Suchbegriffs durchgeführt werden.
Eine Liste der Ergebnisse ist zur Verfügung zu stellen.
Der Benutzer möchte Rückmeldungen á la “Keine Suchergebnisse” erhalten. Diese müssen angeboten werden.
Die Suche kann theoretisch dreimal auf einer Seite vorkommen (Suchfeld, Widget und Suchseite). Dieser Umstand ist zu berücksichtigen (wichtig für die Datenbindung auf einen bestimmten Bereich, da sonst alle Suchmöglichkeiten mit derselben Bindung ausgestattet werden).
Schlussendlich bedarf es noch Kleinigkeiten, wie das Zurücksetzen des Eingabefeldes bei einem Klick bzw. dem Auslösen der Suche bei Betätigen der Enter-Taste.

All diese Dinge wurden im nachfolgenden ViewModel berücksichtigt.

     var FastSearchViewModel = function (containerElement) {

        var self = this;

        self.container = containerElement;

        self.searchValue = ko.observable('');

        self.includeComments = ko.observable(false);

        self.foundItems = ko.observableArray();

        self.showNoItemsFound = ko.observable(false);

        self.hasSearchValue = ko.computed(function () { return self.searchValue().length > 0; }, self);

        self.hasResult = ko.observable(false);

        self.notExecuted = ko.observable(true);

        self.search = function () {

            var dto = { "searchTerm": self.searchValue(), "includeComments": self.includeComments() };

            $.ajax({

                url: "uri/to/searchmethod",

                data: JSON.stringify(dto),

                type: "POST",

                contentType: "application/json; charset=utf-8",

                dataType: "json",

                success: function (result) {

                    self.foundItems = ko.observableArray();

                    if (result.d.Posts && result.d.Posts.length > 0) {

                        for (var i = 0; i < result.d.Posts.length; i++) {

                            self.foundItems().push(new ResultViewModel(result.d.Posts[i].Title, result.d.Posts[i].Content, result.d.Posts[i].Link));

                        }

                        self.showNoItemsFound(false);

                        self.hasResult(true);

                    } else {

                        self.showNoItemsFound(true);

                        self.hasResult(false);

                    }

                    self.notExecuted(false);

                    ko.applyBindings(self, self.container);

                }

            });

        };

        self.inputChanged = function (sender, event) {

            if (event.keyCode === 13 && self.hasSearchValue()) {

                this.search();

            }

        };

        self.clear = function (sender, event) {

            self.searchValue('');

            self.hasResult(false);

            self.showNoItemsFound(true);

            self.notExecuted(true);

        };

        self.closePopup = function () {

            self.hasResult(false);

        };

    };

Zu beachten ist, dass die Ergebnisse aus dem AJAX-Aufruf in ein weiteres ViewModel geschrieben werden (ResultViewModel). Dies ist notwendig, damit die Bindungen greifen, die in einem Template für die einzelnen Einträge festgelegt sind. Hier der entsprechende Code:

    var ResultViewModel = function (postTitle, postContent, postLink) {

        this.title = ko.observable(postTitle);

        this.content = ko.observable(postContent);

        this.link = ko.observable(postLink);

    };

User-Interface

Das User-Interface muss nun die für die Suche notwendigen Elemente zur Verfügung stellen und die Bindungen festlegen. Hier das auf die Suchseite vereinfachte Markup:

    <div id="fastsearchpage">

        <input id="fastsearchbox" data-bind="value: searchValue, valueUpdate: 'afterkeydown', event: { keyup: inputChanged, click: clear }" placeholder="Suche" onkeypress="return noenter()"></input>

        <input id="fastsearchcomment" type="checkbox" data-bind="checked: includeComments">Kommentare inkludieren</input>

        <input type="button" id="fastsearchbutton" data-bind="click: search, enable: hasSearchValue" value="Durchsuchen"></input>

        <div id="fastsearchresult" data-bind="template: { name: 'searchresult-template', foreach: foundItems }">

        </div>

        <div id="nofastsearchresult" data-bind="visible: showNoItemsFound">

            <p>

                Keine Suchergebnisse.

            </p>

        </div>

        <div id="nofastsearchexecuted" data-bind="visible: notExecuted">

            <p>

                Geben Sie einen Suchbegriff ein und drücken Sie Enter oder die Suchen-Schaltfläche.

            </p>

        </div>

        <script type="text/html" id="searchresult-template">

            <div class="searchitem">

                <a data-bind="attr: { href: link, title: title }">

                    <span>

                        <strong data-bind="text: title"></strong>

                    </span>

                </a>

                <div data-bind="text: content"/>

            </div>

        </script>

        <script type="text/javascript">

            function noenter() {

                return !(window.event && window.event.keyCode == 13);

            }

        </script>

    </div>

Der Großteil der darin verwendeten Bindungen bringen zur Knockout.js-Serie nichts Neues. Interessant ist das Eingabefeld selbst:

    <input id="fastsearchbox" 

           data-bind="value: searchValue, valueUpdate: 'afterkeydown', event: { keyup: inputChanged, click: clear }" 

           placeholder="Suche" onkeypress="return noenter()">

    </input>

Dieses selbst hat eine Bindung auf searchValue um den eingegebenen Suchbegriff in das ViewModel durchzuschreiben. Ebenfalls wird das Ereignis OnKeyUp abonniert um auf das Betätigen der Enter-Taste hin zu prüfen, da in diesem Fall die Suche ausgelöst werden sollte. Beim Standardverhalten der value-Bindung ist es nun aber so, dass zum Zeitpunkt des Auslösens des Ereignisses (und des Verarbeitens in der Funktion des ViewModels) der eingegebene Wert noch nicht bekannt ist. Das liegt daran, dass die value-Bindung erst beim Verlassen des Fokus die Bindung selbst aktualisiert.

Um aber derartige Anforderungen abzudecken, steht der zusätzliche Parameter valueUpdate bereit. Darüber lässt sich konfigurieren, zu welchem Zeitpunkt die gebundene Eigenschaft des ViewModels aktualisiert werden soll. Folgende Möglichkeiten stehen zur Verfügung:

change: Das ist die Standardeinstellung und aktualisiert das ViewModel wenn der Fokus zu einem anderen Element geht.
keyup: Die Aktualisierung findet beim Loslassen des Tastendrucks statt.
keypress: Das ViewModel wird aktualisiert, wenn eine Taste gedrückt wurde. Hier ist anzumerken, dass dieses Ereignis mehrfach ausgelöst wird, wenn der Benutzer auf der Taste bleibt.
afterkeydown: Hier wird das ViewModel aktualisiert, sobald der Benutzer beginnt, ein Zeichen einzugeben. Diese Auswahl eignet sich bestens dazu, wenn das ViewModel in Echtzeit aktualisiert werden soll.

Stellen wir also valueUpdate auf afterkeydown, steht beim Auslösen der Suche der durch den Benutzer eingegebene Suchbegriff bereit.

Hinweis: Zusätzlich wird beim OnKeyPress noch die Funktion noenter() aufgerufen. Diese dient lediglich dazu, ein Submit eines eventuell vorhandenen Formulars zu verhindern.

Binden des ViewModels

Damit die Bindungen angezogen werden, muss ko.applyBindings aufgerufen werden. Wie bereits oben angesprochen, kann die Suche selbst mehrfach auf der Seite vorkommen. Damit nicht alle an dasselbe ViewModel gebunden werden (und dadurch anspringen, sobald es in einem der Felder eine Aktion gibt), sollte überprüft werden, wie viele Vorkommen vorhanden sind und an jedes eine eigene Instanz des ViewModels gebunden werden.

Das Ergebnis

Für die Verwendung unter BlogEngine.NET ist nun nicht mehr viel zu tun und weniger relevant, da lediglich Widget-Control (als Host) implementiert werden muss etc. Dies kann sich der interessierte Leser im Download genauer ansehen.

Das Resultat kann sich jeder hier im Blog ansehen, da alle Suchmöglichkeiten auf dieser Implementierung beruhen.

So sieht die Einbindung des Suchfeldes aus:

Und hier noch die Suchseite:

Download / BlogEngine.NET Package

Der Download ist über die BlogEngine.NET Gallery verfügbar. Darin befindet sich die Erweiterung zur BlogEngine.NET selbst, als auch die gesamte Implementierung. Wer diese Erweiterung für sein Blogsystem basierend auf BlogEngine.NET einsetzen möchte, findet weitere Informationen unter http://devtyr.com/fastsearch.html.

Feedback

Wie immer freue ich mich über jegliches Feedback. Sowohl zum Code selbst, als auch grundsätzlich zur Funktionalität der BlogEngine.NET-Erweiterung.

Asynchrones Befüllen einer ObservableCollection in einem ViewModel

Mario Priebe — 2012-01-14T18:46:21

Die Aufgabenstellung beschreibt, das innerhalb eine ViewModels Daten aus einer Datenbank ausgelesen und über der Netzwerkverbindung noch weiter verarbeitet werden müssen. Hier liegt es auf der Hand, dass eine asynchrone Lösung her muss, sprich es muss unter allen Umständen verhindert werden, dass die UI blockiert. Wie man das machen kann, zeige ich wie folgt: Ich [...]

Automatisiertes Ein- und Auschecken im Buildprozess

Mario Priebe — 2012-01-12T13:36:58

Möchte man nach einem Build, die Assembly in ein dafür bereitgestelltes Verzeichnis kopieren, kann man das recht einfach im Prä- und Postbuild-Ereignis im Visual Studio definieren. Hat man die DLL jedoch im TFS eingecheckt, muss man vor dem Kopieren dafür Sorge tragen, dass die Datei ausgecheckt wurde, ansonsten kann die eben wegen dem Schreibschutz nicht [...]

Jetzt Knockout.js lernen: Template verwenden

Norbert Eder [MVP] — 2012-01-12T07:00:00

Weiter geht es mit Knockout.js. Nachdem ich nun über den Einstieg gebloggt, als auch ein Beispiel bezüglich Formulare und Listen gezeigt habe, möchte ich mich mit diesem Beitrag mit dem Thema Templates beschäftigen und ein Beispiel implementieren, welches den Umgang damit aufzeigt. Vorlagen sind gerade bei wiederkehrenden Darstellungen (Listen etc.) eine hervorragende Sache, gibt es doch nur eine Stelle diese zu pflegen/ändern.

Aufgabenstellung

Konstruierte Beispiele sind immer so eine Sache, da oft der praxistaugliche Nutzen fehlt. Daher habe ich mich dazu entschieden, einen Teil meines Blogs mit Knockout.js nachzubilden. Konkret geht es um den Bereich Lesestoff.

Wie nachfolgend abgebildet, setzt sich diese Liste aus zwei zusammengehörigen Teilen zusammen:

Die Jahresangabe und der dazugehörigen Statistik über die Anzahl der gelesenen Bücher und Seiten.
Die Liste der Bücher, die im entsprechenden Jahr gelesen wurden.

Wie man bereits vermuten kann, bietet sich diese Darstellung wunderbar für die Verwendung von Vorlagen an. Die Umsetzung dieser Liste mittels Knockout.js unter Verwendung von Vorlagen, ist nun das Ziel des nachfolgenden Beispiels.

Templates / View

Bevor ich mich den ViewModels zuwende, muss ein Plan bezüglich der Vorlagen her, da sich daraus der weitere Aufbau ergibt. Wie bereits oben erwähnt, setzt sich die Seite aus zwei Teilen zusammen, dem Jahr (sowie der dazugehörigen Statistik) und der Buchliste zum Jahr. Es bietet sich daher an, eine Vorlage für das Jahr selbst und eine weitere für die Buchliste zu erstellen.

Nun zur Vorlage für die Jahresdarstellung, welcher wir den Namen year-template geben. Dieses besteht aus einem h3-Tag für die Anzeige des Jahres. Hier erfolgt eine Datenbindung auf eine Eigenschaft year, die durch das ViewModel geliefert werden muss. Die Auflistung der Bücher selbst findet über eine unsortierte Liste statt. Diese bekommt über eine template-Bindung nun ein Template für die Darstellung eines einzelnen Buches gesetzt und durchläuft mittels foreach alle Einträge der Auflistung books.

Damit die Anzahl der Bücher und der Seiten dargestellt werden kann, muss da ViewModel diese Werte berechnen und zur Verfügung stellen. Dies soll durch booksCount und pages passieren.

     <script type="text/html" id="year-template">

        <h3 data-bind="text: year"></h3>

        <ul class="kastenlightul" data-bind="template: { name: 'book-template', foreach: books }">

        </ul>

        <p>

            <strong data-bind="text: booksCount"/> B&uuml;cher<br/>

            <strong data-bind="text: pages"/> Seiten<br/>

        </p>

    </script>

Im nächsten Schritt wird die Vorlage book-template definiert. Diese definiert nun, wie ein einzelnes Buch dargestellt wird. Die Darstellung erfolgt durch das year-template in einer unsortierten Liste, wodurch li-Elemente gerendert werden müssen.

Ein li-Elemente enthält nun die notwendigen Elemente zur Darstellung des Buches selbst, das ist nicht weiter aufregend. Interessant ist hier die attr-Bindung. Darüber können jegliche Attribute des betreffenden DOM-Elementes gesetzt werden. Dies ist besonders interessant für Link- und Image-Elemente, zumal hier zusätzlich meist mehrere Attribute zu setzen sind.

    <script type="text/html" id="book-template">

        <li class="kastenlight">

            <img data-bind="attr: { src: coverlink, alt: title }"/>

            <a data-bind="attr: { href: titlelink, title: title }">

                <span>

                    <strong data-bind="text: title"></strong>

                </span>

            </a>

            <br /> <span data-bind="text: author"/><br /> <span data-bind="text: pages"/> Seiten<br /><strong>Bewertung</strong>: <span data-bind="text: rating"/>/5

            <div class="buy">

                <a data-bind="attr: { href: amazonlink }" target="_blank">Auf Amazon kaufen</a>

            </div>

        </li>

    </script>

Was nun noch fehlt ist die Stelle, die den Stein nun tatsächlich ins Rollen bringt. Eine Stelle, die beim Öffnen gerendert wird und auf das erste Template verweist.

Dazu wird ein einfaches div-Element erstellt und die dafür notwendige Bindung gesetzt:

    <div data-bind="template: { name: 'year-template', foreach: years }">

    </div>

Über die template-Bindung wird nun die Vorlage year-template für jedes Vorkommen in years angewandt.

Hinweis: Für dieses Beispiel wurden die bereits vorhandenen Styles verwendet. Diese befinden sich natürlich im Download, der ganz unten zu finden ist.

ViewModels

Auf JavaScript-Seite müssen nun die obigen Anforderungen abgedeckt werden. Für das book-template wird eine Repräsentation eines Buches mit den angegebenen Eigenschaften benötigt.

    var BookViewModel = function(item) {

        this.title = ko.observable(item.title);

        this.titlelink = ko.observable(item.titlelink);

        this.coverlink = ko.observable(item.coverlink);

        this.author = ko.observable(item.author);

        this.pages = ko.observable(item.pages);

        this.rating = ko.observable(item.rating);

        this.amazonlink = ko.observable(item.amazonlink);

    }

Als Parameter wird ein Objekt übergeben, welches alle notwendigen Informationen hat und das BookViewModel auffüllt.

Hinweis: Die Daten werden in diesem Beispiel via JSON gehalten und könnten an einigen Stellen direkt verwendet werden, habe ich aber hinsichtlich der Übersichtlichkeit und der möglichen Erweiterungen nicht getan.

Zur Darstellung eines Jahres, wie in year-template gefordert, wird nachfolgendes ViewModel verwendet:

    var YearViewModel = function(initYear, initBooks) {

        var self = this;

        self.year = ko.observable(initYear);

        self.books = ko.observableArray();

        $.each(initBooks, function() {

                var item = new BookViewModel(this);

                self.books().push(item);

            });

        self.booksCount = ko.computed(function() {

            return self.books().length;

        });

        self.pages = ko.computed(function() {

            var pagesCount = 0;

            $.each(self.books(), function() {

                pagesCount += this.pages();

            });

            return pagesCount;

        });

    }

Dieses ist nun schon ein weniger interessanter, als dass es ein Array der Bücher für dieses Jahr enthält, als auch zwei berechnete Eigenschaften booksCount und pages.

Nun fehlt noch das ViewModel, welches als “Einstieg” dient und an das div-Element der View gebunden wird, sowie eine Auflistung der in den Daten enthaltenen Jahre enthält:

    var BooksViewModel = function() {

        var self = this;

        self.years = ko.observableArray();

        self.init = function(initialItems) {

            $.each(initialItems, function() {

                var year = new YearViewModel(this.year, this.books);

                self.years().push(year);

            });

        }

    };

Diesem ViewModel wird über die Funktion init das JSON übergeben, wodurch sich in weiterer Folge die gesamte Struktur aufbaut.

Nun noch die Instanziierung und das Anwenden der Bindungen via:

    var firstViewModel = new BooksViewModel();

    firstViewModel.init(jsonBooklist.years);

    ko.applyBindings(firstViewModel, $('booksCollection').get(0));

Fertig.

So sieht’s aus

Wenig überraschend sieht das Ergebnis dem Original sehr ähnlich :)

Fazit

In diesem Beispiel wurde der Umgang mit benannten Vorlagen gezeigt. Natürlich gibt es auch noch die Möglichkeit, Vorlagen dynamisch zu wählen oder überhaupt eine externe Template Engine zu verwenden.

Mir gefällt die einfache Art und Weise wie eine Problemstellung wie diese umgesetzt werden kann.

Download/Showcase

Dieses Beispiel kann nachfolgend herunter geladen werden. Wer möchte kann auch einen Blick auf die Online-Demo werfen.

Feedback

Wie immer freue ich mich natürlich auch hierzu über Feedback, schließlich kann man nie auslernen und es gibt immer etwas, das verbessert werden kann.

Jetzt Knockout.js lernen: Die Serie

Jetzt Knockout.js lernen: Formulare und Listen binden

Norbert Eder [MVP] — 2012-01-11T07:00:00

Aus der WPF-Welt kommend ist gerade das Thema MVVM und Datenbindung sehr interessant für mich (weil dadurch auch etwas verwöhnt). Mit Knockout.js ist dies nun auch in JavaScript komfortabel möglich. Aufbauend auf den einführenden Beispielen und den von mir bereitgestellten Slides habe ich mich gefragt, wie nun der Umgang mit Listen und Formularen stattfinden kann und gleich in die Tasten gegriffen, um dies zu testen. Das Resultat ist ein Beispiel und ein paar Erkenntnisse, die ich teilen möchte.

Aufgabenstellung

Als Zielsetzung soll eine HTML-Seite ein Eingabeformular für die Eingabe von Buchinformationen anbieten und die eingegebenen Bücher in einer Liste darstellen. Zudem soll eine einfache Validierung stattfinden. Zu lösen ist die Problemstellung durch Datenbindung und somit einer sauberen Trennung zwischen ViewModel und View. Eine Serverkommunikation ist nicht angedacht.

ViewModels

Für die Umsetzung dieses Beispiels dachte ich an zwei verschiedene ViewModels. Eines, nennen wir es BookViewModel dient der Bindung an das Eingabeformular. Es kann sich selbst validieren und auf den ursprünglichen Stand zurücksetzen. Dieses ist nachfolgend abgebildet.

     var BookViewModel = function() {

        this.title = ko.observable('');

        this.author = ko.observable('');

        this.pages = ko.observable('');

        this.errorMessage = ko.observable('');

        this.hasErrors = ko.computed(function() { return (this.errorMessage() != ''); }, this);

        this.reset = function() {

            this.title('');

            this.author('');

            this.pages('');

            this.errorMessage('');

        };

        this.validate = function() {

            this.errorMessage('');

            if (this.title().length === 0 || this.author().length === 0 || this.pages().length === 0) {

                this.errorMessage('All fields are required');

            }

        };

    };

Die einzelnen Eigenschaften sind Observables (ko.observable), wodurch Benachrichtigungen über Änderungen an den Abonnenten (in Falle dieses Beispiels nur das UI) versendet werden und die dargestellten Werte (in der UI) immer aktuell sind.

Mit hasErrors soll zudem gesteuert werden, ob eine Fehlermeldung anzuzeigen ist. Die tatsächliche Meldung ist in errorMessage zu finden. Beides wird über die Funktion validate gesetzt.

Wichtig: Bezüglich der observierten Eigenschaften ist mir aufgefallen (und das verhält sich auch unter WPF/Silverlight so), dass das direkte Zuweisen von Werten zu Observables (diese sind als Funktionen abgebildet), diese natürlich überschreiben und somit keine Überwachung mehr stattfindet. Daher immer so darauf zugreifen: this.title('Der neue Wert'); Andernfalls kann die Suche nach dem Fehler schon mal etwas länger dauern …

Ein zweites ViewModel, BooksViewModel, beinhält eine Auflistung aller “gespeicherten” Bücher und stellt eine Instanz des ersten ViewModels via currentBook zur Verfügung. Damit neue Elemente hinzugefügt werden können, wird addItem angeboten. Hier wird im ersten Schritt die Validierung ausgeführt. Ist diese erfolgreich, wird das neue Buch in die Auflistung übernommen. Zusätzlich gibt es noch die Funktion clear. Diese setzt lediglich die Liste zurück.

Hinweis: Für die Darstellung der Liste habe ich auf das knockout.simpleGrid zurück gegriffen.

Und das ist das BooksViewModel:

    var BooksViewModel = function(items) {

        this.items = ko.observableArray(items);

        this.currentBook = new BookViewModel();

        this.addItem = function(formData) {

            this.currentBook.validate();

            if (!this.currentBook.hasErrors()) {

                this.items.push({

                    title: formData[0].value,

                    author: formData[1].value,

                    pages: formData[2].value

                });

                this.currentBook.reset();

            }

        };

        this.clear = function() {

            this.items.removeAll();

        };

        this.gridViewModel = new ko.simpleGrid.viewModel({

            data: this.items,

            columns: [

                {

                headerText: "Title",

                rowText: "title"},

            {

                headerText: "Author",

                rowText: "author"},

            {

                headerText: "Pages",

                rowText: "pages"}

            ],

            pageSize: 5

        });

    };

Zu beachten ist hier, dass die Auflistung der Elemente via ko.observableArray(items) erledigt wird. Also auch überwachbare Arrays sind möglich.

Das BooksViewModel enthält zusätzlich Initialdaten; die Erstellung und Übergabe ist weiter unten zu sehen.

View

Die View selbst ist nun nicht mehr besonders aufregend. Im Endeffekt werden ein paar div-Elemente verwendet und eine form, die zur Eingabe der Daten dient.

    <div id="booksCollection">

    <form data-bind="submit: addItem" id="newEntryForm">

        <div class="formArea">

            <h1>Add new Entry</h1>

            <div class="errorBox" data-bind="visible: currentBook.hasErrors">

                ERROR: <span data-bind="text: currentBook.errorMessage"/>

            </div>

            <div id="row">

              <div id="col">

                  Title

              </div>

              <div id="col">

                <input data-bind="value: currentBook.title" placeholder="Enter new book title"></input>    

              </div>

            </div>

            <div id="row">

              <div id="col">

                  Author

              </div>

              <div id="col">

                <input data-bind="value: currentBook.author" placeholder="Enter new author"></input>

              </div>

            </div>

            <div id="row">

              <div id="col">

                  Pages

              </div>

              <div id="col">

                <input data-bind="value: currentBook.pages" placeholder="Enter new pages count"></input>

              </div>

            </div>            

            <button type="submit">Add book</button>

        </div>

    </form>

    <div class="collectionArea">

        <h1>Books</h1>

        <div data-bind='simpleGrid: gridViewModel'></div>

        <button data-bind="click: clear">Clear books</button>

    </div>

    </div>

Eine interessante Geschichte ist die action des Formulares. Hier wird eine submit-Bindung auf die Funktion addItem erstellt. Wird nun der Submit-Button betätigt, werden die Daten aus dem Formular an diese Funktion übergeben.

Hinweis: Dies könnte auch ohne Formular und mit einer click-Bindung implementiert werden, da currentBook ohnehin die eingegebenen Daten enthält.

Das div-Element, das zur Anzeige der Auflistung herangezogen wird, enthält eine simpleGrid-Bindung auf gridViewModel (dieses wird über das SimpleGrid zur Verfügung gestellt und enthält die Auflistung aller Bücher).

Damit die angezeigte Liste zurückgesetzt werden kann, wird über das ViewModel die Funktion clear angeboten. Damit diese aufgerufen wird, reicht es, eine Schaltfläche mit einem click-Binding auf diese Funktion zu erstellen:

    <button data-bind="click: clear">Clear books</button>

Um die Bindungen zu aktivieren, muss noch ein wenig JavaScript hinzugefügt werden:

    var initialData = [

        {

        title: "Windows Presentation Foundation 4.5",

        author: "Norbert Eder",

        pages: 400}

    ];

    var firstViewModel = new BooksViewModel(initialData);

    ko.applyBindings(firstViewModel, $('booksCollection').get(0));

Hier werden lediglich Demodaten angelegt und bei der Erstellung des BooksViewModel-Objektes übergeben. Weit wichtiger an dieser Stelle ist der Aufruf ko.applyBindings. Damit wird das ViewModel an das Element gebunden, das durch den zweiten Parameter gefunden wird.

Hinweis: Wahlweise könnte der zweite Parameter auch weggelassen werden. In diesem Fall würde das gesamte Dokument nach dem Attribut data-bind durchsucht werden.

Ab diesem Zeitpunkt ist das Binding aktiv und die Werte werden synchronisiert.

So sieht’s aus

Hier nun die einzelnen Darstellungen der Website. Nachfolgend die Darstellung nach Öffnen der Seite:

Durch die Validierung wurde festgelegt, dass alle Eingabefelder einen zugewiesenen Wert besitzen müssen. Ist dem nicht der Fall, wird ein Fehlerhinweis angezeigt:

Download

Wer sich mit diesem Beispiel ein wenig spielen möchte, findet unterhalb die Möglichkeit dieses herunter zu laden, auch steht es auf JSFiddle zur Verfügung (wer den Internet Explorer verwendet, sollte sich das Beispiel herunter laden).

Fazit

Ein wenig HTML-Markup, ein wenig JavaScript-Code, Bindungen und ein paar Styles, fertig ist die Eingabemaske und die entsprechende Liste. Die einzelnen Teile lassen sich schön voneinander trennen und somit gut pflegen. Kein Code der Felder, Werte etc. aktualisiert. Auf das Wesentliche reduziert. Eine feine Sache, die Lust auf mehr macht.

Feedback

Was kann man schöner, eleganter, einfacher lösen? Hast du hierzu Feedback? Lasse es mich bitte wissen!

Jetzt Knockout.js lernen: Die Serie

Jetzt Knockout.js lernen: Slides und Beispiele

Norbert Eder [MVP] — 2012-01-10T09:14:55

Knockout.js ist eine JavaScript Bibliothek, die es ermöglicht, Datenbindungen durchzuführen. Dadurch ist eine saubere Trennung zwischen ViewModel und View (als auch Model) möglich. Wer Erfahrung mit WPF und/oder Silverlight hat, der kennt die Vorteile bereits, wird auch hier das Pattern Model-View-ViewModel (oder kurz MVVM) verfolgt. Um mir selbst einen Überblick zu Knockout zu verschaffen, habe ich grundlegende Informationen und kleinere Beispiele in einer Präsentation zusammen gefasst, die ich an dieser Stelle teilen möchte.

Die Links zu den Beispielen sind zwar in den Slides vorhanden (können im Vollbildmodus geklickt werden), dennoch nochmals außerhalb: hier und hier. Sie sind auf JSFiddle gehostet (idealerweise nicht den Internet Explorer verwenden, da dieser offensichtlich beim Beziehen der eingebundenen JavaScripts daneben greift), dadurch kann gleich im Browser getestet und probiert werden.

Habe ich etwas Essentielles in der Präsentation vergessen oder kann man die Beispiele (den Code selbst) weiter verbessern? Ich freue mich über Feedback, bin ich doch selbst erst beim Erlernen.

Jetzt Knockout.js lernen: Die Serie

Buch: vier minus drei - Barbara Pachl-Eberhart

Norbert Eder [MVP] — 2012-01-09T10:39:00

Ein Schicksal, das erschüttert. Ein Buch, das Mut macht. Es gibt wohl nichts Tragischeres, als von einem Moment auf den anderen seine Familie zu verlieren. Barbara Pachl-Eberhart hat es erlebt: Im März 2008 starben ihr Mann und ihre beiden kleinen Kinder durch einen Verkehrsunfall. In diesem Buch schildert die Autorin, wie sie sich ihrem Schicksal stellte. Wie sie mit Mut und bedingungsloser Offenheit den Weg in ein neues Leben fand. Und wie das starke innere Band zu ihren verstorbenen Lieben ihr dazu die Kraft gab. Ihr ergreifender Bericht zeugt von menschlicher Größe und einem unerschütterlichen Glauben an den Sinn des Lebens.

Manche haben es in ihrem Leben wahrlich nicht einfach. Meist denkt man selbst “Es erwischt ja eh nur die anderen”. In diesem Fall schlug das Schicksal gar nicht so weit entfernt zu. Über Jahre hinweg bin ich knapp an der Unglücksstelle, welche die Familie von Barbara Pachl-Eberhart zerriss, vorbei gefahren. Kenne die Gegend, kenne den besagten Bahnübergang. Sehr dramatisch und “nahe” genug, um auch mal darüber nachzudenken, wie man selbst mit einem derartigen Ereignis umgehen würde. Wie Barbara Pachl-Eberhart damit umgegangen ist und wie es geschafft hat, wieder einen Sinn im Leben zu finden, das beschreibt sie in diesem Buch. Aber Achtung: Es geht wirklich nahe und zeitweise muss man eine Pause einlegen, um das Erzählte und eigene Gedanken zu sortieren und ein wenig Abstand zu bekommen. Das erklärt auch, warum ich fast ein Jahr an diesem Buch gelesen habe.

Dennoch, das Buch handelt nicht nur von Traurigkeit, einer Tragödie, nein, es gibt auch all denjenigen, die ähnliches erfahren mussten, Trost und Hoffnung auf ein gutes Ende. Wem nichts dergleichen widerfahren ist, dem wird gezeigt, dass ein kurzer Moment der Unachtsamkeit, eine Familie/ein Leben nachhaltig ändern kann.

Für dieses Buch möchte ich keine Bewertung geben, zu heikel ist mir das besprochene Thema. Doch möchte ich eine klare Empfehlung aussprechen. Unbedingt lesen!

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Neues Jahr, neues Blogdesign. Warum eigentlich?

Norbert Eder [MVP] — 2012-01-05T14:54:53

Ich muss ja gestehen, dass ich nicht unbedingt der begabteste Designer bin. Vielleicht gefallen mir aber auch deswegen schlichte Designs wesentlich besser als aufwändige. Da mir von Zeit zu Zeit das Aussehen meines Blogs auf die Nerven geht, hatte ich mir für 2012 vorgenommen, daran zu schrauben. Schneller als gedacht fand der erste Schwung der Umstellung statt. Aber was genau hat mich gestört und warum habe ich mich für eine bestimmte Lösung entschieden?

Inhalt zählt

Für mich zählt der Inhalt, ohne Schnörkel. Lese ich online Inhalte, dann möchte ich mich ganz darauf konzentrieren und so wenig als möglich abgelenkt werden. Dies ist schwierig, wenn zahlreiche Widgets, Sidebars und Co. durch die Gegend schwirren und mich an eine andere Stelle (ver)leiten möchten. Ich als Leser möchte das aber nicht. Ich will den Inhalt, diesen eventuell kommentieren oder teilen. Mehr interessiert mich dann aber auch schon nicht mehr. Und mehr möchte ich meinen Lesern auch nicht zumuten.

Also weg mit all dem das stört. Den Rest an Stellen positionieren, die gefunden werden, aber nicht störend sind (wie in meinem Fall eine Platzierung am Ende der Seite). So geschehen mit meiner Sidebar und einer Box, die direkt unter dem Menü ihr Dasein fristete. Allerdings ist dabei Vorsicht walten zu lassen, mehr unter Analyse.

Meist wird auch eine Leserschaft vergessen: Diejenigen, die nicht Read It Later oder InstaPaper verwenden um etwas später zu lesen, sondern es schlicht und einfach ausdrucken. Kaum jemandes Blog verwendet für das Medium Print eigene Stylesheets, wodurch sämtliches unnötige Zeugs auf dem Ausdruck zu sehen ist. Unzumutbar. Abspecken und unbedingt auf den Inhalt reduzieren. So kann sich auch der Offline-Leser auf den Inhalt konzentrieren, mal davon abgesehen, dass seine Navigationsmöglichkeiten ohnehin anderer Natur sind.

Das Ergebnis ist nun eine Konzentration auf den angebotenen Inhalt. Ohne viel drum rum. So wie ich es mir oft auf anderen Seiten wünschen würde.

Lesbarkeit

Zum Thema Lesbarkeit fallen mir auf die Schnelle folgende Punkte ein:

Schriftfamilie/Schrift
Schriftgröße
Kontrast

Zur Schriftfamilie und Schrift lassen sich die unterschiedlichsten Meinungen und Auswertungen finden. Wichtig für mich war die Verwendung einer Web-Schriftart (siehe auch Google Web Fonts), da das Lesen am Bildschirm dadurch eindeutig erleichtert wird. Bei der Wahl der Schriftfamilie und der Schrift selbst habe ich mich jedoch auf meinen ganz persönlichen Geschmack verlassen.

Das Thema der Schriftgröße erachte ich mittlerweile als weniger wichtig (wobei ich auch hier auf Basis des erhaltenen Feedbacks nachjustiert habe), da per Browser-Zoom mal schnell korrigiert werden kann - durch den Benutzer.

Gestehen muss ich, dass ich auf das Thema Kontrast eindeutig zu wenig Rücksicht genommen haben. Sven hat mich darauf (nach einer ersten Version) aufmerksam gemacht und auch gleich einen passenden Link geliefert: http://contrastrebellion.com/ (unbedingt ansehen!). Wieder etwas gelernt und auch gleich umgesetzt.

Werden nun aber Sidebar und Co entfernt, verbreitert sich der Inhaltsbereich oft wesentlich. Gut, um viel Inhalt darzustellen. Schlecht für die Lesbarkeit, meint Thomas in seinem Feedback. Und recht hat er. Wie aber entgegen wirken?

Für die Darstellung von Fließtext (siehe sämtliche News-Seiten) kann dann gerne mal ein mehrspaltiges Layout herhalten. Das eignet sich allerdings so gar nicht für das Anzeigen von Sourcecode. Das heißt, an dieser Stelle muss man wohl einen Kompromiss eingehen. Gefällt mir nicht, muss ich aber mangels Alternativen.

Hast du eine Alternative? Dann lass es mich bitte wissen!

Ein weiterer Schritt die Lesbarkeit weiter zu erhöhen ist das Auflockern der Beiträge selbst. Definitiv ein Punkt der in Zukunft mehr Beachtung benötigt.

Inhalt finden

Was bringt der beste Inhalt, wenn er nicht gefunden werden kann. Mit aller Aufräumerei sollte bedacht werden, dass der werte Besucher auch noch das findet, das ihn interessiert. Und das ist in der Regel nicht die erste Handvoll an Beiträgen. Dies passiert in der Regel über drei Varianten (direkt auf einer Site):

Kategorien
Tags
Suche

Kategorien sind eine nette Variante den gezeigten Inhalt zu filtern. Mehr aber auch nicht. Vor allem auf News-Sites stellt die Hauptnavigation eben diese Filterung dar. In den meisten Blogsystemen sind Hauptnavigation und Kategorien jedoch getrennt.

Durch das Verschwinden der Sidebar fand diese Auflistung ein jähes Ende. Eigentlich wollte ich sie auch nicht, da sie von lediglich 0,2% der Besucher benutzt wurde. Doch das Feedback ließ nicht lange auf sich warten (Sebastian ist einer dieser 0,2% wie er meint). Also dann doch wieder rauf damit. Allerdings in einer platzsparenden Version, die sich aufklappen lässt, wenn tatsächlich benötigt. Zusätzlich empfinde ich einfache Icons als auflockernd und hilfreich beim erneuten Finden. Hier in aufgeklappter Form:

Für mich besonders interessant sind Tags. Eigentlich werden diese in den meisten Fällen sehr stiefmütterlich behandelt. Tags werden vergeben, finden sich in einer Auflistung oder einer Tag-Wolke wieder. Das war’s. Für meinen Geschmack nicht ausreichend.

Dennoch bedurften die Tags einer Verschönerung, vor allem, um auch eindeutig als solche erkannt zu werden, ohne notwendiger Weise “Tags” davor zu schreiben.

Exkurs: Eigentlich könnte eine Auswertung der Tags Kategorien ersetzen. Aus meiner Sicht müssten die Tags hinsichtlich ihres gemeinsamen Vorkommens ausgewertet werden. Tags, die nicht (oder nur selten) zusammen vorkommen (und eine bestimmte Relevanz haben) könnten als Kategorien angesehen werden. Durch das Schaffen von Verbindungen könnte darüber eine Navigation erfolgen/angeboten werden. Die Navigation würde sich aus den Inhalten ergeben und bietet zudem die Möglichkeit eine tiefgreifende Filterung durchzuführen. Allerdings erst geeignet, wenn sich die “Master-Tags” ermitteln lassen.

Bleibt schließlich noch die Suche. Ich weiß nicht wie es dir, werter Leser, damit geht. Die Statistik meines Blogs besagt, dass so gut wie niemand diese Funktionalität verwendet. Suchende kommen über Suchmaschinen. Alle anderen sehen sich in der Regel die letzten Einträge an, oder browsen via Tags, noch weniger über Kategorien. Aus diesem Grund habe ich mich entschlossen, das Suchfeld vorerst zu entfernen und zukünftig ein wenig Effort in ein besseres Tag-System zu stecken.

Analyse

Es ist sinnvoll darüber Gedanken zu machen, ob etwas aktuell Vorhandenes auch weiterhin benötigt wird, oder entfernt werden kann. Das ist aber noch nicht ausreichend. Die eigene Meinung muss nicht zwangsweise die der Leser entsprechen. Es empfiehlt sich also zu analysieren, ob das entsprechende Teil durch die Besucher verwendet wird. Ist dem nicht so, verhält sich der Fall recht einfach - entfernen. Findet jedoch eine Verwendung statt, sollte man seinen Entschluss nochmals überdenken (dies ist natürlich auch von der Intensität der Nutzung abhängig).

Eine Analyse des Klickverhaltens bringt einen guten Überblick, welche Teile der Site vom Besucher genutzt/als interessant empfunden werden. Eine gute Basis für zukünftige Entscheidungen.

Eine entsprechende Analyse kann beispielsweise via Google Analytics erfolgen, sofern eingesetzt. Sehr hilfreich an dieser Stelle ist die In-Page-Analyse, gibt sie doch sehr schnell einen Überblick darüber, welche Links geklickt werden und welche nicht. Entsprechende Auswertungsmöglichkeiten bringen aber auch die meisten Log Analyzer (wie AWStats und Co.) mit.

Feedback

Das Einbinden der Leser ist ein wichtiger Prozess um Rückmeldungen zu den bereits durchgeführten oder angedachten Neuerungen zu erhalten. Schließlich gestaltet man seinen Webauftritt nicht nur für sich alleine. Möglichkeiten hierzu finden sich viele, man wähle einfach aus den Social Networks, ziehe Designer, Kollegen, Freunde hinzu. Dennoch: Ohne ein klares Rahmenwerk helfen auch Feedbacks nicht.

Zum Schluss noch ein herzliches Dankeschön an: Michael, Sven, Alex, Sebastian, Thomas, Mario, Thorsten, Gordon und Peter. Die Reihenfolge wurde zufällig gewählt und hoffentlich wurde niemand vergessen.

Wenn auch du noch konstruktive Anregungen und/oder Anmerkungen hast, bitte einfach einen Kommentar hinterlassen. Ich freue mich natürlich auch über ein Gefällt mir.

Buch: Justifiers 4 - Zero Gravity - Nicole Schuhmacher

Norbert Eder [MVP] — 2012-01-02T09:54:15

Auf das Team der Justifiers wartet einer ihrer bis dahin gefährlichsten Aufträge. Sie sollen auf einem einsamen Vorposten eines Konzerns nach dem Rechten sehen, denn die Station hat jeden Kontakt eingestellt. Zwar sind sie bereits auf einiges gefasst – aber was den Justifiers auf Holloway II tatsächlich begegnet, übertrifft ihre schlimmsten Alpträume …

Im vierten Teil der Justifiers-Serie erzählt Nicole Schuhmacher die Geschichte eines zusammengewürfelten Justifiers-Team der United Industries. Dieses soll von einem entfernten System Informationen beschaffen, die zum Stichtag nicht geliefert wurden, zumal auch kein Kontakt mehr möglich ist. Doch was sie dort finden lässt den ursprünglichen Kurier-Auftrag sehr schnell in ein äußerst gefährliches Spektakel ausarten. Währenddessen findet sich die Auftraggeberin selbst in großer Gefahr wieder. Ein Anschlag auf sie und ihrem Forschungschef zeigt sehr schnell, dass die Anzahl der Feinde groß und der eingeschlagene Weg für den Konzern vielversprechend ist …

Das Gute vorweg: Die erzählte Geschichte ist sehr spannend und gut erzählt. Leider ist der Anfang ein wenig holprig und bedarf ein wenig Überwindung, sich da wirklich durchzukämpfen. Nach den ersten Kapiteln wird man jedoch wirklich belohnt und findet sich mitten im Justifiers-Universum wieder. Grundsätzlich sehr empfehlenswert, durch den schwachen Start wirkt sich dies jedoch negativ auf die Beurteilung aus.

Bewertung: 3/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

2011 Top 10 Posts

Jürgen Ebner — 2012-01-01T13:40:25

Das Jahr ist wieder vorbei, deshalb wird es Zeit ein Resümee zu ziehen und die Top 10 der meistgeklickten Posts zu betrachten. Model-View-ViewModel (MVVM) – 868 Silverlight 2.0 Crashkurs Teil 2 – Textbox, Textblock, Button und Controlls – 392 Silverlight: Glass Button – 193 “Metro” design guide v1.00 – 161 WP 7 Update – 140 [...]

Windows Presentation Foundation 4.5 - Bindung an statische Eigenschaften

Norbert Eder [MVP] — 2011-12-29T21:33:53

Im dritten Teil Windows Presentation Foundation 4.5 Serie beschäftigen wir uns mit der Bindung an statischen Eigenschaften. Dies war - ohne Umwege - bis inklusive WPF 4.0 nicht möglich. Da es jedoch immer wieder eine entsprechende Anforderung gibt, wurde dies mit Version 4.5 erweitert und diese Möglichkeit zur Verfügung gestellt.

Um statische Eigenschaften mit einem Two-Way-Binding zu versehen, können statische Ereignisse verwendet werden. Diese müssen sich an eine von zwei Signaturen halten. Die erste Signatur ist wie folgt:

public static event EventHandler MyPropertyChanged;

Dabei ist “MyProperty” mit dem Namen der tatsächlichen Eigenschaft zu ersetzen. Die zweite Möglichkeit besteht in einem generischen Ansatz (der an das Ereignis PropertyChanged aus INotifyPropertyChanged angelehnt ist):

public static event EventHandler<PropertyChangedEventArgs> StaticPropertyChanged;

Wichtig: Zu beachten ist, dass die beiden Möglichkeiten mit unterschiedlichen Ereignis-Argumenten arbeiten. Die erste Variante setzt auf die Klasse EventArgs, Variante 2 auf PropertyChangedEventArgs. Dies ist für eine erfolgreiche Implementierung zu berücksichtigen.

Sehen wir uns die Implementierung einer statischen Klasse StaticSettings mit zwei statischen Eigenschaften Value1 und Value2 an:

        1: public static class StaticSettings

       2: {

       3:     private static string value1;

       4:     private static string value2;

       5:  

       6:     public static string Value1

       7:     {

       8:         get { return value1; }

       9:         set

        {

            if (value1 == value)

                return;

            value1 = value;

            RaiseValue1Changed();

        }

    }

  

    public static event EventHandler Value1Changed;

  

    private static void RaiseValue1Changed()

    {

        EventHandler handler = Value1Changed;

        if (handler != null)

            handler(null, new EventArgs());

    }

        

    public static string Value2

    {

        get { return value2; }

        set

        {

            if (value2 == value)

                return;

            value2 = value;

            RaiseStaticPropertyChanged("Value2");

        }

    }

  

    public static event EventHandler<PropertyChangedEventArgs> StaticPropertyChanged;

  

    public static void RaiseStaticPropertyChanged(string propertyName)

    {

        EventHandler<PropertyChangedEventArgs> handler = StaticPropertyChanged;

        if (handler != null)

            handler(null, new PropertyChangedEventArgs(propertyName));

    }

}

Dabei wird die Update-Notification der Eigenschaft Value1 nach der ersten Variante, die der Eigenschaft Value2 nach der zweiten Variante implementiert. Welche Variante eingesetzt wird, hängt von der Anzahl der Eigenschaften ab. Variante 1 wird bei mehreren Eigenschaften schnell unübersichtlich, wodurch der generische Ansatz zu bevorzugen ist.

Anschließend erfolgt die Deklaration der View:

       1: <Window x:Class="DevTyr.Wpf45.StaticPropertyBinding.MainWindow"

       2:         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:         xmlns:local="clr-namespace:DevTyr.Wpf45.StaticPropertyBinding"

       5:         Title="DevTyr - WPF 4.5 - Static Property Binding" Height="350" Width="525">

       6:  

       7:     <Grid>

       8:         <Grid.ColumnDefinitions>

       9:             <ColumnDefinition Width="Auto" MaxWidth="250"/>

            <ColumnDefinition Width="*"/>

        </Grid.ColumnDefinitions>

        

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="Auto"/>

        </Grid.RowDefinitions>

        

        <TextBlock Text="PropertyNameChanged"

                   TextWrapping="Wrap"/>

        <TextBox Text="{Binding Path=(local:StaticSettings.Value1)}"

                   Grid.Column="1"/>

  

        <TextBlock Text="StaticPropertyChanged"

                   TextWrapping="Wrap"

                   Grid.Row="1"/>

        <TextBox Text="{Binding Path=(local:StaticSettings.Value2)}"

                   Grid.Column="1"

                   Grid.Row="1"/>

  

        <StackPanel Grid.Row="4"

                    Grid.ColumnSpan="2"

                    Orientation="Horizontal">

            <Button Content="Update property values"

                    Click="OnRefreshClick"/>

            <Button Content="Reset"

                    Click="OnResetClick"/>

            <Button Content="Show current source data"

                    Click="OnShowDataClick"/>

        </StackPanel>

        

    </Grid>

</Window>

Im Endeffekt wird hier nicht mehr gemacht, als zwei Textfelder (diese haben per Default eine Two-Way-Bindung) mit einer Bindung auf die beiden Eigenschaften der in den Ressourcen definierten Klasse zu versehen.

Wichtig: Zu beachten sind die runden Klammern, die für die Pfadangabe der Bindung verwendet werden. Durch diese “weiß” das Bindungssystem, dass nach dem Schema Klassenname.Eigenschaftsname geparst werden soll. Ohne runde Klammern wird nach dem Schema Eigenschaftsname.Eigenschaftsname verfahren.

Nicht verschrecken sollten folgende beiden Eigenheiten der Developer Preview:

Trotz der angezeigten Fehler kann die Anwendung trotzdem gestartet werden. Offensichtlich wird die neue Bindungs-Syntax noch nicht erkannt. In den weiteren Versionen wird es hierfür wohl einen entsprechenden Fix bzw. eine Erweiterung geben.

Um das Verhalten testen zu können, finden sich auch einige Schaltflächen auf der Oberfläche (auf die Verwendung von MVVM wird der Einfachheit halber verzichtet).

Hier die Eventhandler:

private void OnRefreshClick(object sender, RoutedEventArgs e)
{
    StaticSettings.Value1 = "Updated";
    StaticSettings.Value2 = "Updated";
}

private void OnResetClick(object sender, RoutedEventArgs e)
{
    StaticSettings.Value1 = "";
    StaticSettings.Value2 = "";
}

private void OnShowDataClick(object sender, RoutedEventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.AppendFormat("Value1: {0}\n", StaticSettings.Value1);
    sb.AppendFormat("Value2: {0}\n", StaticSettings.Value2);
    MessageBox.Show(sb.ToString());
}

Nach einem Start der Anwendung können über die erste Schaltfläche im Hintergrund die Werte der beiden Eigenschaften verändert werden. Wie nachfolgend zu sehen, spiegeln sich diese in der Oberfläche wider. Test bestanden.

Hinweis: Wer mit der Erweiterung x:Static arbeiten wollte, wird eine Enttäuschung erleben. Hier verhält es sich so, dass die Ereignisse bei der Änderung der Source nicht ausgewertet werden. Dies ist das Standardverhalten und wird auch in WPF 4.5 nicht geändert.

Das hier besprochene Beispiel kann nachfolgend herunter geladen werden.

WebSequenceDiagrams API mit .NET

Mario Priebe — 2011-12-28T21:06:47

Heute bin ich durch einen Tweet auf websequencediagrams aufmerksam geworden. Mit websequencediagrams kann man sich über eine einfache Textnotation ein SequenzDiagramm in verschiedenen Styles erstellen lassen. Die Applikation bietet aber auch eine Schnittstelle die es einem ermöglicht mit .NET ein solches Diagramm zu erstellen. Folgendes CodeSnippet soll zeigen wie: 1 public void SaveSequenceDiagram(string data, string [...]

Buch - Die Versuchung - David Baldacci

Norbert Eder [MVP] — 2011-12-26T20:09:47

LuAnn lebt mit ihrer Tochter und ihrem arbeitsscheuen Lebensgefährten in einem alten Wohnwagen. Sie schlägt sich mit Gelegenheitsjobs durch, bis sie ein mysteriöses Angebot erhält: Ein Fremder will sie zur Hauptgewinnerin in der staatlichen Lotterie machen. Dafür soll sie genau das tun, was er ihr befiehlt. Zu spät erkennt LuAnn, dass das Spiel mit dem Glück tödlicher Ernst ist ..

Die Story ist spannend, keine Frage. LuAnn ist sehr jung, hat ein Baby und einen Nichtsnutz als Freund, der nicht arbeiten will, und wenn, sich mit illegalen Geschäften über Wasser hält. Eines Tages erhält sie von einem Unbekannten, Jackson, ein Angebot, das sie kaum abschlagen kann. Hundert Millionen Dollar. Zu gewinnen über die staatliche Lotterie, die Jackson jederzeit manipulieren kann, wie er ihr auch vorführt. Daran gebunden sind jedoch unbekannte Forderungen, die erst nach einer Zusage bekannt gemacht werden. Nachdem ihr Freund umgebracht wird, ist sie mehr oder weniger gezwungen, das Angebot anzunehmen. Sie bekommt Charlie an ihre Seite gestellt, der sie bei allen “Formalitäten” unterstützt. Schnell fasst sie Vertrauen zu ihm. Nachdem sie aufgrund wegen des mysteriösen Todes ihres Freundes lange Jahre auf der Flucht ist, zieht sie mit Charlie (der bei ihr geblieben ist) in den Heimatsort ihrer Mutter zurück. Ein Schritt, den sie unter keinen Umständen machen hätte dürfen und unter Strafe durch Jackson verboten wurde.

Es beginnt ein Katz und Mausspiel. Jackson - ein Meister der Tarnung und Verkleidung - unternimmt alles, um sämtliche Spuren zu verwischen, zudem auch noch ein Reporter der gesamten Geschichte auf die Schliche kommt …

Die Handlung ist eines Thrillers würdig, wenn er es sich an einigen Stellen auch etwas zu einfach macht. Dennoch, das Buch geht runter wie Öl und findet ein sehr interessantes Ende. Es gibt kaum Phasen, die sich wirklich hinziehen, dem Leser wird es in keiner Weise langweilig. Zugegeben, ich bin ein Fan von David Baldacci, da er es versteht, den Leser zu fesseln und interessante Bücher zu liefern. Mir fehlt aber doch das gewisse Etwas, um die volle Punkteanzahl geben zu können. Ein solides Werk und empfehlenswert ist es aber allemal.

Bewertung: 4/5

Weitere von mir gelesene und bewertete Bücher finden sich unter Lesestoff.

Iconset-Sammlung – Minimalistische Icons

Mario Priebe — 2011-12-25T14:08:30

Für die Entwicklung von ansprechenden Applikationen sind die visuellen Elemente essentiell. Dazu gehören die kleinen Bildchen – oder auch Icons genannt – die dem Anwender auf einem Blick klar machen sollen, welche Funktion sich dahinter verbirgt. Wir Entwickler haben meist nicht so das Händchen dafür, solche Icons zu erstellen. Wir sollten aber wissen, wo man [...]