Ext JS Kárász István 2014

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

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

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

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

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ő

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)

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.

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

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()

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

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()

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

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

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

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

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.

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

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.

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

A view kezelése

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

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

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()

Demók Az előbb elkészített: http://docs-origin.sencha.com/extjs/4.2.2/extjs- build/examples/app/simple/simple.html Asztal a böngészőben: http://docs.sencha.com/extjs/4.2.2/extjs- build/examples/desktop/desktop.html További példa programok: http://docs.sencha.com/extjs/4.2.2/#!/example

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

Kérdések ikarasz@outlook.com

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