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,

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

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

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

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

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

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

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

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

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

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

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

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0

- Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 Projektbezeichnung Projektleiter Verantwortlich - Entwurfsphase: Entwurfsbeschreibung Gesamtsystem - Version: 1.0 MSP-13 - Integration eines Semantischen Tagging Systems in Microsoft Sharepoint Martin

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

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

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

Ü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

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

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

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

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

Die nächste Revolution in der modelgetriebenen Entwicklung?

Die nächste Revolution in der modelgetriebenen Entwicklung? Die nächste Revolution in der modelgetriebenen Entwicklung? Me Johannes Kleiber Software Engineer bei FMC Johannes.Kleiber@fmc-ag.com Themen Überblick Window Workflow Foundation Workflows modellieren WF

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

WebObjects. Dirk Schober Senior Software Trainer AppleServices EMEA. Was ist eigentlich ein Application Server?

WebObjects. Dirk Schober Senior Software Trainer AppleServices EMEA. Was ist eigentlich ein Application Server? Objects Dirk Schober Senior Software Trainer leservices EMEA Fragen über Fragen Was ist eigentlich ein lication? Welche lication gibt es sonst noch? Was kostet sowas? Wer setzt denn eine solche Technologie

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

5.4 Die Benachrichtigung (Notification)

5.4 Die Benachrichtigung (Notification) 160 Bekannte Probleme Windows Phone Im Emulator wird immer die Connection.UNKNOWN zurückgegeben. ios und Bada Es wird leider nur unterschieden, ob es eine mobile oder WiFi-Verbindung gibt. Der Grad der

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

Mobile Backend in der

Mobile Backend in der Mobile Backend in der Cloud Azure Mobile Services / Websites / Active Directory / Kontext Auth Back-Office Mobile Users Push Data Website DevOps Social Networks Logic Others TFS online Windows Azure Mobile

Mehr

Softwaretechnik (WS 11/12)

Softwaretechnik (WS 11/12) Universität Augsburg, LSt. Softwaretechnik, K. Stenzel, H. Seebach, G. Anders Softwaretechnik (WS 11/12) Lösungsvorschlag 5 Aufgabe 1 (System Behavior: System Sequence Diagrams) (10/5 Punkte) a) Was sind

Mehr

Next Generation CMS. API zu ihrem Content

Next Generation CMS. API zu ihrem Content Next Generation CMS API zu ihrem Content Ing. Clemens Prerovsky, MSc Gentics Software GmbH Gentics - wer wir sind Österreichischer Content Management und Portalsoftware Hersteller 150 Kunden 70.000 Benutzer

Mehr

Projekt AGB-10 Fremdprojektanalyse

Projekt AGB-10 Fremdprojektanalyse Projekt AGB-10 Fremdprojektanalyse 17. Mai 2010 1 Inhaltsverzeichnis 1 Allgemeines 3 2 Produktübersicht 3 3 Grundsätzliche Struktur und Entwurfsprinzipien für das Gesamtsystem 3 3.1 Die Prefuse Library...............................

Mehr

Übersicht. Informatik 2 Teil 3 Anwendungsbeispiel für objektorientierte Programmierung

Übersicht. Informatik 2 Teil 3 Anwendungsbeispiel für objektorientierte Programmierung Übersicht 3.1 Modell Konto 3.2 Modell Konto - Erläuterungen 3.3 Benutzer Ein- und Ausgabe mit Dialogfenster I 3.4 Benutzer Ein- und Ausgabe mit Dialogfenster II 3.5 Klassen- und Objekteigenschaften des

Mehr

Whitepaper. Automatisierte Akzeptanztests mit FIT. Einleitung. Die Bedeutung von Akzeptanztests

Whitepaper. Automatisierte Akzeptanztests mit FIT. Einleitung. Die Bedeutung von Akzeptanztests Automatisierte Akzeptanztests mit FIT Einleitung Dieses beschreibt, wie man Tests aus Anwender-/Kundensicht mit dem Open-Source-Werkzeug FIT beschreibt und durchführt. Das ist für Kunden, Anwender und

Mehr

Software Engineering II

Software Engineering II Software Engineering II Codegenerierung für den SmartIO Editor mit der Modeling Workflow Engine Wintersemester 10/111 Fachgebiet Software Engineering Albert Zündorf / Wiederholung Bisher im Laufe des Semesters

