Ext JS Kárász István 2014.

Az előadások a következő témára: "Ext JS Kárász István 2014."— Előadás másolata:

1 Ext JS Kárász István 2014

2 Natív JavaScript problémái
OOP megvalósítása nehézkes Konstruktorok Prototype AJAX hívások bonyolultak Cross-browser problémák ECMAScript szabvány különböző implementációi Minden böngésző más “extrák”-at tett elérhetővé Bizonyos függvények más-más néven érhetőek el

3 Megoldások Könyvtárak (library) – Különböző funkciókkal “bővítik” a beépített típusokat, biztosítják a böngésző függetlenséget. Animációk létrehozását könnyítik meg jQuery, YUI Library (Yahoo!), Underscore.js, Prototype Keretrendszerek (framework) – komplex alkalmazások fejlesztésére szolgálnak, biztosítják a könyvtárak által nyújtott előnyöket, megkönnyítik az OOP fejlesztést, gyakran megvalósítanak különböző design patterneket Backbone.js, AngularJS (Google Inc.), Ember.js, Ext JS (Sencha Inc.) JavaScript “fölé” épített nyelvek – melyeket natív JavaScriptre fordít a böngésző, vagy egyéb fordító program Dart (Google Inc.), CoffeeScript

4 Sencha Inc. (2007) 2010 június: jQTouch (jQuery plugin mobil eszközökhöz), Raphaël (Vektorgrafika) beolvad – Sencha Labs A “korszerű web” mellett elkötelezett cég Konferenciák HTML5 Sencha Labs Termékek Ext JS – RIA keretrendszer Sencha Touch – Mobil alkalmazások fejlesztéséhez Sencha GXT – Google Web Toolkit Sencha Architect – Grafikus fejlesztői felület Sencha termékekhez

5 Ext JS Az Ext JS piacvezető keretrendszer a üzleti webalkalmazások területén. Több száz komponenssel, részletes dokumentációval és rengeteg példa alkalmazással segíti a fejlesztők munkáját. Biztosítja az eszközöket egy robosztus asztali alkalmazás fejlesztéséhez a legújabb verzióban bevezetett MVC arhitekrúrájával. Mit is jelentenek a üzleti webalkalmazások? Adminisztrációs felületek, “Asztal a böngészőben” Diagramok, Táblázatok, Űrlapok A többi keretrendszer, könyvtár nyújtotta lehetőségek 95%-a megvan benne. (animációk, típusok bővítése, ajax, grafikus elemek) Példák, demók

6 Előnyök Böngésző független
Internet Explorer 6+  Firefox 3.6+ (PC, Mac)  Safari 4+  Chrome 10+  Opera 11+ (PC, Mac) Generált html (nem nekünk kell a statikus keretet megcsinálni) Hatékony html template kezelés – ha mégis kell html Testreszabható megjelenés (sass) – sencha cmd Példák, videók, közösség, részletes dokumentáció Névterek, rengeteg osztály, átlátható hierarhia Bővíthető

7 Hátrányok Lassú Hatalmas Drága Nagy rendszerek fejlesztéséhez készült!
A DOM generálás lassú, költséges “windowresize”-ra, majdnem az egész layout-ot újra számítja Hatalmas jQuery ~33.7KB, Ext JS ~440KB Drága 1 fejlesztőnek $595 20 fejlesztőnek már $11,185 jQuery, AngularJS ingyenes Nagy rendszerek fejlesztéséhez készült! Kis oldalakhoz ext-core (4.0-tól megszűnt az MIT License)

8 Történeti áttekintés 2007 eleje: 1.0 2007. december: 2.0 2009: 3.0
YUI-hoz készült add-on 2007. december: 2.0 Asztali megjelenés 2009: 3.0 Új komponensek 2011: 4.0 MVC, SVG, VML, teljesen átalakított osztályok Napjaink 2 millió < fejlesztő Citi, Visa, Airbus, Boeing, Samsung, Cisco, Microsoft, Oracle, US Army, NATO, T-Mobile, Siemens, stb.

9 Ext JS 4.0 Alaposan megtervezett “Data” csomag 50 új osztály MVC
Model Proxy Store 50 új osztály MVC Xtemplate teljesen újragondolva Chartok AutoLoader

