Medien zwischen Technologie und Gesellschaft Dozent: Herr Prof. Dr. Manfred Thaller SS 13 Referent: Christian Braun.

Präsentation zum Thema: "Medien zwischen Technologie und Gesellschaft Dozent: Herr Prof. Dr. Manfred Thaller SS 13 Referent: Christian Braun."—  Präsentation transkript:

1 Medien zwischen Technologie und Gesellschaft Dozent: Herr Prof. Dr. Manfred Thaller SS 13 Referent: Christian Braun

2 KLICK!

3

4 Ein KLICK = eine komplett neu geladene HTML- Seite einzig einzelne Bereiche werden ausgetauscht Popups werden angezeigt komplexe Navigationsstrukturen

5

6

7

8

9

10

11

12

13 Grundlegendes.. JavaScript –Bibliothek/ Baukasten => Modelle und Funktionen werden bereitgestellt ausgelegt für die Entwicklung von Webapplikationen Verwendet das Underscore- Framework enthält >80 Add-on Funktionen für Javascript Verschiedene Plattformen werden bedient Ziele von Backbone....Hilfestellung bei Erstellung von Applikationen!..schaffen einer Struktur!..plattformübergreifend! Problem bei Javascript Codes OHNE Backbone o nicht existente Struktur o es wird verzweifelt versucht, Daten synchron zwischen => HTML- Benutzeroberfläche => JavaScript- Logik => Datenbank auf dem Server zu halten! o Spaghetti Code kann JEDER Backbones Model -View -Router Prinzip!

14 Models speichert Daten Eintrag in Datenbank neu angelegt verändert gelöscht Views Verantwortlich für die Anzeige des Inhalts Vermittlung zwischen Benutzer und Model Router Übernimmt Navigation innerhalb einer Seite Steuerzentrale COLLECTIONS

15 o View holt sich Daten vom Model, nicht vom Server o können beliebig erstellt, verändert und gelöscht werden o View aktualisiert sich selbstständig o Router/Model fordern change –Event Windows/Linux Oberfläche MODEL Weboberfläche VIEW 1 VIEW 2

16

17 Cookbook

18 var recipe = Backbone.Model.extend({ defaults: { title: "New recipe", ingredients: "", instructions: "" } }); Recipe -Objekte erben alle Methoden des Basis –Models Defaults: Standardwerte werden initialisiert

19 Neues Rezept erstellen var recipe = new Recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfanne geben. Warten }) Keinerlei Funktionen zum Erstellen von HTML- Elementen!

20 var recipe = new Recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfanne geben. Warten }) var title = recipe.get(title); VIEW -Anzeige= Spiegeleier

21 var recipe = new recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfannge}) var title = recipe.set(title, Schnitzel); var title = recipe.get(title); VIEW -Anzeige= Schnitzel

22 var recipe = new recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfannge}) var title = recipe.clear(title) var title = recipe.get(title) VIEW -Anzeige=

23 var Cookbook = Backbone.Collection.extend({ model: recipe }); dient dazu, mehrere Instanzen zusammenzufassen alle Rezepte befinden sich in einer Collection

24 var EditView = Backbone.View.extend({ template: _.template($('#template-edit').html()), events: { 'click input[type="submit"]': 'save' }, save: function() { this.model.set({ title: this.$el.find('#title').val(), ingredients: this.$el.find('#ingredients').val(), instructions: this.$el.find('#instructions').val() }); this.trigger('finished'); return false; }, render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); Mehrere Views können das gleiche Model anzeigen! Ein View kann mehrere Models anzeigen!

25 events: { 'click input[type="submit"]': 'save' }, click- Events auf Submit- Buttons rufen save() -Funktion auf!

26 save: function() { this.model.set({ title: this.$el.find('#title').val(), ingredients: this.$el.find('#ingredients').val(), instructions: this.$el.find('#instructions').val() }); this.trigger('finished'); return false; }, speichert Werte aus Formular zurück ins Model erzeugt finished -Event => Mitteilung, dass Rezeptbearbeitung beendet ist

27 render: function() { this.$el.html(this.template(this.model.toJSON())); return this; erzeugt HTML–Code für den View Underscore –Template JSON: ordnet Model an=> Template kann zugreifen Andere Backbone Methoden können angefügt werden

28 var CookbookApp = Backbone.Router.extend({ routes: { '': 'home', 'recipe/add': 'add', 'recipe/:id': 'display' }, home: function() { console.log(home) }; new HomeView(); add: function() { console.log(add) }; new AddView(); display: function() { /*... */ } new RecipeView }); URL nach # wird ausgelesen Router gibt Änderung an View weiter