Mehr

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server

Agenda. Ingo Ebel (ie007) Benjamin Müller (bm032) Was ist AJAX? Sicherheit Vor- und Nachteile. AJAX Frameworks. Wozu benötigt Client/Server AJAX Agenda Ingo Ebel (ie007) Was ist AJAX? Wozu benötigt Client/Server Sicherheit Vor- und Nachteile Benjamin Müller (bm032) AJAX Frameworks GWT ATF Ingo Ebel - ie007 2 Web 2.0 Ingo Ebel - ie007 3 Ingo

Mehr

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2

GUIDELINE. Variante 1 auf Basis des VMI-Template Baukastens 2 Standalone- E-Mail-Marketing mit VMI 2 Anlieferung 5 Variante 1 auf Basis des VMI-Template Baukastens 2 Ihre Vorteile 3 Anlieferung 3 Abstimmung / Vorlaufzeit 3 Unsere Leistung 3 Variante 2 auf Basis eines

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

Userhandbuch. Version B-1-0-2 M

Userhandbuch. Version B-1-0-2 M Userhandbuch Version B-1-0-2 M Inhaltsverzeichnis 1.0 Was bietet mir SERVRACK?... 3 1.1 Anmeldung... 3 1.2 Passwort vergessen?... 3 1.3 Einstellungen werden in Realtime übernommen... 4 2.0 Die SERVRACK

Mehr

Hochschule Darmstadt Fachbereich Informatik

Hochschule Darmstadt Fachbereich Informatik Hochschule Darmstadt Fachbereich Informatik 6.3 Systemarchitektur 430 6.3 Systemarchitektur Drei Schichten Architektur Die "Standardtechniken" des Software-Engineering sind auch auf die Architektur einer

Mehr

CROSS PLATFORM DEVELOPMENT MIT PORTABLE CLASS LIBRARIES

CROSS PLATFORM DEVELOPMENT MIT PORTABLE CLASS LIBRARIES Entwicklung Autor: Sebastian Kugler CROSS PLATFORM DEVELOPMENT MIT PORTABLE CLASS LIBRARIES ZUSAMMENFASSUNG TREND APPLIKATIONEN AUF MEHRERE PLATT FORMEN ZU VERFÜGUNG ZU STELLEN CODE REUSABILTY PORTABLE

Mehr

Objektorientierte Programmierung. Kapitel 12: Interfaces

Objektorientierte Programmierung. Kapitel 12: Interfaces 12. Interfaces 1/14 Objektorientierte Programmierung Kapitel 12: Interfaces Stefan Brass Martin-Luther-Universität Halle-Wittenberg Wintersemester 2012/13 http://www.informatik.uni-halle.de/ brass/oop12/

Mehr

Einstieg in AJAX-Programmierung

Einstieg in AJAX-Programmierung www.happy-security.de präsentiert: Einstieg in AJAX-Programmierung Autor: Tsutomu Katsura Datum: 26. Mai 2006 Herzlich willkommen zu meinem kleinen Tutorial über AJAX-Programmierung. Ich möchte hier nicht

Mehr

WI-Praktikum Online Börseninformationssystem. Pflichtenheft. Team:

WI-Praktikum Online Börseninformationssystem. Pflichtenheft. Team: WI-Praktikum Online Börseninformationssystem Pflichtenheft Team: Gäckler, Marco (Teamleiter) Abolhassani, Ruhollah Lauer, Christian Mbongo, Max Saissi, Taoufik Inhalt 1. Ausgangssituation...3 2. Zielsetzung...3

Mehr

JavaScript Frameworks für Mobile

JavaScript Frameworks für Mobile JavaScript Frameworks für Mobile MoBI Expertenrunde Usability, 1. März 2012 doctima GmbH JavaScript Frameworks für Mobile MoBI 1.3.2012 Edgar Hellfritsch Inhalt Native App-Entwicklung Klassische Web-Entwicklung

Mehr

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2

Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 Erstellung eines SharkNet Installers für Windows mit Inno Setup Compiler 5.4.2 1. Benötigte Software Zur Erstellung des Installers wird folgende Software benötigt. Es wird sich in dieser Dokumentation

Mehr

Offline Apps mit HTML5

Offline Apps mit HTML5 1 Offline Apps mit HTML5 Entwicklung vollständig offline-tauglicher Webanwendungen W3L AG info@w3l.de 2014 2 Agenda Motivation Situation unter HTML 4.01 Neuerungen durch HTML5 Technologie Offline-Technologien

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

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

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE APPS 27.09.2012 IOZ AG 1

HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE APPS 27.09.2012 IOZ AG 1 HERZLICH WILLKOMMEN SHAREPOINT 2013 DEEP DIVE APPS 27.09.2012 IOZ AG 1 ÜBER MICH STEPHAN STEIGER Seit 2008 bei IOZ AG Leiter Entwicklung SharePoint 2010 MCPD August 2012 SharePoint 2013 Ignite Ausbildung

Mehr

Kurs für Microsoft Online Kurs Microsoft Analysten Programmierer

Kurs für Microsoft Online Kurs Microsoft Analysten Programmierer Kurs für Microsoft Online Kurs Microsoft Analysten Programmierer Akademie Domani info@akademiedomani.de Allgemeines Programm des Kurses für Microsoft Modul 1 Basis Programm Erste Lerneinheit Einführung

Mehr

Webengineering. jquery

Webengineering. jquery Webengineering jquery Marcel Vilas 1 DHBW - Stuttgart jquery - Allgemein jquery ist eine JavaScript-Bibliothek (API) jquery ist eine Funktion (Funktionen sind Objekte) Vorteile: einfacher als vanilla JavaScript

Mehr

Entwicklung und Integration mobiler Anwendungen. Oracle Deutschland B.V. & Co. KG

Entwicklung und Integration mobiler Anwendungen. <Speaker> Oracle Deutschland B.V. & Co. KG Entwicklung und Integration mobiler Anwendungen Oracle Deutschland B.V. & Co. KG Global Users (Millions) Der Trend ist eindeutig. Trend zu mobilen Endgeräten Wachstum des mobilen Datenverkehrs

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

eytron VMS Webanwendung Fehlersuche und -Behebung

eytron VMS Webanwendung Fehlersuche und -Behebung eytron VMS Webanwendung Fehlersuche und -Behebung 2009 ABUS Security-Center GmbH & Co. KG, Alle Rechte vorbehalten Diese Anleitung soll Ihnen Unterstützung für den Fall geben, dass die Webanwendung nach

Mehr

WordPress installieren und erste Einblicke ins Dashboard

WordPress installieren und erste Einblicke ins Dashboard WordPress installieren und erste Einblicke ins Dashboard Von: Chris am 16. Dezember 2013 In diesem Tutorial zeige ich euch wie ihr WordPress in der aktuellen Version 3.7.1 auf eurem Webspace installieren

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

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

Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem umfassenden Auftritt als Bildungsnetzwerk

Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem umfassenden Auftritt als Bildungsnetzwerk Informationsmaterial zum Modul-Nr. 2.4: Bildungsnetzwerke planen (Schwerpunkt: IT-Unterstützung in Bildungsnetzwerken) Modul 2.4.1: Möglichkeiten zur Erweiterung des Internet-Auftritts der Schule zu einem

Mehr

Nächste Generation von Web-Anwendungen mit Web Intents

Nächste Generation von Web-Anwendungen mit Web Intents Nächste Generation von Web-Anwendungen mit Web Intents Willie Chieukam adorsys GmbH & Co. KG 1 Erkennen Sie den? Willie Chieukam Senior Software Entwickler/Berater seit 7 Jahren aktiv noch immer mit fragendem

Mehr

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe«

7 Plugins einbinden. 7.1 Beispiel»Die Taschenlampe« 201 PhoneGap bringt einen standardisierten Hardwarezugriff für Smartphones mit. Aber was passiert, wenn Sie mehr wollen: Wenn Sie eine Hardware per Bluetooth ansprechen wollen oder Features der jeweiligen

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

1 Installationen. 1.1 Installationen unter Windows

1 Installationen. 1.1 Installationen unter Windows 1 Installationen Dieses Kapitel beschreibt die Installationen, die für die Nutzung von PHP und MySQL unter Windows, unter Ubuntu Linux und auf einem Mac mit OS X notwendig sind. 1.1 Installationen unter

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

Eine Business-Anwendung ist ohne Eingabevalidierung

Eine Business-Anwendung ist ohne Eingabevalidierung Eingabevalidierung mit WinRT Drum prüfe, wer sich bindet WinRT bietet für C#/XAML noch keine durchgängige Unterstützung der Validierung von Benutzereingaben. Dieser Artikel zeigt die Schwachstellen auf

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

