ads
ads
ads
ads
ads
МЕНЮ:
Главная Сотовая связь Софт Веб-мастеру Графика Железо Portable Игры Интернет Чудеса Науки Apache Delphi Drupal Flash Html Юмор Каталог ноутбуков FAQ
загрузка...


О железках:
Huawei выпустила смартфоны Nova 2 и Nova 2 Plus
Представлен флагманский смартфон-внедорожник AERMOO M1
UMIDIGI Crystal Pro получит двойную камеру Panasonic Lumix
Alcatel выпустила бюджетные Wi-Fi и 4G планшеты Pixi 4
Xiaomi продала более 3 миллионов смартфонов Mi Max
Топ новостей
Meizu E2 получил более 3 миллионов регистраций за первы ...
Meizu E2 получил более 3 миллионов регистраций за первы ...


Создатель McAfee разработал самый защищённый смартфон в ...
Создатель McAfee разработал самый защищённый смартфон в ...


Acer представила ноутбуки Acer Predator Triton 700 и Pr ...
Acer представила ноутбуки Acer Predator Triton 700 и Pr ...


Apple накопила более $250 млрд наличными
Apple накопила более $250 млрд наличными


Керамическая версия Xiaomi Mi 6 будет доступна только в ...
Керамическая версия Xiaomi Mi 6 будет доступна только в ...


Первая партия Xiaomi Mi 6 разошлась за считанные секунд ...
Первая партия Xiaomi Mi 6 разошлась за считанные секунд ...


ASUS готовит к анонсу новый камерофон Zenfone Zoom S
ASUS готовит к анонсу новый камерофон Zenfone Zoom S


Концепт Samsung Galaxy Note 8 с бесконечным дисплеем
Концепт Samsung Galaxy Note 8 с бесконечным дисплеем


Пользователи Samsung Galaxy S8 жалуются на произвольные ...
Пользователи Samsung Galaxy S8 жалуются на произвольные ...


Vkworld выпустила обновленную защищенную звонилку Stone ...
Vkworld выпустила обновленную защищенную звонилку Stone ...


О софте:
"Лунная деревня" приобретает очертания
BASSLET — гаджет любителей клубов
Хакеры способны взломать кардиостимуляторы
Новосибирские физики построят коллайдер
Китай изучит гравитационные волны


Age Of Comp » Html » PhoneJS — Новый HTML5-фреймворк для мобильных приложений

PhoneJS — Новый HTML5-фреймворк для мобильных приложений

DevExpress, создав небольшую команду, и через несколько месяцев получила PhoneJS. Это стало решением для создания приложение под разные мобильные ОС при помощи HTML5.
PhoneJS — Новый HTML5-фреймворк для мобильных приложений

Этот фреймворк не был написан с нуля, а был использован jQuery в связке с библиотекой Knockout(без него не был бы реализован паттерн Model-View-ViewModel (MVVM) для javascript). Но как же PhoneJS получает доступ к файловой системе, камере, акселерометру и прочим функциям телефона? Все это реализовано при помощи Apache Cordova (aka PhoneGap ).
Layout-движок и UI-компоненты самых популярных мобильных ОС были построены на этом фундаменте.
Рассмотрим структуру приложения на примере простой демки TipCalculator:
Вы находитесь в кафе/ресторане и Вам приносят счет, но вы не знаете сколько чаевых оставить. Это приложение поможет Вам рассчитать количество чаевых.
Посмотреть действие можно в онлайн-симуляторе, а исходный код - доступен на GitHub.
Точка входа — файл index.html, в котором вы увидите только необходимые META-теги и подключение всех остальных ресурсов.View-файлы подключаются так:
<link rel="dx-template" type="text/html" href="views/home.html" />

Такой подход позволяет избежать распространенной проблемы Single Page приложений, когда всю HTML разметку приходится держать в одном длинном index.html.
В файле index.js объявляется пространство имен TipCalculator и создается объект-приложение:
TipCalculator.app = new DevExpress.framework.html.HtmlApplication(...)

Приложению мы сообщаем тип layout-а, используемый по умолчанию. В данном случае это самый простой из возможных — empty layout, однако есть и более функциональные варианты с навигационной панелью и так популярной сегодня боковой навигацией.
PhoneJS — Новый HTML5-фреймворк для мобильных приложений

Есть и маршрутизация (routing):
TipCalculator.app.router.register(":view", { view: "home" });

Таким образом был зарегистрировали простой маршрут, который из адресной строки (а если точнее, то из hash-сегмента) получает имя текущего экрана (view), причем экран «home» будет использоваться по умолчанию. Его и рассмотрим дальше.

View Model

В файле views/home.js в пространство имен TipCalculator добавляется функция home, которая создает view-model (модель представления) для экрана home
TipCalculator.home = function(params) {
    . . .
};

Есть три входных параметра: сумма чека (billTotal), количество участников (splitNum) и размер вознаграждения (tipPercent). Они объявлены как observable, чтобы их можно было привязывать к UI-компонентам и отслеживать изменения значений
var billTotal = ko.observable(),
    tipPercent = ko.observable(DEFAULT_TIP_PERCENT),
    splitNum = ko.observable(1);

