Створення мобільного додатка з phonegap і webix

Webix Blog Створення мобільного додатка з PhoneGap і Webix

З Webix ви можете створювати веб-додатки, які будуть працювати однаково добре як на мобільних, так і на декстопних пристроях. Однак дані додатки як і раніше будуть html5-додатками. Для розробки нативних додатків вам знадобиться такий інструмент, як PhoneGap.

PhoneGap - безкоштовний фреймворк з відкритим вихідним кодом. З PhoneGap ви можете розробляти мобільні додатки зі стандартним веб-API для всіх використовуваних вами платформ. Крім того, Phonegap працює на базі HTML5 і дозволяє створювати нативні додатки для всіх основних мобільних ОС: IOS, Android, Windows Phone і інших.

У цій статті ми опишемо процес створення простого нативного програми за допомогою інструментів Webix і PhoneGap.

Отримати остаточний код програми можна на GitHub.

початок розробки

Щоб почати працювати з PhoneGap, спершу встановіть наступні залежності:

  • встановіть останній nodejs. Після цього дії запустіть команду "npm install -g phonegap" для установки самого PhoneGap.

Оскільки ми плануємо протестувати наш додаток на Android пристрої, у вас повинні бути встановлені інструменти розробки Android:

  • встановіть інструменти jdk і ant. Після розпакування пакетів не забудьте встановити оболонки змінних JAVA_HOME і ANT_HOME в папки з «jdk» і файлів «ant» інструментами, відповідно. Крім того, вам потрібно буде додати шлях з «bin» -папок обох інструментів до змінної PATH:

    • Потім встановіть Android SDK. а також додайте папки "platform-tools" і "tools» в PATH:

    Більш детальну інформацію ви зможете знайти в документації PhoneGap. (Посилаючись)

    Як тільки ви закінчите з описаними вище приготуваннями, можете почати розробляти мобільний додаток.

    створення програми

    Перше, що вам потрібно буде зробити - це виконати наступну команду:

    phonegap create myapp

    Ця команда створить папку «myapp» з усіма необхідними файлами всередині. "Www" - це єдина підпапка, яка нам буде потрібна. У цій папці ми будемо зберігати весь HTML і JS код, необхідний для побудови нашого застосування.

    Передайте файли .js and .css в "www / webix". Переконайтеся, щоб ви скопіювали папку з пакета Webix в директорій "www / webix". Це потрібно зробити, для того щоб потім в вашому додатку відображалися іконки.

    Після цього ми можемо починати писати HTML код для нашого демо-додатки.

    PhoneGap вже створив файл «index.html». Тепер нам потрібно додати в нього посилання на файли Webix:

    Давайте додамо конфігурацію призначеного для користувача інтерфейсу:

    webix. ready # 40; function # 40; # 41; # 123;
    var toolbar = # 123; view. "Toolbar".
    elements. # 91;
    # 123; view. "Search". value. "". on. # 123;
    onTimedKeyPress. function # 40; # 41; # 123;
    $$ # 40; 'List' # 41 ;. filter # 40; "Firstname". this. getValue # 40; # 41; # 41; ;
    # 125;
    # 125; # 125;
    # 93;
    # 125; ;

    var list = # 123;
    view. "List". id. "List". select. true.
    template. "Html-> item_list".
    url. "Contacts.json".
    on. # 123;
    onItemClick. function # 40; id # 41; # 123;
    $$ # 40; 'Details' # 41 ;. show # 40; # 41; ;
    $$ # 40; 'Details' # 41 ;. setValues # 40; this. getItem # 40; id # 41; # 41; ;
    # 125;
    # 125;
    # 125; ;

    var template = # 123; template. "Html-> item_details". scroll. true. id. "Details" # 125; ;

    webix. ui. fullScreen # 40; # 41; ;
    webix. ui # 40; # 123;
    rows. # 91;
    toolbar.
    # 123; cells. # 91; list. template # 93 ;. id. "Multiview" # 125;
    # 93;
    # 125; # 41; ;
    # 125; # 41; ;

    Код вище створить простий користувальницький інтерфейс з з фільтром вгорі і списком з можливістю вибору / виділення нижче. Після того як ви натиснете на будь-який з пунктів списку, ви побачите екран з «деталями».

    У коді використовувалися два шаблони: один - для елементів списку, другий - для екрану «деталі». Давайте позначимо їх в «index.html» наступним чином: