1С-Битрикс Разработчикам - Нативные приложения и bitrixmobile: Шаг 1 Создание заготовки шаблона

Очень скоро выходит 11 версия Битрикса. В нем по идее должны появится примеры создания нативных приложений для мобильных платформ. Данным постом я хочу продемонстрировать как создать заготовку для таких приложений.
Будут рассмотрены вопросы:
1/ технологии
2/ как создавать приложение
3/ динамическое создание структуры

Вопрос синхронизации данных с Битриксом оставим для следующего топика (появится после выхода обновления)

Платформа: Android. (для остальных платформ ситуация аналогичная)
[spoiler]
Технологии которые включает в себя BitrixMobile

0/ HTML 5 - что это и зачем думаю не стоит объяснять

1/ Jquery Mobile (jquerymobile.com) - текущая версия 1.0 RC1
Используется для построения шаблонов приложения, максимально приближенных к нативным приложениям
Замечание: В модулях bitrix.mobilestore (v 0.0.1) и studioNicka.mobileconf (v 0.0.1) используются устаревшие скрипты - меняйте

2/ PhoneGap (www.phonegap.com) - текущая версия 1.1.0
Используется для компиляции приложения из HTML в нативное представление под различные платформы
Замечание: В модулях bitrix.mobilestore (v 0.0.1) и studioNicka.mobileconf (v 0.0.1) используются устаревшие скрипты - меняйте
Как создавать приложение

Тут все "просто". Создаете HTML версию, используя JS взаимодействуете с сайтом и телефоном (Phonegap), потом компилируете проект под нужную платформу и все - ваше приложение создано.
Работать можно как на локальном рабочем месте, так и писать прямо на своем сайте.

Если локально - используйте Xcode для iPhone и Eclipse для Android

Если нет желания заворачиваться с платформами - рекомендую использовать сервис PhoneGap Build и моим модулем PhonegapBuild4BitrixMobile для связи вашего сайта с данным сервисом

В дальнейшем я буду описывать именно случай разработки на стороне сайта с использованием модуля PhonegapBuild4BitrixMobile

Вопросы установки модуля опустим - они подробно описаны в маркетплейсе

И так приступим
Наша цель создать простое приложение которое будет запускаться с Android дивайса.

1/ создадим новый проект (/bitrix/admin/studioNicka_pgbm_edit.php?lang=ru)
зададим следующие параметры

ID - by.demo.pr1
Название - DEMO
Версия - 0.0.1
Версия кода - 1

Укажем опции для компиляции

Работа с файлами (file) WRITE_EXTERNAL_STORAGE
Работа с сетью (доступ к интернету) (network) ACCESS_NETWORK_STATE
Работа с уведомлениями (вибрация) (notification) VIBRATE

Остальные - по своему желанию, я добавил еще иконку (icon.png) и заставку (SPLASH) (startup.png)
Жмем сохранить и в /bitrix/BitrixMobileProjects/by.demo.pr1 появился наш проект
Здесь уже есть

файл config.xml - сообщает PhoneGap Build как компилировать проект (исходя из опций и параметров которые вы задали в настройках проекта)
файл index.html - простенькая заготовка

ВНИМАНИЕ: Файл config.xml хранится в UTF-8 кодировке, остальные в текущей кодировке сайта.
Если у вас на сайте кодировка не UTF-8 - то модуль при передаче сам с конвертирует кодировку и отдаст нужную

2/ загрузим нужные JS библиотеки

Т.к. сейчас мы рассматриваем только создание заготовки, то качаем только jquery + jquerymobile
у меня получилась такая структура

3/ создадим структуру приложения
Структура index.html

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      
      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
      <meta name="apple-mobile-web-app-capable" content="yes" />
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />

      <link rel="apple-touch-icon" sizes="114x114" href="icon.png"/>
      <link rel="apple-touch-icon" sizes="72x72" href="icon.png"/>
      <link rel="apple-touch-icon-precomposed" href="icon.png"/>
      <link rel="apple-touch-startup-image" href="startup.png">

      <title>DEMO</title>
      <link rel="stylesheet" href="jquery.mobile-1.0rc1.min.css" />
      <link rel="stylesheet" href="jqm-docs.css" />
      
      <script src="jquery-1.6.4.min.js"></script>
      <script src="jqm-docs.js"></script>
      <script src="jquery.mobile-1.0rc1.min.js"></script>
      <script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
      
   </head>
   <body>
   ...
   </body>
</html>

где

<meta charset="utf-8">

кодировка - везде пишем только так - иначе в приложении получим неразбериху с кодировкой

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />

Установка масштаба если не указывать user-scalable=no - то пользователь сможет масшабировать приложение

<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>

заглушка - нужный скрипт PhoneGap Build сам подгрузит на этапе компиляции

jqm-docs.css - дополнительные стили - можете посмотреть в демо примере (в конце поста)
jqm-docs.js - JS в котором мы опишем функциональность приложения
В body запишем