На основании пользовательского ввода вычисляются 4 результата: totalToPay, totalPerPerson, totalTip и tipPerPerson. Все четыре являются dependent observable (или computed) — то есть обновляются автоматически при изменении хотя бы одного observable, задействованного в вычислении результата.
var totalTip = ko.computed(...);

var tipPerPerson = ko.computed(...);

var totalPerPerson = ko.computed(...);

var totalToPay = ko.computed(...);

Финальную сумму, как правило, округляют, для чего есть две функции roundUp и roundDown, изменяющие значение roundMode. Его изменение влечет пересчет зависящего от него totalToPay:
var totalToPay = ko.computed(function() {
    var value = totalTip() + billTotalAsNumber();

    switch(roundMode()) {
        case ROUND_DOWN:
            if(Math.floor(value) >= billTotalAsNumber())
                return Math.floor(value);
            return value;

        case ROUND_UP:
            return Math.ceil(value);

        default:
            return value;
    }
});

Однако при изменении каждого из входных параметров необходимо сбросить округление, чтобы пользователь видел точные цифры, для этого с помощью метода subscribe мы подписываемся на их изменение:
billTotal.subscribe(function() {
    roundMode(ROUND_NONE);
});

tipPercent.subscribe(function() {
    roundMode(ROUND_NONE);
});

splitNum.subscribe(function() {
    roundMode(ROUND_NONE);
});

View model очень проста.

View

Перейдем к HTML-разметке. На верхнем уровне расположены два специальных div-элемента: для view с именем “home” задается разметка для области с именем “content”.
<div data-options="dxView : { name: 'home' }">
    <div data-options="dxContent : { targetPlaceholder: 'content' }">
        . . .
    </div>
</div>

Внутри расположен тулбар:
<div data-bind="dxToolbar: { items: [ { align: 'center', text: 'Tip Calculator' } ] }"></div>

dxToolbar — это виджет из состава PhoneJS. Его описание в разметке реализовано в виде Knockout-привязки (binding).

Ниже идут филдсеты. Для их создания применяются предопределенные во фреймворке CSS классы dx-fieldset и dx-field. Внутри поле для ввода суммы и два слайдера для процентов и количества человек:
<div data-bind="dxNumberBox: { value: billTotal, placeholder: 'Type here...', valueUpdateEvent: 'keyup', min: 0 }">
</div>

<div data-bind="dxSlider: { min: 0, max: 25, step: 1, activeStateEnabled: true, value: tipPercent }"></div>

<div data-bind="dxSlider: { min: 1, step: 1, max: 10, activeStateEnabled: true, value: splitNum }"></div>


Далее — две кнопки (dxButton) для округления итоговой суммы и вывод результатов.
<div class="round-buttons">
    <div data-bind="dxButton: { text: 'Round Down', clickAction: roundDown }"></div>
    <div data-bind="dxButton: { text: 'Round Up', clickAction: roundUp }"></div>
</div>

<div id="results" class="dx-fieldset">
    <div class="dx-field">
        <span class="dx-field-label">Total to pay</span>
        <span class="dx-field-value" style="font-weight: bold" data-bind="text: Globalize.format(totalToPay(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Total per person</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(totalPerPerson(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Total tip</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(totalTip(), 'c')"></span>
    </div>
    <div class="dx-field">
        <span class="dx-field-label">Tip per person</span>
        <span class="dx-field-value" data-bind="text: Globalize.format(tipPerPerson(), 'c')"></span>
    </div>
</div>

Даже на таком простом примере мы чётко видим, как быстро с помощью PhoneJS создать мобильное приложение, обладая навыками веб программирования.

Запуск, отладка и упаковка для маркетов

Чтобы произвести отлажку достаточно настроить ваш локальный веб-сервер на папку с исходными кодами и открыть URL на устройстве, в эмуляторе устройства или в браузере.
В браузере будет необходимо подменить строку UserAgent, чтобы он представлялся смартфоном или планшетом. К счастью, developer tools современных браузеров это легко позволяют.

Есть путь, лишающий Вас от установки платформенных SDK — использовать онлайн-сервис PhoneGap Build который позволяет бесплатно собирать одно приложение. С помощью PhoneGap Build, буквально через пару кликов можем получить мобильное приложение для разных платформ.
PhoneGap Build не поддерживает упаковку для Windows Phone 8 (планируют добавить позже в этом году), и для сборки пакетов понадобится Windows Phone SDK и шаблон CordovaWP8App, включенный в дистрибутив PhoneGap.
Конечно же, придется зарегистрироваться как разработчик на сайтах Apple, Google и Microsoft, но этот процесс хорошо описан для каждого из магазинов.

Для пользователей Visual Stuido у нас есть отдельный продукт DXTREME Mobile (включающий PhoneJS в качестве одного из компонентов), позволяющий собирать приложения для iOS, Android и Windows Phone 8 непосредственно из среды разработки.
PhoneJS — Новый HTML5-фреймворк для мобильных приложений


Итак PhoneGap + PhoneJS — все что нужно для разработки мобильных приложений.


Нравится пост? Жми: