Willkommen am Arbeitsplatz der Zukunft

Am 21. Januar 2013 hat Namics zum Event Vernetzt & Mobil ins Microsoft Briefing Center geladen, bei dem die Teilnehmer den Arbeitsplatz der Zukunft live erleben konnten. Im Mittelpunkt des Tages stand der moderne Mitarbeiter. Längst ist es nicht mehr die offizielle Job description, die ihn den Tag über beschäftigt, sondern die Suche nach Informationen, um seine eigentlichen Aufgaben ausführen zu können. Und auch für diese braucht er heute mehr und bessere Tools. Das Fazit des Tages: Die Zukunft verheisst goldene Zeiten – dann sollen die Mitarbeiter die richtigen Informationen schneller finden und ihre Aufgabe effizienter ausführen, egal wo sie gerade sind.

Durch den Tag führten spannende Vorträge und überzeugende Live-Demonstrationen über das informationsorientierte Arbeiten im virtuellen Raum von allen Devices zu jeder Zeit. Die Lösung für Microsoft heisst SharePoint 2013, Office 2013, Yammer und Lync. Warum?

  • Information durch soziale Netzwerke: Kein Frust durch Intranet-, Ablagesysteme- und Papierberge-Durchsuchen, keine Massen-E-Mails an alle Kollegen – Finden statt Suchen funktioniert am besten, wenn man genau denjenigen fragt, der es weiss. Im Intranet, über Hash-Tags und dank intrinsischer Förderung von Experten: soziale Netzwerke sind aufgrund ihres Nutzens bei der Informationssuche in Unternehmen längst erwachsen geworden.
  • Effizienz durch Social Collaboration: Gleiches Tool, zusätzlicher Effekt – nicht nur Informationsaustausch, sondern auch richtige Zusammenarbeit klappt online teilweise besser, als endlose Meetings und Team-Grenzen.
  • Share and Follow: Ob Sites, Personen oder Dokumente – wer möchte, dem entgeht kein Update und keine Aktion, ohne darüber informiert zu werden. Und wer keine Zeit dafür hat, setzt Prioritäten und abonniert nur das für ihn Relevante.
  • Integration über alle Devices: Arbeiten vor und nach der Arbeit? Kein Problem: eine Dokumentenseite, die man auf dem Mobile auf dem Weg zum Kunden bearbeitet, öffnet sich – natürlich synchronisiert – an der gleichen Stelle, sobald man den Laptop im Office hochfährt.

Auch seitens Microsoft gab es Einblicke in die neue Arbeitswelt. Wem die Vorträge und Demos nicht ausreichten, konnte sich live vom Next Generation Office überzeugen. Im Microsoft-Office ist die Vision von der Zukunft längst angekommen. Das Highlight: die Abschaffung der Maus. Das Relikt vergangener Zeiten wird zwar noch von Mitarbeitern genutzt, doch sind Touch-Bildschirme in arbeitsfähiger Qualität längst über das Stadium der Prototypen hinaus. Bildschirme reagieren auf Fingerdruck und lassen sich dank Kinect gar durch Bewegung steuern, ohne auch nur ein Stück Hardware zu berühren. Willkommen in der Zukunft.

Stellt sich zuletzt die Frage, ob das Ziel die vollständige Einbindung des Mitarbeiters ist, damit er nicht nur im eigenen Office, sondern auch in der Badewanne effizient arbeitet. Das gesellige Apéro zum Abschluss des gelungenen Tages zeigt: nicht „ständig“, sondern „flexibel“ ist das Schlagwort. Der Mitarbeiter entscheidet selbst, wann er wie und wo arbeiten möchte. Microsoft und Namics beweisen, dass es möglich ist – und helfen anderen Unternehmen bei ihrer Entwicklung in die Zukunft. Vielen Dank an alle Teilnehmer für diese Einblicke!

Flexible & erweiterbare jQuery Plugins

jQuery ist ein mächtiges Framework welches das Arbeiten mit JavaScript stark erleichtert. Mittlerweile ist jQuery mit Abstand das verbreitetste JavaScript Framework der Welt. Ganze UI-Elemente wie Tabs, oder Funktionsblöcke wie etwa eine Bildergalerie sucht man jedoch – bei jQuery selber – vergeblich. jQuery stellt lediglich zahlreiche mehr oder minder kleine Helfer zur Verfügung, welche es ermöglichen, solche Dinge mit geringem Aufwand zu erstellen.

