Съдържание
- Генерирайте и стартирайте демонстрационното приложение
- Пакетът данни
- Компонентите на изгледа
- Създаване на формуляри
- Изграждане на контролера
- Настройване на магазини и статични методи
Ако се интересувате да научите как да направите приложение, рамката Sencha Touch улеснява изграждането на страхотни мултиплатформени приложения с поддръжка на докосване. Ще го използваме, за да изградим „Имам ли нужда от моя чадър?“ - приложение, използващо информация за времето от http://api.worldweatheronline.com, за да определи дали имате нужда от споменатия чадър.
Можете да видите самото приложение тук, докато кодът може да бъде намерен в това GitHub репо: The решение-урок директория съдържа суров код, финал директорията на кода плюс шаблон на Sass. Освен това лакомства-урок директорията на репото съдържа файловете, от които ще се нуждаете, докато работите през урока.
Генерирайте и стартирайте демонстрационното приложение
Започнете, като създадете папка sencha някъде на вашия твърд диск. Изтеглете рамката Sencha Touch 2.2.1 и я извлечете в новосъздадената сенча папка. Сега създайте папката за приложението си. Обадих се на моя динму тъй като е по-кратък от „DoINeedMyUmbrella“, но зависи от вас.
Сега отворете своя команден ред (MS-DOS Prompt или Terminal), отидете до рамката Sencha framework (cd sencha / touch-2.2.x папка) и изпълнете следната команда, за да генерирате вашата структура на папки Sencha Touch MVC:
sencha генерира приложение-име Dinmu -path ../dinmu
Тази команда генерира пълната MVC структура на вашето приложение. Отнема пространство от имена Динму, за да добавите пред всичките си класове префикс. Прегледайте структурата на папката, която е създала.
Сега е време да стартирате вашия уеб сървър чрез командния ред, като използвате командата по-долу и да замените файловия път в края с пътя към вашия собствен сенча папка. (Ако предпочитате да използвате свой собствен уеб сървър на Apache, стартирайте го сами и пропуснете тази стъпка.) В Mac OS X може да ви трябват разрешения за изпълнение на командата: ако се сблъскате с грешки, разрешете го с Судо.
sencha fs web -p 80 start -map / path / to / sencha / folder /
Това ще стартира вашия вграден уеб сървър Jetty. Нуждаете се от отворен прозорец на CLI, за да поддържате сървъра работещ, така че има смисъл да отворите нов прозорец на CLI за следващата от нашите команди от командния ред.
Тествайте приложението: в модерен браузър стартирайте http: // localhost / dinmu. Трябва да видите демонстрационния интерфейс на приложението Sencha с панел от долния раздел и два слайда.
Пакетът данни
В следващите няколко стъпки ще генерирате модела, който ще определи вашите данни. Има няколко настройки, които искате да запазите в приложението си: id, град, държава, единици и геолокация. Ще определите тези настройки за данни като полета на модела. Sencha Cmd може да скелира този модел вместо вас. Изпълнете следната команда от динму папка в командния ред:
sencha генерира модел-име Настройка –полета id, град, държава, единици, geo: boolean
Тази команда генерира модела за вашето приложение. Взима името на класа Настройка и един низ с всички имена на полета за дефиниране на всички различни полета. Прегледайте структурата на папката си отново.
Отворете app / model / Setting.js с вашия редактор. Забележете пространството от имена Динму. модел. Настройка е равно на app / model / Setting.js. Това е вашето внедряване на модела за настройка: Sencha Cmd определи клас на модел за настройка за вас. Той разширява изпълнението на модел от рамката Sencha Touch, Външни данни. Модели съдържа всички полета и типове полета.
The документ за самоличност полето ще дефинира идентификатори за всеки модел запис във вашето приложение. За да го оставите да се държи като уникален идентификатор, ще трябва да го конфигурирате. Преди полета масив, конфигурирайте idProperty и идентификатор:
idProperty: ‘id’, идентификатор: ‘uuid’,
Логиките за тези уникални идентификатори са в клас Sencha, който трябва да ‘импортираме’ в нашето приложение. Можем да използваме a изисква: има нужда от класа Ext.data.identifier.Uuid.
изисква: [’Ext.data.identifier.Uuid’],
Следващата стъпка е да създадем някои проверки за нашия модел, като създадем валидации масив след полета масив. Това съдържа два обекта за проверка, за да се провери дали данните за тези полета са налични:
валидации: [{тип: ’присъствие’, поле: ’град’, съобщение: „Моля, посочете град“. }, {тип: ’присъствие’, поле: ‘държава’, съобщение: „Моля, посочете държава“. }],
Тъй като искаме да запазим данните за локалните настройки в устройството, последната стъпка е да добавим клиентски прокси. Ние ще използваме местно съхранение за това. The местно съхранение proxy ще се увери, че всички данни ще останат в браузъра местно съхранение. Определете прокси обекта директно след масива за проверка:
прокси: {type: ’localstorage’, id: ‘weathersettings’}
Компонентите на изгледа
Стандартният интерфейс на панела с раздели, който Sencha Cmd генерира, изглежда добре, но имам ли нужда от моя чадър? се нуждае от въртележка. Отворете app / view / Main.js във вашия IDE или текстов редактор: Dinmu.view.Основна се простира от сенча докосване Външна таб. Панел клас. Има tabBarPosition за добавяне на разделите към дъното на екрана.
Нямаме нужда от това, така че можем да премахнем tabBarPosition: отдолу и променете разширението на Външна въртележка, за да се разшири от сенча докосване Въртележка клас. Отворете браузъра си и стартирайте http: // localhost / dinmu. Ще видите демонстрационното приложение Sencha, като интерфейсът на раздела е заменен с въртележка. Можете да плъзгате изгледи хоризонтално.
Нека премахнем още компоненти по подразбиране. Няма да имате нужда от демонстрационния видеоклип, така че премахнете Външно видео от изисква масив. Изпразнете елементи масив, тъй като ще го заменим за два нови елемента. Първият обект на елемент (контейнер по подразбиране) съдържа само html Имот. Това може да бъде зададено като текст на заместител (Настройки), за да знаете, че можете да го кодирате по-късно. Обектът на втория елемент има свойство itemId: ‘mainview’ и а cls свойство (за стилизиране), зададено на стойността textview. Трябва да добавите свойство посока, за да зададете посоката на въртележката вертикална:
Ext.define ('Dinmu.view.Main', {extension: 'Ext.Carousel', xtype: 'main', изисква: ['Ext.TitleBar',], config: {direction: 'vertical', items: [ {html: 'Настройки'}, {itemId: 'mainview', cls: 'textview'}]}});
Разгледано в браузър, приложението изглежда основно. Нека добавим връх заглавна лента и дъно лента с инструменти. Преди елемента с Настройки placeholder, създайте нов обект:
{xtype: ‘titlebar’, cls: ’title’, докиран: ‘top’, title: ‘Имам ли нужда от моя чадър?’},
Нека направим същото за долната лента с инструменти: xtype е лента с инструменти не заглавна лента, а вместо заглавие имот, който ще използваме html свойство, зададено на избран от нас низ за авторски права, с ui свойство, зададено на светлина. Добавяне Външна лента с инструменти към изисква масив в горната част на файла, така че правилният клас на рамка се зарежда в паметта.
{xtype: ‘лента с инструменти’, cls: ‘долен колонтитул’, ui: ’светлина’, закачен: ‘отдолу’, html: ’span> Осъществено от © Sencha Touch / span>’},
След това ще създадем няколко бутона в горната лента на заглавието. Под заглавие, добавете масив, съдържащ обратно бутон, който ще се покаже, когато сте на екрана с настройки, и a настройки , за да се покаже на екрана по подразбиране. Не е необходимо да задавате xtype да се бутон, тъй като елементите по подразбиране на Ext.TitleBar са бутони. The обратно бутонът е скрит по подразбиране и е подравнен вляво в лентата на заглавието. The настройки бутонът показва икона на зъбно колело за настройки; той е подравнен вдясно:
елементи: [{cls: 'back', hidden: true, ui: 'back', action: 'back', align: 'left', text: 'back'}, {iconCls: 'settings', action: 'settings ', ui:' plain ', align:' right '}]
Отворете браузъра си и отново стартирайте: http: // localhost / dinmu. Трябва да видите бутон със зъбно колело в десния ъгъл на Ext.TitleBar.
Създаване на формуляри
Сега можем да започнем със създаването на формуляр. Придвижете се до динму в командния ред и изпълнете следното, за да генерирате вашата форма Sencha Touch:
sencha генерира форма-име SettingsView -полета geo: превключване, единици: изберете, град, държава
Прегледайте класа на формуляра, който е бил скеле. Отворете app / view / SettingsView.js. The Dinmu.view.SettingsView клас има xtype настроен на настройкиviewview. Можете да присвоите персонализирани класове на масиви с елементи с xtype Имот. Нека го направим сега.
Отворете Dinmu.view.Основна (app / view / Main.js) и намерете елемента за настройки във вашия код. По подразбиране, ако не го посочите xtype, е настроен на контейнер. Ще трябва да се обърнете към новото xtype, настройкиviewview, така че добавете xtype: ‘settingsview’ към кода. Низът на заместител вече не е необходим: премахнете html: настройки Имот. Не забравяйте да добавите Dinmu.view.SettingsView към масива изисква.
За да изглежда по-добре формата, нека добавим a набор от полета да се Външна форма. Панел. Това съдържа четирите нови полета и Изпращане бутон. Полето ще бъде дъщерно на formpanel, и има свои собствени деца: полетата на формуляра и бутона.
Обратно в SettingsView.js, създайте втори масив от елементи в конфиг обект (след заглавие свойство.) Вложете масива с нови елементи като дете. Масивът родителски елементи съдържа един fieldset xtype, със заглавие (Твоето местоположение) и ред с инструкции; дъщерният масив съдържа всички полета и бутона. Кодът трябва да изглежда така:
Ext.define ('Dinmu.view.SettingsView', {extension: 'Ext.form.Panel', xtype: 'settingsview', config: {items: [{xtype: 'fieldset', title: 'Вашето местоположение', инструкции : "В случай, че не искате приложението да открива вашето местоположение, можете предварително да попълните града и държавата.", Items: [// полета за формуляри тук]}]}});
Отворете браузъра си и стартирайте http: // localhost / dinmu. Ще видите, че полето за избор на единица няма стойности. Нека добавим някои стойности към единици selectfield. Създайте масив с опции с два обекта с текст Целзий и Фаренхайт, и стойности ° С и е. Етикетът ГЕО в превключващо поле има малко смисъл. Променете го на Откриване на местоположението? Тъй като текстът на етикета сега заема много повече място, ние ще зададем labelWidth да се 55%. Задайте стойността на гео полето на стойност: ‘1’ за да активирате геолокацията по подразбиране. Променете етикетите на всички останали полета с малки букви и деактивирайте полетата за град и държава, като добавите инвалиди: вярно към двете полета. Текстът на бутона трябва да бъде Обнови вместо Изпращане. Променете това в бутон компонент. Добави марж със стойността 10 5. Добавете действие свойство към бутона и го задайте на опресняване. По този начин можем да се позовем на бутона по-късно.
{xtype: ‘бутон’, ui: ‘потвърди’, поле: ’10 5 ’, действие:‘ опресняване ’, текст:‘ Опресняване ’}
Може да забележите, че конзолата извежда някои предупреждения. The Външно зареждане, механизмът, който зарежда всички класове на Sencha Touch в правилния ред в паметта, трябва да зареди класовете, които се използват за полетата на формуляра. Създавам изисква масив (над конфиг обект) и му присвоява следните низове:
изисква: [’Ext.form.FieldSet’, ‘Ext.field.Toggle’, ‘Ext.field.Select’, ‘Ext.field.Text’, ‘Ext.Button’],
Интерфейсът е завършен. Но какво ще кажете за основния изглед? Динамично ще попълвате тази страница с данни; нека започнем със създаването на контролер.
Изграждане на контролера
Контролерът ще бъде лепилото между модела на настройките (данните на приложението) и изгледа с настройки. Той ще съдържа препратки към всички компоненти на изгледа и ще изпраща неговите събития. Придвижете се до динму папка и изпълнете следната команда:
sencha генерира контролер Main
Тази команда генерира Основна контролер. Отворете app / controller / Main.js: ще видите контролер с празни препратки (референции) и контролни обекти.
След това нека създадем препратки към всички компоненти на изгледа: главен, настройки изглед, заглавна лента, настройки и обратно бутони и до настройките форма полета и опресняване бутон. Селекторите са малко CSS-подобни. Вашият код може да изглежда така:
refs: {mainView: 'main', settingsView: 'settingsview', btnSettings: 'main button [action = settings]', btnRefresh: 'settingsview button [action = refresh]', btnBack: 'main button [action = back]' , toggleGeo: 'settingsview togglefield', fieldCity: 'settingsview textfield [name = city]', fieldCountry: 'settingsview textfield [name = country]'},
Сега можете да добавите контролите:
control: {'btnRefresh': {tap: 'onRefresh'}, 'btnSettings': {tap: 'onSettingsBtnTap'}, 'btnBack': {tap: 'onBackBtnTap'}, 'toggleGeo': {change: 'onToggle'} , 'mainView': {activeitemchange: 'onCarouselChange'}}
Преди да тествате браузъра тези събития, трябва да закачите контролера app.js. Отворете app.js, създавам контролери масив под изисква масив и предайте в низа „Основно“, картографиране на Основна контролер към app / controller / Main.js файл:
контролери: [’Main’],
Сега ще добавим някои логики. Върнете се в Динму.контролер и добавете функциите, които съм написал за вас в лакомства-урок директория в репозитория на GitHub. Можеш да ги намериш в functions.txt.
Настройване на магазини и статични методи
Магазините капсулират клиентски кеш от обекти на модел. Магазините също могат да имат прокси, а също така предоставят функции за сортиране, филтриране, групиране и заявки за екземплярите на модела (записи), съдържащи се в него.
Нашето приложение се нуждае от магазин, за да запази всички потребителски настройки. За съжаление не можете да генерирате магазини с Sencha Cmd. Вместо това нека създадем нов файл в приложение / магазин папка, наречена Settings.js. В него ще определим нов клас, Dinmu.store. Настройки: този клас разширява всички методи и свойства от Ext.data.Store клас. В конфиг обект, ще създадем свойство, наречено модел. Той трябва да се свърже с модела за настройка. Магазинът за настройки също трябва да се зареди автоматично:
Ext.define ('Dinmu.store.Settings', {extension: 'Ext.data.Store', изисква: ['Dinmu.model.Setting'], config: {model: 'Dinmu.model.Setting', autoLoad: вярно } });
Отворете app / controller / Main.js. В конфиг обект, създайте a магазини масив и добавете Dinmu.store. Настройки съхранявайте към него:
магазини: „Dinmu.store.Settings“,
Понякога е хубаво да настроите бизнес логиката си извън MVC папките. В папката с приложения създайте папка, наречена utils. В него създайте файл с име Functions.jsи дефинирайте клас, наречен Dinmu.utils.Функции. Това има свойство, сингълтон, настроен на вярно. Сега вашият клас е единичен: не можете да създавате никакви негови екземпляри, но можете да стартирате статичните методи отвсякъде във вашия код:
Ext.define (’Dinmu.utils.Functions’, {singleton: true, // статични методи тук});
Добавяне Dinmu.utils.Функции към изисква масив от app.js. Сега добавете някои статични функции. Отвори functions.txt фрагмент от лакомства-урок директория на GitHub repo и копирайте всички функции в app / utils / Functions.js файл.
Фрагментът съдържа функциите, от които се нуждаете за искане на данни за времето от http://api.worldweatheronline.com. Ако предпочитате да използвате своя API_KEY, можете да го редактирате върху Functions.js, като промените низа за API_KEY Имот. Той също така съдържа логики за заявяване на геолокация на устройството и предварително попълване на шаблона в основния изглед (коментирах текста за вас).
За да тествате логиките, отворете Chrome DevTools, превключете към раздела Конзола и въведете Dinmu.utils.Functions.getWeather (‘Амстердам’). Приложението трябва да върне метеорологичен обект за Амстердам и да покаже малко текст в основния изглед. Приложението е завършено! Отворете браузъра си и стартирайте http: // localhost / dinmu отново.
Думи: Лий Бунстра
Тази статия първоначално се появи в брой 247 на списанието.
