peekaboo » Андрей Крохин http://peekaboo-games.com Учимся мобильной разработке вместе Mon, 21 Apr 2014 08:07:44 +0000 ru-RU hourly 1 http://wordpress.org/?v=3.6 Обзор мультиплатформенных фреймворков — IBM WorkLight (6/6) http://peekaboo-games.com/framework_worklight/ http://peekaboo-games.com/framework_worklight/#comments Fri, 26 Apr 2013 13:57:56 +0000 Андрей Крохин http://peekaboo-games.com/?p=204 Читать далее →]]> 6) IBM WorkLight

логотип Worklight

IBM WorkLight — по сути это не просто фреймворк, а целая платформа мобильных приложений, позволяющую эффективно разрабатывать, выполнять и поддерживать HTML5-приложения. Т.е. по сути WorkLight предоставляет нам:

  • Интеграцию с Phonegap
  • Структуру проекта
  • Сервер который дает нам следующие интересные возможности:
    • Сервис авторизации клиентов
    • Консоль для администрирования клиентов
    • Принудительные обновления клиентских приложений
    • Push-рассылки
    • Легкая интеграция с другими продуктами IBM
    • Средства защиты на уровне устройства, приложения и сети
    • Площадка для адаптеров
  • Удобный транспорт между мобильным приложением и сервером с бизнес-логикой. Транспорт осуществляется по средствам адаптеров (worklight adapter), которые представляют из себя JS процедуры вызова функционала с бизнес сервера. Доступны следующие виды адаптеров: SQL adapter, HTTP adapter, Cast Iron adapter, JMS adapter. Ниже представлен пример кода процедуры HTTP адаптера:
        function getRequestToServ(jsonObj, serviceName) {
            var input = {
                method : 'get',
                returnedContentType : 'json',
                path : some_url,
                parameters : {
                    'message' : jsonObj,
                    'service' : serviceName
                }
            };
            return WL.Server.invokeHttp(input);
        }

    Пример вызова процедуры адаптера из мобильного приложения:

        var invocationData = {
            adapter : 'MobileToBisquit',
            procedure : 'getRequestToBis',
            parameters : [String(jsonObj),String(serviceName)]
        };
           
        WL.Client.invokeProcedure(invocationData,{
            onSuccess : function(result) {
                //some action              
            },
            onFailure : function(result){
                //some action
            }
        });
  • Возможность указать необходимые нам платформы, тем самым при билде будут собираться сразу нативные версии под эти платформы, что дает нам возможность сразу тестировать на реальном или виртуальном устройстве
  • Возможность интеграции с известными JS мобильными фреймворками

Существует плагин для эклипса позволяющий создавать WorkLight проекты

7) Использование не фреймворков, а движков , таких как Corona SDK , Marmelade итп, скорее всего не целесообразны так как они больше  расчитаны под написание игр (работа с openGl, текстурами, физикой). Хотя и на них можно писать бизнес приложения, например с очень предовым интерфейсом, с тенями, сложной анимацией, падающими по всем законам физики монетами на заднем плане итп.

Продолжение:

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

Обзор мультиплатформенных фреймворков — MGWT + PHONEGAP (2/6)

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

Обзор мультиплатформенных фреймворков — Appcelerator Titanium Mobile (4/6)

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

]]> http://peekaboo-games.com/framework_worklight/feed/ 0 Обзор мультиплатформенных фреймворков — Vaadin TouchKit (5/6) http://peekaboo-games.com/framework_vaadin/ http://peekaboo-games.com/framework_vaadin/#comments Wed, 24 Apr 2013 13:46:28 +0000 Андрей Крохин http://peekaboo-games.com/?p=197 Читать далее →]]> 5) Vaadin TouchKit

Vaadin лого

Vaadin TouchKit — мобильная версия фреймворка Vaadin. Принцип работы практически такой же. Из коробки фреймворк предоставляет нам мобильные UI компоненты (по умолчанию iOS тема), так же удобный менеджер навигации. Вся разработка ведется на Java, конечная сборка через PhoneGap

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

  • Люди знакомые с Vaadin без особых проблем смогут разрабатывать на TouchKit
  • Возможность разработки проекта в Maven
  • Доступны все базовые UI компоненты
  • Код пишется на Java

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

  • Платный (750$)
  • Конкретно по Vaadin TouchKit почти нет примеров
  • По умолчанию доступна лишь тема для iOs
  • Из субъективных описаний людей пользовавшихся Vaadin TouchKit складывается впечатление, что он работает медленнее нежели JS фреймворки
  • Мало сторонних библиотек, а они нужны так как стандартных компонентов UI явно недостаточно для красивого приложения.
  • Поддерживает только платформы : Android и iOs

Пример работы:

