Проект Sencha Touch + Cordova Phonegap для Android

Увага! В цій статті описано створення проекту для фреймворків Sencha Touch 2.2 та Phonegap 2.7. Процес створення проекту для новіших версій (Sencha Touch 2.3, Phonegap 3.0) описано тут.

Щоб отримати доступ до "native" функцій пристрою з додатку Sencha Touch або jQuery Mobile, як правило, використовують фреймворк Phonegap. Для встановлення Phonegap потрібно просто скачати з офіційного сайту останню версію на розпакувати в папку, шлях до якої не містить пробілів. Для сумісної роботи фреймворків Sencha Touch і Cordova Phonegap необхідно створити обидва проекти та взаємно налаштувати їх (звичайно, Android SDK вже повинен бути встановленим, шляхи до директорій tоols та platform-tools повинні бути додані до змінних середовища).

Створюємо новий проект Sencha Touch 2

Переходимо в директорію touch-2.2.x, що має знаходитись в папці www вашого локального сервера (якщо ні - встановіть Sencha Touch 2 фреймворк):

cd /var/www/touch-2.2.0

та створюємо шаблон проекту Sencha Touch:

sencha generate app SenchaPhonegapProject ../SenchaPhonegapProject

Якщо все вийшло, за адресою localhost/SenchaPhonegapProject спостерігаємо базовий проект Sencha Touch


 

 

Тепер можна відкрити проект в улюбленому IDE, наприклад, у NetBeans:

Спробуємо скомпілювати проект

cd /var/www/SenchaPhonegapProject

sencha app build package

Існують ще кілька модифікаторів команди build (наприклад, native), проте для роботи з Phonegap останньою використовуватимемо саме package. Скомпільований проект спостерігаємо на локальному сервері за адресою http://localhost/SenchaPhonegapProject/build/ SenchaPhonegapProject/package/

Створюємо проект Cordova Phonegap

Знаходимо в директорію phonegap-x.x та переходимо в папку bin потрібної платформи (у нашому випадку android)

cd /home/user/phonegap-2.7.0/lib/android/bin

Тепер необхідно згенерувати проект, який буде знаходитись поряд з папкою package раніше створеного проекту Sencha Touch, для чого виконати команду create

create  /var/www/SenchaPhonegapProject/build/SenchaPhonegapProject/android com.example.senchaphonegapproject SenchaPhonegapProject

Першим параметром йде шлях до папки, в якій буде створено проект, другим - ім'я пакету проекту (повинно складатись з мінімум трьох частин, що розділені крапкою), третім - назва проекта андроїд. Можемо відкрити андроїд проект за допомогою Eclipse

File -> Import ... -> Android -> Existing Android code into workspace (чекбокс "Copy projects into workspace" залишити порожнім)

В папці assets/www проекту спостерігаємо файли проекту HTML5, в т.ч. cordova-2.7.0.js.

Запустивши проект на виконання в емуляторі (Run) спостерігаємо вміст файлу index.html

Налаштовуємо фреймворки для спільної роботи

1. Переносимо файл cordova-2.7.0.js з папки assets/www проекту Phonegap в корневу папку проекта Sencha Touch

mv /var/www/SenchaPhonegapProject/build/SenchaPhonegapProject/android/assets/www/cordova-2.7.0.js /var/www/SenchaPhonegapProject

2. Підключаємо файл cordova-2.7.0.js до проекту Sencha Touch - вносимо в розділ "js" файлу app.json проекта Sencha Touch наступні рядки:

{

            "path": "cordova-2.7.0.js"

}

3. Налаштовуємо автоматичне копіювання файлів з директорії  build/package проекту Sencha Touch при компіляції в директорію assets/www проекта Phonegap. Для цього вносимо в файл build.xml проекту Sencha Touch наступні рядки:

<target name="-after-build">

    <!--- видалення вмісту папки  /android/assets/www -->

    <delete dir="${build.dir}/android/assets/www" />      

    <!-- копіювання вмісту папки /package до /android/assets/www -->

    <copy todir="${build.dir}/android/assets/www">

        <fileset dir="${build.dir}/package"/>

    </copy>

</target>

Перевірка роботи

Переходимо до папки проекту Sencha Touch та компілюємо його
cd /var/www/SenchaPhonegapProject 
sencha app build package
Переходимо до проекту Phonegap - в директорії assets/www повинні з'витись файли з директорії build/package проекту Sencha Touch (можливо знадобиться оновити проект - F5)

Запускаємо проект на виконання в емуляторі

Перевіримо доступність Sencha та Cordova функцій, для цього замінимо вміст файлу view/Main.js проекту Sencha Touch наступним вмістом:

Ext.define('SenchaPhonegapProject.view.Main', {

    extend: 'Ext.Panel',

    xtype: 'main',

    config: {

        layout:{

            type: 'vbox',

            pack: 'center'

        },

        items: [

            {

                xtype: 'button',

                text: 'Sencha alert',

                ui: 'confirm',

                listeners:{

                    tap: function(){

                        Ext.Msg.alert('Sencha Alert', 'Hello from Sencha', null);

                    }

                }

            },

            {

                xtype: 'button',

                text: 'Native alert',

                listeners:{

                    tap: function(){

                        navigator.notification.alert('Hello from Phonegap', null, 'Native Alert');

                    }

                }

            },

            {

                xtype: 'button',

                text: 'Exit app',

                ui: 'decline',

                listeners:{

                    tap: function(){

                        navigator.app.exitApp();

                    }

                }

            }

        ]

    }

});

Цей код відображає три кнопки, перша з яких викликає alert-повідомлення засобами Sencha Touch, друга викликає native alert засобами Phonegap а третя закриває програму. Перекомпілюємо обидва проекти (спочатку Sencha Touch а потім Phonegap) та запустимо в емуляторі:

Якщо маєте подібний результат, все вийшло правильно. Успіхів