10 Alapok Ext – globális singleton objektum Ext.Array - singleton
Config: enableGarbageCollector, enableNestedListenerRemoval… Böngésző: isIE, isIE6, isChrome, isFF, isOpera, isSafari, isWebkit… Operációs rendszer: isWindows, isLinux, isMac Változó ellenőrzés: isArray(), isString(), isNumber(), isIterable()… Ext.Array - singleton each(), filter(), indexOf(), min(), max(), sort() Halmazműveletek: union(), intersect(), unique() Ext.AJAX - singleton request(), abort(), abortAll()

11 DOM manipuláció Ext.Element
DOM elem lekérése: Ext.get(id/element), Ext.fly(id/element) Ext.DomQuery – singleton Ext.DomHelper – Singleton

12 Ext.Element DOM elemeket reprezentálnak Eseménykezelés Manipuláció
35 különböző event (böngésző függő) on, un, addListener, removeListener, removeAllListener Manipuláció setStyle(), addCls(), removeCls() destroy(), remove(), update() DOM Traversing child(), first(), select(), query(), parent(), findParent(), next(), prev() insertHtml(), insertBefore(), insertAfter(), appendChild()

13 Új elem létrehozása Ext.DomHelper segítségével – Singleton
append(), insertBefore(), insertAfter()

14 XTemplate DOM elemek sablonjai Ciklus, elágazás
xindex, xcount, values… Belső függvények

15 Objektumok létrehozása
Ext.create(‘class’, options) – Ext.getClass(component), instanceof Ha nincs ilyen, megpróbálja betölteni - autoloader Items: gyakorlatilag egy JSON objektum alapján példányosít. Szerver oldalon konfigurálható – jogosultság kezelés

16 Saját osztályok definiálása
Extend Öröklődés – egyszeres Requires Autoloader Példányosítás előtt Fájl betöltésekor? Constructor Statics Singleton

17 MVC Struktúra nem kötelező – javasolt Model View Controller Sencha CMD
Mező-érték gyüjtemények. A data csomagra épül. Asszociációkkal kapcsolhatóak össze. View Az Ext.Component leszármazottai Controller Az alkalmazás “logikáját” megvalósító osztályok, modelek példányosítása, viewk kezelése.

18 App.js Az alkalmazás objektuma Globális beállítások
Az alkalmazás névtere Az autoloader-nek beállítja a mappát launch() – automatikusan meghívódik, mikor minden betöltődött Számontartja a controllereket, modeleket és viewkat

19 Controller létrehozása
Az alkalmazás működési logikáját írják le. Figyelnek a view-k eseményeire és ezek függvéyében végeznek műveleteket. Mivel az App.js-ben regisztráltuk, az initet meghívja automatikusan az alkalmazás. this.control() segítségével feliratkozhatunk egy css selectornak megfelelő minden komponens eseményeire.

20 Userek kilistázása Viewk általában a Component leszármazottai.
Regisztráljuk a controller ‘views‘ adattagjában – xtype Rendereljük az App launch fv-ben

21 A view kezelése

22 Modelek és Storeok Mezők halmazai - A modelek objektumokat reprezentálnak, amiket az alkalmazásban kezelni szeretnénk. associations hasMany belongsTo validations idProperty Kliens oldali cache Modelek által leírt objektumok példányai Proxy-kal tölti le/fel az adatokat Lapozás Rendezés Szűrés

23 A Model és Store létrehozása
Létrehozzuk a Storet és a Modelt Regisztáljuk ezeket a Controllerben Megadjuk a gridnek (View), hogy melyik Storeból kell dolgoznia

24 Kommunikáció a szerverrel
Proxy adattag Honnan olvasson, hová írjon A választ hogyan értelmezze Automatikusan töltse le az adatokat, vagy kódból hívjuk-e a load()-ot sync()

25 Demók Az előbb elkészített: build/examples/app/simple/simple.html Asztal a böngészőben: build/examples/desktop/desktop.html További példa programok:

26 Érdekességek Grid Renderer Soap TreeView Drag’n’Drop Blog példa
Ext.draw csomag

27 Kérdések

28 Teszt kérdések Mire való az ‘Ext.create’ fv?
Hogyan definiálhatok statikus adattagokat? Mire való a Modelek ‘belongsTo’ beállítása?