Мазмұны
- HTML-ді орнату
- Модельдер, дүкендер және сенім білдірілген адамдар
- Мұның бәрін біріктіру
- Іске қосу кезінде:
- Пайдаланушы мәзір пунктін түрткен кезде:
- Пайдаланушы нобайды түрткен кезде:
- Жаңа бейнелер
- Біз аяқтадық!
Бұл мақала веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал .net журналының 213 санында пайда болды.
Sencha Touch - жаңа буынға, сенсорлы құрылғыларға бағытталған кросс-платформалық кітапхана. Бұл дегеніміз, біз iOS және Android құрылғыларында отандық веб-қосымшаларды құру үшін алдыңғы қатарлы тәжірибені қолдана аламыз. Сонымен қатар олар WebKit-ке негізделген жұмыс үстелінде өте жақсы жұмыс істейді
браузерлер, Chrome және Safari.
Ең соңғы құрылысты sencha.com/products/touch/download сайтынан алуға болады. Құжаттар, мысалдар және қоғамдастық керемет, сондықтан оларды бетбелгіге қойыңыз. API құжаттары docs.sencha.com/touch/1-1/ сайтында орналасқан.
Сонымен, оның соншалықты ерекшелігі неде? Сенчаның артындағы адамдар (ExtJS негізінде) біз үшін барлық ауыр жұмыстарды жасады және сіздің бағдарламаңызды жобалауға және басқаруға мүмкіндік беретін бай және өте күшті құралдар жиынтығын жасады. Мүмкіндіктер:
1. Тақырыптарды, менюларды, поповерлерді, панельдерді және карусельдерді қамтитын қатты орналасу компоненттері
2. Ұялы телефонға арналып жасалған, соның ішінде түрту, екі рет түрту, сырғыту және қысу
3. Аппараттық жеделдетілген өтулер
4. Деректермен жұмыс жасайтын таңбалау жүйесі
Бұл сіздің деректер көзінен оңай жаңартылатын экрандармен қолданушыларға ұялы құрылғыда күтілетін барлық ауысулар мен өзара әрекеттесулерге ие қолданба тәрізді макеттерді оңай құра аласыз дегенді білдіреді. Бұл оқулық барысында сіз негізінен HTML-мен, CSS-ті және JavaScript-тің бірнеше жүз жолынсыз (түсініктемелермен бірге) сіздің iPad үшін әсерлі нәрсе жасай алатынын көресіз. Керемет емес пе?
Біз Vimeo-дің 'Staff Picks' арнасынан ең соңғы (немесе кездейсоқ) бейнелерді түсіретін және қолданушыларға карусельдегі бейнелердің осы парақтарын қарап өтіп, сүйікті бейнелерін поповерде көру үшін түртетін iPad қосымшасын жасаймыз. . Артқы жағында біз Sencha деректер дүкендерін және сенімді өкілдерін пайдаланамыз, сондықтан жаңарту өте қарапайым. Сонымен, біз деректерді жергілікті жерде сақтаймыз, осылайша күйді үнемдей аламыз. Бастайық ...
HTML-ді орнату
Бұл қарапайым болуы мүмкін емес. Біз бос нәрседен бастаймыз дене> тегіне JavaScript және CSS файлдарын қосыңыз, Sencha Touch және OAuth үшін бас>, содан кейін өзіміздің JavaScript және CSS қосымшаларымыз. Қарап көрейік:
! DOCTYPE html> html> head> title> Тек тағы біреуі / title> link rel = «stylesheet» href = «resources / css / sencha-touch.css» /> link rel = «stylesheet» href = «resources / css / jom.css «/> скрипт src =» src / js / sencha-touch.js «> / скрипт> сценарий src =» src / js / oauth / sha1.js «> / скрипт> скрипт src =» src / js / oauth / oauth.js «> / script> script src =» src / js / jom.js «> / script> / head> body> / body> / html>
Енді біз негізгі қолданбалы файлды бастауға дайынбыз. Sencha Touch өрт сөндіреді дайынДайын оқиғалар мен басқаларға арналған бетті орнату аяқталғаннан кейін. Біз жай ғана осы кодты қосамыз дайынДайын іс-шара.
Ext.setup ({tabletStartupScreen: ’Default-Landscape.png’, белгіше: ’appIcon256.png’, glossOnIcon: false, onReady: function () {// Біздің код осында өтеді ...};});
Сонымен, біздің қосымшамыз үшін өзін-өзі түсіндіретін бірнеше айнымалыларды орнатқаннан кейін, біз кодты құруға кірісе аламыз.
Алдымен біз модельді анықтаймыз және деректер үшін сақтаймыз, содан кейін көріністерді құрамыз, соңында бәрін қуаттау үшін Ajax-ті қамшылаймыз.
Модельдер, дүкендер және сенім білдірілген адамдар
Келіңіздер, бірнеше терминдерді анықтайық. Модельдер объект үшін сақтайтын ақпаратты сипаттайды (біздің жағдайда, бейнелер). Біз жеке деректер элементтерін модель даналарына түрлендіретін прокси арқылы деректерді аламыз. Бұл даналар дүкенде сақталады, бұл біздің көзқарастарымызды толықтырады.
Біріншіден, біз бейнеміздің өрістері мен әдістерін ұсына отырып, өз моделімізді сипаттаймыз:
// Біздің StoreExt.regModel-де сақталатын үлгіні орнатыңыз ('Бейне', {өрістер: ['id', 'қол жетімді', 'сипаттама', 'биіктік', 'thumbnail_medium', 'thumbnail_large', 'title ',' url ',' пайдаланушы аты ',' ен ',' қаралды '], markAsWatched: function () {var videoId = this.data.id; if (! isVideoWatched (videoId)) {localStorage.watched + = videoId + ',';} this.set ('қаралды', 'қаралды'); this.store.sync ();}});
Өрістер тікелей; біз оларды тікелей Vimeo API-дан аламыз. Біз қосымша екі өрісті қосамыз: қол жетімді, оның көмегімен біз пайдаланушыларға қандай бейнелердің мобильді нұсқалары бар екенін айта аламыз (және iPad-да бар) және қарады, олар көргендерін бақылау үшін. Дүкен мен прокси сәл күрделі.
// localstoragevar videoStore = new Ext.data.JsonStore ({storeId: 'videos', прокси: {id: 'video', модель: 'Video', тип: 'localstorage', оқырманға байланған проксиді қолданатын біздің JSON дүкеніміз : {type: 'json', root: 'video'}}, тыңдаушылар: {қосу: {fn: function (сақтау, жазбалар, индекс) {handleVideosAddedToStore (дүкен, жазбалар, индекс);}}, жүктеме: {fn: функция (сақтау, жазбалар, индекс) {handleVideosLoadedFromLocalStorage (сақтау, жазбалар, индекс);}}, түсінікті: {fn: function (дүкен, жазбалар) {handleVideosRemovedFromStore (сақтау, жазбалар);}}}});
Біз дүкенге идентификатор беріп, оның дереккөзі мен біздің дүкен арасында көпір болатын проксиді анықтаймыз:
1. түрі: localStorage: бұл деректер құрылғының HTML5 жергілікті жадымен синхрондалатынын білдіреді
2. модель: бейнелер: бұл біз бұрын анықтаған модель және проксидің даналарын жасайтын нәрсе
3. оқырман - бұл прокси қандай деректерді күтетінін және JSON объектісінің түбірін анықтайды.
Содан кейін біз тыңдаушыларды дүкенге деректер қашан қосылатындығын (біздің Ajax қоңырауынан), мәліметтер дүкенге жүктелгенде (бастап) қосамыз localStorage біздің прокси арқылы) және дүкенді тазалаған кезде. Осы тыңдаушылардың әрқайсысы тек қоңырау шалады updateCarousel, біз оны жақын арада аламыз.
Модельдер, дүкендер, сенім білдірілген адамдар және оқырмандар тіл табысуға ең қиын, сондықтан API құжаттамасындағы әр түрлі нұсқаларды оқып шыққан жөн. Бірақ бұл анықталған нәрселердің модель жағы. Орналасу компоненттеріне көшейік. Егер біз өз қосымшамызды қарапайым жалған кодпен жазатын болсақ, онда келесідей болар еді:
қаптама> тақырып> логотип> мәзір> / тақырып> карусель> бет1> бет2> бет3> бет4> / карусель> / қаптама>
Мен ішкі жағынан жұмыс жасағанды ұнатамын, сондықтан төрт парақ құрамыз (беттер саны төменде) біздің карусель үшін және оларды массивте сақтаңыз, біз кейін қол жеткізе аламыз:
// Carouselvar парақтары үшін беттер жасаңыз = []; for (var i = 0; inumberOfPages; i ++) {pages.push (жаңа Ext.Component ({id: 'page' + i, cls: 'page', tpl: ['tpl for = «.»>', 'div id = «түйіндеме {data.id}»>', 'img src = «{data.thumbnail_medium}» />','h3>{data.title}/ h3> ',' / div> ',' / tpl> ']}))}}
Әр параққа елестету арқылы идентификатор берілген бет1, 2 бет және тағы басқалар, және бірдей қиялы сынып бет.
Көңілді бөлігі - бұл тпл бөлім, онда біз әр бейне нобайы үшін HTML шаблонын жасаймыз. Сонымен, біз өз беттерімізді бірқатар бейнелермен толықтырған кезде, әр див бейненің идентификаторына ие болады, img src бейненің мәнін алады нобай_орта, h3 тақырып болады және т.с.с.
Әрі қарай біз карусель жасаймыз:
// carouselvar carousel = new Ext.Carousel жасаңыз ({id: 'carousel', элементтер: беттер, flex: 1, тыңдаушылар: {tap: {element: 'el', fn: function (evt, target) {showEmbeddedVideo ( evt, target);}, делегат: '. резюме'}}});
The заттар карусельдің біз бұрын анықтаған парақтары болады икемділік карусель экранның қанша бөлігін алуы керек екенін көрсетеді 1 барлық қол жетімді кеңістік.
Біз «түртіп алу» іс-шарасына тыңдармандарды қосамыз, бұл өте ұтымды делегат параметр. Бұл кран оқиғасы мен DOM элементін сыныппен соққан кезде ғана атылатынын білдіреді түйіндеме - бұл кейіннен «мақсат» аргументі ретінде қабылданады showEmbeddedVideo өңдеуші.
// Headervar header = new Ext.Panel ({dock: 'top', id: 'header', height: 185, html: 'h1> тағы біреуін жасаңыз / h1> ul id = «menu»> li id = «latest»> Latest / li> li id = «random»> Random / li> / ul> '});
Тақырыптың жалғыз ерекшелігі - док атрибут. Бұл тақырыптың жоғарғы жағына «қондырылатынын» және экранның қалған элементтерімен жылжымайтынын анықтайды.
// Қаптаманы жасаңыз (оның биіктігі тіркелген және айналдырғышы бар) var wrapper = new Ext.Panel ({fullscreen: true, layout: {type: 'vbox', align: 'stretch'}, items: [carousel], dockedItems: [header]});
Соңында, біз бәрін ұстап тұру үшін қаптаманың панелін жасаймыз. Назар аударарлық жайт орналасу оның ішіндегі элементтер бірінің үстіне бірін орналастырылатындығын білдіретін атрибут (vbox) және ол бүкіл экранды толтыру үшін созылған.
Элементтер мен қондырылған элементтер - бұл біз жоғарыда құрған компоненттер. Сонымен, модель анықталды және орналасу элементтері орнатылды: енді бізге кейбір функционалдылықтарды қосу керек.
Мұның бәрін біріктіру
Қолданбаның функционалды бөлігі, жалған кодты қолдана отырып, келесідей:
Іске қосу кезінде:
1. Бейнелерді жергілікті қоймадан дүкенге салыңыз
2. Карусельді жаңартыңыз
Пайдаланушы мәзір пунктін түрткен кезде:
3. Қосымша бейнелер алу үшін Ajax қоңырау шалыңыз
4. Оларды дүкенге қосып, жергілікті жадқа қайта синхрондаңыз
5. Карусельді жаңартыңыз
Пайдаланушы нобайды түрткен кезде:
6. Бейнені қалқымалы терезеде көрсетіңіз
7. Бейнені дүкенде және жергілікті қоймада көргендей етіп белгілеңіз
Қолданба іске қосылған кезде біз қоңырау шаламыз ішінде функциясы:
/ * INIT * / var init = function () {// Get күйі (’соңғы’ немесе ’кездейсоқ’) күй = getState (); егер (! Қоңырау) {қоңырау = күй; } // Мәзірді ағымдағы күйге орнатыңыз және handleretSelectedMenuItem (жай-күйі) түртіңіз; Ext.select ('li', false, 'menu'). On ({tap: handleMenuTap}); // Дүкенді жергілікті storagevideoStore ішінен жүктеңіз. .load (); // Бізде ең соңғы бейнелер болғанына көз жеткізіңіз (күй == 'ең соңғы') {getNewVideos ();}} ();
Пайдаланушы соңғы немесе кездейсоқ бейнелерді қарағанын тексергеннен кейін (және мәзірді сәйкесінше жаңартады), біз бейнелерді жүктейміз localStorage дүкенге. Бұл қоңырау шалу сияқты оңай videoStore.load ().
Содан кейін дүкен а жүктеме біз ұйымдастырған оқиға тыңдаушысымен бірге болған оқиға videoStore ертерек. Бұл іс-шараның тыңдаушылары негізінен шақырылды updateCarousel:
var updateCarousel = function (data) {// Карусельді startcarousel.setActiveItem (0, 'slide') күйіне қайтару; // messageloading.hide () жүктеуді жасыру;) // деректерді беттерге бөлу (var i = 0; inumberOfPages; i ++ ) {// Біздің мәліметтерімізді 4 бетке бөлу varvar page = pages [i]; var pageStart = i * numberOfVideosPerPage; var pageEnd = pageStart + numberOfVideosPerPage; // datavar pageData = data-дан алғашқы x бейнені (бетті) алыңыз. тілім (pageStart, pageEnd); // carouselpage.update (pageData) ішіндегі парақтарға осы парақты қосыңыз;}};
updateCarousel бірқатар бейнелерді қабылдайды. Біздің карусельдегі әр парақ үшін біз осы бейнелердің бір парағының бір бөлігін аламыз (pageData 12 бейнеден тұратын жиым болады) және оларды қоңырау арқылы параққа жүктеңіз page.update (pageData).
Жаңа бейнелер
Біз карусельдің беттерін анықтаған кезде шаблонды ( тпл атрибут), ол біз шақырған кезде қолданылады бет. жаңарту - әрбір бейне үшін pageData массив, див видео идентификаторымен құрылады, h3 тақырыппен және т.с.с.
Демек, пайдаланушы түрткен кезде соңғы немесе кездейсоқ біз шақыратын мәзір getNewVideos:
var getNewVideos = function () {var page = 1; егер (қоңырау == 'кездейсоқ') {// Vimeo қызметкерлерінің 40 парағында Vimeo парағын кездейсоқ етіп орнатыңыз = Math.floor (Math.random () * 39) + 2;} var apiUrl = 'http://vimeo.com/api/rest/v2';var параметрлері = {әдісі:' vimeo.channels.getVideos ', channel_id:' staffpicks ', per_page: numberOfVideosToDownload, бет : бет, full_response: 'шын', формат: 'jsonp', кері қоңырау: 'Ext.util.JSONP.callback'}; Ext.util.JSONP.request ({url: getUrlWithSignature (apiUrl, параметрлер), кері байланыс: function ( жауап) {handleNewVideos (жауап);}});};
Бұл өте қарапайым. Vimeo-дан персоналдың қандай парағын сұрауға болатынын шешкеннен кейін, біз Sencha-дің кіріктірілген функциясын пайдаланып JSONP қоңырау шаламыз. Қайта қоңырау шалу кезінде біз жағдайдың жақсы екенін тексереміз, содан кейін қоңырау шалыңыз ЖаңаБейнелер.
var handleNewVideos = function (response) {if (response.stat == 'ok') {videos = response.videos.video; // Ағымдағы videosvideoStore.removeAll () алып тастаңыз; // Жаңа модель даналарын жасайтын бейнелер арқылы айналысу даналары = []; үшін (var i = 0, j = videos.length; ij; i ++) {var video = videos [i]; var instansiya = Ext.ModelMgr.create ({id: video.id, description: video.description , биіктігі: video.height, қол жетімді: (video.urls.url.length> 1)? 'mobile': 'online', thumbnail_medium: video.thumbnails.thumbnail [1] ._ content, thumbnail_large: video.thumbnails.thumbnail [2] ._ мазмұны, атауы: video.title, пайдаланушы аты: video.owner.realname, ені: video.width, қаралды: isVideoWatched (video.id)? 'Қаралды': ''}, 'видео', видео. id); instansiyalar.push (инстанция);} // storevideoStore.add (даналар) ішіне жаңа элементтер кірістіру; // StatesaveState сақтау ();} басқа {alert ('Кешіріңіз, біз көбірек алу үшін Vimeo-ға жете алмадық videos.Кейінірек қайталап көріңіз ... '); setSelectedMenuItem (state); loading.hide ();}};
Vimeo-дан бейнелерді алған кезде біз үш нәрсені орындаймыз:
1. Бар бейнелерді дүкеннен алып тастаңыз: videoStore.removeAll ()
2. Бейнелерді қарап шығыңыз және олардың дүкенге дайын бейне моделін жасаңыз
3. Жаңа бейнелерді дүкенге қосыңыз: videoStore.add (даналар)
Бейнелерді жүктеген кезде есіңізде болсын localStorage дүкенге кіргенде, ол жүктеме ол шақырған оқиға updateCarousel? Дүкенге бейнелерді қосқанда да дәл осылай болады.
The қосу іс-шара тоқтатылды, бұл дүкенді синхрондайды (жаңа бейнелерімізді көшіреді) localStorage) және қоңыраулар updateCarousel.
Біз аяқтадық!
Менің достарым, бұл циклды аяқтайды. Іске қосылған кезде бағдарлама бейнелерді жүктейді localStorage және оларды карусельдің беттерінде көрсетеді, олар арқылы өтіп өтуге болады.
Мәзірді басу арқылы Ajax жаңа бейнелерге қоңырау шалады, осы бейнелерді дүкенге қосады, қайтадан синхрондайды localStorage содан кейін оларды қайтадан карусельде көрсетеді.
Біз бейнені қарау туралы қозғалған жоқпыз, бірақ бұл жоғарыда жүктеуге болатын бастапқы кодта. Кодпен ойнаңыз және не жасай алатыныңызды көріңіз. Сәттілік тілеймін!
Сіз App Store-дан жүктеу арқылы соңғы қолданбаны iPad даңқымен ойнай аласыз (‘тағы біреуін’ іздеңіз). Сізге ең таңдаулы Vimeo қысқаметражды фильмдерін қарау сағаттары ұнайды деп сенеміз. Жалғастыр, тағы біреуі ...
