Обзор мультиплатформенных фреймворков — Sencha Touch (3/6)

Опубликовано автором

3) Sencha Touch

Sencha лого

Sencha Touch (ST) – еще один фреймворк для разработки под мобильные платформы созданный на основе ExtJs. Основная цель ST – по мере возможности мимикрировать стандартный интерфейс и поведение элементов интерфейса мобильной платформы, предоставив программистам гибкое API. Соответственно, ST-приложение – это обычная клиент-серверная разработка, в качестве клиента выступает браузер Safari или Chrome или какой-либо другой webView, а в качестве сервера – любой сервис, способный «отвечать» в форматах JSON, XML и еще нескольких других.

По сути фреймворк представляет собой опять знакомую нам связку HTML5 + JS + CSS. Но в данном случае мы получаем больший упор на JS нежели на HTML5 при разработке интерфейса. Фреймворк предоставляет гибкие средства для разработки собственных UI компонентов , как на основе уже существующих , так и с нуля.  Любой компонент библиотеки по факту является ST-объектом с набором методов и свойств.

К достоинствам Sencha можно отнести:

  • Гибкость создания своего собственного интерфейса, по средством создания собственных компонент (более строгие требования к компонентам)
  • много документации для быстрого старта
  • наличие обзоров на русском языке
  • бесплатный
  • присутствует графическая среда разработки интерфейсов : Sencha Architect (платная 400$ с триалом на 30 дней)
  • низкий порог вхождения

Кроме методов и свойств у большинства объектов есть события, на которые можно развешивать обработчики и шаблон вывода для визуальных элементов. Событий в мире ST очень много: фактически, каждый чих в этом мире является событием: начиная от создания элемента и добавления его на страницу, его отрисовкой и заканчивая уничтожением.

Ядро распадается на несколько множеств классов:

  • Data — всяческая работа с данными, хранилища, преобразовании данных и работа с массивами данных, фильтрация, проверка и пр. Авторы попробовали ввести понятие модели данных (из MVC) и правил проверки (валидации), включая связи типа «многие к одному». Польза от этого нововведения довольно сомнительна, так как на стороне сервера все равно нужно будет проводить повторную проверку, но все же.
  • Form — элементы интерфейса. Текстовое поле, выпадающий список, календарик, обычный список, переключатели и галочки — все это здесь.
  • Layout — Часть ядра, отвечающая за рендеринг элементов в окне браузера. В теории, форма может находится одна на странице или быть частью панели вкладок, элементы могут быть прижаты к верху или низу формы.
  • Lib — базовые компоненты ядра.
  • Util — всевозможные утилиты и классы, которые не должны вызываться напрямую.