Einführung in PHP. (mit Aufgaben)

Einführung in PHP. (mit Aufgaben) Einführung in PHP (mit Aufgaben) Dynamische Inhalte mit PHP? 2 Aus der Wikipedia (verkürzt): PHP wird auf etwa 244 Millionen Websites eingesetzt (Stand: Januar 2013) und wird auf etwa 80 % aller Websites

Mehr

3.9 Grundelemente einer Benutzeroberfläche

3.9 Grundelemente einer Benutzeroberfläche 92 3 Grundlagen einer ios-anwendung 3.8.4 Target-Actions Einer der häufigsten Anwendungsfälle bei einer Oberfläche ist das Betätigen einer Schaltfläche durch einen Anwender, woraufhin eine bestimmte Aktion

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

Programmierung einer Windows Store App mit C# und XAML

Programmierung einer Windows Store App mit C# und XAML Neuer Abschnitt 1 Seite 1 Programmierung einer Windows Store App mit C# und XAML Einleitung In diesem Fachbericht der im Rahmen meines 8 Wochen langem Praktikums entstand geht es um die Programmierung

Mehr

Mobile Backend in. Cloud. Azure Mobile Services / Websites / Active Directory /

Mobile Backend in. Cloud. Azure Mobile Services / Websites / Active Directory / Mobile Backend in Cloud Azure Mobile Services / Websites / Active Directory / Einführung Wachstum / Marktanalyse Quelle: Gartner 2012 2500 Mobile Internet Benutzer Desktop Internet Benutzer Internet Benutzer

Mehr

Attraktive Webseiten

Attraktive Webseiten ASP.NET PROFESSIONAL Attraktive Webseiten dank AJAX Controls und Extenders Microsoft bietet mit dem ASP.NET AJAX Control Toolkit (nachfolgend Toolkit genannt) ein Paket an, mit welchem sich die Attraktivität

Mehr

PIWIN I. Praktische Informatik für Wirtschaftsmathematiker, Ingenieure und Naturwissenschaftler I. Vorlesung 3 SWS WS 2007/2008

PIWIN I. Praktische Informatik für Wirtschaftsmathematiker, Ingenieure und Naturwissenschaftler I. Vorlesung 3 SWS WS 2007/2008 PIWIN I Kap. 7 Objektorientierte Programmierung - Einführung 1 PIWIN I Praktische Informatik für Wirtschaftsmathematiker, Ingenieure und Naturwissenschaftler I Vorlesung 3 SWS WS 2007/2008 FB Informatik

Mehr

CloudMatic V1.0. Inhalt

CloudMatic V1.0. Inhalt CloudMatic V1.0 Inhalt Einleitung... 2 CCUs hinzufügen... 3 meine-homematic.de... 4 Eigenes VPN... 4 View Editor... 5 Übersicht... 5 Allgemeine Einstellungen... 6 Kanäle hinzufügen... 6 Spezielle Kanäle...

Mehr

Wirtschafts-Informatik-Wietzorek Ulmweg 7 73117 Wangen 31.10.2009. Programm zur komfortablen Datenauswertung der JTL-WAWI Betaversion

Wirtschafts-Informatik-Wietzorek Ulmweg 7 73117 Wangen 31.10.2009. Programm zur komfortablen Datenauswertung der JTL-WAWI Betaversion Cubeinfo Programm zur komfortablen Datenauswertung der JTL-WAWI Betaversion Kurzbeschreibung Diese Software ist Freeware und darf weitergegeben werden. Zum Öffen der ZIP- Files benötigen Sie ein Kennwort,

Mehr

Klausur vom 14. Juni 2004. Informatik 4

Klausur vom 14. Juni 2004. Informatik 4 Berner Fachhochschule Hochschule für Technik und Informatik, HTI Fachbereich Elektro- und Kommunikationstechnik Labor für Technische Informatik, Burgdorf Klasse: EV02-1 Name, Vorname: Klausur vom 14. Juni

Mehr

Arbeiten mit Arrays. 4.1 Eigenschaften. 4.1.1 Schlüssel und Element. Kapitel 4

