Obsah
- Nastavení HTML
- Modely, obchody a proxy
- Vázání vše dohromady
- Na začátku:
- Když uživatel klepne na položku nabídky:
- Když uživatel klepne na miniaturu:
- Nová videa
- A máme hotovo!
Tento článek se původně objevil v čísle 213 časopisu .net - světově nejprodávanějšího časopisu pro webové designéry a vývojáře.
Sencha Touch je multiplatformní knihovna zaměřená na zařízení dotykové generace nové generace. To znamená, že můžeme všechny ty roky front-endových zkušeností využít k vytváření nativních webových aplikací na zařízeních iOS a Android. Navíc budou na vašem desktopu založeném na platformě WebKit běhat
prohlížeče, Chrome a Safari.
Nejnovější verzi můžete získat na adrese sencha.com/products/touch/download. Dokumentace, příklady a komunita jsou vynikající, takže si je přidejte do záložek. Dokumenty API jsou na docs.sencha.com/touch/1-1/.
Čím je tedy tak výjimečný? Lidé za Senchou (založenou na ExtJS) za nás udělali veškerou tvrdou práci a vytvořili bohatou a extrémně výkonnou sadu nástrojů, pomocí kterých můžete navrhnout a ovládat vaši aplikaci. Mezi funkce patří:
1. Pevné komponenty rozvržení včetně záhlaví, nabídek, vyskakovacích oken, panelů a karuselů
2. Vlastní události vytvořené pro mobilní zařízení, včetně klepnutí, dvojitého klepnutí, přejetí prstem a sevření
3. Hardwarově akcelerované přechody
4. Neuvěřitelný datový systém šablon
To znamená, že můžete snadno vytvářet rozložení podobná aplikaci, která mají všechny přechody a interakce, které uživatelé očekávají na jejich mobilním zařízení, s obrazovkami, které se snadno aktualizují z vašeho zdroje dat. V průběhu tohoto tutoriálu uvidíte, že s v podstatě žádným HTML, roztříštěním CSS a několika stovkami řádků JavaScriptu (včetně komentářů) můžeme vytvořit něco docela působivého pro váš iPad. C'est cool, ne?
Chystáme se vytvořit aplikaci pro iPad, která stahuje nejnovější (nebo náhodná) videa z krásného kanálu Vimeo „Staff Picks“ a umožňuje uživatelům procházet tyto stránky videí v kolotoči a klepnutím sledovat jejich oblíbená videa ve vyskakovacím okně . Na pozadí využijeme datové úložiště a proxy společnosti Sencha, takže aktualizace jsou mrtvé jednoduché. A konečně budeme ukládat data lokálně, abychom mohli uložit stav. Začněme...
Nastavení HTML
To už nemůže být jednodušší. Začínáme s prázdnou tělo> tag, přidejte soubory JavaScript a CSS pro Sencha Touch a OAuth do hlava>a nakonec naše vlastní soubory aplikací JavaScriptu a CSS. Podívejme se:
! DOCTYPE html> html> head> title> Just One More / title> link rel = "stylesheet" href = "resources / css / sencha-touch.css" /> link rel = "stylesheet" href = "resources / css / jom.css "/> script src =" src / js / sencha-touch.js "> / script> script src =" src / js / oauth / sha1.js "> / script> script src =" src / js / oauth / oauth.js "> / script> script src =" src / js / jom.js "> / script> / head> body> / body> / html>
Nyní jsme připraveni začít s naším hlavním souborem aplikace. Sencha Touch vystřelí a připraven po dokončení nastavení stránky pro dotykové události apod. Jednoduše do toho přidáme náš kód připraven událost.
Ext.setup ({tabletStartupScreen: 'Default-Landscape.png', ikona: 'appIcon256.png', glossOnIcon: false, onReady: function () {// Náš kód přejde sem ...};});
Takže po nastavení několika vysvětlujících proměnných pro naši aplikaci můžeme začít budovat náš kód.
Nejprve definujeme model a uložíme naše data, poté vytvoříme pohledy a nakonec vybijeme nějaký Ajax, který to všechno napájí.
Modely, obchody a proxy
Pojďme definovat některé pojmy. Modely popisují informace, které pro objekt uchováváme (v našem případě videa). Načítáme svá data prostřednictvím serveru proxy, který převádí jednotlivé datové položky na instance modelu. Tyto instance jsou poté uchovávány v obchodě, který vyplňuje naše názory.
Nejprve popíšeme náš model a poskytneme pole a metody, které by video mělo mít:
// Nastavte model, který bude zachován v našem StoreExt.regModel ('Video', {fields: ['id', 'available', 'description', 'height', 'thumbnail_medium', 'thumbnail_large', 'title ',' url ',' uživatelské jméno ',' šířka ',' sledováno '], markAsWatched: function () {var videoId = this.data.id; if (! isVideoWatched (videoId)) {localStorage.watched + = videoId + ',';} this.set ('sledoval', 'sledoval'); this.store.sync ();}});
Pole jsou přímočará; získáme je přímo z rozhraní Vimeo API. Přidáme dvě další pole: k dispozici, pomocí kterých můžeme uživatelům sdělit, která videa mají mobilní verze (a jsou tak k dispozici na iPadu), a pozorovala, aby sledovali, na co se dívali. Obchod a proxy jsou trochu složitější.
// Náš obchod JSON, který používá proxy vázaný na localstoragevar videoStore = nový Ext.data.JsonStore ({storeId: 'videos', proxy: {id: 'video', model: 'Video', typ: 'localstorage', čtečka : {type: 'json', root: 'video'}}, posluchači: {add: {fn: function (store, records, index) {handleVideosAddedToStore (store, records, index);}}, load: {fn: function (store, records, index) {handleVideosLoadedFromLocalStorage (store, records, index);}}, clear: {fn: function (store, records) {handleVideosRemovedFromStore (store, records);}}}});
Dát obchodu ID a definovat jeho proxy, který funguje jako most mezi naším zdrojem dat a naším obchodem:
1. typ: místní úložiště: to znamená, že data budou synchronizována s místním úložištěm HTML5 zařízení
2. model: videa: toto je model, který jsme definovali dříve, a je to, co proxy vytvoří instance
3. čtenář - toto určuje, jaký druh dat proxy očekává a kořen v objektu JSON.
Poté připojíme posluchače, když jsou do obchodu přidána data (z našeho volání Ajaxu), když jsou data načtena do obchodu (z místní úložiště prostřednictvím našeho zástupce), a když vyklidíme obchod. Každá z těchto funkcí posluchače právě volá updateCarousel, ke kterému se brzy dostaneme.
Modely, obchody, servery proxy a čtečky jsou nejsložitější, s nimiž se můžete vyrovnat, takže stojí za to přečíst si různé možnosti v dokumentaci API. Ale to je modelová stránka definovaných věcí. Pojďme k komponentám rozložení. Pokud bychom měli rozložit naši aplikaci do jednoduchého pseudokódu, vypadalo by to takto:
wrapper> header> logo> menu> / header> carousel> page1> page2> page3> page4> / carousel> / wrapper>
Rád pracuji zevnitř ven, takže vytvoříme čtyři stránky (počet stran níže) pro náš kolotoč a udržujte je v poli, ke kterému máme přístup později:
// Vytváření stránek pro karuselvar stránky = []; pro (var i = 0; inumberOfPages; i ++) {pages.push (new Ext.Component ({id: 'page' + i, cls: 'page', tpl: ['tpl for = ".">', 'div id = "summary {data.id}">', 'img src = "{data.thumbnail_medium}" />','h3>{data.title}/ h3> ',' / div> ',' / tpl> ']})));}
Každá stránka má nápaditě pojmenované id Strana 1, stránka 2 a tak dále a stejně nápaditá třída strana.
Zábavná část je tpl sekce, kde pro každou miniaturu videa vytvoříme šablonu HTML. Když tedy aktualizujeme naše stránky řadou videí, každá div bude mít ID videa, img src získá hodnotu videa thumbnail_medium, h3 bude název atd.
Dále vytvoříme karusel:
// Vytvořte carouselvar carousel = new Ext.Carousel ({id: 'carousel', items: pages, flex: 1, listeners: {tap: {element: 'el', fn: function (evt, target) {showEmbeddedVideo ( evt, target);}, delegát: '.summary'}}});
The položky karuselu budou stránky, které jsme definovali dříve flex určuje, s jakou část obrazovky by měl kolotoč zabírat 1 je veškerý dostupný prostor.
Přidali jsme posluchače události „klepnutí“, přičemž jsme využili poměrně šikovnou akci delegát parametr. To znamená, že událost klepnutí se aktivuje, pouze když narazím na prvek DOM pomocí třídy souhrn - který bude následně předán jako „cílový“ argument našemu showEmbeddedVideo psovod.
// Vytvořte headervar header = new Ext.Panel ({dock: 'top', id: 'header', height: 185, html: 'h1> Ještě jeden další / h1> ul id = "menu"> li id = "latest"> Latest / li> li id = "random"> Random / li> / ul> '});
Jedinou speciální funkcí záhlaví je dok atribut. To určuje, že záhlaví bude „ukotveno“ nahoru a nebude se posouvat se zbytkem prvků obrazovky.
// Vytvořte obálku (která má záhlaví a scroller s pevnou výškou) var wrapper = new Ext.Panel ({fullscreen: true, layout: {type: 'vbox', align: 'stretch'}, items: [carousel], dockedItems: [záhlaví]});
Nakonec vytvoříme obalový panel, který pojme vše. Za zmínku stojí rozložení atribut, který určuje, že prvky v něm jsou rozloženy jeden na druhého (vbox) a že je natažený tak, aby vyplnil celou obrazovku.
Položky a dockedItems jsou komponenty, které jsme vytvořili výše. Takže máme definovaný model a nastaveny prvky rozvržení: nyní stačí přidat nějaké funkce.
Vázání vše dohromady
Funkční část aplikace, opět pomocí pseudokódu, vypadá takto:
Na začátku:
1. Načtěte videa z místního úložiště do obchodu
2. Aktualizujte karusel
Když uživatel klepne na položku nabídky:
3. Zavolejte Ajax a získejte další videa
4. Přidejte je do úložiště a synchronizujte je zpět do místního úložiště
5. Aktualizujte karusel
Když uživatel klepne na miniaturu:
6. Zobrazte video ve vyskakovacím okně
7. Označte video jako sledované v obchodě a místním úložišti
Když se aplikace spustí, voláme inic funkce:
/ * INIT * / var init = function () {// Get state ('latest' or 'random') state = getState (); if (! Calling) {calling = state; } // Nastavit nabídku do aktuálního stavu a přidat tap handlersetSelectedMenuItem (state); Ext.select ('li', false, 'menu'). On ({tap: handleMenuTap}); // Načíst obchod z místního storagevideoStore .load (); // Ujistěte se, že máme nejnovější videaif (state == 'latest') {getNewVideos ();}} ();
Po kontrole, zda se uživatel naposledy díval na nejnovější nebo náhodná videa (a odpovídajícím způsobem aktualizoval nabídku), načteme videa z místní úložiště do obchodu. To je stejně snadné jako volání videoStore.load ().
Obchod poté vystřelí a zatížení událost, o kterou jsme se postarali pomocí posluchače událostí, na který jsme se vydali video obchod dříve. Tento posluchač událostí v podstatě volal updateCarousel:
var updateCarousel = function (data) {// Přesunout karusel zpět na startcarousel.setActiveItem (0, 'slide'); // Skrýt načítání messageloading.hide (); // Rozdělit data na stránky pro (var i = 0; inumberOfPages; i ++ ) {// Rozdělte naše data na 4 stránky var stránka = stránky [i]; var pageStart = i * numberOfVideosPerPage; var pageEnd = pageStart + numberOfVideosPerPage; // Získejte prvních x videí (stránku) z datavaru pageData = data. slice (pageStart, pageEnd); // Přidat tuto stránku na stránky v carouselpage.update (pageData);}};
updateCarousel přijímá řadu videí. Pro každou stránku v našem kolotoči popadneme část těchto videí o velikosti stránky (pageData bude pole 12 videí) a načtěte je na stránku voláním page.update (pageData).
Nová videa
Když jsme definovali stránky karuselu, definovali jsme šablonu ( tpl atribut), který se používá, když voláme page.update - pro každé video v pageData pole, div je vytvořen s ID videa, h3 s názvem a tak dále.
V důsledku toho, když uživatel klepne nejnovější nebo náhodně v menu, které nazýváme getNewVideos:
var getNewVideos = function () {var page = 1; if (calling == 'random') {// Nastavit stránku na náhodnou na 40 stránkách Vimeo Staff Pickspage = Math.floor (Math.random () * 39) + 2;} var apiUrl = 'http://vimeo.com/api/rest/v2';var parametry = {metoda:' vimeo.channels.getVideos ', channel_id:' staffpicks ', per_page: numberOfVideosToDownload, stránka : page, full_response: 'true', format: 'jsonp', callback: 'Ext.util.JSONP.callback'}; Ext.util.JSONP.request ({url: getUrlWithSignature (apiUrl, parametry), zpětné volání: funkce ( response) {handleNewVideos (response);}});};
To je celkem jednoduché. Po rozhodnutí, kterou stránku Staff Picks požadovat od Vimeo, provedeme volání JSONP pomocí vestavěné funkce Sencha. Při zpětném volání zkontrolujeme, zda je stav v pořádku, poté zavoláme handleNewVideos.
var handleNewVideos = function (response) {if (response.stat == 'ok') {videos = response.videos.video; // Odebere aktuální videosvideoStore.removeAll (); // Procházejte videa vytvářením nových instancí modelu var instances = []; for (var i = 0, j = videos.length; ij; i ++) {var video = videos [i]; var instance = Ext.ModelMgr.create ({id: video.id, description: video.description , výška: video.height, k dispozici: (video.urls.url.length> 1)? 'mobile': 'online', thumbnail_medium: video.thumbnails.thumbnail [1] ._ obsah, thumbnail_large: video.thumbnails.thumbnail [2] ._ obsah, název: video.title, uživatelské jméno: video.owner.realname, šířka: video.width, sledováno: isVideoWatched (video.id)? 'Sledováno': ''}, 'Video', video. id); instances.push (instance);} // Vložit nové položky do storevideoStore.add (instance); // Uložit stavyaveState ();} else {upozornění ('Promiň, nemohli jsme dosáhnout Vimeo, abychom získali více videa. Zkuste to prosím znovu později ... '); setSelectedMenuItem (stát); loading.hide ();}};
Když dostaneme videa zpět z Vimeo, uděláme tři věci:
1. Odeberte stávající videa z obchodu: videoStore.removeAll ()
2. Prohlédněte si videa a vytvořte z nich instance video modelů připravené do obchodu
3. Přidejte nová videa do obchodu: videoStore.add (instance)
Pamatujte si, že když jsme načítali videa z místní úložiště do obchodu, vystřelil zatížení událost, ze které volala updateCarousel? Totéž se zde děje, když přidáváme videa do obchodu.
The přidat událost je aktivována, což synchronizuje obchod (zkopíruje naše nová videa do místní úložiště) a volání updateCarousel.
A máme hotovo!
A to, moji přátelé, završuje smyčku. Při spuštění aplikace načte videa z místní úložiště a zobrazí je na stránkách karuselu, kterými můžete přejet prstem.
Klepnutím na nabídku vyvolá Ajax nová videa, přidá tato videa do obchodu, synchronizuje zpět místní úložiště poté je znovu zobrazí v kolotoči.
Sledování videa jsme se nedotkli, ale toto je ve zdrojovém kódu, který si můžete stáhnout výše. Hrajte si s kódem a podívejte se, co můžete vytvořit. Hodně štěstí!
S finální aplikací si můžete zahrát v celé své kráse iPadu stažením z App Store (vyhledejte „jen jednu další“). Doufáme, že si užijete hodiny sledování nejvybranějších krátkých filmů Vimeo. Pokračujte, ještě jeden ...