На данный момент доступна версия Sencha Touch — 2.2.1.

  1. Рассмотрим пошаговую инструкцию по созданию проекта Sencha Touch 2:
    Для работы с SenchaTouch понадобиться :

    Скачав SDK разархивируем его в какой-либо каталог. Дальше инсталим SenchaCMD и Ruby. Обязательно стоит помнить , что нельзя допускать пробелов в путях инстала.
    Необходимо убедиться что Ruby и SenchaCmd прописаны в системной пременной Path.

    После этого в cmd (виндовой) прописываем:

    sencha -sdk /path/to/sdk generate app MyApp /path/to/www/myapp

    После чего создастся скелет проекта, в который сразу подтянутся файлы из библиотеки.
    Для сборки пакета (подчистит и оптимизирует и сгенерит нужное) необходимо встать в корень проекта и в командной строке набрать

    sencha app build

    Для сборки нативного приложения

    sencha app build native

    Все конфигурации для сборки нативного приложения прописываются в packager.json

    Запустить на эмуляторе/устройстве :

    sencha app build -run native

    Таким образом мы видим, что сборку проекта можно осуществлять средствами Sencha Cmd и нет необходимости в сторонних упаковщиках

  2. Рассмотрим работу SenchaTouch + Cordova (на примере Android):
    Для работы нам понадобиться :

    Создаем проект Sencha:

    sencha -sdk /path/to/sdk generate app MyApp /path/to/www/myapp

    Затем переходим в корень проекта и руками создаем каталог android. В архиве с PhoneGap идем в каталог lib\android и копируем от туда cordova-2.6.0.js в корень нашего проекта. В нашем проекте присутствует файл app.json. Открываем его и прописываем нашу js библиотеку. Выглядит примерно так:

    "js": [
            {
                "path": "cordova-2.6.0.js"
            },     
    ....
    ],

    Далее открываем Eclipse и создаем в нем Android проект, в качестве воркспейса для проекта указываем путь : <путь к нашему проекту>\android. Т.е. таким образом в итоге в нашем каталоге с проектом создастся каталог android в котором будет создан андроид проект. По сути, что мы хотим, это сделать андроид проект в который будет собираться Sencha и как результат получить нативный проект.
    Идем дальше. В папке assets нашего андроид проекта создаем каталог www , в который и будет билдиться Sencha.
    В каталог libs нашего андроид проекта мы копируем cordova-2.6.0.jar, а в каталог res копируем каталог xml из архива phonegap (lib\android)
    Открываем activity нашего андроид проекта и меняем его код на следующий (все кроме декларации пакета):

    import android.os.Bundle;
    import org.apache.cordova.DroidGap;

    public class AndroidSecnhaActivity extends DroidGap {
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setIntegerProperty("loadUrlTimeoutValue", 600000);
            super.loadUrl("file:///android_asset/www/<название типа билда,к примеру testing>/index.html");
        }
    }

    Открываем AndroidManifest нашего андроид приложения и прописываем необходимые нам права, к примеру :

        <supports-screens
            android:largeScreens="true"
            android:normalScreens="true"
            android:smallScreens="true"
            android:resizeable="true"
            android:anyDensity="true" />
       
        <uses-permission android:name="android.permission.VIBRATE" />
        <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
        <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
        <uses-permission android:name="android.permission.READ_PHONE_STATE" />
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.RECEIVE_SMS" />
        <uses-permission android:name="android.permission.RECORD_AUDIO" />
        <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
        <uses-permission android:name="android.permission.READ_CONTACTS" />
        <uses-permission android:name="android.permission.WRITE_CONTACTS" />
        <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
        <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
        <uses-permission android:name="android.permission.GET_ACCOUNTS" />
        <uses-permission android:name="android.permission.BROADCAST_STICKY" />
        <uses-permission android:name="android.permission.SEND_SMS"/>

    Рефрешим Android проект и тем самым мы подгатовили phonegap к работе!

    Если мы хотим подключить плагинг к phonegap, к примеру SmsSendingPlugin, то нам необходимо выполнить следующие действия:
    В app.json прописываем плагин:

    "js": [
            {
                "path": "SmsSendingPlugun.js"
            },     
    ....
    ],

    В src Андроид проекта кладем SmsSendingPlugin.java изменяя ему пакет.
    В андроид проекте идем в каталог res\xml и открываем находящийся в нем файл config.xml. В конец списка плагинов прописываем

        <plugin name="SmsSendingPlugin" value="com.example.androidsencha.SmsSendingPlugin"/>.

    Теперь мы можем работать с данным плагином.

    ВАЖНО ПОМНИТЬ: Код программы мы пишем в проекте Sencha а не Android

    После того как все готово из каталога нашего проекта в командной строке пишем :

    sencha app build package android\assets\www

    Теперь в Eclipse рефрешим проект и получаем готовый результат — можно заливать на устройство и тестить!

  3. Ну и наконец — пример кода:
    В данном примере создается ТабПанель с тремя вкладками:

    Ext.application({
        launch: function () {
            Ext.create('Ext.TabPanel', {
                fullscreen: true,
                tabBarPosition: 'bottom',
                styleHtmlContent: true,
                items: [{
                    title: 'Home',
                    iconCls: 'home',
                    html: 'Home container'
                }, {
                    title: 'Profile',
                    iconCls: 'user',
                    html: 'Profile container'
                }, {
                    title: 'Settings',
                    iconCls: 'settings',
                    html: 'Settings container'
                }] // items
            }); // create()
        } // launch
    }); // application()

Минусы Sencha Touch:

  • Не до конца понятное поведение на Android устройствах. Вы спокойно можете столкнуться с тем, что разработанное вами приложение будет жутко тормозить на крутом планшете с 4-ех ядерным процессором и одновременно с этим достаточно быстро работать на вашем стареньком Samsung Tab 2.
  • Проблемы с быстродействием из-за чрезмерного использования css3 и раздутой DOM модели
  • Фреймворк постоянно обновляется и различия между соседними версиями зачастую губят ваше приложение при апдейте sdk. Поэтому всегда нужно быть готовым к проблемам.

Продолжение:
Обзор мультиплатформенных фреймворков — jQuery Mobile (1/6)
Обзор мультиплатформенных фреймворков — MGWT + PHONEGAP (2/6)
Обзор мультиплатформенных фреймворков — Appcelerator Titanium Mobile (4/6)
Обзор мультиплатформенных фреймворков — Vaadin TouchKit (5/6)
Обзор мультиплатформенных фреймворков — IBM WorkLight (6/6)

Добавить комментарий