Arbeiten mit Arrays. 4.1 Eigenschaften. 4.1.1 Schlüssel und Element. Kapitel 4 Arbeiten mit s Eine effiziente Programmierung mit PHP ohne seine s ist kaum vorstellbar. Diese Datenstruktur muss man verstanden haben, sonst brauchen wir mit weitergehenden Programmiertechniken wie der

Mehr

Einrichten eines News-Systems in Typo3

Einrichten eines News-Systems in Typo3 Einrichten eines News-Systems in Typo3 Generelles: tt_news ist eine der beliebtesten Erweiterungen für Typo3 und wir bereits auf vielen Sites Vorarlberger Schulen verwendet: Beispiele: http://www.vobs.at/hsl

Mehr

PIWIN 1 Übung Blatt 5

PIWIN 1 Übung Blatt 5 Fakultät für Informatik Wintersemester 2008 André Gronemeier, LS 2, OH 14 Raum 307, andre.gronemeier@cs.uni-dortmund.de PIWIN 1 Übung Blatt 5 Ausgabedatum: 19.12.2008 Übungen: 12.1.2009-22.1.2009 Abgabe:

Mehr

JSP Grundlagen. JEE Vorlesung Teil 5. Ralf Gitzel ralf_gitzel@hotmail.de

JSP Grundlagen. JEE Vorlesung Teil 5. Ralf Gitzel ralf_gitzel@hotmail.de JSP Grundlagen JEE Vorlesung Teil 5 Ralf Gitzel ralf_gitzel@hotmail.de 1 Übersicht Ralf Gitzel ralf_gitzel@hotmail.de 2 Übersicht JSP Konzept Model-View-Controller mit JSPs JSP Expression Language EL Literale

Mehr

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe...

php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe... php Hier soll ein Überblick über das Erstellen von php Programmen gegeben werden. Inhaltsverzeichnis 1.Überblick...2 2.Parameterübergabe...7 3.Zugriff auf mysql Daten...11 Verteilte Systeme: php.sxw Prof.

Mehr

AJAX SSL- Wizard Referenz

AJAX SSL- Wizard Referenz AJAX SSL- Wizard Referenz Version 1.0.2+ - 04.04.2011 Präambel Die vorliegende Dokumentation beschreibt den AJAX basierten SSL- Wizard der CertCenter AG. Der SSL- Wizard kann mit wenigen Handgriffen nahtlos

Mehr

Aktuelle Sicherheitsprobleme im Internet: Angriffe auf Web-Applikationen

Aktuelle Sicherheitsprobleme im Internet: Angriffe auf Web-Applikationen FAEL-Seminar Aktuelle Sicherheitsprobleme im Internet: Angriffe auf Web-Applikationen Prof. Dr. Marc Rennhard Institut für angewandte Informationstechnologie InIT ZHAW Zürcher Hochschule für Angewandte

Mehr

Groovy on Grails. Informatik-Seminar WS06/07. Alexander Treptow. Groovy on Grails Alexander Treptow (minf2622) 1

Groovy on Grails. Informatik-Seminar WS06/07. Alexander Treptow. Groovy on Grails Alexander Treptow (minf2622) 1 Groovy on Grails Informatik-Seminar WS06/07 Alexander Treptow Groovy on Grails Alexander Treptow (minf2622) 1 Übersicht Groovy on Grails Projektstruktur Controllers Views & Layout Dynamic Tag Libraries

Mehr

Ajax & GWT. Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina

Ajax & GWT. Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina Ajax & GWT Kurs: User Interfaces und ihre Evaluierung Dozent: Manfred Thaller WS 2012/2013 Referent: Rafael Kalina Ajax Technisches Verfahren, bei dem Browser aktualisierte Inhalte nicht mehr synchron

Mehr

Dynamische Webseiten mit PHP 1

Dynamische Webseiten mit PHP 1 Dynamische Webseiten mit PHP 1 Webserver, PHP und MYSQL Ein Webserver dient dazu, Internetseiten an PCs zu senden, von denen sie aufgerufen werden. Beispiel: Sie tippen im Browser www.fosbosweiden.de ein.

Mehr

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5

HTML5. Grundlagen der Erstellung von Webseiten. Linda York, Tina Wegener. 1. Ausgabe, Dezember 2011 HTML5 Linda York, Tina Wegener HTML5 Grundlagen der Erstellung von Webseiten 1. Ausgabe, Dezember 2011 HTML5 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem

Mehr

Freud & Leid des DSP-Entwicklers

