İçerik
- HTML'yi kurma
- Modeller, mağazalar ve proxy'ler
- Hepsini bir araya getirmek
- Başlangıçta:
- Kullanıcı bir menü öğesine dokunduğunda:
- Kullanıcı bir küçük resme dokunduğunda:
- Yeni videolar
- Ve bitirdik!
Bu makale ilk olarak, web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 213. sayısında yayınlandı.
Sencha Touch, yeni nesil, dokunmatik cihazlara yönelik bir çapraz platform kitaplığıdır. Bu, iOS ve Android cihazlarda yerel hissi veren web uygulamaları oluşturmak için tüm bu yılların ön uç deneyimini kullanabileceğimiz anlamına geliyor. Ayrıca, masaüstü WebKit tabanlı bilgisayarınızda çok güzel çalışırlar
tarayıcılar, Chrome ve Safari.
En son yapıyı sencha.com/products/touch/download adresinden edinebilirsiniz. Belgeler, örnekler ve topluluk mükemmeldir, bu yüzden onları yer imlerine ekleyin. API belgeleri docs.sencha.com/touch/1-1/ adresindedir.
Peki onu bu kadar özel yapan nedir? Sencha'nın arkasındaki kişiler (ExtJS'ye dayalı) bizim için tüm zor işi yaptılar ve uygulamanızı tasarlamak ve kontrol etmek için zengin ve son derece güçlü bir araç seti yarattılar. Özellikler şunları içerir:
1. Başlıklar, menü çubukları, açılır pencereler, paneller ve atlı karıncalar dahil katı düzen bileşenleri
2. Dokunma, çift dokunma, kaydırma ve kıstırma gibi mobil cihazlar için oluşturulmuş özel etkinlikler
3. Donanım hızlandırmalı geçişler
4. İnanılmaz bir veri destekli şablonlama sistemi
Bu, veri kaynağınızdan kolayca güncellenen ekranlarla, kullanıcıların mobil cihazlarında bekledikleri tüm geçişlere ve etkileşimlere sahip uygulama benzeri düzenleri kolayca oluşturabileceğiniz anlamına gelir. Bu eğitim boyunca, temelde HTML olmadan, dağınık CSS ve birkaç yüz satır JavaScript (yorumlar dahil) kullanarak iPad'iniz için oldukça etkileyici bir şey oluşturabileceğimizi göreceksiniz. C'est cool, non?
Vimeo'nun sevimli 'Personel Seçimleri' kanalından en son (veya rastgele) videoları çeken bir iPad uygulaması oluşturacağız ve kullanıcıların bu video sayfalarını bir atlı karınca içinde kaydırmasını ve en sevdiklerini bir açılır pencerede izlemek için dokunmalarını sağlayan bir iPad uygulaması oluşturacağız. . Arka planda Sencha'nın veri depolarından ve proxy'lerinden yararlanacağımız için güncelleme yapmak son derece basittir. Son olarak, durumu kaydedebilmemiz için verileri yerel olarak depolayacağız. Başlayalım...
HTML'yi kurma
Bu daha basit olamazdı. Boş bir şeyle başlıyoruz gövde> etiketleyin, Sencha Touch ve OAuth için JavaScript ve CSS dosyalarını ekleyin. kafa>ve son olarak kendi JavaScript ve CSS uygulama dosyalarımız. Hadi bir bakalım:
! DOCTYPE html> html> head> title> Just One More / title> link rel = "stylesheet" href = "kaynaklar / css / sencha-touch.css" /> link rel = "stil sayfası" href = "kaynaklar / 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>
Artık ana başvuru dosyamızla başlamaya hazırız. Sencha Touch, bir hazır Dokunma olayları ve benzerleri için sayfanın ayarlanması tamamlandığında olay. Kodumuzu sadece bunun içine ekliyoruz hazır Etkinlik.
Ext.setup ({tabletStartupScreen: ’Default-Landscape.png’, icon: ’appIcon256.png’, glossOnIcon: false, onReady: function () {// Kodumuz buraya gelecek ...};});
Böylece, uygulamamız için kendinden açıklayıcı birkaç değişken belirledikten sonra, kodumuzu oluşturmaya başlayabiliriz.
Önce modeli tanımlayıp verilerimiz için depolayacağız, sonra görünümleri oluşturacağız ve son olarak hepsini güçlendirmek için biraz Ajax oluşturacağız.
Modeller, mağazalar ve proxy'ler
Bazı terimleri tanımlayalım. Modeller, bir nesne için sakladığımız bilgileri açıklar (bizim durumumuzda, videolar). Verilerimizi, bireysel veri öğelerini model örneklerine dönüştüren bir proxy aracılığıyla alırız. Bu örnekler daha sonra görüşlerimizi dolduran bir mağazada tutulur.
İlk olarak, bir videonun sahip olması gereken alanları ve yöntemleri sağlayarak modelimizi açıklıyoruz:
// StoreExt.regModel'imizde tutulacak modeli ayarlayın ('Video', {alanlar: ['id', 'available', 'description', 'height', 'thumbnail_medium', 'thumbnail_large', 'title ',' url ',' kullanıcı adı ',' genişlik ',' izlenen '], markAsWatched: function () {var videoId = this.data.id; if (! isVideoWatched (videoId)) {localStorage.watched + = videoId + ',';} this.set ('izlendi', 'izlendi'); this.store.sync ();}});
Alanlar basittir; bunları doğrudan Vimeo API'sinden alacağız. İki ekstra alan ekliyoruz: mevcuthangi videoların mobil sürümleri olduğunu (ve bu nedenle iPad'de mevcut olduğunu) kullanıcılara söyleyebileceğimiz ve izledi, izlediklerini takip etmek için. Mağaza ve proxy biraz daha karmaşıktır.
// localstoragevar videoStore = new Ext.data.JsonStore'a bağlı bir proxy kullanan JSON Mağazamız ({storeId: 'videos', proxy: {id: 'video', model: 'Video', type: 'localstorage', reader : {tür: 'json', kök: 'video'}}, dinleyiciler: {add: {fn: function (mağaza, kayıtlar, dizin) {handleVideosAddedToStore (mağaza, kayıtlar, dizin);}}, yükle: {fn: function (mağaza, kayıtlar, dizin) {handleVideosLoadedFromLocalStorage (mağaza, kayıtlar, dizin);}}, açık: {fn: function (mağaza, kayıtlar) {handleVideosRemovedFromStore (mağaza, kayıtlar);}}}});
Mağazaya bir kimlik veriyoruz ve veri kaynağımız ile mağazamız arasında bir köprü görevi gören proxy'sini tanımlıyoruz:
1. tür: localStorage: bu, verilerin cihazın HTML5 yerel depolama alanıyla senkronize edileceği anlamına gelir
2. model: videolar: Bu, daha önce tanımladığımız modeldir ve proxy'nin
3. okuyucu - bu, proxy'nin ne tür veriler beklediğini ve bir JSON nesnesi içindeki kökü belirtir.
Daha sonra depoya veri eklendiğinde (Ajax çağrımızdan), depoya veri yüklendiğinde (şuradan) dinleyiciler ekleriz. yerel depolama vekilimiz aracılığıyla) ve mağazayı ne zaman temizlediğimiz için. Bu dinleyici işlevlerinin her biri yalnızca updateCarousel, yakında ulaşacağız.
Modeller, mağazalar, proxy'ler ve okuyucular uzlaşmak için en zor olanlardır, bu nedenle API belgelerindeki farklı seçenekleri okumaya değer. Ancak tanımlanan şeylerin model tarafı budur. Düzen bileşenlerine geçelim. Uygulamamızı basit sözde kodla düzenleyecek olsaydık, şöyle görünürdü:
sarmalayıcı> başlık> logo> menü> / başlık> atlıkarınca> sayfa1> sayfa2> sayfa3> sayfa4> / carousel> / wrapper>
İçten dışa çalışmayı seviyorum, bu yüzden dört sayfayı oluşturacağız (sayfa sayısı atlıkarınca için) ve daha sonra erişebileceğimiz bir dizide saklayın:
// carouselvar sayfaları için sayfalar oluşturun = []; for (var i = 0; inumberOfPages; i ++) {pages.push (new Ext.Component ({id: 'page' + i, cls: 'page', tpl: ['tpl for = ".">', 'div id = "özet {data.id}">', 'img src = "{data.thumbnail_medium}" />','h3>{data.title}/ h3> ',' / div> ',' / tpl> ']}));}
Her sayfaya hayali olarak adlandırılmış bir kimlik verilir Sayfa 1, sayfa 2 ve benzerleri ve eşit derecede yaratıcı bir sınıf sayfa.
İşin eğlenceli kısmı tpl bölümünde, her video küçük resmi için bir HTML şablonu oluşturuyoruz. Bu nedenle, sayfalarımızı bir dizi videoyla güncellediğimizde, her div videonun kimliğine sahip olacak, img src ise videonun thumbnail_medium, h3 başlık olacak ve bu böyle devam edecek.
Ardından, atlı karıncayı oluşturuyoruz:
// Carouselvar carousel = new Ext.Carousel ({id: 'carousel', items: pages, flex: 1, listeners: {tap: {element: 'el', fn: function (evt, target) {showEmbeddedVideo ( evt, hedef);}, temsilci: '.summary'}}});
öğeler Atlıkarınca, daha önce tanımladığımız sayfalar olurken esnek atlı karıncanın ekranın ne kadarını kaplaması gerektiğini belirtir. 1 tüm kullanılabilir alan olmak.
Oldukça şık olanı kullanarak "dokunma" etkinliği için bir dinleyici ekliyoruz. temsilci parametre. Bu, tap etkinliğinin yalnızca sınıflı bir DOM öğesine vurduğumda tetiklendiği anlamına gelir özet - daha sonra "hedef" argümanı olarak bize aktarılacaktır. showEmbeddedVideo işleyici.
// headervar header = new Ext.Panel ({dock: 'top', id: 'header', height: 185, html: 'h1> Sadece bir tane daha / h1> ul id = "menu"> li id = oluşturun "en son"> En son / li> li id = "rastgele"> Rastgele / li> / ul> '});
Başlığın tek özel özelliği, rıhtım öznitelik. Bu, başlığın en üste "sabitleneceğini" ve diğer ekran öğeleriyle birlikte kaydırılmayacağını belirtir.
// Sarmalayıcıyı oluşturun (sabit yükseklik başlığına ve kaydırıcıya sahiptir) var wrapper = new Ext.Panel ({fullscreen: true, layout: {type: 'vbox', align: 'stretch'}, items: [carousel], dockedItems: [başlık]});
Son olarak, her şeyi tutacak bir sarmalayıcı paneli oluşturuyoruz. Notun Yerleşim öznitelik, içindeki öğelerin üst üste yerleştirildiğini belirtir (vbox) ve tüm ekranı dolduracak şekilde uzatılmış.
Öğeler ve yuvalanmış Öğeler, yukarıda oluşturduğumuz bileşenlerdir. Böylece modeli tanımladık ve düzen öğelerini ayarladık: şimdi sadece bazı işlevler eklememiz gerekiyor.
Hepsini bir araya getirmek
Yine sözde kod kullanan uygulamanın işlevsel kısmı şu şekildedir:
Başlangıçta:
1. Videoları yerel depolamadan mağazaya yükleyin
2. Atlı karıncayı güncelleyin
Kullanıcı bir menü öğesine dokunduğunda:
3. Daha fazla video almak için Ajax araması yapın
4. Bunları mağazaya ekleyin ve yerel depolama ile tekrar senkronize edin
5. Atlı karıncayı güncelleyin
Kullanıcı bir küçük resme dokunduğunda:
6. Videoyu açılır pencerede görüntüleyin
7. Videoyu mağazada ve yerel depoda izlendi olarak işaretleyin
Uygulama başladığında, içinde işlev:
/ * INIT * / var init = function () {// Durum ('en son' veya 'rastgele') durum = getState (); if (! Çağırıyor) {çağıran = durum; } // Menüyü geçerli duruma ayarlayın ve tap handlersetSelectedMenuItem (state); Ext.select ('li', false, 'menu'). On ({tap: handleMenuTap}); // Mağazayı yerel depolama deposundan yükleyin .load (); // En son videoları aldığımızdan emin olunif (state == 'latest') {getNewVideos ();}} ();
Kullanıcının en son videolara mı yoksa rastgele videolara mı baktığını kontrol ettikten (ve menüyü buna göre güncelledikten) sonra, yerel depolama mağazaya. Bu aramak kadar kolay videoStore.load ().
Mağaza daha sonra bir yük belirlediğimiz olay dinleyicisi ile sağladığımız etkinlik Video mağazası daha erken. Bu olay dinleyicisi esasen updateCarousel:
var updateCarousel = function (data) {// Atlı karıncayı startcarousel.setActiveItem (0, 'slide'); // Yüklemeyi gizle messageloading.hide (); // Verileri sayfalara böl (var i = 0; inumberOfPages; i ++ ) {// Verilerimizi 4 pagevar page = pages [i]; var pageStart = i * numberOfVideosPerPage; var pageEnd = pageStart + numberOfVideosPerPage; // Datavar pageData = data'dan ilk x videoyu (bir sayfa) alın. slice (pageStart, pageEnd); // Bu sayfayı carouselpage.update (pageData);}};
updateCarousel bir dizi videoyu çekiyor. Atlı karıncamızdaki her sayfa için bu videolardan sayfa boyutunda bir parça alacağız (pageData 12 videodan oluşan bir dizi olacak) ve bunları arayarak sayfaya yükleyin page.update (pageData).
Yeni videolar
Atlı karıncanın sayfalarını tanımladığımızda, bir şablon tanımlamıştık ( tpl özniteliği) çağırdığımızda kullanılır page.update - içindeki her video için pageData dizi, videonun kimliğiyle bir div, başlıkla bir h3 vb. oluşturulur.
Sonuç olarak, bir kullanıcı En son veya rastgele dediğimiz menü getNewVideos:
var getNewVideos = function () {var page = 1; if (çağrı == 'random') {// Vimeo'nun 40 sayfa Staff Pickspage = Math.floor (Math.random () * 39) + 2;} var apiUrl = 'http://vimeo.com/api/rest/v2';var parameters = {method:' vimeo.channels.getVideos ', channel_id:' staffpicks ', per_page: numberOfVideosToDownload, page : sayfa, full_response: 'true', format: 'jsonp', callback: 'Ext.util.JSONP.callback'}; Ext.util.JSONP.request ({url: getUrlWithSignature (apiUrl, parametreler), callback: function ( yanıt) {handleNewVideos (yanıt);}});};
Bu oldukça basittir. Vimeo'dan hangi Personel Seçimleri sayfasının talep edileceğine karar verdikten sonra, Sencha'nın yerleşik işlevini kullanarak bir JSONP çağrısı yaparız. Geri aramada durumun iyi olup olmadığını kontrol ediyoruz, sonra arıyoruz handleNewVideos.
var handleNewVideos = function (response) {if (response.stat == 'ok') {videos = response.videos.video; // Mevcut videosvideoStore.removeAll (); // Yeni Model instancesvar örnekleri oluşturan videolarda döngü yapın = []; for (var i = 0, j = videos.length; ij; i ++) {var video = videos [i]; var instance = Ext.ModelMgr.create ({id: video.id, description: video.description , yükseklik: video.height, mevcut: (video.urls.url.length> 1)? 'mobile': 'çevrimiçi', thumbnail_medium: video.thumbnails.thumbnail [1] ._ content, thumbnail_large: video.thumbnails.thumbnail [2] ._ içerik, başlık: video.title, kullanıcı adı: video.owner.realname, genişlik: video.width, izlenen: isVideoWatched (video.id)? 'Watched': ''}, 'Video', video. id); instances.push (örnek);} // storevideoStore.add'ye yeni öğeler ekleyin; // stateaveState ();} else {alert ('Üzgünüz, daha fazlasını almak için Vimeo'ya ulaşamadık videolar.Lütfen daha sonra tekrar deneyin ... '); setSelectedMenuItem (state); loading.hide ();}};
Vimeo'dan videolar aldığımızda üç şey yapıyoruz:
1. Mağazadaki mevcut videoları kaldırın: videoStore.removeAll ()
2. Videolar arasında dolaşın ve mağazaya hazır şekilde video model örneklerini oluşturun
3. Yeni videoları mağazaya ekleyin: videoStore.add (örnekler)
Şuradan videolar yüklediğimizi unutmayın: yerel depolama mağazaya girdiğinde, yük çağrıldığı olay updateCarousel? Mağazaya video eklediğimizde de aynısı olur.
Ekle mağazayı senkronize eden etkinlik tetiklendi (yeni videolarımızı şuraya kopyalar: yerel depolama) ve aramalar updateCarousel.
Ve bitirdik!
Ve bu, arkadaşlarım, döngüyü tamamlıyor. Uygulama, başlangıçta videolardan yükler. yerel depolama ve bunları kaydırabileceğiniz atlı karıncanın sayfalarında görüntüler.
Menüye dokunduğunuzda yeni videolar için bir Ajax çağrısı yapılır, bu videoları mağazaya ekler, yerel depolama daha sonra bunları tekrar atlı karıncada görüntüler.
Bir videoyu izlemeye değinmedik, ancak bu, yukarıda indirebileceğiniz kaynak kodunda. Kodla oynayın ve neler yaratabileceğinizi görün. İyi şanslar!
Son uygulama ile tüm iPad ihtişamıyla App Store'dan indirerek oynayabilirsiniz ('sadece bir tane daha' arayın). En seçkin Vimeo kısa filmlerini izleyerek saatlerce eğlenmenizi dileriz. Devam et, bir tane daha ...