Мобильное приложение должно иметь класс TouchKitApplication в отличии от десктопного в котором был Application. Таким образом каркас имеет вид:

public class VornitologistApplication extends TouchKitApplication {
    private TouchKitWindow mainWindow;
    @Override
    public void init() {
        // Custom configurations (app icons etc) for main window need
        // to be set eagerly as they are written on the "host page".
        ConfigureMainWindow();
        setTheme("vornitologist");
    }
}

Графический интерфейс инициализируется лишь после того как приложение получит данные браузера от устройства:

@Override
    public void onBrowserDetailsReady() {
        mainWindow.setContent(new MainTabsheet());
    }

Пример создания навбара  (вырвано из кода но в общем дает картину):

public class MainTabsheet extends TabBarView {

    private MapView mapView;
    private LatestObservations latestObservations;
    private ClassificationHierarchy classificationHierarchy;
   
    public MainTabsheet() {
   
        ResourceBundle tr = Translations.get(VornitologistApplication.get()
                    .getLocale());
   
            /*
             * Populate main views
             */
        classificationHierarchy = new ClassificationHierarchy();
        Tab addTab = addTab(classificationHierarchy);
        addTab.setIcon(new ThemeResource("linegraphics/bird.png"));
        addTab.setCaption(tr.getString("Aves"));
        latestObservations = new LatestObservations();
        addTab = addTab(latestObservations);
        addTab.setIcon(new ThemeResource("linegraphics/binocular.png"));
          addTab.setCaption(tr.getString("Observations"));
          mapView = new MapView();
         addTab = addTab(mapView);
         addTab.setIcon(new   ThemeResource("linegraphics/world.png"));
           addTab.setCaption(tr.getString("Map"));
         SettingsView settings = new SettingsView();
         addTab = addTab(settings);
         addTab.setIcon(new ThemeResource("linegraphics/tools.png"));
         addTab.setCaption(tr.getString("Settings"));
   
            /*
             * Make settings view as the default. This would not be best option for
             * a real application, but it also serves as our demos welcome page.
             */
            setSelectedTab(settings);
   
    }
}

Пример интерфейса написаного на TouchKit:

 Для полной картины можно посмотреть ветку с кодом примера здесь , а полюбоваться его онлайн-демо можно здесь.

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

]]> http://peekaboo-games.com/framework_vaadin/feed/ 0 Обзор мультиплатформенных фреймворков — Appcelerator Titanium Mobile (4/6) http://peekaboo-games.com/framework_titanium/ http://peekaboo-games.com/framework_titanium/#comments Tue, 23 Apr 2013 13:37:37 +0000 Андрей Крохин http://peekaboo-games.com/?p=189 Читать далее →]]> 4) Appcelerator Titanium Mobile

titanium лого

Titanium Mobile — это нечто большее чем просто фреймворк. В поставке идет на пару вместе с Appcelerator Titanium Studio, предоставляющего возможность эмуляции устройств , а так же сборки приложения. По сути приложения пишутся на JS.

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

  • Собственная среда разработки , позволяющая не только моделировать устройства, но и делать сборку проекта , т.е. тем самым нам больше не понадобится PhoneGap. Система на основе Eclipce
  • Облегченная версия для разработки — бесплатная.
  • При покупке полной версии доступна куча возможностей от управления пуш сообщениями до облачных решений, позволяющих конечному пользователю получать доступ к контенту без привязки к устройству, а также позволяющие взаимодействовать с устройствами других пользователей и получать доступ к их локальному контенту.

Рассмотрим технологию разработки на примере экрана с несколькими строками , при нажатии на которые открывается соответствующее данной строке окно. При нажатии на подстроку в открывшемся окне проигрывается звуковой файл.

Интерфейс включает в себя несколько экземпляров Titanium Window и Titanium TableView. «Главный» экран представляет собой список строк. После выбора строки создается новый экземпляр Titanium Window, который заполняется соответствующимTableView.

Отвечающий за интерфейс код app.js:

var data = [
    {title: 'Строка номер 1', view: 'v/string1.js'},  
     {title: 'Строка номер 2', view: 'v/string2.js'},    
];
var window = Titanium.UI.createWindow({
    title: 'Тестовый пример',  
    backgroundColor:'#000',  
    exitOnClose: true,  
});
var tableView = Titanium.UI.createTableView({
    data: data,  
    headerTitle: 'Тестовый пример',  
});
window.add(tableView);
window.open()

Код в string1.js имеет вид:

var win = Titanium.UI.currentWindow;
var data = [
    {title: 'Подстрока 1', file: 'sound_01.mp3'},  
    {title: 'Подстрока 2', file: 'sound_02.mp3'},  
    {title: 'Подстрока 3', file: 'sound_03.mp3'},  
];

var tableView = Titanium.UI.createTableView({
    data: data,
    headerTitle: 'Строка 1',
});

Обработка нажатий :

tableView.addEventListener('click', function(e){
        var win = Titanium.UI.createWindow({  
        url: e.rowData.view,  
        title: e.rowData.title,  
        navBarHidden: true,  
        exitOnClose: false,  
    });  
    win.open();
});

Проигрывание звука:

tableView.addEventListener('click', function (e){
    var sound = Titanium.Media.createSound();  
    sound.url = '../mp3/' + e.rowData.file;  
    Titanium.API.info('mp3/' + e.rowData.file);  
    sound.play();  
});

Как видно все приложение написано на JS. По сути мы имеем опять таки событийную модель работы, что позволяет гибко разделить визуальную функциональную часть приложения.

Минусы использования :

  • Цена за pro версию доходит до 2500$ в месяц !! (хотя для обычной разработки она не нужна)
  • Достаточно высокий порог вхождения

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

]]> http://peekaboo-games.com/framework_titanium/feed/ 0 Обзор мультиплатформенных фреймворков — Sencha Touch (3/6) http://peekaboo-games.com/framework_sencha/ http://peekaboo-games.com/framework_sencha/#comments Mon, 22 Apr 2013 14:25:05 +0000 Андрей Крохин http://peekaboo-games.com/?p=180 Читать далее →]]> 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)

]]> http://peekaboo-games.com/framework_sencha/feed/ 0 Обзор мультиплатформенных фреймворков — MGWT + PHONEGAP (2/6) http://peekaboo-games.com/frameworks_mgwt/ http://peekaboo-games.com/frameworks_mgwt/#comments Mon, 22 Apr 2013 13:13:59 +0000 Андрей Крохин http://peekaboo-games.com/?p=173 Читать далее →]]> 2)  MGWT + PHONEGAP

MGWT лого

Как альтернативу разработки мобильного приложения с использованием JavaScript можно использовать фреймворк MGWT. По сути это тот же Google Web Tools позволяющий писать логику веб приложения на JAVA , которая позже компилируется в JS. MGWT не заменяет стандартный GWT, а расширяет его.

В данном случае цепочка разработки сводится к JAVA — CSS. Из этой цепочки можно исключить CSS и делать все в JAVA

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

  • Бесплатный
  • В отличии от разработки на Android SDK нет необходимости возиться с кучей XML файлов для построения пользовательского интерфейса.
  • Нет необходимости знания JS или веб технологий.
  • Присутствует библиотека мобильных элементов интерфейса
  • Это развитие продукта от Google
  • Возможность разработки проекта в Maven
  • Интеграция с PhoneGap

Пример создания кнопки Hello World со слайд анимацией :

В настроечном gwt.xml файле прописываем:

 <inherits name='com.googlecode.mgwt.MGWT'/>

Главный класс EntryPoint:

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.mgwt.mvp.client.Animation;
import com.googlecode.mgwt.ui.client.MGWT;
import com.googlecode.mgwt.ui.client.MGWTSettings;
import com.googlecode.mgwt.ui.client.animation.AnimationHelper;
import com.googlecode.mgwt.ui.client.widget.Button;
import com.googlecode.mgwt.ui.client.widget.LayoutPanel;

public class MGWTEntryPoint implements EntryPoint {

  public void onModuleLoad() {
    // set viewport and other settings for mobile
    MGWT.applySettings(MGWTSettings.getAppSetting());
    // build animation helper and attach it
    AnimationHelper animationHelper = new AnimationHelper();
    RootPanel.get().add(animationHelper);
    // build some UI
    LayoutPanel layoutPanel = new LayoutPanel();
    Button button = new Button("Hello mgwt");
    layoutPanel.add(button);
    // animate
    animationHelper.goTo(layoutPanel, Animation.SLIDE);
  }
}

Тем самым мы имеем в принципе понятный код для человека работавшего раньше к примеру со Swing.

Так же есть интеграция с PhoneGap тем самым позволяющая работать с API устройства.

Пример интерфейса разработанного на mgwt:

Как видим — по сути имеем тоже самое что и с jQuery Mobile, только теперь при помощи java.

