Ext Js On Rails
-
Upload
michael-siebert -
Category
Technology
-
view
2.724 -
download
1
Transcript of Ext Js On Rails
![Page 1: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/1.jpg)
ExtJS on RailsMichael Siebert
![Page 2: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/2.jpg)
Michael Siebert
• Freelancer Ruby / Rails / JavaScript / PHP
• www.siebert-wd.de
![Page 3: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/3.jpg)
Buzzword-Bingo!
![Page 4: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/4.jpg)
Rich Internet Applications
![Page 5: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/5.jpg)
Rich Internet Applications
Wikipedia:
„Der Begriff Rich Internet Application (RIA, deutsch: reichhaltige Internet Anwendung) beschreibt eine Anwendung, die Internet-Techniken benutzt und eine intuitive Benutzeroberfläche bietet.“
![Page 6: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/6.jpg)
(c) amrufm http://flickr.com/photos/amrufm/2195019023/
![Page 7: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/7.jpg)
![Page 8: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/8.jpg)
![Page 9: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/9.jpg)
Rich Internet Applications
![Page 10: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/10.jpg)
Rich Internet Applications
• Anspruchsvolles UI
![Page 11: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/11.jpg)
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
![Page 12: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/12.jpg)
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
![Page 13: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/13.jpg)
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen
![Page 14: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/14.jpg)
Rich Internet Applications
• Anspruchsvolles UI
• Tastenkürzel
• Drag‘n‘Drop
• Clientseitige Berechnungen
• Geschwindigkeit
![Page 15: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/15.jpg)
Javascript + HTML + CSS + Backend
![Page 16: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/16.jpg)
Javascript + HTML + CSS + Backend
![Page 17: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/17.jpg)
Javascript + HTML + CSS + Backend
![Page 18: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/18.jpg)
Javascript + HTML + CSS + Backend
![Page 19: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/19.jpg)
Javascript + HTML + CSS + Backend
Framework?
![Page 20: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/20.jpg)
Javascript + HTML + CSS + Backend
+Framework?
![Page 21: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/21.jpg)
Javascript + HTML + CSS + Backend
+Framework?
![Page 22: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/22.jpg)
Javascript + HTML + CSS + Backend
+Framework?
![Page 23: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/23.jpg)
Javascript + HTML + CSS + Backend
+Framework?
![Page 24: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/24.jpg)
Javascript + HTML + CSS + Backend
Framework?
![Page 25: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/25.jpg)
Javascript + HTML + CSS + Backend
Framework?
![Page 26: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/26.jpg)
Javascript + HTML + CSS + Backend
Framework?
![Page 27: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/27.jpg)
Javascript + HTML + CSS + Backend
Framework?
![Page 28: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/28.jpg)
ExtJS?
![Page 29: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/29.jpg)
ExtJS?
• JavaScript Framework
![Page 30: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/30.jpg)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
![Page 31: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/31.jpg)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
![Page 32: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/32.jpg)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
![Page 33: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/33.jpg)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)
![Page 34: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/34.jpg)
ExtJS?
• JavaScript Framework
• Cross-Browser, Cross-Platform
• GPLv3 und kommerzielle Lizenz
• Rich Internet Applications
• Adobe AIR Integration (optional)
• Modularer Aufbau
![Page 35: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/35.jpg)
Demo
![Page 36: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/36.jpg)
Frameworks
![Page 37: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/37.jpg)
Frameworks
• Adapter für
![Page 38: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/38.jpg)
Frameworks
• Adapter für
• Prototype & Script.aculo.us
![Page 39: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/39.jpg)
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
![Page 40: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/40.jpg)
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI
![Page 41: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/41.jpg)
Frameworks
• Adapter für
• Prototype & Script.aculo.us
• jQuery
• YUI
• oder nur ExtJS
![Page 42: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/42.jpg)
(c) Simon Greig http://flickr.com/photos/xrrr/2321685873/
![Page 43: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/43.jpg)
(c) SpAvAAi http://flickr.com/photos/spavaai/2536426227/
![Page 44: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/44.jpg)
Rails?
![Page 45: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/45.jpg)
Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen
![Page 46: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/46.jpg)
Rails?
• „Normale“ Rails-Anwendung
• Views in HTML
• vereinzelt ExtJS nutzen
• „Ganzheitlicher Ansatz“
• Anwendung komplett mit ExtJS
• Rails nur Datenlieferant
![Page 47: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/47.jpg)
Kommunikation
![Page 48: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/48.jpg)
Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader
![Page 49: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/49.jpg)
Kommunikation
• XML
• Rails: collection.to_xml
• ExtJS: Ext.data.XMLReader
• JSON
• Rails: collection.to_json
• ExtJS: Ext.data.JSONReader
![Page 50: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/50.jpg)
REST!
![Page 51: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/51.jpg)
Datenformate
![Page 52: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/52.jpg)
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
![Page 53: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/53.jpg)
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
![Page 54: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/54.jpg)
DatenformateRails via to_json ExtJS erwartet
[{ "title": "Rails scales"},{ "title": "Ruby scales"}]
{ "results": 2, "root": [{ "title": "Rails scales" },{ "title": "Ruby scales" }]}
render :json => { :root => @posts, :results => @posts.size }
![Page 55: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/55.jpg)
Demo
![Page 56: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/56.jpg)
Plugins
![Page 57: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/57.jpg)
ext_scaffold
• Scaffold Generator von Martin Rehfeld
• http://tinyurl.com/2pu4pl
![Page 58: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/58.jpg)
ext_js_with_rails
![Page 59: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/59.jpg)
ext_js_with_rails
• Sammlung von Helferlein
![Page 60: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/60.jpg)
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
![Page 61: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/61.jpg)
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
![Page 62: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/62.jpg)
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
![Page 63: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/63.jpg)
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen
![Page 64: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/64.jpg)
ext_js_with_rails
• Sammlung von Helferlein
• script/js_autobuild
• JSLint Integration
• YUICompressor
• div. Controller und Model-Erweiterungen
• ...
![Page 65: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/65.jpg)
ext_js_with_rails
![Page 66: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/66.jpg)
ext_js_with_rails
• (noch) kein Release
![Page 67: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/67.jpg)
ext_js_with_rails
• (noch) kein Release
• http://github.com/siebertm/ext_js_with_rails/
![Page 68: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/68.jpg)
![Page 69: Ext Js On Rails](https://reader031.fdocuments.net/reader031/viewer/2022013011/5592de2a1a28ab023c8b4762/html5/thumbnails/69.jpg)
Fragen?