Nun ist es natürlich nicht praktisch komplexe Funktionen wieder und wieder – und für jedes Projekt neu – zu schreiben. Hier kommen die „jQuery Plugins“ ins Spiel. Ein jQuery Plugin ist in der Regel eine Erweiterung von jQuery und kann beliebig komplexe Funktionen – von History Handling über UI-Elemente bis zu Lightboxen – bereitstellen.

Aufbau eines Plugins

Die jQuery Plugin API dient dazu, jQuery um neue Funktionen zu erweitern:

// jQuery um Tab Funktion erweitern:
$.fn.tabsPlugin = function(userOptions) {
   // Plugin Code...
}

Plugins sind meist sehr ähnlich aufgebaut. Sie werden in der Regel auf ein Set von HTML Elementen angewendet und man kann das Verhalten des Plugins mit Optionen etwas beeinflussen. In etwa so:

var options = {
     activeTab: 2
};
$('div.tabs').tabsPlugin(options);

Damit würde man etwas HTML Code…
2307-html Code.png

…in ein Modul verwandeln das etwa wie folgt aussieht:
2306-Tabs-thumb-500x83-2305.png

Das Plugin hat dabei meist eigene Optionen, sogenannte Defaults. Diese werden durch die Optionen, welche der Benutzer dem Plugin beim Aufruf mitgegeben hat ergänzt:

var options = $.extend({}, $.fn.tabsPlugin.defaults, userOptions);

Innerhalb des Plugins, wird danach die entsprechende Plugin-Funktion auf jedem einzelnen der übergebenen Elemente ausgeführt. Dabei muss darauf geachtet werden, dass die Funktion nur auf das jeweilige Element Einfluss hat, damit mehrere Elemente auf der Seite die gleiche Funktionalität haben können.

var $tabSets = $(this);
$tabSets.each(function(){
     // Auf jedem Element die gewünschte Funktion ausführen
     var $tabSet = $(this); // Aktuelles Tab-Set
     ...
});

Nun soll’s ein bisschen anders sein…

Ein Problem vieler Plugins ist, dass sie zwar meist ihre Aufgabe gut erledigen, nicht selten auch viele Optionen mitbringen, aber nicht flexibel oder erweiterbar sind. Nehmen wir ein Plugin, das aus einem Set an HTML Elementen ein Tab-UI generieren soll. Dieses Plugin übernimmt das Sammeln der Tabs und zugehörigen Panels, sowie das Ein- und Ausblenden der Panels beim Klick auf ein Tab. Ausserdem bringt es noch einige Optionen mit, womit der Benutzer festlegen kann, welche Klassen die ausgewählten Tabs haben sollen und welches Tab zu Beginn aktiviert werden soll. Ist doch Perfekt, nicht?

Was nun, wenn der Inhalt des Panels beim Aufruf der Seite noch nicht vorhanden ist sondern erst nachgeladen werden soll, wenn man das entsprechende Tab aktiviert? Herkömmliche Plugins versagen hier oft und gewünschte Funktionalität muss direkt im Plugin eingefügt werden. Dabei geht die Update-Fähigkeit verloren und es leidet die Wiederverwendbarkeit und Sicherheit des Projekts. Im Wissen, dass der Benutzer vielleicht mit dem Plugin noch weiter Anwendungsfälle hat neigt der Autor des Plugins dazu, möglichst viele Funktionen in sein Plugin zu stecken, da er es ja flexibel halten möchte. Damit wird es gross, schwerfällig und unübersichtlich und verfügt über eine Menge Funktionen, welche viele unter Umständen gar nicht brauchen. Der Autor des besagten Tab-Plugins muss dabei an Tastatur-Bedienbarkeit, Ajax- und History-Fähigkeit sowie vieles mehr denken.

Evented jQuery Plugins = flexibel & erweiterbar

Eine Lösung für dieses Problem lautet Custom Events oder kürzer – Evented. Dabei muss sich der Plugin Autor überlegen, welche grundlegende Funktionen das Plugin benötigt und stellt diese in einer möglichst schlichten Form zur Verfügung.

