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


О железках:
Версия Windows 10 для китайского правительства прошла тестирование
Xiaomi может выпустить бюджетный безрамочный Mi Mix за $145
Xiaomi выпустит детскую маску с воздушным фильтром
Galaxy S8 и S8+ будут еще дороже, чем считалось ранее
Xiaomi Mi 6 Plus с двойной камерой замечен в Сети
Топ новостей
Стала известна предполагаемая стоимость Xiaomi Mi 5C
Стала известна предполагаемая стоимость Xiaomi Mi 5C


MWC 2017: Gionee представила селфифоны A1 и A1 Plus
MWC 2017: Gionee представила селфифоны A1 и A1 Plus


SanDisk выпустила новую Extreme microSDXC UHS-I карту с ...
SanDisk выпустила новую Extreme microSDXC UHS-I карту с ...


Лучшим смартфоном 2016 года стал Samsung Galaxy S7 Edge
Лучшим смартфоном 2016 года стал Samsung Galaxy S7 Edge


Sony презентовали проектор Xperia Touch, разработанный  ...
Sony презентовали проектор Xperia Touch, разработанный ...


Google больше не выпустит ноутбуки Pixel
Google больше не выпустит ноутбуки Pixel


ZTE презентовали первый в мире гигабитный смартфон
ZTE презентовали первый в мире гигабитный смартфон


Adata продемонстрировала SSD на базе 3D-NAND
Adata продемонстрировала SSD на базе 3D-NAND


Российские Android-роботы отправились в Турции
Российские Android-роботы отправились в Турции


Представители Samsung довольны закрытой презентацией Ga ...
Представители Samsung довольны закрытой презентацией Ga ...


О софте:
"Лунная деревня" приобретает очертания
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 — все что нужно для разработки мобильных приложений.


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