Основные минусы:

  • Недостаточно много документации конкретно по mgwt. Но в принципе документация по gwt тоже подойдет
  • Порог вхождения в данную технологию достаточно высок
  • Не смог отыскать визуальной среды для разработки интерфейсов конкретно под mgwt, но возможно подойдут и существующие средства для gwt
  • Сборка опять-таки под PhoneGap

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

]]> http://peekaboo-games.com/frameworks_mgwt/feed/ 0 Обзор мультиплатформенных фреймворков — jQuery Mobile (1/6) http://peekaboo-games.com/frameworks_jquery/ http://peekaboo-games.com/frameworks_jquery/#comments Sun, 21 Apr 2013 13:11:23 +0000 Андрей Крохин http://peekaboo-games.com/?p=153 Читать далее →]]> Предположим, что в один прекрасный день к Вам подходит начальник и говорит, что-то типа: ‘Мы всю жизнь делали десктопные приложения и совсем не представлены на мобильном рынке. Давай ка ты Вася сделай нам прототип нашего бизнес решения на мобильную платформу’. И Вы, как человек подневольный, беретесь за дело.

Из анализа продуктов на мобильном рынке видно, что бизнес-модель в которой присутствует приложение лишь под одну платформу — не конкурентноспособна. Выход — писать мультиплатформенное приложение, тем самым минимизируя затраты на портирование под другие платформы и увеличивая охват пользователей. Вам все равно прийдется докручивать и допиливать ваше приложение для каждой платформы, но согласитесь, что это на много легче чем писать все с нуля.

Для мультиплатформенной разработки необходимо использовать фреймворки.  Сразу стоит оговориться: При написании приложения не на родном для платформы SDK встает вопрос о сборке приложения. Т.е. написав приложение на JS не получится просто взять и собрать из него к примеру apk. Для этого используются сторонние средства, например PhoneGap(который по сути так же является фреймворком), если конечно фреймворк сам не предоставляет средства сборки. Так же есть возможность дружить между собой фреймворки или по крайней мере использовать их средства разработки.

На первый взгляд можно выделить несколько интересных фреймворков(каждый из описанных фреймворков имеет явные отличия от других):

1) jQuery Mobile

JQuery лого

jQuery Mobile — это каркас, построенный на основе библиотеки jQuery и предназначенный для создания Web-интерфейсов, ориентированных на использование в мобильных устройствах. В настоящее время он обеспечивает совместимость со всеми распространенными мобильными платформами и поддерживает знакомый разработчикам jQuery синтаксис. Принцип работы jQuery Mobile можно описать следующим образом: этот каркас, используя стандартные HTML-элементы, расширенные с помощью дополнительных атрибутов, создает элементы соответствующие стилю и требованиям мобильных интерфейсов. Т.е. другими словами все UI вашего приложения описывается как html веб документ с разными модификаторами , а логика обработки ситуаций пишется  на JS.

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

  • бесплатный
  • Присутствует визуальная среда разработки облегчающая работу: Codiqa
  • короткую «кривую обучения» и легкость использования;
  • небольшой размер (12 Кб в сжатом виде);
  • поддержка широкого ряда мобильных (и немобильных) Web-браузеров;
  • поддержка HTML5;
  • расширенная поддержка HTML-форм;
  • изменение внешнего вида документа (стили);
  • открытый исходный код.

Тем самым проект будет представлять из себя связку HTML5 + CSS + jQuery , где в HTML будет описана вся  GUI часть , а в jQuery будет вся логика работы. Из этого следует легкость и быстрота разработки GUI части, а так же ее стабильная работа, на что как раз и тратится основное времея при разработке.

По сути каркас для начала работы следующий :

<!DOCTYPE html>
<html>
        <head>
        <title>Page Title</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
    </head>
    <body>
        <div data-role="page">
            <div data-role="header">
                    <h1>Page Title</h1>
            </div><!-- /header -->
            <div data-role="content">  
                    <p>Page content goes here.</p>     
            </div><!-- /content -->
            <div data-role="footer">
                <h4>Page Footer</h4>
            </div><!-- /header -->
        </div><!-- /page -->
    </body>
</html>

Ну а дальше мы вольны делать что хотим. Нам доступно огромное количество элементов мобильного интерфейса , встраиваемые на лету + отличная документация и куча примеров и сторонних библиотек.

К примеру если мы хотим добавить элемент поиска — нам просто нужно прописать в html:

<div data-role="fieldcontain">
    <label for="search">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

и в итоге мы увидим:

После чего на элемент вешаются слушатели.

Все позиционирование и стили отрисовки описываются в CSS , а логика обработки результата в JS.

Пример интерфейса, разработанного на JQuery Mobile:

Так же присутствует интеграция с библиотекой PhoneGap позволяющей нам работать с API нашего устройства — т.е. обращаться к камере , gps, акселерометру , списку контактов , отправке смс , звонкам и еще много к чему, а так же собирать наше приложение для всех платформ.

Основные минусы:

  • Сложно выявить существенный минус, если только — по умолчанию не предоставляется средство сборки проэкта. Ну и как и во всех JS фреймворках — проблемы с быстродействием из-за чрезмерного использования css3 и раздутой DOM модели

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

]]> http://peekaboo-games.com/frameworks_jquery/feed/ 0