Knockout für den Rivalen

Größe: px
Ab Seite anzeigen:

Download "Knockout für den Rivalen"

Transkript

1 SCHWERPUNKT Created for Tilman Börner on :19:41 MVVM für JavaScript-UIs Knockout für den Rivalen MVVM ist das gängige Architektur-Pattern für WPF und Silverlight. Und wenn man HTML5 verwendet? Dann nimmt man die JavaScript-Bibliothek KnockoutJS. Sie realisiert das MVVM-Pattern in einem clientseitigen Datenmodell. Auf einen Blick Die Rolle von JavaScript haben viele Entwickler lange Zeit unterschätzt. Java- Script galt als zweitklassige Sprache, geprägt von Sicherheitsrisiken und nur im Notfall zu verwenden. Doch die Welt hat sich gewandelt: Mit Ajax wurden Webseiten dynamischer und benutzerfreundlicher, und spätestens seit HTML5 ist klar: JavaScript gehört die Zukunft bei der Entwicklung interaktiver Webapplikationen, Das MVVM-Pattern Matthias Jauernig (M.Sc.) wenn RIA-Technologien (Rich Internet Applications) wie Silverlight und Flash keine Option arbeitet als Senior expert (.NET) bei der SDX AG in Frankfurt am Main. SDX unterstützt sind. Und darüber hinaus dringt JavaScript mit Enterprise-Unternehmen bei der Umsetzung von Businesslösungen in den Kompetenzfeldern Custom Development, Business Intelligence, Cloud Development sowie Projektmanagement (Scrum). Sie erreichen ihn Projekten wie Node.js [1] oder dem Entwicklungsmodell von Windows 8 immer mehr auch in Bereiche vor, die bisher klassischen Programmierplattformen wie.net oder Java vorbehalten waren. Da verwundern auch nicht Empfehlungen, Entwickler sollten verstärkt in das Erlernen von JavaScript investieren [2]. über den Blog von SDX unter Die steigende Popularität von JavaScript (JS) oder bewirkt zudem, dass immer mehr Frameworks seinen privaten Blog unter entstehen, die die Entwicklung JS-lastiger Webapplikationen vereinfachen wollen. Prominen- testes Beispiel ist hier wohl jquery, das sich steigender Beliebtheit erfreut und mittlerweile auch Inhalt Bei der Änderung von Werten von Microsoft aktiv unterstützt und weiterentwickelt wird. jquery bietet eine eingängige Syntax automatisch das HTML-UI aktualisieren. und ermöglicht die einfache Auswahl und Manipulation von Elementen des DOM (Document Arrays überwachen und in der View darstellen. Object Model). Durch die Verfügbarkeit zahlloser Das UI an einen SQL Server anbinden. Plug-ins und die Browserunabhängigkeit von Grundlagen jquery steigt die Produktivität bei der Entwicklung interaktiver Webapplikationen deutlich. Vom Model-View-Controller Was jquery nicht oder nur ungenügend unterstützt, Listing 1 zum Model-View-ViewModel, A0808MVVM dnpcode A1111Knockout ist die Erstellung komplexer, dynamischer UIs auf der Basis zugrunde liegender Daten, zum Beispiel von einem Server. Entwickler müssen UI- Updates bei der Änderung von Daten manuell durchführen, indem Event-Handler für die jeweilige Aktion ausgeführt werden. Gerade bei nichttrivialen UIs mit vielen Abhängigkeiten der Daten untereinander steigt die Komplexität stark an. Die Entwicklung mit jquery skaliert hier nicht gut. Auch die Bindung mittels Ajax empfangener Daten an das UI kann mit jquery standardmäßig nur imperativ und manuell erfolgen. Schließlich können Daten auch nur relativ umständlich ausgewertet und weiterverwendet werden, etwa um var depot = function () { ; sie an einen Server zurückzusenden. jquery bietet insgesamt kein konsistentes Datenmodell, auf dem das JavaScript-UI aufbauen könnte. Ein solches clientseitiges Datenmodell liefert die Java- Script-Bibliothek KnockoutJS [3], die das MVVM- Pattern in JavaScript nutzbar macht. Dieser Artikel stellt die Version von KnockoutJS vor. Das MVVM-Pattern [4] hat seine Ursprünge bei Microsoft, wo es als Spezialisierung des Presentation-Model-Patterns entwickelt wurde. MVVM stellt das gängige Architektur-Pattern bei der Entwicklung von Applikationen mit WPF beziehungsweise Silverlight dar. Seine Bestandteile Model, View und ViewModel werden nachfolgend kurz erläutert. Das Model beinhaltet das Datenmodell und die Businesslogik, die von der Anwendung zur Verfügung gestellt werden. Es repräsentiert den funktionalen Kern der Anwendung. Die View visualisiert Daten aus dem Model und stellt die Model-Funktionalität einem Endanwender im UI zur Verfügung. Das ViewModel als dritter Bestandteil bildet schließlich das Bindeglied zwischen View und Model. Das ViewModel bestimmt, welche Daten in welcher Form dem UI zur Verfügung stehen sollen und welche Aktionen ausgeführt werden können. Das ViewModel ist somit eine logische Abstraktion des UI auf der Basis von Daten und Operationen auf diesen. Einfaches ViewModel für Depotinformationen. this.id = ko.observable(0); this.depotname = ko.observable("neues Depot"); this.location = ko.observable("bank"); this.budget = ko.observable(0); this.feeperyear = ko.observable(0); var depotmanagerviewmodel = new depot(); ko.applybindings(depotmanagerviewmodel);

2 SCHWERPUNKT Silverlight und WPF zeichnen sich dadurch aus, dass sie durch die Bindung von Daten und Operationen des ViewModels an das UI eine hohe Produktivität beim Einsatz des MVVM-Patterns erreichen. Bei ihnen bietet sich MVVM geradezu an. Die Vorteile sind, dass die Daten nicht nur im UI (der View), sondern auch in einem logischen Datenmodell vorliegen, auf dem mit ihnen agiert werden kann. Das ViewModel spiegelt dadurch immer den aktuellen Zustand des UI wider. Mit diesem Ansatz ist in der Regel weniger Code zur Bereitstellung einer Funktionalität erforderlich. Durch die Trennung derverantwortlichkeiten steigt zudem die Testbarkeit und Wartbarkeit des Codes. Weiterhin skaliert MVVM sehr gut mit steigender Komplexität in der Abhängigkeit der Daten voneinander, sodass der Entwickler stets den Überblick behält und sich auf die Modellierung der Funktionalität konzentrieren kann. KnockoutJS in a nutshell KnockoutJS (KO) hat sich zum Ziel gesetzt, die Eigenschaften und Vorteile des MVVM- Patterns auf dem Client in JavaScript nutzbar zu machen. KO ist eine freie JavaScript- Bibliothek, die unter der MS-PL-Lizenz zur Verfügung steht. Sie wird von Steven Sanderson [5] entwickelt, der seit November 2010 bei Microsoft im Web-Platform-Team beschäftigt ist. Die Bibliothek kann direkt von der Website [3] heruntergeladen oder per NuGet (Paket knockoutjs) installiert werden. Die Grundidee von KO ist es, das UI mit seinen Abhängigkeiten zum Datenmodell weniger über Verhalten, sondern vielmehr über den Zustand der zugrunde liegenden Daten zu modellieren. Grundelement ist eine deklarative 2-Wege-Bindung von Daten an das UI. Dies soll zu einem UI führen, das jederzeit den Zustand des zugrunde liegenden Datenmodells widerspiegelt und mit diesem konsistent gehalten wird. KO ist cross-browser-kompatibel und unterstützt neben allen aktuellen Browsern auch ältere wie den IE6. Werte beobachten Das MVVM-Pattern wird in KO clientseitig realisiert. Bei derview handelt es sich dann um den DOM-Baum einer HTML-Seite, der die Daten darstellt. Das ViewModel ist hingegen ein in JavaScript definiertes Datenobjekt, das KO an die View bindet. Dieser Artikel zeigt die wichtigste Funktionalität von KO anhand eines durchgehenden Beispiels, das sukzessive erweitert Listing 2 Deklarative Bindung des ViewModels an die View. <div id="depotmanager"> <h1>depot Manager (für '<span data-bind="text: depotname()!== ''? depotname() : '-'"></span>')</h1> <div><label for="inputdepotname">depotname</label></div> <input id="inputdepotname" type="text" data-bind="value: depotname, valueupdate: 'afterkeydown'" /> <div><label for="inputlocation">ort</label></div> <input id="inputlocation" type="text" data-bind="value: location" /> <div><label for="inputbudget">budget</label></div> <input id="inputbudget" type="text" data-bind="value: budget" /> <div><label for="inputdepotcosts">depotgebühr</label></div> <input id="inputdepotcosts" type="text" data-bind="value: feeperyear" /> </div> wird. Dabei handelt es sich um die Anforderung eines Fachbereichs, der sich einen vereinfachten Manager für Finanzdepots wünscht. Der Nutzer soll ein Budget vorgeben können, das ihm zur Verfügung steht, und dann ein Depot mit eigenen Positionen füllen können. Die Summe der Kosten dieser Positionen soll innerhalb des Budgets bleiben. Abbildung 1 stellt die Umsetzung dieser Funktionalität dar. Zunächst sollen dem Fachbereich die grundlegenden Depotverwaltungsfunktionen bereitgestellt werden. Hierzu muss ein Entwickler als Erstes ein ViewModel in JavaScript anlegen. Dabei sind viele Notationen möglich, zum Beispiel die klassische Object-Literal-Notation [6]. Dieser Artikel verwendet Konstruktor-Funktionen [7], mit denen mehrere Objekte gleichen Typs mit Properties und Funktionen erzeugt werden können. Listing 1 zeigt die Definition eines einfachen depot-objekts und die Verwendung einer Instanz davon als ViewModel depot- ManagerViewModel. Das Listing verdeutlicht einige Grundlagen von KO. Zunächst gibt es das ko-objekt. Hierüber lässt sich die komplette Funktionalität von KnockoutJS ansprechen. Zentral ist die Funktion ko.observable(), mit der sich Daten-Properties auf dem ViewModel definieren lassen, die KO auf Änderungen hin überwacht. Das bedeutet, dass alle UI-Felder, die von einer solchen Property abhängen, bei einer Änderung der Property automatisch aktualisiert werden, was später noch an praktischen Beispielen gezeigt wird. Wird ko.observable() ein Wert übergeben, so dient dieser als Initialwert der Property. Wurde das ViewModel erzeugt, muss es noch an das UI gebunden werden. Dies geschieht über ko.applybindings(), wie in Listing 1 zu sehen ist. Bindung an das UI Doch wie kommen die Daten in die View? Dies geschieht durch deklarative Bindings von HTML-Elementen über das data-bind- Attribut. Allgemein sind die data-attribute Teil der HTML5-Spezifikation und erlauben Frameworks wie jquery und KnockoutJS die Definition eigener Attribute, zum Beispiel data-val zur Validierung (jquery) oder data-bind zur Datenbindung. data-bind lassen sich mehrere Optionen übergeben. Wichtig ist zunächst die Information, welche Property desviewmodels an welches Attribut des HTML-Elements gebunden werden soll. Eine Bindung des Depotnamens an den Wert eines input-controls ist somit beispielsweise über databind='value: depotname' möglich. Die angegebene Property muss auf dem ViewModel definiert sein, das an das UI gebunden wurde. Neben value unterstützt KO abhängig vom HTML-Element noch weitere Attribute, etwa text, css, visible oder enable. Eine vollständige Liste finden Sie in der KO-Dokumentation [8]. Sollten diese Attribute nicht den eigenen Anforderungen entsprechen, zum Beispiel weil ein Wert bei der Bindung animiert werden soll, lassen sich über Custom Bindings [9] eigene Attribute definieren

3 SCHWERPUNKT _ MVVM für JavaScript-UIs Listing 2 stellt die deklarative Bindung des bisherigen ViewModels an die View dar. Dabei wurden noch ein paar bisher nicht erwähnte Features eingebaut, um den Fachbereich zufriedenzustellen. Bei der Überschrift Depot Manager soll in Klammern noch der Depotname mit ausgegeben werden. Für leere Namen soll nur ein Bindestrich dargestellt werden. Dies lässt sich durch ein Binding erreichen, welches den gesamten JavaScript-Ausdruck enthält, der zur korrekten Darstellung benötigt wird: [Abb. 1] Der Depot Manager. [Abb. 2] View-Element bei Werteänderung automatisch aktualisieren. <span data-bind="text: depotname()!== ''? depotname() : '-'"></span> Damit wird ein wesentlicher Aspekt von KO ersichtlich: In Bindings ist die Angabe beliebiger JavaScript-Ausdrücke möglich, deren Term gebunden wird. Dies macht es einfach in Situationen, wo eine Daten-Property zum Beispiel individuell formatiert werden soll. Allerdings sollte diese Möglichkeit nicht überstrapaziert werden, da solcher Code als Zeichenkette in einem Attribut nur schwer zu debuggen ist und die Wartbarkeit leidet. Hier kann die Definition separaterview-properties auf demviewmodel sinnvoll sein, die die Anzeigelogik für eine Daten-Property kapseln. Alternativ sind Funktionen denkbar, die die Formatierung übernehmen und gegen die View mit der Property als Parameter gebunden werden. Weiterhin sind die Klammern bei depot- Name() zu beachten, die im obigen Java- Script-Ausdruck Verwendung finden. Generell gilt: Bei den ViewModel-Properties wie depotname handelt es sich um Objekte des Typs ko.observable(). Diese stellen Funktionen dar, sodass Klammern bei Bindings in der Regel angegeben werden müssen. Nur wenn das Binding lediglich aus der Property besteht, können die Klammern weggelassen werden. Optionen für valueupdate Die Binding-Option valueupdate legt fest, wann eine Werteänderung im UI die Anpassung des ViewModels nach sich ziehen soll. Mögliche Werte sind: change (Standard): Aktualisierung, wenn der Fokus des Controls verlassen wird. keyup:aktualisierung, wenn der Nutzer eine Taste loslässt. keypress: Aktualisierung, wenn der Nutzer eine Taste gedrückt hat. afterkeydown: Aktualisierung, sobald der Nutzer ein Zeichen eingibt (Echtzeit-Aktualisierung). [Abb. 3] UI-Update eines dependentobservables. Was wird mit diesem Binding erreicht? Immer wenn der Benutzer den Depotnamen ändert, wird dieser automatisch in die Überschrift übernommen, siehe Abbildung 2. DieView bleibt damit konsistent mit dem sie definierenden ViewModel, ohne dass der Entwickler dies ausprogrammieren muss. Intern führt KO eine Liste der Abhängigkeiten auf Observables, sodass bei einer Werteänderung nur die betroffenen View- Elemente aktualisiert werden. Durch die Binding-Option valueupdate in einer Textbox kann darüber hinaus definiert werden, wann eine Änderung des Benutzers in das ViewModel geschrieben werden soll. Standardmäßig ist dies der Fall, wenn der Benutzer die Textbox verlässt. Mit valueupdate: afterkeydown kann aber zum Beispiel definiert werden, dass direkt bei Eingabe eines Zeichens eine Aktualisierung stattfinden soll und Änderungen damit sofort auf ViewModel und View durchschlagen. Eine Liste der möglichen Werte für valueupdate liefert der Kasten Optionen für valueupdate. Totale Abhängigkeit Generell lassen sich zwei Arten von Observables unterscheiden. Die einen vom Typ ko.observable() haben Sie bereits kennengelernt. Sie erlauben die Bindung einfacher Werte an die View. Als zweite Ausprägung gibt es den Typ ko.dependentobservable(). Damit definierte ViewModel-Properties berechnen sich aus anderen Observables. Dabei lässt sich eine beliebige JavaScript- Funktion angeben, aus der KO automatisch die Abhängigkeiten extrahiert. KO sorgt dafür, dass Änderungen an den verwendeten Observables automatisch das dependentobservable und die gebundenen View-Elemente aktualisieren. Das gilt für beliebige Hierarchiestufen. Damit sind auch dependentobservables denkbar, die von weiteren dependentobservables abhängen, und so weiter. Für das Beispiel soll eine Property depot- Info angelegt werden, die sich aus dem Depotnamen und dem Ort des Depots zusammensetzt und bei Änderungen automatisch aktualisiert wird. Listing 3 zeigt die Definition dieser Property, die nachfolgend wieder in der Überschrift gebunden werden kann: <h1>depot Manager (<span databind="text: depotinfo"></span>)</h1> In Listing 3 wird depotinfo als dependentobservable durch eine einfache Java- Script-Funktion definiert. Durch Aufruf von bind(this) wird diese an das ViewModel gebunden, indem KO die Abhängigkeiten extrahiert und zur Nachverfolgung speichert. KO reagiert nun automatisch auf Änderungen an den in depotinfo verwendeten Observables depotname und location mit einer Aktualisierung von depotinfo und den gebundenen View-Elementen, siehe Abbildung

4 27 EURO FÜR IHRE KAFFEEPAUSE Sichern Sie sich jetzt die dotnetpro und profitieren Sie von Desktop-, Web- und Mobil-Anwendungen auf Basis von Microsoft.NET sowie von Programmiersprachen, Tools und Vorgehensweisen. Die dotnetpro erscheint zwölf Mal im Jahr. Holen Sie sich das dotnetpro-jahresabonnement. Sie sparen damit 27 Euro gegenüber dem Kauf am Kiosk und die dotnetpro kommt direkt zu Ihnen nach Hause. Also gleich abonnieren und dann ab ins Café!

5 SCHWERPUNKT _ MVVM für JavaScript-UIs Listing 3 Einfaches zusammengesetztes Observable. var depot = function () {... this.depotinfo = ko.dependentobservable(function () { return "'" + this.depotname() + "' bei '" + this.location() + "'";.bind(this)); Generell sind solche abhängigen Observables in einer Vielzahl von Fällen nützlich, da mit ihnen berechnete Werte sehr einfach realisierbar sind, ohne dass sich ein Entwickler über das Tracking der Abhängigkeiten Gedanken machen muss. Meist treten sie in der Form read only auf, sie können allerdings auch als writeable definiert werden, was später noch gezeigt wird. Überwachte Collections Mit der bisherigen Umsetzung kann der Fachbereich bereits grundlegende Depotdaten bearbeiten, doch sofort kommt die nächste Anforderung: Es soll die Möglichkeit geschaffen werden, einzelne Positionen des Depots zu verwalten, mit denen das Budget belastet wird. Neben einzelnen Werten erlaubt KO auch die Überwachung von Collections aus Datenelementen mit dem Typ ko.observablearray(). KO reagiert mit View- Updates auf das Hinzufügen und Löschen von Array-Elementen sowie auf das Ändern der Anordnung der Array-Elemente. Listing 4 Datenmodell für Depotpositionen. var positiontypes = [ {name: "Fix", value: 0, {name: "Pro Stück", value: 1]; var positioncost = function () { this.value = ko.observable(0); this.type = ko.observable (positiontypes[0]); ; var depotposition = function () { this.id = ko.observable(0); this.name = ko.observable ("Neues Depotelement"); this.quantity = ko.observable(1); this.costs = new positioncost(); ; Listing 4 zeigt das grundlegende Datenmodell in JavaScript zur Umsetzung der Anforderung. Eine zentrale Rolle kommt dem Objekt depotposition zu, das die Daten einer Position des Depots beinhaltet. Eine Position könnte zum Beispiel die Contoso-Aktie sein. Neben einem Namen kann die Stückzahl der verwalteten Positionselemente eingetragen werden, beispielsweise 10 Aktien. Weiterhin lassen sich die Kosten angeben, die durch diese Position entstehen. Zur Kapselung existiert das Objekt positioncost, worüber der Kostenbetrag und der Typ der Kosten angegeben werden. Die Typen werden im Array positiontypes geführt. Kosten sind fix für die komplette Position oder pro Stück der Position, etwa pro Aktie, möglich. Listing 5 stellt dar, wie ein Array aus Depotpositionen inklusive Funktionalität zum Hinzufügen und Entfernen im Objekt depot angelegt werden kann. Die Property positions ist als ko.observablearray() definiert. Als initialen Parameter bekommt dieses bereits eine neue Depotposition zugewiesen, sodass neue Depots initial stets eine leere Position besitzen. Kollektive Bindung Die Darstellung von überwachten Arrays lässt sich konfigurieren, indem man angibt, wie die Einzelelemente des Arrays dargestellt werden sollen. So ist auch das Rendern beim Hinzufügen neuer Elemente zu der Collection für KO kein Problem. In Listing 5 KO vor Version 1.3 war dies nur durch separate Templates möglich, wie etwa die jquery Template Engine [10]. Dies hatte zur Folge, dass das Template immer getrennt vom eigentlichen Markup in einem separaten <script>-tag definiert werden musste, um dann über ein Template-Binding gebunden zu werden. Seit Version 1.3 ist diese explizite Definition eines Templates nicht mehr nötig. Stattdessen können Templates für Array-Elemente direkt (inline) im HTML- Markup definiert werden. Listing 6 zeigt dies anhand des observablearrays positions. Interessant ist vor allem die Zeile <tbody data-bind="foreach: positions">. Damit wird das positions-array an den Tabellen-Body gebunden. foreach gibt an, dass jeglicher Markup innerhalb des <tbody>-knotens zur Darstellung eines Array-Elements verwendet wird. Dabei ändert sich der Binding- Kontext vom ViewModel auf das jeweilige Array-Element. Somit können dessen Properties innerhalb des impliziten Templates direkt mit data-bind gebunden werden. Interessant sind zwei weitere Aspekte von Listing 6. Zum einen zeigt es, wie costs.type an eine Combobox (select) gebunden wird. Mit options und optionstext wird angegeben, woher der Wertevorrat der Combobox stammt. Mit value wird definiert, welche ViewModel-Property gebunden werden soll und bei Änderungen aktualisiert wird. Zum anderen zeigt Listing 6 für den Löschen-Link das Binden eines DOM-Elements an eine Funktion auf dem ViewModel. Dem Binding click kann eine Funktion übergeben werden, die ausgeführt werden soll. In diesem Beispiel wird die Funktion removeposition mit dem Parameter $data aufgerufen. KO interpretiert $data als die Depotposition, die gerade gerendert wird. Etwas unschön ist, dass aufgrund der Übergabe eines Parameters die Bindung der removeposition-funktion in eine separate Funktion gekapselt werden muss. Ein Umstand, den KO hoffentlich in einer zukünftigen Version beseitigt. Definition der Positionen im Depotdatenmodell. var depot = function () {... this.positions = ko.observablearray([new depotposition()]); this.addposition = function () { this.positions.push(new depotposition()) ; this.removeposition = function (position) { this.positions.remove(position) ; ;

6 SCHWERPUNKT Listing 6 Tabelle mit Inline-Template zur Anzeige eines Arrays. [Abb. 4] Ein Array von Depotpositionen an das UI binden. Um die Operationen auf den Positionen zu vervollständigen, definiert Listing 6 noch einen Button, dessen click-event von KO an die addposition()-funktion desview- Models gebunden ist. Und schon stehen die Positionen an die Tabelle gebunden und mit entsprechenden Operationen zum Hinzufügen und Löschen zur Verfügung. Durch die implizite 2-Wege-Bindung von KO wird die View zu jedem Zeitpunkt entsprechend den Array-Daten aus dem ViewModel dargestellt. Erstellt ein Nutzer eine Position oder löscht er eine bestehende Position, so spiegeln sich diese Änderungen direkt in der View wider, siehe Abbildung 4. Funktionalität leicht gemacht Dem Fachbereich gefallen die neuen Funktionen. Doch als er die aktuelle Version benutzt, kommen ihm noch ein paar Ideen fürverbesserungen. So möchte er die Summe der Kosten einer Position und dann schließlich auch über alle Positionen stets aktuell berechnet und angezeigt haben. Zudem besteht der Wunsch, dass keine neuen Positionen mehr hinzugefügt werden dürfen, wenn das Budget von den aktuellen Kosten aufgebraucht wurde. Uh, das wird teuer, schmunzelt der KO-Entwickler und macht sich ans Werk. Diese Funktionalität mit KO abzubilden, stellt sich als recht unproblematisch heraus und kann mit wenigen zusätzlichen dependentobservables und entsprechenden Bindings realisiert werden. Als Erstes soll es um die Anzeige der Positionssummen gehen. Für die Kosten der Einzelpositionen definieren Sie auf dem Objekt depotposition ein dependentobservable namens subtotal, das sich in Abhängigkeit von der Stückzahl und den angegebenen Kosten berechnet. Hierbei wird auch der Kostentyp berücksichtigt, wodurch die Kosten fix oder pro Stück ermittelt werden. Die Gesamtsumme kann nun aus den Zwischensummen aller Depotpositionen und <table> <thead> <tr> <th>bezeichnung</th> <th>stück</th> <th>kosten</th> <th>aktion</th> </tr> </thead> <tbody data-bind="foreach: positions"> <tr> <td><input data-bind="value: name" /></td> <td><input data-bind="value: quantity" /></td> <td class="multi"> <input data-bind="value: costs.value" /> <select data-bind="options: positiontypes, optionstext: 'name', value: costs.type"></select> </td> <td><a href="#" data-bind='click: function() { depotmanagerviewmodel.removeposition($data) '>Löschen</a></td> </tr> </tbody> </table> <input type="button" value="neue Position" data-bind="click: addposition " /> der globalen Depotgebühr berechnet werden. Dazu wird ein dependentobservable grandtotal auf dem Objekt depot definiert, das die Berechnung durchführt. Listing 7 zeigt den JavaScript-Code dafür. Die Bindung an das UI erfolgt analog zu den bisherigen Beispielen über data-bind='text: ' an den entsprechenden Stellen im Tabellen- Zeilen-Template beziehungsweise dem Footer der Tabelle und wird hier nicht gezeigt. Der interessierte Leser kann den aktuellen Stand unter [11] ansehen. [Abb. 5] Depotkosten automatisch aktualisieren. Was wurde allein durch die Definition dieser Properties und die Bindung an das UI erreicht? Immer wenn sich ein Kostenfaktor ändert, sei es durch Änderung der Positionskosten, der Depotgebühr oder durch das Löschen einer Position, aktualisiert KO die von diesen Werten abhängigen Properties subtotal beziehungsweise grand- Total automatisch, siehe Abbildung 5. Diese Änderungen werden direkt in der View dargestellt, ohne dass der Entwickler dies über zahlreiche Event-Trigger und ver- [Abb. 6] Budget überschritten Button deaktiviert

7 SCHWERPUNKT _ MVVM für JavaScript-UIs Listing 7 Properties zur Berechnung von Depotkosten. var depotposition = function () {... this.subtotal = ko.dependentobservable(function () { var quantity = parseint(this.quantity(), 10); var costs = parsefloat(this.costs.value()); var coststype = parseint(this.costs.type().value, 10); return (coststype === 0)? costs : (quantity * costs);.bind(this)); ; var depot = function () {... this.grandtotal = ko.dependentobservable(function () { var fee = parsefloat(this.feeperyear()); var total =!isnan(fee)? fee : 0; for (var i = 0; i < this.positions().length; i++) { var subtotal = this.positions()[i].subtotal(); total += (!isnan(subtotal)? subtotal : 0); return total;.bind(this)); this.isbudgetavailable = ko.dependentobservable(function () { return this.budget() - this.grandtotal() > 0;.bind(this)); ; Listing 8 Formatierung mit dependentobservable. depotmanagerviewmodel.budgetformatted = ko.dependentobservable({ read: function () { return depotmanagerviewmodel.budget() + " ";, write: function (value) { var floatvalue = parsefloat(value.replace(/[^\.\d]/g, '')); depotmanagerviewmodel.budget(!isnan(floatvalue)? floatvalue : 0); ); Listing 9 Formatierungslogik in einen Formatter auslagern. var formatters = { currencyeuro: function (value) { return { read: function () { return ko.utils.unwrapobservable(value).tofixed(2).replace('.', ',') + " ";, write: function (newvalue) { if (ko.iswriteableobservable(value)) { var floatvalue = parsefloat (newvalue.replace(',','.').replace(/[^\.\d]/g, '')); value(!isnan(floatvalue)? floatvalue : 0); ; schachtelten Code manuell implementieren muss. Bei der Abbildung solcher Abhängigkeiten kann KO seine Fähigkeiten in beeindruckender Weise entfalten. Die zweite Anforderung lautete, dass keine Positionen hinzugefügt werden dürfen, wenn das Budget aufgebraucht ist. Dies umzusetzen ist trivial. Dafür genügt ein Binding der enable-eigenschaft des Hinzufügen-Buttons an die Depotkosten und das Depotbudget: <input type="button" value="neue Position" data-bind="click: addposition, enable: budget() - grandtotal() > 0" /> Da Logik direkt in den Bindings nicht gerade sauber ist, kann diese auch in eine eigene dependentobservable-property auf depot ausgelagert werden. Damit wird die Property zudem in anderen Teilen des UI wiederverwendbar, zum Beispiel zur Anzeige eines Hinweises, dass das Budget verbraucht ist. Und fertig ist die Funktionalität! Abhängig davon, ob die Kosten das Budget übersteigen, kann der Benutzer Positionen hinzufügen oder nicht, siehe Abbildung 6. Format-Sache Der Fachbereich ist sehr angetan von der rasch umgesetzten Funktionalität. Nur eine Sache stört ihn noch: Diese Geldbeträge, können die auch mit einem Euro-Zeichen formatiert dargestellt werden? Können sie, sagen Sie und machen sich an die Umsetzung. In manchen Fällen sollen nicht die Rohdaten des ViewModels in der View angezeigt werden, sondern spezielle Formatierungen davon. In Silverlight/WPF lässt sich eine solche Konvertierungslogik mit einer Implementierung des Interfaces IValue- Converter definieren. In KO gibt es eine solche Lösung zunächst nicht. Trivialerweise ließen sich spezielle ViewModel-Properties anbieten, welche sowohl formatierte Werte an die View reichen als auch formatierte Werte aus der View lesen und in die richtige Daten-Property des ViewModels schreiben. Dies ist in KO über schreibbare dependentobservables möglich. Listing 8 zeigt dies anhand des Depotbudgets. Dabei wird ausgenutzt, dass man einem dependentobservable zwei Funktionen read und write übergeben kann, wobei read zur Formatierung in der View aufgerufen wird und write zur Rückformatierung, wenn sich der Wert in der View ändert. Nun funktioniert diese Lösung zwar, ist allerdings nicht sehr elegant, schließlich ist

8 SCHWERPUNKT die Formatierungslogik in der jeweiligen Property enthalten und muss für jede weitere Property dupliziert werden. Eine bessere Alternative stellt die Auslagerung in separate Formatierungsobjekte dar, die im Binding über eine neue Option formatter gebunden werden können. Diese Lösung stammt von [12] und soll an dieser Stelle nur erwähnt werden, da die Komplexität der Umsetzung recht hoch ist. Im Beispiel des Depotbudgets kann der ursprüngliche Datenwert dann direkt weiterverwendet werden, das Binding des input-controls ändert sich wie folgt: <input id="inputbudget" type="text" data-bind="formattedvalue: budget, formatter: formatters.currencyeuro" /> budget wird nun über die Option formattedvalue gebunden, und der Formatter currencyeuro übernimmt die eigentliche Formatierung. Die Logik zur Formatierung von Euro-Werten entspricht grob der zuvor genannten Lösung und ist in Listing 9 dargestellt. Im Hintergrund ist noch weitere Logik zur Definition undverarbeitung der neuen Binding-Optionen erforderlich, siehe [12]. Die bis hierhin umgesetzte Funktionalität inklusive Formatierung aller Geldbeträge können Sie unter [13] erforschen. Generell steht damit ein gutes Mittel bereit, um erweiterbare ausgelagerte Formatierungslogik zu definieren. Bleibt zu wünschen, dass diese Möglichkeit in ähnlicher Form direkten Einzug in eine kommende KO-Version erhält. Daten, Daten, Daten Die umgesetzte Logik überzeugt den Fachbereich, der seine Anforderungen an das UI vollständig abgedeckt sieht. Was ihm zum vollen Glück noch fehlt, ist die Nutzung einer zentralen SQL-Datenbank als Datenbasis. Auch das ist machbar. Generell lassen sich Daten mit KO wie in JavaScript üblich per Ajax von einem Webserver holen. Über die Formatierung dieser Daten muss sich ein Entwickler keine Gedanken machen, wenn die Bindings an das Model der abgerufenen Daten mit KO korrekt gesetzt sind. Im Beispiel sollen die Daten von ASP.NET MVC 3 von einer Controller-Action GetDepot() abgerufen werden, die als Resultat Daten im JSON-Format zurückgibt. KO selbst verfügt leider über keine Funktionalität zum Umgang mit Daten via Ajax. Hier müssen Sie auf Standardfunktionalität wie zum Beispiel die Ajax-Möglichkeiten von jquery zurückgreifen. Generell ergibt Listing 10 Depotdaten abrufen und umwandeln. Mapping Die Lösung liegt in der Definition einer Mapping-Option, die das Mapping auf depotposition übernimmt. Listing 12 zeigt das so angepasste Mapping der abgerufenen Daten. In den Mapping-Optionen ist ein individuelles Mapping der Property positions vorgesehen. Immer wenn eine Depotposition bei dem Mapping-Vorgang erzeugt wird (create), wird ein neues depotvar depotmanagerviewmodel; $(document).ready(function () { $.getjson('/depotmanager/getdepot', function (depotdata) { depotmanagerviewmodel = new depot(); ko.mapping.fromjs(depotdata, {, depotmanagerviewmodel); ); ); sich dadurch allerdings folgendes Problem: Angenommen, es werden Daten als JSON- Objekt abgerufen. Die Properties eines solchen Datenobjekts werden nicht als Observables geliefert, was aber nötig ist, damit KO diese an das UI binden und überwachen kann. Es ist natürlich möglich, diese Daten händisch zu mappen und so die entsprechenden Observables zu definieren, doch das ist fehleranfällig und aufwendig. Zum Glück gibt es aber das KO-Plug-in knockout.mapping [14] (NuGet-Paket Knockout.Mapping), welches diese Aufgabe übernehmen kann. Automatisiert wandelt es jede Property eines Datenobjekts in ein ko.observable() um, sodass dieses an das UI gebunden werden kann. Zudem lassen sich Optionen angeben, mit denen sich das Mapping individuell gestalten lässt, falls dies erforderlich sein sollte. Das Mapping-Plug-in stellt die Funktion ko.mapping.fromjs(data, options, existing) zur Verfügung, mit der ein Datenobjekt data in ein ViewModel überführt werden kann. Standardmäßig wird dabei ein neues ViewModel erzeugt. Durch Angabe des dritten Parameters existing ist es allerdings möglich, die Daten in ein bestehendes ViewModel zu schreiben. Genau diese Funktionalität ist für das Beispiel erforderlich. Sie haben bereits ein ViewModel vom Typ depot, das über einige Funktionalität in Form von dependent- Listing 11 JSON-Daten zurückgeben. Observable-Properties verfügt, die Sie weiterverwenden möchten. Listing 10 zeigt prinzipiell, wie nach dem Laden des DOM-Baums mit jquery Daten von einer Datenquelle abgerufen und mit KO in ein bestehendes ViewModel geschrieben werden können. Dabei wird die ASP.NET-MVC-3-Controller-Action GetDepot() aufgerufen, die aus einer Datenquelle gelesene Depotdaten als JsonResult zurückgibt, siehe Listing 11. Leider funktioniert diese Lösung noch nicht vollständig. Bei der Ausführung ergibt sich das Problem, dass die Property subtotal auf den gelesenen Depotpositionen des ViewModels nicht definiert ist. Der Grund dafür ist die Erzeugung des Arrays der Positionsdaten durch das Mapping- Plug-in. subtotal ist auf dem Objekt depot- Position definiert, das Mapping-Plug-in weiß aber von diesem Objekt nichts und befüllt ein separates Datenobjekt, das wiederum nichts von subtotal weiß. [HttpGet] public JsonResult GetDepot() { return Json(DataProvider.GetDepot(), JsonRequestBehavior.AllowGet);

9 SCHWERPUNKT _ MVVM für JavaScript-UIs Listing 12 Individuelles Mapping für Depotdaten. var depotmanagerviewmodel; $(document).ready(function () { $.getjson('/depotmanager/getdepot', function (depotdata) { var mapping = { 'positions': { create: function (options) { var position = new depotposition(); return ko.mapping.fromjs(options.data, {, position); depotmanagerviewmodel = new depot(); ko.mapping.fromjs(depotdata, mapping, depotmanagerviewmodel); ); ); Listing 13 Ein Depot speichern. var unmapped = ko.mapping.tojs(depotmanagerviewmodel); $.ajax({ type: 'POST', url: '/DepotManager/SaveDepot', data: JSON.stringify(unmapped), contenttype: 'application/json; charset=utf-8' ); Position-Objekt angelegt, dessen Properties ebenfalls über das KO-Mapping-Plugin befüllt werden. Mit diesem Mapping ist es möglich, die von ASP.NET MVC 3 abgerufenen Daten in ein KO-ViewModel zu überführen und mit der bestehenden Funktionalität an das UI zu binden. Das KO-Mapping-Plug-in ist flexibel genug, mithilfe vielfältiger Optionen den Mapping-Vorgang individuell zu gestalten. Die Persistierung eines ViewModels durch einen Server kann ebenfalls über das KO-Mapping-Plug-in erfolgen. Rufen Sie dazu die Methode ko.mapping.tojs(view- Model) auf, welche die aktuellen Daten einesviewmodels in ein normales JavaScript- Objekt überführt. Dieses kann leicht per JSON an einen Server übersendet werden. Listing 13 zeigt, wie das Depot-ViewModel auf diese Art serialisiert und mittels jquery an eine Servermethode SaveDepot() gesendet werden kann. Bei dieser Servermethode handelt es sich um eine ASP.NET-MVC-3- Controller-Action mit der Signatur SaveDepot(Depot depot). ASP.NET MVC 3 erkennt aus dem übergebenen ContentType application/json, dass es sich bei den gesendeten Daten um ein JSON-Objekt handelt, und kann daraus automatisch ein Objekt der Model-Entität Depot deserialisieren. Fazit Eine steigende Anzahl von Webanwendungen verfügt über eine hohe Interaktivität auf der Basis von JavaScript. Gleichermaßen steigen die Ansprüche der Nutzer und die Komplexität der umzusetzenden Anforderungen. Dies macht ein konsistentes Datenmodell auf dem Client immer wichtiger, auf dessen Basis das UI und Aktionen darauf gestaltet werden können. Dieser Artikel hat gezeigt, dass KnockoutJS ein solches Datenmodell auf Basis des bekannten MVVM-Patterns in Java- Script liefern kann. Es beinhaltet Features wie deklarative 2-Wege-Bindings, die Verfolgung von Abhängigkeiten und die automatische Aktualisierung des UI bei Änderungen des Datenmodells. Dies erlaubt Entwicklern eine hohe Produktivität, ohne manuell auf Änderungen am ViewModel reagieren zu müssen, was bei einer hohen Komplexität zu sehr verschachteltem Code führt. KO erlaubt es Entwicklern, auf Basis des ViewModels viel direkter ihre eigentliche Absicht zum Ausdruck zu bringen. Als Framework steckt KnockoutJS noch eher in den Kinderschuhen. Die gebotenen Features sind bereits beeindruckend, allerdings fehlt einem Entwickler weitergehende Funktionalität im Umgang mit dem Datenmodell. Dazu gehören das Laden und Speichern eines ViewModels ebenso wie (Datentyp-)Validierungen auf der Clientseite. Insgesamt lässt sich sagen, dass KnockoutJS einen mächtigen Ansatz zur Datenmodellierung in JavaScript auf Basis von MVVM darstellt. Derzeit entstehen mehrere Frameworks, die ähnliche Ansätze realisieren und das MVC-Konzept in JavaScript umsetzen, zum Beispiel BackboneJS [15] oder AngularJS [16]. Wird an KO konsequent weitergearbeitet, kann es unter diesen Frameworks eine wichtige Rolle bei der Entwicklung der nächsten Generation dynamischerwebanwendungen spielen. [ml] [1] Node.js-Website, [2] Mike Loukides, Why a JavaScript hater thinks everyone needs to learn JavaScript in the next year, [3] KnockoutJS-Homepage, [4] Das MVVM-Pattern, wiki/model_view_viewmodel [5] Steven Sandersons Website, [6] SelfHtml, Object-Literale, [7] SelfHtml, Eigene Objekte mittels Konstruktoren, [8] KnockoutJS-Dokumentation, [9] Custom Bindings, [10] jquery-templates, [11] jsfiddle, Anzeige der Depotkosten, [12] jsfiddle, Zentrale Formatter-Funktionalität, [13] jsfiddle, Finale DepotManager-Funktionalität, [14] Mapping-Plug-in für KnockoutJS, [15] BackboneJS, [16] AngularJS,

JavaScript in Drupal

JavaScript in Drupal JavaScript in Drupal JavaScript JavaScript ist nicht Java JavaScript ist keine reine Web-Sprache JavaScript ist benutzbar Web 1.0 Dreamweaver Mouseover-Scripts Dinge, die dem Cursor nachfliegen Schneeflocken

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework

Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung in die Cross-Plattform Entwicklung Das Intel App Framework Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel App Framework vom Intel XDK vertraut. Es wird Schritt für Schritt

Mehr

Oliver Zeigermann, Stefan Toth embarc GmbH. Flux Facebooks Beitrag zur UI- Architektur der Zukunft

Oliver Zeigermann, Stefan Toth embarc GmbH. Flux Facebooks Beitrag zur UI- Architektur der Zukunft Oliver Zeigermann, Stefan Toth embarc GmbH Flux Facebooks Beitrag zur UI- Architektur der Zukunft UI-Architektur Warum? User Experience wird wichtiger Rich Client Optionen werden rar Es gibt mehrere Philosophien

Mehr

OWASP Stammtisch München Sep 2014 XSS und andere Sicherheitslücken aus der Perspektive des Programmcodes

OWASP Stammtisch München Sep 2014 XSS und andere Sicherheitslücken aus der Perspektive des Programmcodes OWASP Stammtisch München Sep 2014 XSS und andere Sicherheitslücken aus der Perspektive des Programmcodes 1 XSS: Cross-Site Scripting 1.) Es gelangen Daten in den Web-Browser, die Steuerungsinformationen

Mehr

Rich Internet Applications, Flex & Mate. (Ja, das ist Grafische Benutzeroberflächen!) 18.03.2010 Jakob Külzer jakob.kuelzer@gmail.

Rich Internet Applications, Flex & Mate. (Ja, das ist Grafische Benutzeroberflächen!) 18.03.2010 Jakob Külzer jakob.kuelzer@gmail. Rich Internet Applications, Flex & Mate (Ja, das ist Grafische Benutzeroberflächen!) 18.03.2010 Jakob Külzer jakob.kuelzer@gmail.com Überblick Mein Thema im Überblick 1. Definitionen 2. Rich Internet Applications

Mehr

BANKETTprofi Web-Client

BANKETTprofi Web-Client BANKETTprofi Web-Client Konfiguration und Bedienung Handout für die Einrichtung und Bedienung des BANKETTprofi Web-Clients im Intranet / Extranet Der BANKETTprofi Web-Client Mit dem BANKETTprofi Web-Client

Mehr

Datenbanksysteme SS 2007

Datenbanksysteme SS 2007 Datenbanksysteme SS 2007 Frank Köster (Oliver Vornberger) Institut für Informatik Universität Osnabrück Kapitel 9d: Datenbankapplikationen Architektur einer Web-Applikation mit Servlets, JSPs und JavaBeans

Mehr

Erweiterung für Premium Auszeichnung

Erweiterung für Premium Auszeichnung Anforderungen Beliebige Inhalte sollen im System als Premium Inhalt gekennzeichnet werden können Premium Inhalte sollen weiterhin für unberechtigte Benutzer sichtbar sein, allerdings nur ein bestimmter

Mehr

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc.

E-Commerce: IT-Werkzeuge. Web-Programmierung. Kapitel 4: Einführung in JavaScript Stand: 03.11.2014. Übung WS 2014/2015. Benedikt Schumm M.Sc. Übung WS 2014/2015 E-Commerce: IT-Werkzeuge Web-Programmierung Kapitel 4: Stand: 03.11.2014 Benedikt Schumm M.Sc. Lehrstuhl für ABWL und Wirtschaftsinformatik Katholische Universität Eichstätt-Ingolstadt

Mehr

Einrichten des Schuljahreskalenders. Das vorliegende Dokument zeigt Ihnen...

Einrichten des Schuljahreskalenders. Das vorliegende Dokument zeigt Ihnen... Einrichten des Schuljahreskalenders Dieses Dokument beschreibt die Verwendung des Schuljahreskalenders und dessen mögliche Einstellungen, sowie die Integration des Schuljahreskalenders in Ihre Homepage.

Mehr

XPages Good to know. Benjamin Stein & Pierre Hein Stuttgart 7. Mai 2015

XPages Good to know. Benjamin Stein & Pierre Hein Stuttgart 7. Mai 2015 XPages Good to know Benjamin Stein & Pierre Hein Stuttgart 7. Mai 2015 Agenda 1. Einführung Was sind XPages? 2. Allgemeine Tipps Allgemeine Tipps für die Verwendung von XPages 3. Designer Tipps Tipps für

Mehr

Legacy Web-Apps mit AngularJS pimpen

Legacy Web-Apps mit AngularJS pimpen Legacy Web-Apps mit AngularJS pimpen Über uns Jan Blankenhorn und Philipp Burgmer Software Developers w11k.com / thecodecampus.de > Esslingen / Stuttgart Schulungen, Projekt-Kickoff Consulting, Softwareentwicklung

Mehr

ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC. - Björn Wilmsmann -

ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC. - Björn Wilmsmann - ZenQuery - Enterprise Backend as a Service Single Page Applications mit AngularJS und Spring MVC - Björn Wilmsmann - ZenQuery Enterprise Backend as a Service Unternehmen horten Daten in Silos ZenQuery

Mehr

Ein UI in zwei Welten - Controls in HTML5 und WPF. Timo Korinth

Ein UI in zwei Welten - Controls in HTML5 und WPF. Timo Korinth Ein UI in zwei Welten - Controls in HTML5 und WPF Timo Korinth Timo Korinth Lead Developer HTML5 bei maximago Zuvor.NET / WPF Entwicklung Warum überhaupt HTML5 und WPF? Was bedeutet Control-Entwicklung

Mehr

Integration Services - Dienstarchitektur

Integration Services - Dienstarchitektur Integration Services - Dienstarchitektur Integration Services - Dienstarchitektur Dieser Artikel solle dabei unterstützen, Integration Services in Microsoft SQL Server be sser zu verstehen und damit die

Mehr

Design Patterns 2. Model-View-Controller in der Praxis

Design Patterns 2. Model-View-Controller in der Praxis Design Patterns 2 Model-View-Controller in der Praxis Design Patterns Oft Schablonen für eine Klassenstruktur... aber nicht immer! Dahinterliegende Konzepte wichtiger als wörtliche Umsetzung Pattern werden

Mehr

Frontend-Entwicklung mit JavaScript

Frontend-Entwicklung mit JavaScript headquarter Frontend-Entwicklung mit JavaScript Single Page Applications Server-Side HTML Rendering Client-Side HTML Rendering kein JavaScript wenig JavaScript nur JavaScript Der Browser bietet viele neue

Mehr

Benutzerverwaltung mit ASP.NET Membership

Benutzerverwaltung mit ASP.NET Membership Benutzerverwaltung mit ASP.NET Membership Dieser Artikel soll zeigen, wie man ASP.NET Membership einsetzt, um Benutzer einer Web Anwendung zu authentifizieren. Es werden sowohl Grundlagen wie die Einrichtung

Mehr

5.1 Bestehende Projekte bearbeiten 79 5.2 Neue Projekte erstellen 85

5.1 Bestehende Projekte bearbeiten 79 5.2 Neue Projekte erstellen 85 Projekte per DOM bearbeiten KAPITEL 5 5.1 Bestehende Projekte bearbeiten 79 5.2 Neue Projekte erstellen 85 Bisher haben wir uns angesehen, wie List & Label mit Ihren Daten bekannt gemacht werden kann und

Mehr

Graphen in Apex von Thomas Hernando. www.syntegris.de

Graphen in Apex von Thomas Hernando. www.syntegris.de Graphen in Apex von Thomas Hernando www.syntegris.de Einleitung FIRMENINFOS Gründung im Jahre 2000 mit Sitz in Neu-Isenburg bei Frankfurt am Main Mehr als 30 Berater Oracle Gold Partner Schwerpunkte liegen

Mehr

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten,

Glossar. SVG-Grafiken in Bitmap-Grafikformate. Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Glossar Anweisung Eine Anweisung ist eine Folge aus Schlüsselwörtern, Variablen, Objekten, Methoden und/oder Eigenschaften, die eine bestimmte Berechnung ausführt, eine Eigenschaft ändert oder eine Methode

Mehr

Ein Überblick über KDevelop

Ein Überblick über KDevelop Inhalt KDevelop? Was ist das eigentlich? Inhalt KDevelop? Was ist das eigentlich? Was ist KDevelop 4.x? im Kern: C++-IDE basierend auf KDE- und Qt-Bibliotheken Komplettes Rewrite von Version 3 erstes 4.0-Release

Mehr

Einführung in die Cross-Plattform Entwicklung Web Services mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Web Services mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Web Services mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Zugriff auf Web Services vertraut. Der Web Service

Mehr

Installation und Benutzung AD.NAV.ZipTools

Installation und Benutzung AD.NAV.ZipTools Installation und Benutzung AD.NAV.ZipTools Version 1.0.0.0 ALTENBRAND Datentechnik GmbH Am Gelicht 5 35279 Neustadt (Hessen) Tel: 06692/202 290 Fax: 06692/204 741 email: support@altenbrand.de Die Komponente

Mehr

Microsoft.NET & IBM System i - Webanwendungen mit AJAX - I Christian Neißl, 28.12.2010

Microsoft.NET & IBM System i - Webanwendungen mit AJAX - I Christian Neißl, 28.12.2010 Microsoft.NET & IBM System i - Webanwendungen mit AJAX - I Christian Neißl, 28.12.2010 Im Jahr 2006 hat ein cleverer Journalist den Namen AJAX erfunden. Der Begriff beschreibt eine damals bereits bekannte

Mehr

Tutorial: Eigene Module und Extensions entwickeln. version: 0.1 Author: Anja Beuth

Tutorial: Eigene Module und Extensions entwickeln. version: 0.1 Author: Anja Beuth Tutorial: Eigene Module und Extensions entwickeln version: 0.1 Author: Anja Beuth Table of contents 1 2 2.1 2.2 2.3 2.4 3 4 4.1 4.2 4.3 5 5.1 6 6.1 6.2 Notwendigkeit prüfen... Ein Projekt in Visual Studio

Mehr

Übung 1: Von einer naiven JavaScript Applikation zu einem modernen Front-End Build:

Übung 1: Von einer naiven JavaScript Applikation zu einem modernen Front-End Build: Übung 1: Von einer naiven JavaScript Applikation zu einem modernen Front-End Build: Teil 1: Refactoring der naiven Applikation Wechseln Sie in das Verzeichnis 01-Intro/01-SimplisticToDoNaive Öffnen Sie

Mehr

Datenbank-basierte Webserver

Datenbank-basierte Webserver Datenbank-basierte Webserver Datenbank-Funktion steht im Vordergrund Web-Schnittstelle für Eingabe, Wartung oder Ausgabe von Daten Datenbank läuft im Hintergrund und liefert Daten für bestimmte Seiten

Mehr

Automatisierte Erstellung von Software-Builds und -dokumentationen. Teil 1

Automatisierte Erstellung von Software-Builds und -dokumentationen. Teil 1 Automatisierte Erstellung von Software-Builds und -dokumentationen Teil 1 Autoren: Hagedorn, Robert; Denninger, Oliver Kontakt: {hagedorn denninger}@fzi.de Web: http://zfs.fzi.de Ort, Datum: Karlsruhe,

Mehr

Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1.

Multimediale Web-Anwendungen. JavaScript. Einführung. MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1. Multimediale Web-Anwendungen JavaScript Einführung MWA JavaScript-Einführung Dr. E. Schön Sommersemester 2015 Folie 1 Entstehungsgeschichte: JavaScript 1995 Netscape Communications Corp. (Brendan Eich)

Mehr

Ruby on Rails. Florian Ferrano Ralf Heller Markus Nagel

Ruby on Rails. Florian Ferrano Ralf Heller Markus Nagel Ruby on Rails Florian Ferrano Ralf Heller Markus Nagel Überblick Ruby on Rails Ruby Rails Geschichte MVC allgemein MVC in Rails Scaffolding Webserver Installation Beispiele Wo wird Rails verwendet? Ausblick

Mehr

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen

MiGo-Portal V2.21. Produkt-Sheet. Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen. MiGo-WebDesign Wiesenstraße 31 56459 Kölbingen MiGo-Portal V2.21 Produkt-Sheet Aktueller Stand: 30.11.2012 Verfasst von: Mike Goldhausen Unser aktuelles Portal-System für Ihre individuelle Homepage. Dieses Portal bietet die Möglichkeit verschiedene

Mehr

Web Visu Tutorial. Hipecs Web Visu. Übersicht

Web Visu Tutorial. Hipecs Web Visu. Übersicht Revision Date V100 10082011 Hipecs Web Visu Die hipecs (high performance controller system) bietet die Möglichkeit einer sog Web-Visualisierung über den integrierten Webserver Hierfür wird im Standard

Mehr

Model-View-ViewModel (MVVM)

Model-View-ViewModel (MVVM) 1 Model-View-ViewModel (MVVM) Grundlagen und Einsatz des GUI-Architekturmusters W3L AG info@w3l.de 2011 2 Agenda Motivation Architekturmuster MVVM-Pattern Fazit Aufbau & Komponenten Technische Grundlagen

Mehr

Die Bedeutung abstrakter Datentypen in der objektorientierten Programmierung. Klaus Kusche, September 2014

Die Bedeutung abstrakter Datentypen in der objektorientierten Programmierung. Klaus Kusche, September 2014 Die Bedeutung abstrakter Datentypen in der objektorientierten Programmierung Klaus Kusche, September 2014 Inhalt Ziel & Voraussetzungen Was sind abstrakte Datentypen? Was kann man damit grundsätzlich?

Mehr

Think Mobile Effiziente Entwicklungsstrategien im GIS. Kai Hoffmann, BTC AG

Think Mobile Effiziente Entwicklungsstrategien im GIS. Kai Hoffmann, BTC AG Think Mobile Effiziente Entwicklungsstrategien im GIS Kai Hoffmann, BTC AG Mobile Endgeräte Was ist zu beachten? In dieser Betrachtung Smartphone Tablet Unterschiedliche Hardwareausstattung Bildschirmgröße

Mehr

Kapitel 33. Der xml-datentyp. In diesem Kapitel: Der xml-datentyp 996 Abfragen aus xml-datentypen 1001 XML-Indizierung 1017 Zusammenfassung 1023

Kapitel 33. Der xml-datentyp. In diesem Kapitel: Der xml-datentyp 996 Abfragen aus xml-datentypen 1001 XML-Indizierung 1017 Zusammenfassung 1023 Kapitel 33 Der xml-datentyp In diesem Kapitel: Der xml-datentyp 996 Abfragen aus xml-datentypen 1001 XML-Indizierung 1017 Zusammenfassung 1023 995 996 Kapitel 33: Der xml-datentyp Eine der wichtigsten

Mehr

Bei einer deutschen Installation muß man den Window Server und pbs aus StartUp in Autostart verlagern sowie die Datei

Bei einer deutschen Installation muß man den Window Server und pbs aus StartUp in Autostart verlagern sowie die Datei 13 WebObjects NeXT hat OPENSTEP auch für Solaris und Windows NT implementiert. Bei Windows NT erhält man ein Laufzeitsystem viele DLL-Module, machd, nmserver, einen Display PostScript Window Server sowie

Mehr

Programmieren 2 (Prof. Hasbargen) Klausur

Programmieren 2 (Prof. Hasbargen) Klausur Programmieren 2 (Prof. Hasbargen) 1 Klausur Aufgabe 1 (10 Punkte) Dynamisierung von HTML-Seiten HTML-Seiten sind eine gängige Art und Weise, Informationen darzustellen. Nennen Sie die Gründe, welche Vorteile

Mehr

Inhaltsverzeichnis. Open-Xchange Authentication & Sessionhandling

Inhaltsverzeichnis. Open-Xchange Authentication & Sessionhandling Open-Xchange Authentication & Sessionhandling Version Date Author Changes 1.0 28.08.2006 Stephan Martin Initiale Version 1.1 29.08.2006 Marcus Klein Details Authentication via JSON 1.2 04.09.2006 Stephan

Mehr

Appery.io Mobile Apps schnell und einfach entwickeln

Appery.io Mobile Apps schnell und einfach entwickeln Appery.io Mobile Apps schnell und einfach entwickeln Cloud-basierte Entwicklungsumgebung, keine lokale Installation von Entwicklungsumgebung nötig. Technologie: HTML5. JQuery Mobile, Apache Cordova. Plattformen:

Mehr

PHP Kurs Online Kurs Analysten Programmierer Web PHP

PHP Kurs Online Kurs Analysten Programmierer Web PHP PHP Kurs Online Kurs Analysten Programmierer Web PHP Akademie Domani info@akademiedomani.de Allgemeines Programm des Kurses PHP Modul 1 - Einführung und Installation PHP-Umgebung Erste Lerneinheit Introduzione

Mehr

Übungspaket 19 Programmieren eigener Funktionen

Übungspaket 19 Programmieren eigener Funktionen Übungspaket 19 Programmieren eigener Funktionen Übungsziele: Skript: 1. Implementierung und Kodierung eigener Funktionen 2. Rekapitulation des Stack-Frames 3. Parameterübergabe mittels Stack und Stack-Frame

Mehr

BillSAFE Payment Layer Integration Guide

BillSAFE Payment Layer Integration Guide BillSAFE Payment Layer Integration Guide letzte Aktualisierung: 10.06.2013 Inhaltsverzeichnis 1 Vorwort...2 1.1 Inhalt...2 1.2 Zielgruppe...2 1.3 Voraussetzungen...2 1.4 Feedback...2 1.5 Versionshistorie...3

Mehr

JavaScript: Von einfachen Scripten zu komplexen Anwendungen. MMT 28 3. Dezember 2011

JavaScript: Von einfachen Scripten zu komplexen Anwendungen. MMT 28 3. Dezember 2011 JavaScript: Von einfachen Scripten zu komplexen Anwendungen MMT 28 3. Dezember 2011 Guten Tag Mathias Schäfer (molily) molily.de Software-Entwickler bei 9elements.com Spezialgebiet JavaScript Worum geht

Mehr

Code-Organisation in JavaScript

Code-Organisation in JavaScript Code-Organisation in JavaScript Webworker-Stammtisch NRW 10. Januar 2013 Frederic Hemberger Codekapselung What happens in Vegas, stays in Vegas. Warum sollte man Code kapseln? Wir haben immer mehr Scripte

Mehr

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK

Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung in die Cross-Plattform Entwicklung Responsive Webdesign mit dem Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK und dem Responsive Webdesign vertraut. Es wird

Mehr

IT-Zertifikat: Allgemeine Informationstechnologien II PHP

IT-Zertifikat: Allgemeine Informationstechnologien II PHP IT-Zertifikat: Allgemeine Informationstechnologien II PHP PHP ( PHP: Hypertext Preprocessor ) ist eine serverseitige Skriptsprache: Der PHP-Code wird nicht wie bei JavaScript auf dem Clientrechner ausgeführt,

Mehr

ALM mit Visual Studio Online. Philip Gossweiler Noser Engineering AG

ALM mit Visual Studio Online. Philip Gossweiler Noser Engineering AG ALM mit Visual Studio Online Philip Gossweiler Noser Engineering AG Was ist Visual Studio Online? Visual Studio Online hiess bis November 2013 Team Foundation Service Kernstück von Visual Studio Online

Mehr

Web-Anwendungsentwicklung mit dem Delivery Server

Web-Anwendungsentwicklung mit dem Delivery Server Web-Anwendungsentwicklung mit dem Delivery Server Java-Framework auf Basis der Open API Bernfried Howe, Webertise Consulting GmbH WEBertise Consulting Dipl. Informatiker (Wirtschaftsinformatik) 2001-2010

Mehr

GUI-Entwicklung 2: Windows Presentation Foundation

GUI-Entwicklung 2: Windows Presentation Foundation GUI-Entwicklung 2: Windows Presentation Foundation Proseminar Objektorientiertes Programmieren mit.net und C# Sandra Müller Institut für Informatik Software & Systems Engineering Agenda 1. Die WPF 2. Einführung

Mehr

Java - Webapplikationen

Java - Webapplikationen Java - Webapplikationen Bestandteile (HTTP,, JSP) Aufbau (Model View Controller) Datenverwaltung (Java Beans, Sessions) Entwicklung (Projektstruktur, Sysdeoplugin für Eclipse) 17. Januar 2006 Jan Hatje

Mehr

Wir bringen Ihre Notes/Domino Anwendungen sicher ins Web 19.11.2015, Bilster Berg Drive Resort Michael Steinhoff, agentbase AG. www.agentbase.

Wir bringen Ihre Notes/Domino Anwendungen sicher ins Web 19.11.2015, Bilster Berg Drive Resort Michael Steinhoff, agentbase AG. www.agentbase. Wir bringen Ihre Notes/Domino Anwendungen sicher ins Web 19.11.2015, Bilster Berg Drive Resort Michael Steinhoff, agentbase AG www.agentbase.de 1 Agenda Grundlagen Modernisierung Möglichkeiten mit Domino

Mehr

Rails Ruby on Rails Ajax on Rails. Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de

Rails Ruby on Rails Ajax on Rails. Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de Rails Ruby on Rails Ajax on Rails Who is who? Rails Ziel: Framework für Web (2.0) Anwungen Beschleunigung der Entwicklung Konzept des Agilen Programmierens Ruby Interpretierte Sprache Rails Integrationen

Mehr

Rails Ruby on Rails Ajax on Rails. Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de

Rails Ruby on Rails Ajax on Rails. Clemens H. Cap http://wwwiuk.informatik.uni-rostock.de http://www.internet-prof.de Rails Ruby on Rails Ajax on Rails Who is who? Rails Framework für Web (2.0) Anwendungen Ziel: Beschleunigung der Entwicklung Konzept des Agilen Programmierens Ruby InterpreDerte Sprache Rails IntegraDonen

Mehr

Vorlesung Usability and Interaction. Sommersemester 2009

Vorlesung Usability and Interaction. Sommersemester 2009 Vorlesung Usability and Interaction Sommersemester 2009 Dipl.-Inf. Philipp Heim Forschungsgebiet Interaktive Systeme Institut für Visualisierung und interaktive Systeme Universitätsstraße 38 70569 Stuttgart

Mehr

JSP JSTL. JEE Vorlesung Teil 6. Ralf Gitzel ralf_gitzel@hotmail.de

JSP JSTL. JEE Vorlesung Teil 6. Ralf Gitzel ralf_gitzel@hotmail.de JSP JSTL JEE Vorlesung Teil 6 Ralf Gitzel ralf_gitzel@hotmail.de 1 Übersicht Ralf Gitzel ralf_gitzel@hotmail.de 2 Übersicht Wiederholung / Vertiefung JSTL Grundlagen JSTL Basisbefehle Templates über JSTL

Mehr

Mehr Dynamik in Apex mit Javascript und JQuery. Alexander Scholz its-people

Mehr Dynamik in Apex mit Javascript und JQuery. Alexander Scholz its-people Vortrag zur DOAG Konferenz 2011 Mehr Dynamik in Apex mit und Alexander Scholz its-people 1 Ablauf Thema des Vortragsthemas Motivation Besonderheit des Referenten Alexander Scholz its-people Wie kann in

Mehr

Datenmanagement in Android-Apps. 16. Mai 2013

Datenmanagement in Android-Apps. 16. Mai 2013 Datenmanagement in Android-Apps 16. Mai 2013 Überblick Strukturierung von datenorientierten Android-Apps Schichtenarchitektur Möglichkeiten der Datenhaltung: in Dateien, die auf der SDCard liegen in einer

Mehr

UI-Testing mit Microsoft Test Manager (MTM) Philip Gossweiler / 2013-04-18

UI-Testing mit Microsoft Test Manager (MTM) Philip Gossweiler / 2013-04-18 UI-Testing mit Microsoft Test Manager (MTM) Philip Gossweiler / 2013-04-18 Software Testing Automatisiert Manuell 100% 70% 1 Überwiegender Teil der Testing Tools fokusiert auf automatisiertes Testen Microsoft

Mehr

Inhalt. 1 Übersicht. 2 Anwendungsbeispiele. 3 Einsatzgebiete. 4 Systemanforderungen. 5 Lizenzierung. 6 Installation.

Inhalt. 1 Übersicht. 2 Anwendungsbeispiele. 3 Einsatzgebiete. 4 Systemanforderungen. 5 Lizenzierung. 6 Installation. Inhalt 1 Übersicht 2 Anwendungsbeispiele 3 Einsatzgebiete 4 Systemanforderungen 5 Lizenzierung 6 Installation 7 Key Features 8 Funktionsübersicht (Auszug) Seite 2 von 14 1. Übersicht MIK.starlight bietet

Mehr

Drei-Schichten-Architektur. Informatik B - Objektorientierte Programmierung in Java. Vorlesung 16: 3-Schichten-Architektur 1 Fachkonzept - GUI

Drei-Schichten-Architektur. Informatik B - Objektorientierte Programmierung in Java. Vorlesung 16: 3-Schichten-Architektur 1 Fachkonzept - GUI Universität Osnabrück Drei-Schichten-Architektur 3 - Objektorientierte Programmierung in Java Vorlesung 6: 3-Schichten-Architektur Fachkonzept - GUI SS 2005 Prof. Dr. F.M. Thiesing, FH Dortmund Ein großer

Mehr

Grafische Interaktionssysteme/ dynamische Visualisierung des endlichen Automaten

Grafische Interaktionssysteme/ dynamische Visualisierung des endlichen Automaten Sprachliche Informationsverarbeitung 29.01.2007 HS Intelligente Systeme Prof. Dr. J. Rolshoven (WS 06/07) Grafische Interaktionssysteme/ dynamische Visualisierung des endlichen Automaten Referentin: Melinda

Mehr

3.17 Zugriffskontrolle

3.17 Zugriffskontrolle 3. Der SQL-Standard 3.17. Zugriffskontrolle Seite 1 3.17 Zugriffskontrolle Datenbanken enthalten häufig vertrauliche Informationen, die nicht jedem Anwender zur Verfügung stehen dürfen. Außerdem wird man

Mehr

DCCS Lotusphere Nachlese 2012 Was sind XPages? Mobile Features für XPages

DCCS Lotusphere Nachlese 2012 Was sind XPages? Mobile Features für XPages Wir automatisieren und optimieren Ihre Geschäftsprozesse DCCS Lotusphere Nachlese 2012 Was sind XPages? Mobile Features für XPages Thomas Brandstätter 06.03.2012 www.dccs.at Agenda Theorie Was sind XPages

Mehr

WCF Services in InfoPath 2010 nutzen

WCF Services in InfoPath 2010 nutzen WCF Services in InfoPath 2010 nutzen Abstract Gerade wenn man schreibend von InfoPath aus auf eine SQL-Server Datenbank zugreifen will, kommt man quasi um einen Web Service nicht herum. In diesem Post

Mehr

Designänderungen mit CSS und jquery

Designänderungen mit CSS und jquery Designänderungen mit CSS und jquery In der epages-administration gibt es in den Menüpunkten "Schnelldesign" und "Erweitertes Design" umfangreiche Möglichkeiten, das Design der Webseite anzupassen. Erfahrene

Mehr

Model View Controller Pattern

Model View Controller Pattern Christian Vogt HAW Hamburg 19. Dezember 2011 Inhaltsverzeichnis 1 Prolog Einleitung Entwurfsmuster andere Muster 2 Model-View-Controller Hintergrund Konzept Umsetzung 3 Beispiele Überblick Beispiel in

Mehr

3 Anwendungsarchitektur und Entwicklungsumgebung

3 Anwendungsarchitektur und Entwicklungsumgebung 21 3 Anwendungsarchitektur und Bei den Entwicklern von Web-basierten Dialogsystemen hat sich im Laufe der Zeit eine Vorgehensweise im Design von Anwendungen entwickelt, dies es ermöglicht, flexible Web-Dialoge

Mehr

WPF Bindung. Dr. Beatrice Amrhein

WPF Bindung. Dr. Beatrice Amrhein WPF Bindung Element- und Daten-Bindung Dr. Beatrice Amrhein Überblick Element-Bindung via Eigenschaften-Editor Grenzen des Eigenschaften Editors Die C# Klasse Binding Bindung an C# Objekte 2 Einführung

Mehr

Projekt Xaml Konverter

Projekt Xaml Konverter Carsten Kuhn, Danny Kautzsch, Matthias Jauernig Leipzig, 01.02.2008 Lehrveranstaltung Compilerbau (Aufbaukurs) Prof. Waldmann, Fb IMN, HTWK Leipzig Projekt Xaml Konverter Aufgabenbeschreibung Mit Xaml

Mehr

1. Einführung. 2. Vorbereitung zur Installation. 1.1 Eclipse

1. Einführung. 2. Vorbereitung zur Installation. 1.1 Eclipse 1. Einführung 1.1 Eclipse Die Eclipse ist eine kostenlose integrierte Entwicklungsumgebung oder auch IDE genannt, (Abkürzung IDE, engl. Integrated development enviroment). Sie ist eine grafische Benutzeroberfläche

Mehr

Dokumentation: Content App Framework

Dokumentation: Content App Framework Dokumentation: Content App Framework Andreas Breuninger, medialesson GmbH Januar 2013 Inhaltsverzeichnis 1. DataService... 3 1.1. Laden/Parsen der Daten... 3 1.1.1. GetDataset() -> GetDataAsync() ->

Mehr

JSF (JavaServer Faces) Erstellen einer Webseite

JSF (JavaServer Faces) Erstellen einer Webseite Universität Bayreuth Lehrstuhl für Angewandte Informatik IV Datenbanken und Informationssysteme Prof. Dr.-Ing. Jablonski JSF (JavaServer Faces) Erstellen einer Webseite Dipl. Inf. Manuel Götz Dipl. Inf.

Mehr

ASP.NET: ATLAS -Framework. Nico Orschel Microsoft Student Partner, TU Ilmenau nico.orschel@studentprogram.de

ASP.NET: ATLAS -Framework. Nico Orschel Microsoft Student Partner, TU Ilmenau nico.orschel@studentprogram.de ASP.NET: ATLAS -Framework Nico Orschel Microsoft Student Partner, TU Ilmenau nico.orschel@studentprogram.de Agenda Einführung AJAX ATLAS Framework Architektur Microsoft AJAX Libary Microsoft ASP.NET 2.0

Mehr

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1 HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE - APPS 11.09.2012 IOZ AG 1 AGENDA Einführung Apps - Einführung Apps Architektur SharePoint-Hosted Apps Cloud-Hosted Apps Ausblick 11.09.2012 IOZ AG 2 ÜBER

Mehr

Jakarta Turbine Ein Open Source Framework fÿr Webanwendungen. KNF Kongre 2001 Henning P. Schmiedehausen

Jakarta Turbine Ein Open Source Framework fÿr Webanwendungen. KNF Kongre 2001 Henning P. Schmiedehausen <henning@apache.org> Jakarta Turbine Ein Open Source Framework fÿr Webanwendungen Henning P. Schmiedehausen Turbine - ein berblick Open Source unter Apache License 100% pure Java, Java 2 (JDK 1.2+) Servlet-basiertes

Mehr

Die Alternative zum Web-Form Modell

Die Alternative zum Web-Form Modell Marc André Zhou Solution Architect www.dev -sky.net www.just -sp.net Die Alternative zum Web-Form Modell dotnet Cologne 03.05.2013 Agenda Web Forms vs. MVC ASP.NET MVC Features Web API ODATA Eine ASP.NET

Mehr

Profil von Michael Wettach

Profil von Michael Wettach Profil von Tätigkeiten Konzeption und Implementierung von: Desktop Anwendungen Web Anwendungen Serviceorientierten Architekturen Komplexen Datenbankbankanwendungen Technische Beratung IT-Projektleitung

Mehr

Musterlösung zur Vorlesung Modellbasierte Softwareentwicklung Wintersemester 2014/2015 Übungsblatt 9

Musterlösung zur Vorlesung Modellbasierte Softwareentwicklung Wintersemester 2014/2015 Übungsblatt 9 Prof. Dr. Wilhelm Schäfer Paderborn, 15. Dezember 2014 Christian Brenner Tristan Wittgen Musterlösung zur Vorlesung Modellbasierte Softwareentwicklung Wintersemester 2014/2015 Übungsblatt 9 Aufgabe 1 Codegenerierung

Mehr

XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1

XML Eine Einführung. XML-Dokumente Im Internet Darstellen. XML (C) J.M.Joller 1 XML Eine Einführung XML-Dokumente Im Internet Darstellen XML (C) J.M.Joller 1 XML Eine Einführung XML-Dokumente Im Internet Darstellen XML-Dokumente Mithilfe Der Datenbindung Anzeigen XML (C) J.M.Joller

Mehr

Ruby on Rails. Thomas Baustert Ralf Wirdemann www.b-simple.de. Alternative zur Web-Entwicklung mit Java? 27.06.2005 www.b-simple.

Ruby on Rails. Thomas Baustert Ralf Wirdemann www.b-simple.de. Alternative zur Web-Entwicklung mit Java? 27.06.2005 www.b-simple. Ruby on Rails Alternative zur Web-Entwicklung mit Java? Thomas Baustert Ralf Wirdemann www.b-simple.de 27.06.2005 www.b-simple.de 1 Überblick Was ist Ruby on Rails? Weblog Demo Rails Komponenten Controller,

Mehr

D.5 Eine Klasse für serielle Geräte schreiben

D.5 Eine Klasse für serielle Geräte schreiben D.5 Eine Klasse für serielle Geräte schreiben 285 D.5 Eine Klasse für serielle Geräte schreiben Man kann viel lernen, wenn man in einer interaktiven Umgebung mit einer neuen Bibliothek herumspielt. Allerdings

Mehr

Typo 3 installieren. Schritt 1: Download von Typo3

Typo 3 installieren. Schritt 1: Download von Typo3 Typo 3 installieren Bevor Sie Typo3 installieren, müssen Sie folgende Informationen beachten: Typo3 benötigt eine leere Datenbank. Mit Ihrem Abonnement verfügen Sie über eine einzige Datenbank. Sie können

Mehr

Automatisiertes UI Testing. Mark Allibone, 18.04.2013, #2

Automatisiertes UI Testing. Mark Allibone, 18.04.2013, #2 Coded UI Testing Automatisiertes UI Testing Mark Allibone, 18.04.2013, #2 Eine klassische Applikations Architektur Grafische Oberfläche Business Logik Datenzugriff (Datenbank, Cloud, etc) Mark Allibone,

Mehr

Timo Wagner & Sebastian Kühn Entwurf einer Multi-Tier Anwendung in ASP.NET

Timo Wagner & Sebastian Kühn Entwurf einer Multi-Tier Anwendung in ASP.NET Timo Wagner & Sebastian Kühn Entwurf einer Multi-Tier Anwendung in ASP.NET Überblick 1.Einfürung in die Multi-Tier Architektur 2.Ausgangspunkt und Probleme 3.Rundgang durch die Architektur 4.Architektur

Mehr

Was ist neu in Sage CRM Version 7.0

Was ist neu in Sage CRM Version 7.0 Was ist neu in Sage CRM Version 7.0 Was ist neu in Sage CRM Version 7.0 Überblick über Sage CRM Version 7.0 Unternehmen konzentrieren sich mehr denn je auf Prozesseffizienz und suchen nach Wegen, die Leistungsfähigkeit

Mehr

DGNB System Software: Unterschiede zwischen Version 1 und Version 2

DGNB System Software: Unterschiede zwischen Version 1 und Version 2 DGNB System Software: Unterschiede zwischen Version 1 und Version 2 1 DGNB GmbH 2015 Inhaltsverzeichnis (1) 1. Aufteilung in Web-Oberfläche und Client 2. Anmeldung in der Web-Oberfläche 3. Installieren

Mehr

Inhalt. 1 Übersicht. 2 Anwendungsbeispiele. 3 Einsatzgebiete. 4 Systemanforderungen. 5 Lizenzierung. 6 Installation.

Inhalt. 1 Übersicht. 2 Anwendungsbeispiele. 3 Einsatzgebiete. 4 Systemanforderungen. 5 Lizenzierung. 6 Installation. Inhalt 1 Übersicht 2 Anwendungsbeispiele 3 Einsatzgebiete 4 Systemanforderungen 5 Lizenzierung 6 Installation 7 Key Features 8 Funktionsübersicht (Auszug) 1 Übersicht MIK.bis.webedition ist die Umsetzung

Mehr

Einführung in die Cross-Plattform Entwicklung Das Intel XDK

Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung in die Cross-Plattform Entwicklung Das Intel XDK Einführung Dieses Hands-on-Lab (HOL) macht den Leser mit dem Intel XDK vertraut. Es wird Schritt für Schritt die erste eigene Hybrid-App entwickelt

Mehr

NetMan Desktop Manager Quick-Start-Guide

NetMan Desktop Manager Quick-Start-Guide NetMan Desktop Manager Quick-Start-Guide In diesem Dokument wird die Installation von NetMan Desktop Manager beschrieben. Beachten Sie, dass hier nur ein Standard-Installationsszenario beschrieben wird.

Mehr

JavaScript und das Document Object Model 30.05.07

JavaScript und das Document Object Model 30.05.07 JavaScript und das Document Object Model Dynamische Seiten Bestreben von Netscape und Microsoft, HTML-Seiten dynamisch zu gestalten Schlagwort DHTML Netscape/Sun: JavaScript Microsoft: JScript Problem

Mehr

Leseprobe. Walter Doberenz, Thomas Gewinnus. Visual C# 2008. Grundlagen und Profiwissen ISBN: 978-3-446-41862-2

Leseprobe. Walter Doberenz, Thomas Gewinnus. Visual C# 2008. Grundlagen und Profiwissen ISBN: 978-3-446-41862-2 Leseprobe Walter Doberenz, Thomas Gewinnus Visual C# 2008 Grundlagen und Profiwissen ISBN: 978-3-446-41862-2 Weitere Informationen oder Bestellungen unter http://www.hanser.de/978-3-446-41862-2 sowie im

Mehr

Bilder im Internet. Hans Magnus Enzensberger

Bilder im Internet. Hans Magnus Enzensberger Kapitel 4 Alle reden von Kommunikation, aber die wenigsten haben sich etwas mitzuteilen. Hans Magnus Enzensberger Bilder im Internet Nach der etwas umfangreichen vorangehenden Lektion zum Ausklang der

Mehr

Von WinForms nach WPF

Von WinForms nach WPF Stefan Lange empira Software GmbH Von WinForms nach WPF Tipps zu Hybrid-Anwendungen Stefan.Lange@empira.de 25.02.2010 Agenda Tipps zu den folgenden Punkten: Entscheidungen und Vorgehensweise WPF in WinForms

Mehr

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG

Spamschutz bei TYPO3. von Bernd Warken bei Fa. Netcos AG Spamschutz bei TYPO3 von Bernd Warken bei Fa. Netcos AG Kapitel 0: Einleitung 3 0.1 Vorwort 3 0.2 Lizenz 3 Kapitel 1: Aktivierung und Konfiguration 4 1.1 config.spamprotectemailaddresses 4 1.2 config.spamprotectemailaddresses_atsubst

Mehr

Praktikum Spring MVC. 1.2. Spring integrieren In der pom.xml Einträge für Spring hinzufügen.

Praktikum Spring MVC. 1.2. Spring integrieren In der pom.xml Einträge für Spring hinzufügen. Praktikum Spring MVC Aufgabe 1 Im ersten Teil des Praktikums wird eine Test Webapplikation entwickelt, anhand derer einige Konzepte von Spring nachvollzogen werden können. Dabei handelt es sich um Spring

Mehr

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP

VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 4 PHP VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 4 PHP SS 2004 Inhaltsverzeichnis 1. PHP die serverseitige Programmiersprache...1 1.1. PHP - Bereiche in HTML definieren...1

Mehr

Interaktive Visualisierung der Projektmanagement-Prozesse

Interaktive Visualisierung der Projektmanagement-Prozesse Interaktive Visualisierung der Projektmanagement-Prozesse Abschlussvortrag zur Bachelorarbeit Dimitar Kosakov Inhaltsverzeichnis Rückblick Ziel Technologien Konzept View Webinterface Datenstruktur Umsetzung

Mehr