1 / 86

IT50 4 Javascript MVC çerçeveleri

IT50 4 Javascript MVC çerçeveleri. Yrd. Doç. Dr. Yuriy Mishchenko. Plan. MVC nedir Problem Çözüm Etkileşim modeli Temel MVC örneği – öğrenci kayıt sistemi Javascript MVC çerçeveleri temeli Backbone Nesneler ve özellikleri RESTful arayüzleri Örnek Angular.js Ana mantığı

trina
Download Presentation

IT50 4 Javascript MVC çerçeveleri

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IT504Javascript MVC çerçeveleri Yrd. Doç. Dr. Yuriy Mishchenko

  2. Plan • MVC nedir • Problem • Çözüm • Etkileşim modeli • Temel MVC örneği – öğrenci kayıt sistemi • Javascript MVC çerçeveleri temeli • Backbone • Nesneler ve özellikleri • RESTful arayüzleri • Örnek • Angular.js • Ana mantığı • Şablonlama kullanarak tasarım (HTML templating) • İfadeler ve direktivler (expressions and directives) • veri bağlamaları (data binding) • Yarışıcı rakamları tablosu örneği http://www.scinetcentral.com/~mishchenko/MIT504.html

  3. MVC nedir? • MVC bir yazılım geliştirme desenidir • MVC'de yazılım geliştirme işi, üç tipik bölüme başından ayrılır ve sonraki geliştirme bu üç bölüm çerçeve içerisinde gerçekleştirilir • MVC üç bölümü, • Model • Görünüm • Yönetici • MVC, ingilizcede Model-View-Controller demektir http://www.scinetcentral.com/~mishchenko/MIT504.html

  4. MVC nedir? • MVC çerçevesi şu ana problemlerine çözüm sağlamaya çalışır • Yazılımın kullanıcı arayüzü, tipik olarak yazılımın iş mantığından daha hızlı ve daha sıkca değişir ve değişebilir • Yazılım, tipik olarak aynı verileri birçok farklı şekilde göstermek zorunda ve bu tüm görünümler yazılımın verileri ile sync'te olmalı, yani verilerin değiştiğinde aynı zamanda güncelleştirilmelidir • Kullanıcı arayüzlerinin geliştirilmesi, tipik olarak farklı becerileri gerektiriyor ve aslı programcıdan farklı olan tasarımcı tarafından geliştirilir • Yazılımın ara yüzünün çalışması, tipik olarak iki faaliyetten oluşur – veri gösterme ve veri güncelleştirme • Yazılımın ara yüzleri, tipik olarak farklı cıhazlar için yeniden geliştirilmeli fakat iş mantığı bu süreçte değişmez • Yazılımın ara yüzü düzeltme, tipik olarak yazılımın iş mantığından daha zahmetli ve iş mantığından ayrıldığından faydalanır http://www.scinetcentral.com/~mishchenko/MIT504.html

  5. MVC nedir? Bu problemlerin çözümü önermek için, MVC çerçeve yazılımın tipik olan veri ve iş mantığı, kullanıcı ara yüzü ve ikisinin etkileşimini ayarlanan yönetici fonksiyonları açıkça ayrıyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  6. MVC nedir? Model, ilgili veri içeren, yöneten, dışarı sunan, ve dışardan gelen talimatlara göre tutarlı şekilde güncelleştiren yazılım projesinin bir mödülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html

  7. MVC nedir? View veya Görünüm, bilgi kullanıcıya göstermeyi kontröl eden ve kullanıcı ile etkileşimi ayarlayan yazılım projesinin mödülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html

  8. MVC nedir? Controller veya Yönetici, kullanıcının komutları yorumlayan ve modelde ve görünümde ilgili değişiklikleri yapmayı talep eden yazılım projesinin bir modülü dür http://www.scinetcentral.com/~mishchenko/MIT504.html

  9. MVC nedir? Controller Model View http://www.scinetcentral.com/~mishchenko/MIT504.html

  10. MVC nedir? Controller Model View Model, yazılımın verilerini ayarlar ve View'e gereken şekilde sunar http://www.scinetcentral.com/~mishchenko/MIT504.html

  11. MVC nedir? Controller Model View View, kullanıcıya veri sunar ve kullanıcıdan komutları alır http://www.scinetcentral.com/~mishchenko/MIT504.html

  12. MVC nedir? Controller, Model ve View arasındaki etkileşimi ayarlar Controller Model View http://www.scinetcentral.com/~mishchenko/MIT504.html

  13. MVC nedir? (Microsoft Developer Network MVC sayfası) : Önemli not yapılmalı: MVC çerçevesinde View ve Controller ikiside Modele bağlıdır. Ancak, model hem View hemde Controller'den bağımsızdır. Bu özellik, MVCdeki ayırmanın anahtar özelliği. Bu ayırma, modeli bağımsız geliştirme ve düzeltmeye önemli fırsat sağlar. http://www.scinetcentral.com/~mishchenko/MIT504.html

  14. MVC nedir? Bu ayırma, birçok zengin internet uygulamalarında (RIAda) arka planına götürülür; aslında birçok kullanıcı arayüzü çerçevesi bu tüm rolları tek bir nesne olarak temsil eder. Ancak Web Uygumalarında bu ayırma – web tarayıcı View olarak ve sunucu skriptleri Controller olarak – başında ve çok açık şekilde mevcuttur. http://www.scinetcentral.com/~mishchenko/MIT504.html

  15. MVC nedir? Model-View-Controller,kullanıcı arayüzleri iş mantığından ayırmak için temel tasarım deseni dir. http://www.scinetcentral.com/~mishchenko/MIT504.html

  16. MVC Örneği: Öğrenci kayıt sistemi Örnek olarak, bir üniversitenin öğrenci kayıt sisteminin yazılımı geliştirme sürecini düşünelim MVC çerçeveye göre, bu geliştirme süreci baştan üç ayrı bölgeye ayrıldırılmalı http://www.scinetcentral.com/~mishchenko/MIT504.html

  17. MVC Örneği: Öğrenci kayıt sistemi • –(buradaki) Model - • Öğrenci bilgileri • Güncelleştirme yöntemleri • Bilgi yöntemleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  18. MVC Örneği: Öğrenci kayıt sistemi • –(buradaki) Model - • Öğrenci bilgileri • Güncelleştirme yöntemleri • Bilgi yöntemleri Ayrıca Model, bunların bir kümesi veya kolleksiyon şeklinde organize edilecektir http://www.scinetcentral.com/~mishchenko/MIT504.html

  19. MVC Örneği: Öğrenci kayıt sistemi • –(buradaki) View – • Tüm öğrencileri tablo görünümü • Tek öğrenci bilgi görünümü • Para ödememiş öğrenci tablo görünümü • Öğrenci bilgi güncelleştirme görünümü • –(buradaki) Model - • Öğrenci bilgileri • Güncelleştirme yöntemleri • Bilgi yöntemleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  20. MVC Örneği: Öğrenci kayıt sistemi • –(buradaki) View – • Tüm öğrencileri tablo görünümü • Tek öğrenci bilgi görünümü • Para ödememiş öğrenci tablo görünümü • Öğrenci bilgi güncelleştirme görünümü • –(buradaki) Model - • Öğrenci bilgileri • Güncelleştirme yöntemleri • Bilgi yöntemleri Görünümü seç • –(buradaki) Controller – • Controller yöntemleri Kullanıcının girişini al Görünüme bağlı veri güncelleştirme talepleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  21. MVC Örneği: Öğrenci kayıt sistemi Bu şekilde tasarlanan yazılım, MVC çerçevesi içinde tasarlanmıştır • –View – • Tüm öğrencileri tablo görünümü • Tek öğrenci bilgi görünümü • Para ödememiş öğrenci tablo görünümü • Öğrenci bilgi güncelleştirme görünümü • – Model - • Öğrenci bilgileri • Güncelleştirme yöntemleri • Bilgi yöntemleri • – Controller – • Controller yöntemleri Görünümü seç Görünüme bağlı veri güncelleştirme talepleri Kullanıcının girişini al http://www.scinetcentral.com/~mishchenko/MIT504.html

  22. Javascript MVC çerçeveleri Javascript MVC çerçeveleri, karmaşık RIA geliştirmede kullanılan web geliştirme çerçeveleridir Şu anda en pöpüler olan MVC çerçeveleri Backbone.js, Ember.js ve Angular.js http://www.scinetcentral.com/~mishchenko/MIT504.html

  23. Javascript MVC çerçeveleri • Backbone.js kullanarak geliştirilmiş siteleri • USA Today (gazet) • Hulu (online TV sitesi) • Foursquare (sosyal ağ sitesi) • Disqus (online yorumlama hizmeti) • Khan Academi (online eğitim hizmeti) • Diaspora (sosyal ağ sistemi) • Pandora (online radio sitesi) • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  24. Javascript MVC çerçeveleri • Ember.js kullanarak geliştirilmiş siteleri • Yahoo (İnternet portalı) • Zendesk (customer service hizmet sitesi) • Groupon (online kupon hizmeti) • Discourse (online yorumlama hizmeti) • Square (online ödeme hizmeti) • Livinsocial (sosyal ağ sitesi) • Yapp (mobile app geliştirme sitesi) • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  25. Javascript MVC çerçeveleri • Angular.js kullanarak geliştirilmiş siteleri (Google'nin Javascript MVC çerçevesi) • PS3 için YouTube sitesi (online video hizmeti) • Crunchinator (Chrunchbase blogu için veri incelenmesi) • Musik365 (online radio hizmeti) • Posse (online sosyal oyun) • openTaste (sosyal ağı sitesi • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  26. Javascript MVC çerçeveleri nedir? • Javascript MVC çerçeveleri genellikle • "Model" için kullanılacak özel bir nesne sunar • MVC'nin modellerinin temel yapıları tanımlar • Modelin özellikleri ayarlama aletleri sunar • AJAX kullanarak sunucu ile model verilerini indirme/yükleme/sync etme araçları sunar • View olarak HTML kullanılır • Controller için özel bir nesne sunar • Bu nesne modelin haline bağlı olayların bağlamayı yönetir • HTML parse (ayrıştırma) ve templating (şablonlama) yapar • Görünümleri ayarlar http://www.scinetcentral.com/~mishchenko/MIT504.html

  27. Javascript MVC çerçeveleri nedir? RIA Veriler • "model" nesnesi • temel yapıları • Özellikleri ayarlama aletleri • AJAX sunucu ile sync etme araçları • olay bağlama Görünümler • { HTML } Controller • olay bağlama • "controller" nesnesi • olay bağlama • HTML parsetme • Görünüm ayarlama http://www.scinetcentral.com/~mishchenko/MIT504.html

  28. Javascript MVC çerçeveleri nedir? RIA Veriler • "model" nesnesi • temel yapıları • Özellikleri ayarlama aletleri • AJAX sunucu ile sync etme araçları • olay bağlama Görünümler • { HTML } Controller • olay bağlama • "controller" nesnesi • olay bağlama • HTML parsetme • Görünüm ayarlama Javascript MVC çerçeveleri http://www.scinetcentral.com/~mishchenko/MIT504.html

  29. Backbone.js temelleri • Backbone.js, şu anda en pöpüler olan ve birçok büyük kurum tarafından kullanılan jMVC çerçevesi • Backbone.js, MVC geliştirmesi için birkaç temel nesne sağlar • Model • Collection • View • Router http://www.scinetcentral.com/~mishchenko/MIT504.html

  30. Backbone.js temelleri Backbone "model" nesnesi, uygulamanın verilerinin modelleri tanımlamak için kullanılır Model nesnesi, verileri ve onlarla çalışan iş mantık fonksiyonları içermeli Model nesneleri genellikle toplu olarak bir Collection içinde kullanılır http://www.scinetcentral.com/~mishchenko/MIT504.html

  31. Backbone.js temelleri • TODO listesinde kullanılacak, TODO bir elemanını temsil eden model; • model üç özellikli todo elemanı tanımlar, default değerleri tanımlar, ve "toggle" bir eylemi tanımlar Todo= Backbone.Model.extend({ title: null, order: null, done: false, defaults: function() { return { title: "boştodo...", order: Todos.nextOrder(), done: false }; }, toggle: function() { this.save({done: !this.get("done")}); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  32. Backbone.js temelleri • Model nesnesinin en önemli özellikleri: • .extend, model nesnesi üzerinde yeni genişletmiş bir modeli oluşturma • .initialize, ilgili nesne oluşturduğunda çalışacak yapıcı fonksiyon • .defaults, ilk değerlerinin atanması • .get/set, model attribütlerinin atanıp okunması • .has/unset/clear, model attribütlerinin ayarlanması • .id, model nesnesinin özel kimliği • .attributes, model nesnesinin özelliklerinin özgün hash'i • .sync/fetch/save, AJAX ve RESTfull arayüzü kullanarak sunucu ile modelinin sync edilmesi • .parse, sunucudan veri parse etmek için kullanılacak fonksiyon • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  33. Backbone.js temelleri Bunlar dışında, .extend tanımı içinde herhangi javascript nesnesi gibi Backbone modellerinde yeni özellik ve yöntemler tanımlanabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  34. Backbone.js temelleri Backbone "Collection" nesnesi, uygulamanın tüm modelleri toplu olarak içeren ve onlarla toplu olarak çalışmalara imkan sağlayan bir nesnesi dir http://www.scinetcentral.com/~mishchenko/MIT504.html

  35. Backbone.js temelleri • TODO listesini temsil edip, TODO elemanları içerecek TODO elemanlarının kolleksiyonu TodoList= Backbone.Collection.extend({ model: Todo, localStorage: new Backbone.LocalStorage("todos-backbone"), done: function() { return this.where({done: true}); }, remaining: function() { return this.where({done: false}); }, nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, comparator: 'order' }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  36. Backbone.js temelleri • Collection nesnesinin en önemli özellikleri: • .extend, collection nesnesi üzerinde yeni genişletmiş koleksiyonun oluşturulması • .model, koleksiyonda içerilecek model nesnesi • .initialize, koleksiyonun oluşturulduğunda çalışacak yapıcı fonksiyonu • .sync/fetch/parse, koleksiyonun sunucuda depolanması ve okunması yöneten fonksiyonlar • .add/remove/reset, koleksiyona elemanları eklemek ve çıkartmak için kullanılan fonksiyonlar • .push/pop/shift/unshift, belirli düzende elemanları eklemek ve çıkartmak için kullanılan fonksiyonlar • .length, koleksiyonun boyutu • .sort, koleksiyonun sıralanması • .comparator, koleksiyonun elemanlarının sırasını belirtmek için kullanılan karşılaştırma fonksiyonu • .where/findwhere, attribute hash'i kullanarak koleksiyonda arama • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  37. Backbone.js temelleri Backbone "View" nesnesi, MVC'nin görünümlerinden biraz farklı olan, RIA'nin arayüzü organize etmek için bir araçtır. HTML ve CSS direkt olarak ayarlamayan, Backbone view'leri var olan HTML yapılarının düzenlenmesi ve olaylar kullanarak modellere bağlanaması ayarlar http://www.scinetcentral.com/~mishchenko/MIT504.html

  38. Backbone.js temelleri • Bir arkadaş listesini ayrlayan uygulamanın View nesnesi AppView=Backbone.View.extend({ el: $("body"), initialize:function () { this.friends=new Friends( null, { view:this }); }, events: { "click #add-friend": "showPrompt", }, showPrompt:function () { varfriend_name= prompt("Who is your friend?"); varfriend_model=new Friend({ name:friend_name}); this.friends.add( friend_model ); }, addFriendLi:function (model) { $("#friends-list").append("<li>" +model.get('name') + "</li>"); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  39. Backbone.js temelleri • View nesnesinin en önemli özellikleri: • .extend, view nesnesi üzerinde yeni view oluşturulması • .el, bu view tarafından ayarlanan sayfanın HTML elemanı • .initialize, oluşturulduğunda çalışacak yapıcı fonksiyonu • .events, view tarafından ayarlanan olayları • .template, view elemanında HTML şablonlama için kullanılacak şablonlama motoru • .render, model verilere göre ilgili HTML elemanı oluşturan fonksiyonu • ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  40. Backbone.js temelleri • Backbone.js, RESTful arayüzleri üzerinde çalışan bir javascript çerçevesi • RESTful arayüzü, "/#/action/param/param" URL kullanarak haberleştirilen eylemler kullanan RIA-RIA veya RIA-sunucu iletişim bir model • RESTful isteklerinin örneği: • #help • #search/kiwis • #search/kiwis/p7 http://www.scinetcentral.com/~mishchenko/MIT504.html

  41. Backbone.js temelleri Backbone, sunucu ile iletişimde RESTful arayüzünün kullanılmasını varsayır, mesela verileri veritabanına depolamak için veya veritabanından elde etmek için Aynı zamanda Backbone, RIA içinde farklı işlemlerin başlatılması için #-adresler kullanarak RESTful isteklerinin kullanılmasına imkan sağlar Bu tür istekleri yonlendirmek ve işletmek için, Backbone Router nesnesi kullanılır http://www.scinetcentral.com/~mishchenko/MIT504.html

  42. Backbone.js temelleri • Backbone Router nesnesinin kullanımının örneği var Workspace = Backbone.Router.extend({ routes: { "help": "help", // #help "search/:query": "search", // #search/kiwis "search/:query/p:page": "search" // #search/kiwis/p7 }, help: function() { ... }, search: function(query, page) { ... } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  43. Backbone.js örneği • TODO listesi uygulama (http://backbonejs.org/examples/todos/index.html) • Yapısı: • Model: TODO listesinin elemanı • Collection: TODO listesinin tüm elemanları • View • TODO listesinin elemanın görünümü • TODO listesinin görünümü http://www.scinetcentral.com/~mishchenko/MIT504.html

  44. TODO listesinin eleman modeli Todo= Backbone.Model.extend({ defaults: function() { return { title: "boştodo...", order: Todos.nextOrder(), done: false }; }, toggle: function() { this.save({done: !this.get("done")}); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  45. TODO listesinin elemanının koleksiyonu TodoList= Backbone.Collection.extend({ model: Todo, localStorage: new Backbone.LocalStorage("todos-backbone"), done: function() { return this.where({done: true}); }, remaining: function() { return this.where({done: false}); }, nextOrder: function() { if (!this.length) return 1; return this.last().get('order') + 1; }, comparator: 'order' }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  46. TODO listesinin elemanının görünümü TodoView= Backbone.View.extend({ tagName: "li", template: _.template($('#item-template').html()), events: { "click .toggle" : "toggleDone", "dblclick .view" : "edit", "click a.destroy" : "clear", "keypress .edit" : "updateOnEnter", "blur .edit" : "close" }, initialize: function() { this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'destroy', this.remove); }, render: function() { this.$el.html(this.template(this.model.toJSON())); this.$el.toggleClass('done', this.model.get('done')); this.input = this.$('.edit'); return this; }, toggleDone: function() { this.model.toggle(); }, edit: function() { this.$el.addClass("editing"); this.input.focus(); }, close: function() { var value = this.input.val(); if (!value) this.clear();else { this.model.save({title: value}); this.$el.removeClass("editing"); } }, updateOnEnter: function(e) { if (e.keyCode == 13) this.close(); }, clear: function() { this.model.destroy(); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  47. TODO listesi görünümü varAppView = Backbone.View.extend({ el: $("#todoapp"), statsTemplate: _.template($('#stats-template').html()), events: { "keypress #new-todo": "createOnEnter", "click #clear-completed": "clearCompleted", "click #toggle-all": "toggleAllComplete" }, initialize: function() { this.input = this.$("#new-todo"); this.allCheckbox = this.$("#toggle-all")[0]; this.listenTo(Todos, 'add', this.addOne); this.listenTo(Todos, 'reset', this.addAll); this.listenTo(Todos, 'all', this.render); this.footer = this.$('footer'); this.main = $('#main'); Todos.fetch(); }, render: function() { var done = Todos.done().length; var remaining = Todos.remaining().length; if (Todos.length) { this.main.show(); this.footer.show(); this.footer.html(this.statsTemplate({done: done, remaining: remaining})); } else { this.main.hide(); this.footer.hide(); } this.allCheckbox.checked= !remaining; }, addOne: function(todo) { var view = new TodoView({model: todo}); this.$("#todo-list").append(view.render().el); }, addAll: function() { Todos.each(this.addOne, this); }, createOnEnter: function(e) { if (e.keyCode != 13) return; if (!this.input.val()) return; Todos.create({title: this.input.val()}); this.input.val(''); }, clearCompleted: function() { _.invoke(Todos.done(), 'destroy'); return false; }, toggleAllComplete: function () { var done = this.allCheckbox.checked; Todos.each(function (todo) { todo.save({'done': done}); }); } }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  48. Backbone.js örneği • Arkadaş listesi uygulama (daha basit) (http://thomasdavis.github.io/2011/02/01/backbone-introduction.html) • Yapısı: • Model: Arkadaş kaydı • Collection: Tüm arkadaşlar • View: Arkadaş listesi http://www.scinetcentral.com/~mishchenko/MIT504.html

  49. TODO listesinin eleman modeli Friend =Backbone.Model.extend({ name:null }); http://www.scinetcentral.com/~mishchenko/MIT504.html

  50. TODO listesinin elemanının koleksiyonu Friends =Backbone.Collection.extend({ initialize:function (models, options) {this.bind("add", options.view.addFriendLi);} }); http://www.scinetcentral.com/~mishchenko/MIT504.html

More Related