Ein Tab-UI-Element hat im Grossen und Ganzen eine Funktion: Beim Klick auf ein Tab, soll das zugehörige Panel aktiviert und alle anderen deaktiviert werden. Wir brauchen also eine „activate“ Funktion. Ausserdem müssen zu Beginn alle Tabs gesucht, und die zugehörigen Panels gespeichert werden. Dazu benötigen wir eine „setupTabs“ Funktion. Des weiteren sollten die Panels wissen, zu welchem Tab sie gehören: „setupPanels„. Beim Aufruf der Seite sollen diese beiden Funktionen ausgeführt werden und das erste Tab aktiviert werden, dazu brauchen wir noch eine letzte Funktion, die „initialize“ Funktion.

Diese Funktionen sind „Events“. Jedes übergebene Set an HTML Elementen wird mit diesen Events versehen. Da der Event damit immer zu einem Tab-Element gehört, kann damit auch das Problem von allfälligen Konflikten mit anderen Tab-Elementen einfach gelöst werden. Wenn auf einer Seite zwei Tab-Elemente vorhanden sind, beeinfluss Tab-Verbund eins den zweiten Tab-Verbund nicht, wenn darauf der activate Event ausgeführt wird:

...
$tabSets.bind("activate",
        function(e, selected) {
            // selektiertes Tab aktivieren
        }
);
...

Events nach Aussen verfügbar machen

Der Trick besteht nun darin, dass diese Funktionen nicht einfach fest in das Plugin integriert sind, sondern das jede einzelne Funktion in ein Array gepackt wird, welches über ein Objekt customEvents von aussen Zugänglich ist. Die Funktions-Array können dadurch ergänzt, oder gar ganz überschrieben werden, bevor das Plugin auf ein Set von HTML Elementen angewendet wird.

var customEvents = {
    initialize: [function(options) {
        this.bind("initialize." + options.namespace,
        function(e) {
            // Tabs und Panels vorbereiten
            //und erstes Tab Aktivieren
        });
    }],

    setupPanels: [function(options) {
        this.bind("setupPanels." + options.namespace,
        function(e) {
            // Panels mit zugehörigem Tab verbinden
        });
    }],

    setupTabs: [function(options) {
        this.bind("setupTabs." + options.namespace,
        function(e) {
            // Tabs suchen und activate Funktion bei klick ausführen
        });
    }],

    activate: [function(options) {
        this.bind("activate." + options.namespace,
        function(e, selected) {
            // Alle Tabs deaktivieren und selektiertes
            // Tab und Panel aktivieren
        });
    }]
};

Events ergänzen

Im unserem Beispiel wollten wir, dass der Inhalt des Panels erst vom Server geladen wird, wenn das Tab aktiviert wird. Die Vorgehensweise ist nun denkbar einfach, man fügt einfach vor der Plugin-Standard-Funktion eine neue Funktion hinzu, welche den Inhalt des Panels via Ajax vom Server lädt. Dabei muss man zu keiner Zeit das Plugin selber verändern. Wenn der Plugin Autor ein Bug-Fix veröffentlich, kann das Plugin einfach aktualisiert werden – die Grundfunktionen werden die gleichen bleiben und die Erweiterung wird nicht tangiert da sie sich ausserhalb des Plugins befindet.

// Neue Funktion vor die bestehende
// activate Funktion schieben:
customEvents.activate.unshift( function(options) {
    // Die Erweiterung auf das Grund-Element
    // (nicht die einzelnen Tabs) binden:
    this.bind("activate." + options.namespace,
        function(e, selectedTab) {
            // Den Inhalt des Tabs hier
            // per Ajax in das Panel laden:
            var url= selectedTab.href;
            $(selected).data('$panel').load(url);
   });
});

Der Kern des Plugins ist dabei lediglich dafür verantwortlich, dass die Default Einstellungen mit den Benutzer-Optionen ergänzt werden und dass danach alle Tab-Elemente die Custom Events erhalten.

Hello World!

Nachdem man dieses erweiterbare und flexible Tabs-Plugin geschrieben hat, ist es natürlich schön, wenn sich der Rest der Welt auch daran erfreuen kann. In meinem nächsten Post werde ich zeigen, wo und wie man ein eigenes Plugin veröffentlichen kann und was dabei zu beachten ist.