Первые шаги в Sencha Touch

Хотите разрабатывать мобильные приложения для всех платформ? Хотите разрабатывать мобильные приложения на HTML5? Не знаете с чего начать?

Цель этой статьи — помочь вам начать свое путешествие с HTML5-фреймворка Sencha Touch.

Что такое Сенча Touch?

Sencha Touch — это HTML5-фреймворк для разработки мобильных приложений. Это позволяет разрабатывать мобильные приложения, которые выглядят так же, как и нативные приложения. Sencha Touch поддерживает устройства Android, iOS, Windows Phone, Microsoft Surface Pro и RT, а также устройства Blackberry.

Характеристики

• Компоненты пользовательского интерфейса (Панели, Панель вкладок, Вид навигации, кнопки, средства выбора)
• Компоненты могут быть тематическими в зависимости от целевых устройств
• Доступ к таким устройствам, как камера, акселерометр и т. Д., С помощью каркасов PhoneGap.

Как начать

Загрузите бесплатный Sencha Touch SDK и Sencha Cmd с веб-сайта Sencha. Обратите внимание, что Sencha Cmd также установит Ant, Ruby, Sass и Compass, все или некоторые из которых будут полезны для создания приложений.

Вам также понадобится веб-сервер, работающий локально на вашем компьютере, например, XAMPP .

На веб-сайте Sencha говорится: «Если вы используете веб-сервер IIS в Windows, добавьте вручную application/x-json в качестве типа MIME, чтобы Sencha Touch работал правильно. Информацию о добавлении этого типа MIME см. По следующей ссылке: http://stackoverflow.com/a/1121114/273985 «.

Установка

Распакуйте ZIP-файл SDK в каталог ваших проектов. Эта папка должна быть доступна вашему HTTP-серверу, чтобы вы могли перейти по адресу http: //localhost/sencha-touch-2.n в браузере и просмотреть документацию Sencha Touch.

Запустите установщик Sencha Cmd. Установщик добавляет инструмент командной строки Sencha к вашему пути, позволяя вам, среди прочего, создать новый шаблон приложения.

Убедитесь, что Sencha Cmd правильно установлен, перейдя в каталог Sencha Touch и введя команду sencha , например:

 $ cd ~/webroot/sencha-touch-2.n/ $ sencha Sencha Cmd v3.1.n ... 

Примечание. При использовании команды sencha вы должны находиться либо в загруженном каталоге SDK, либо в созданном приложении Touch. Для получения дополнительной информации см. Документацию Sencha Cmd .

Ваша среда разработки и тестирования должна быть готова.

Сенча Touch Project

1. Index.html — страница, на которой будет размещаться ваше приложение.
2. Каталог приложений — приложение в целом представляет собой набор моделей, представлений, контроллеров, магазинов и профилей
   • Модель: представляет тип данных, которые должны использоваться / храниться в приложении
   • Просмотр: отображает данные для пользователя с помощью встроенных компонентов пользовательского интерфейса Sencha / пользовательских компонентов
   • Контроллер: обрабатывает взаимодействия пользовательского интерфейса и взаимодействие между моделью и представлением.
   • Store: отвечает за загрузку данных в приложение
   • Профиль: помогает в настройке пользовательского интерфейса для различных телефонов и планшетов.
3. Каталог ресурсов — содержит изображения, CSS и другие медиа-ресурсы
4. App.js
   • Глобальные настройки приложения
   • Содержит название приложения, ссылки на все модели, виды, контроллеры, профили и магазины
   • Содержит функцию запуска приложения, которая вызывается после загрузки моделей, представлений, контроллеров, профилей и хранилищ. Функция запуска приложения — это отправная точка приложения, в которой первый экземпляр создается и загружается.
   • Каталог Touch — содержит файлы инфраструктуры Sencha Touch.

Попробуйте образец

Давайте создадим простой навигационный вид со списком в нем.

Home.js

 Ext.define('MyFirstApp.view.Home',{ extend:'Ext.NavigationView', xtype:'Home', config:{ items:[] } }); 

Давайте разберемся с этим.

Функция Ext.define помогает нам определить класс с именем Home в пространстве имен MyFirstApp/view . Все компоненты представления размещены в этом пространстве имен в соответствии со стандартами Sencha Touch MVC.

 launch: function() { // Initialize the main view Ext.Viewport.add([{xtype:'Home'}]); }, 

 Ext.define('MyFirstApp.model.MyModel',{ extend:'Ext.data.Model', config:{ fields:['name'] } }); 

 Ext.define('MyFirstApp.store.MyStore',{ extend:'Ext.data.Store', config:{ model:'MyFirstApp.model.MyModel', autoLoad:true, data:[ {name:'t1'}, {name:'t2'} ], proxy:{ type:'localstorage' } } }); 

 Ext.define('MyFirstApp.view.MyList',{ extend:'Ext.Panel', xtype:'MyList', requires:['Ext.dataview.List','Ext.data.Store'], config:{ title:'My List', layout:'fit', items:[ { xtype:'list', store:'MyStore', itemTpl:'<b>{name}<b>' } ] } }); 

 Ext.define('MyFirstApp.view.Home',{ extend:'Ext.NavigationView', xtype:'Home', config:{ items:[xtype:'MyList'] } });