Freud & Leid des DSP-Entwicklers Freud & Leid des DSP-Entwicklers Dynamic Server Pages in der Praxis Uniface Dynamic ServerPages CompuwareBenutzerGruppe e.v. WorkShop Neu-Isenburg, März 2010 Dynamic Server Pages in der Praxis CU 2008

Mehr

BETRIEB UND ENTWICKLUNG MIT DER MICROSOFT CLOUD

BETRIEB UND ENTWICKLUNG MIT DER MICROSOFT CLOUD BETRIEB UND ENTWICKLUNG MIT DER MICROSOFT CLOUD VM Role, Azure Services, SharePoint Online TechSummit Cloud 2011 28.03. 08.04.2011 Holger Sirtl Architect Evangelist, Microsoft Deutschland GmbH SCHICHTEN

Mehr

Microsoft Visio 2010 Funktionalitäten und Leistungen

Microsoft Visio 2010 Funktionalitäten und Leistungen Microsoft Visio 2010 Funktionalitäten und Leistungen Die fortgeschrittenen Funktionen zur Diagrammerstellung von Visio 2010 helfen Ihnen, komplexe Inhalte und Zusammenhänge schneller und einfacher zu vermitteln.

Mehr

ESB - Elektronischer Service Bericht

ESB - Elektronischer Service Bericht Desk Software & Consulting GmbH ESB - Elektronischer Service Bericht Dokumentation des elektronischen Serviceberichts Matthias Hoffmann 25.04.2012 DESK Software und Consulting GmbH Im Heerfeld 2-4 35713

Mehr

4 Vererbung, Polymorphie

4 Vererbung, Polymorphie 4 Vererbung, Polymorphie Jörn Loviscach Versionsstand: 21. März 2014, 22:57 Die nummerierten Felder sind absichtlich leer, zum Ausfüllen beim Ansehen der Videos: http://www.j3l7h.de/videos.html This work

Mehr

Aktuelle Angriffstechniken. Steffen Tröscher cirosec GmbH, Heilbronn

Aktuelle Angriffstechniken. Steffen Tröscher cirosec GmbH, Heilbronn Aktuelle Angriffstechniken Steffen Tröscher cirosec GmbH, Heilbronn Gliederung Angriffe auf Webanwendungen Theorie und Live Demonstrationen Schwachstellen Command Injection über File Inclusion Logische

Mehr

Javadoc. Programmiermethodik. Eva Zangerle Universität Innsbruck

Javadoc. Programmiermethodik. Eva Zangerle Universität Innsbruck Javadoc Programmiermethodik Eva Zangerle Universität Innsbruck Überblick Einführung Java Ein erster Überblick Objektorientierung Vererbung und Polymorphismus Ausnahmebehandlung Pakete und Javadoc Spezielle

Mehr

Bedienung von BlueJ. Klassenanzeige

Bedienung von BlueJ. Klassenanzeige Im Folgenden werden wichtige Funktionen für den Einsatz von BlueJ im Unterricht beschrieben. Hierbei wird auf den Umgang mit Projekten, Klassen und Objekten eingegangen. Abgeschlossen wird dieses Dokument

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

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

C# - PROGRAMME MIT PLUGINS ERWEITERN

C# - PROGRAMME MIT PLUGINS ERWEITERN C# - PROGRAMME MIT PLUGINS ERWEITERN Schreibt man ein Programm welches erweiterbar sein soll, dann gibt es häufig mehrere Möglichkeiten dies umzusetzen. Die Objektorientierung ist dabei der erste Schritt,

Mehr

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap

Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Cross-Platform Apps mit HTML5/JS/CSS/PhoneGap Proseminar Objektorientiertes Programmieren mit.net und C# Florian Schulz Institut für Informatik Software & Systems Engineering Einführung Was hat Cross-Plattform

Mehr

Best Practice für die Erstellung von Dashboards mit Web Intelligence A1. Uetliberg, 15.09.2015 www.boak.ch

Best Practice für die Erstellung von Dashboards mit Web Intelligence A1. Uetliberg, 15.09.2015 www.boak.ch Best Practice für die Erstellung von Dashboards mit Web Intelligence A1 Uetliberg, 15.09.2015 www.boak.ch AGENDA Einblick in IBCS (International Business Communication Standards) Erfassen der echten Anforderungen

Mehr