Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Ext JS KÁRÁSZ ISTVÁN 2014 1. Natív JavaScript problémái  OOP megvalósítása nehézkes Konstruktorok Prototype  AJAX hívások bonyolultak  Cross-browser.

Hasonló előadás


Az előadások a következő témára: "Ext JS KÁRÁSZ ISTVÁN 2014 1. Natív JavaScript problémái  OOP megvalósítása nehézkes Konstruktorok Prototype  AJAX hívások bonyolultak  Cross-browser."— Előadás másolata:

1 Ext JS KÁRÁSZ ISTVÁN

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 2

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 jQueryYUI LibraryUnderscore.jsPrototype  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.) Backbone.jsAngularJSEmber.js Ext JS  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 DartCoffeeScript 3

4 Sencha Inc. (2007)  2010 június: jQTouch (jQuery plugin mobil eszközökhöz), Raphaël (Vektorgrafika) beolvad – Sencha LabsjQTouchRaphaël  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 4

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 Példák, demók 5

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 cmdsass  Példák, videók, közösség, részletes dokumentáció  Névterek, rengeteg osztály, átlátható hierarhia  Bővíthető 6

7 Hátrányok  Lassú 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 $ 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) 7

8 Történeti áttekintés  2007 eleje: 1.0 YUI-hoz készült add-on  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. 8

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

10 Alapok  Ext – globális singleton objektum 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() 10

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 11

12 Ext.Element  DOM elemeket reprezentálnak  Eseménykezelés 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() 12

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

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

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 15

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 16

17 MVC  Struktúra nem kötelező – javasolt Sencha CMD  Model 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. 17

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 18

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. 19

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 20

21 A view kezelése 21

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 22

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 23

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

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

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

27 Kérdések  27

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? 28


Letölteni ppt "Ext JS KÁRÁSZ ISTVÁN 2014 1. Natív JavaScript problémái  OOP megvalósítása nehézkes Konstruktorok Prototype  AJAX hívások bonyolultak  Cross-browser."

Hasonló előadás


Google Hirdetések