<div data-role="page" class="type-home" data-theme="a">
      <div data-role="content">
         <div class="content-secondary">
      
            <div id="jqm-homeheader">
               <h1 id="jqm-logo"><img src="images/logo.png" alt="Заголовок" /></h1>
               <p>Заголовок и подзаголовок</p>
            </div>
      
      
            <p class="intro"><strong>Welcome.</strong> Всякий текст приветственный.</p>
            
            <ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">
               <li data-role="list-divider">Ссылки сервисные</li>
               <li><a href="#category-items?category=animals">Окно 1</a></li>
               <li><a href="#category-items?category=colors">Окно 2</a></li>
               <li><a href="#category-items?category=vehicles">Окно 3</a></li>
            </ul>
            
         </div><!--/content-primary-->   
         
         <div class="content-primary">
            <nav>
               <ul data-role="listview" data-inset="true"  data-theme="a" data-dividertheme="a">
                  <li data-role="list-divider">Блок 1</li>
                  <li><a href="#category-items?category=animals">Окно 1</a></li>
                  <li><a href="#category-items?category=colors">Окно 2</a></li>
                  <li><a href="#category-items?category=vehicles">Окно 3</a></li>
                  
                  <li data-role="list-divider">Блок 2</li>
                  <li><a href="#category-items?category=animals">Окно 1</a></li>
                  <li><a href="#category-items?category=colors">Окно 2</a></li>
                  <li><a href="#category-items?category=vehicles">Окно 3</a></li>
               </ul>
            </nav>
         </div>

         

      </div>
      
      <div data-role="footer" class="footer-docs" data-theme="d">
            <p>&copy; 2011 studioNicka.by</p>
      </div>   
      
   </div>
   <div id="category-items" data-role="page" data-theme="a">
      <div data-role="header"><h1></h1></div>
      <div data-role="content"></div>
   </div>

где

<div data-role="page" class="type-home" data-theme="a"> 
...
</div>

главная страница приложения

<div id="category-items" data-role="page" data-theme="a">
      <div data-role="header"><h1></h1></div>
      <div data-role="content"></div>
</div>

Шаблон динамических страниц

Теперь рассмотрим jqm-docs.js

function setDefaultTransition(){
    var winwidth = $( window ).width(),
        trans ="slide";
        
    if( winwidth >= 1000 ){
        trans = "none";
    }
    else if( winwidth >= 650 ){
        trans = "fade";
    }

    $.mobile.defaultPageTransition = trans;
}


$(function(){
    setDefaultTransition();
    $( window ).bind( "throttledresize", setDefaultTransition );
});

Указываем приложению как организовывать переходы между страницами - зависит от ширины экрана дивайса
И динамическое формирование новой страницы.

Получить данные со стороны сайта можно используя AJAX (JSON) запрос.
Для простоты мы сформируем данные прямо в скрипте без запросов

var categoryData = {
    animals: {
        name: "Animals",
        description: "All your favorites from aardvarks to zebras.",
        items: [
            {
                name: "Pets",
            },
            {
                name: "Farm Animals",
            },
            {
                name: "Wild Animals",
            }
        ]
    },
    colors: {
        name: "Colors",
        description: "Fresh colors from the magic rainbow.",
        items: [
            {
                name: "Blue",
            },
            {
                name: "Green",
            },
            {
                name: "Orange",
            },
            {
                name: "Purple",
            },
            {
                name: "Red",
            },
            {
                name: "Yellow",
            },
            {
                name: "Violet",
            }
        ]
    },
    vehicles: {
        name: "Vehicles",
        description: "Everything from cars to planes.",
        items: [
            {
                name: "Cars",
            },
            {
                name: "Planes",
            },
            {
                name: "Construction",
            }
        ]
    }
};

Функция формирования страницы

function showCategory( urlObj, options )
{
    var categoryName = urlObj.hash.replace( /.*category=/, "" ),
        category = categoryData[ categoryName ],
        pageSelector = urlObj.hash.replace( /\?.*$/, "" );

    if ( category ) {
        var $page = $( pageSelector ),
            $header = $page.children( ":jqmData(role=header)" ),
            $content = $page.children( ":jqmData(role=content)" ),
            markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
            cItems = category.items,
            numItems = cItems.length;
        for ( var i = 0; i < numItems; i++ ) {
            markup += "<li>" + cItems[i].name + "</li>";
        }
        markup += "</ul>";
        $header.find( "h1" ).html( category.name );
        $content.html( markup );
        
        $page.page();
        $content.find( ":jqmData(role=listview)" ).listview();

        options.dataUrl = urlObj.href;
        $.mobile.changePage( $page, options );
    }
}

и запуск этой функции в момент инициализации приложения

$(document).bind( "pagebeforechange", function( e, data ) {
    if ( typeof data.toPage === "string" ) {
        var u = $.mobile.path.parseUrl( data.toPage ),
            re = /^#category-item/;
        if ( u.hash.search(re) !== -1 ) {
            showCategory( u, data.options );
            e.preventDefault();
        }
    }
});

теперь осталось в контент главной страницы добавить структуру

<ul data-role="listview" data-inset="true" data-theme="d" data-dividertheme="d">
<li data-role="list-divider">Ссылки сервисные</li>
   <li><a href="#category-items?category=animals">Окно 1</a></li>
   <li><a href="#category-items?category=colors">Окно 2</a></li>
   <li><a href="#category-items?category=vehicles">Окно 3</a></li>
</ul>

Суть такая - JS перебирает ссылки с адресом #category-items, вычленяет элемент и вызывает showCategory для показа окна с нужными данными
Полный код - есть в конце топика

Сохраняем все и тестируем в браузере. Приложение буднт работать по адресу http://ВАШ_САЙТ/bitrix/BitrixMobileProjects/by.demo.pr1/

Вот мой скрин

3/ компиляция приложения

идем в проект /bitrix/admin/studioNicka_pgbm_edit.php?lang=ru&ID=by.demo.pr1 и жмем кнопку Импортировать проект в PhoneGap:Build

Если Вы верно настроили подключение к PhoneGap:Build (смотрите в описании модуля на маркетплейсе), то проект будет загружен в PhoneGap:Build и через некоторое время появится ссылка на закачку приложения (страницу нужно обновить вручную) или описание ошибки компиляции