WikiDer > Sencha Touch

Sencha Touch
Sencha Touch
Приложение Sencha Touch с темой iOS6
Приложение Sencha Touch с темой iOS6
Разработчики)Сенча
Стабильный выпуск
2.4.2 / 15 июня 2015 г.; 5 лет назад (2015-06-15)
Написано вJavaScript
Операционная системаAndroid, iOS, Ежевика, Разжечь, телефон с операционной системой Виндоус, Tizen
Доступно ванглийский
ТипБиблиотека JavaScript
ЛицензияGPLv3 или же коммерческий
Интернет сайтwww.sencha.com/товары/трогать

Sencha Touch это пользовательский интерфейс (UI) Библиотека JavaScript, или же веб-фреймворк, специально построенный для Мобильный Интернет. Может использоваться Веб-разработчики разрабатывать пользовательские интерфейсы для мобильных веб-приложения которые выглядят и ощущаются как родные приложения на поддерживаемых мобильных устройствах. Он основан на веб-стандарты Такие как HTML5, CSS3 и JavaScript. Цель Sencha Touch - облегчить и ускорить разработку мобильных приложений на основе HTML5, работающих на Android, iOS, Windows, Tizen и Ежевика устройств, одновременно обеспечивая естественный вид приложений.

История версий и поддержка

Sencha Touch - продукт компании Sencha, созданной на основе популярных проектов библиотеки JavaScript. Внешний JS, jQTouch и Рафаэль были объединены. Первый выпуск Sencha Touch, бета-версия 0.90, был выпущен 17 июля 2010 г. Эта бета-версия поддерживала устройства под управлением Android и iOS (на iPhone, Ipod Touch, iPad).

Впоследствии в ноябре 2010 года была выпущена первая стабильная версия 1.0. Версия 1.1.0 добавила поддержку устройств, работающих под управлением ОС BlackBerry 6.0.

Последний выпуск, Sencha Touch 2.4.2, был выпущен в июне 2015 года.[1] и предназначен для работы в следующих браузерах и платформах:

Нет заявленных планов по поддержке Firefox Mobile.

Функции

Архитектура MVC

Sencha Touch следует за MVC шаблон, который разделяет данные приложения, управляющий код и представление. Такое разделение позволяет крупномасштабным приложениям быть гибкими и простыми в обслуживании.

Компоненты виджетов и настраиваемые темы

Sencha Touch имеет встроенный ДОМ интерфейс манипуляции, который сводит на нет зависимость от других UI такие фреймворки, как jQuery. Включает в себя набор графический интерфейс пользователя На основе графического интерфейса контроль (или компоненты) для использования в мобильных веб-приложениях. Эти компоненты оптимизированы для сенсорного ввода. Компоненты:[2]

  • Кнопки со специальными темами и эффектами для устройства
  • Элементы формы, такие как текстовые поля для электронной почты
  • Выбор даты и адрес
  • Ползунки, селекторы и поля со списком
  • Компонент списка с прокруткой импульса и полосой указателя
  • Минимальный набор иконок
  • Панели инструментов и меню
  • Подвижные вкладки, нижние панели инструментов
  • Компонент карты с поддержкой мультитач такие жесты как ущипнуть и увеличить
  • Карусели

Все компоненты могут быть тематически оформлены в соответствии с целевым устройством. Это делается с помощью Sass, язык таблиц стилей, созданный на основе CSS. Некоторые из похожих тем: Cupertino Classic (для iOS6.x и ниже), Cupertino (для iOS 7) и Mountain View (для Android).[3]

Переходы, анимация и адаптивный интерфейс

Sencha Touch имеет восемь встроенных эффектов перехода, включая скольжение над или под текущим элементом, всплывающее окно, переворот и куб. Он поддерживает обычные сенсорные жесты, созданные из сенсорные события, которые Веб-стандарты но поддерживается только Android, iOS, и некоторые сенсорные устройства. Это касание, двойное касание, пролистывание, прокрутка и сжатие.

Поскольку Sencha touch основан на HTML5, макеты, которые он предлагает, по своей природе чрезвычайно адаптивны.

Графики

Sencha Touch также поддерживает компоненты диаграмм, включая круговые диаграммы, гистограммы, серии линий и т. Д. С пояснительными надписями. Эти компоненты поддерживают такие интерактивные функции, как масштабирование и масштабирование. Как и компоненты Grid в ExtJS, Sencha Touch предлагает функциональность TouchGrid.[4]

Профили

Профилирование в Sencha Touch позволяет создавать разные профили для разных размеров экрана. Когда приложение загружается, платформа определяет тип устройства, а соответствующий профиль определяет, какие компоненты и функции необходимо заменить, а также конкретные представления и контроллеры, которые необходимо вызвать, избавляя разработчика от задачи создания другого устройства. приложение для каждого типа устройства.[5]

Базовая структура каталогов приложения

Приложения Sencha Touch имеют следующую базовую структуру файлов и каталогов:[2][6]

Каталог / ФайлОписание
приложениеОсновной каталог, в котором хранятся модели, представления, контроллеры, магазины и профили приложения.
app.jsФайл, содержащий общие настройки приложения. Ссылки на все модели, представления, контроллеры, магазины и профили можно найти здесь. После загрузки этих ссылок вызывается основная функция запуска приложения. Эта функция загружает первое представление и, следовательно, может рассматриваться как первая точка приложения.
index.htmlГлавный HTML файл для приложения. Для мобильного приложения он может занимать множество страниц / экранов.
РесурсыКаталог, содержащий все изображения, CSS и любой другой внешний файл, который нужен приложению.
app.jsonФайл конфигурации приложения
packager.jsonФайл, используемый для создания собственных пакетов
ext-touch.jsЭто библиотека JavaScript от Sencha (на этапе разработки рекомендуется ext-touchdebug.js)
ext-touch.cssЭто CSS-библиотека Sencha

Инструменты и плагины для разработчиков

Sencha Touch обеспечивает IDE плагины для удобства разработки. Преимущества этих плагинов включают генерация кода и автозаполнение, рефакторинг кода и простота навигации по базе кода фреймворка и пользовательским классам. Sencha Touch имеет плагины для популярных IDE, таких как JetBrains, Visual Studio и Затмение.

Существует конструктор визуальных приложений Sencha Architect для создания кроссплатформенных приложений HTML5. Он предоставляет функции зависимости, такие как тематика и командная строка интеграция.[7]

Пример использования

Sencha Touch позволяет удобно использовать карту в вашем приложении с помощью компонента Ext.Map.[8] Включение файла JavaScript "Google Maps API" необходимо для Карты Гугл API работать.[9]

<!DOCTYPE HTML><html><голова><заглавие>Сенсорный тест</заглавие><!-- Sencha Touch CSS --><связь rel="таблица стилей" тип="текст / CSS"         href="sencha-touch / resources / css / sencha-touch-debug.css" /><!-- Google Maps API --><сценарий тип="текст / javascript"              src="//maps.google.com/maps/api/js?sensor=true"></сценарий><!-- Sencha Touch JavaScript code --><сценарий тип="текст / javascript" src="sencha-touch / sencha-touch-debug.js"></сценарий><!-- Application script --><сценарий тип="текст / javascript">  Ext.настраивать( {    onReady: функция() {      // создаем корневую панель      новый Ext.Панель({        полноэкранный: истинный,        Предметы: [          {            xtype: "карта"            }        ]      });    }  });</сценарий></голова><тело></тело></html>

Ext.setup () - это отправная точка для инициализации приложения, настройки области просмотра и системы событий.[10]

Сравнение с собственными приложениями

Sencha Touch поддерживает PhoneGap[11] и Apache Cordova API для Акселерометр, Камера, компас, Геолокация, Захватывать,[12] InAppBrowser, Медиа, Уведомление, Заставка, Хранилище (SQLite)и т. д., которые ранее были доступны только для собственных приложений. Sencha Touch использует JavaScript для создания большинства компонентов пользовательского интерфейса и изменения CSS ДОМ элементы на лету. С Движки JavaScript будучи более эффективными и быстрыми, чем раньше, веб-приложения работают почти так же плавно, как нативные приложения.

Смотрите также

Рекомендации

  1. ^ «Представляем Sencha Touch 2.4.2 с улучшенными возможностями BlackBerry 10.3». sencha.com. 15 июня 2015.
  2. ^ а б Аллен, Сара; Граупера, Видаль; Лундриган, Ли (2010). Кросс-платформенная разработка для смартфонов Pro. Соединенные Штаты Америки: APress. п. 226. ISBN 978-1-4302-2869-1.
  3. ^ «Примечания к выпуску Sencha Touch 2». cdn.sencha.com.
  4. ^ «Представляем Sencha Touch 2.3 - Touch Grid, поддержку Cordova и новые темы». sencha.com. 1 октября 2013 г.
  5. ^ Кларк, Джон Эрл; Джонсон, Брайан П. (апрель 2013 г.). Создание мобильных приложений с помощью Sencha Touch 2. Бирмингем, Великобритания: Packt Publishing. С. 233, 234. ISBN 978-1-84951-890-1 - через Ebrary.com.
  6. ^ «Руководства по Touch - начало работы с Sencha Touch». docs.sencha.com.
  7. ^ "Сенча Архитектор". sencha.com. 25 марта 2015 г.
  8. ^ "Touch - Sencha Docs". docs.sencha.com.
  9. ^ «IBM Developer Works - Создавайте мобильные веб-приложения с помощью Sencha Touch».
  10. ^ "Touch Guides - События". docs.sencha.com.
  11. ^ «Использование PhoneGap в Sencha Touch». phonegap.com.
  12. ^ "Touch Guides - Использование собственных API". docs.sencha.com.

Библиография

внешняя ссылка