Мобильное приложение 3.x
1 / 105

С помощью нового продукта «1С-Битрикс: Мобильное приложение» можно создавать свои мобильные приложения с использованием Javascript и HTML5, что существенно дешевле и значительно быстрее нативной разработки.

Внимание! "Мобильное приложение" на данный момент не допускает добавление сторонних плагинов.

Системные требования

Минимальные версии систем:

  • iOS 9.0 или более поздняя версия. Совместимо с iPhone, iPad и iPod touch.
  • Android 4.4 и выше

Максимальные размеры приложений:

  • iOS - не более 500 Mb
  • Android - не более 100 Mb

В данной главе рассказывается как разрабатывать свои мобильные приложения.

© «Битрикс», 2001-2008, «1C-Битрикс», 2008-2020 1С-Битрикс


Мобильное приложение
2 / 105

C чего начать?

  1. Установить приложение для разработчиков из Google Play или AppStore. При запуске приложения появляется форма для ввода некого адреса, которого пока нет.

  2. Далее на установке «1С-Битрикс: Управление сайтом» необходимо:
    • Установить модуль Мобильная платформа.
    • Выбрать место расположения мобильного приложения. Например, это будет папка /myfirst_app/.
    • Создать файлы /myfirst_app/left.php и /myfirst_app/index.php.
    • Шаблон сайта не должен отличаться от тех шаблонов, которые создаются для обычных сайтов. Единственное отличие - это присутствие в header.php следующего:
      if (CModule::IncludeModule("mobileapp"))
   CMobile::Init();

      Т.е чтобы создать шаблон мобильного приложения, нужно вызвать метод CMobile::Init() в стандартном шаблоне сайта. С помощью этого метода инициализируются нужные константы, подключаются нужные JS-скрипты, соответствующие платформе клиента (iOS или Android), создаются нужные объекты и т.п.

    • Далее в настройках сайта назначить созданный шаблон сайта для папки /myfirst_app/. Рекомендуется поставить сортировку подключения шаблонов 0 или 1.
    • И последний шаг - создать в папке /myfirst_app/ файл config.php. При обращении к файлу должен возвращаться JSON. Файл должен быть следующего содержания:
      <?
header("Content-Type: application/x-javascript");
$config = array(
   "appmap" => array(
      "main"=>"/myfirst_app/index.php",
      "left"=>"/myfirst_app/left.php"
      )
   );
echo json_encode($config);
?>
      где:

      main - стартовая страница приложения;
      left - страница, которая загружается в левую часть слайдера.

  3. После этого появится адрес, который нужно ввести в форме приложения для разработки п.1 - http://my_site/myfirst_app/.

Меню приложения

Теперь приложение может подключаться к сайту и показывать контент. После подключения уже разработчик должен обеспечить корректную навигацию по приложению. Поэтому, необходимо меню. Его часто располагают в левой части слайдера. Согласно содержанию config.php, в качестве страницы для левой части слайдера загружается /myfirst_app/left.php.

Давайте расположим в этом файле компонент bitrix: mobileapp.menu - компонент меню:

<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");

$arParams = array(
   "MENU_FILE_PATH" => SITE_DIR . "myfirst_app/.mobile_menu.php",
);

$APPLICATION->IncludeComponent(
   'bitrix:mobileapp.menu',
   'mobile',
   $arParams,
   false,
   Array('HIDE_ICONS' => 'Y'));
?>

   <script type="text/javascript">
      app.enableSliderMenu(true);
   </script>
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>

На вход компоненту отдаем параметр MENU_FILE_PATH - путь к файлу меню. Разместим этот самый файл меню по нужному пути.

<?
IncludeModuleLangFile(__FILE__);

$arMobileMenuItems = array(
   array(
      "type" => "section",
      "text" =>"Раздел меню",
      "sort" => "100",
      "items" =>   array(
         array(
            "text" => "Новый пункт меню!",
            "data-url" => SITE_DIR."myfirst_app/test.php",
            "class" => "menu-item",
            "id" => "main",
                "data-pageid"=>"main_page"
         )
      )
   )
);
?>

Структура меню проста. Есть секции. Каждый пункт меню снабжается нужными атрибутами:

  • text - название пункта;
  • data-url - куда будем переходить при клике по пункту;
  • class - css-класс пункта меню;
  • id - идентификатор;
  • data-pageid - идентификатор, который учитывается приложением. При клике на пункт страница прогрузится и закешируется. Таким образом, в дальнейшем она всегда будет открываться мгновенно, но за актуальностью контента на этой странице придется следить.

В итоге получим вот такое меню:

Что такое app?

В исходном коде страницы меню есть вызов функции app.enableSliderMenu(true) - разблокировка слайдера. Что за объект app? Это объект библиотеки BitrixMobile 2.0, который как раз и позволяет управлять приложением. При вызове в шаблоне приложения CMobile::Init() объект app становится доступным. Этот объект содержит множество полезных функций, которые описаны далее в курсе и в файле /bitrix/js/mobileapp/bitrix_mobile.js

Страницы, таблицы

Разместим нашу страницу /myfirst_app/test.php, на которую ссылается созданный пункт меню:

<?
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");
?>
   <script type="text/javascript">
      function openTable()
      {
         app.openBXTable({
            url: "/myfirst_app/list.php",
            TABLE_SETTINGS: {
               alphabet_index: false, // Выключим алфавитный индекс
               showtitle: true, //Покажем тайтл
               cache: false,// не кэшируем
               name: "Разделы", //
               callback: function (data)
               {
                  alert(JSON.stringify(data));
               }
            }
         });
      }

      //добавить кнопку
      app.addButtons(
         {
            menuButton:
               {
               type: 'plus',
               style: 'custom',
               callback: function ()
               {
                app.menuShow();
               //app.openNewPage("/myfirst_app/test2.php");
               }
            }
            }
         );

      //добавить меню
      app.menuCreate({
         items: [
            {
               name: "Открыть страницу",
               action: function ()
               {
                  //   alert("Hello");
                  app.openNewPage("/myfirst_app/test2.php");
               }
            },
            {
               name: "bitrix",
               url: "http://bitrix.ru",
               icon: 'settings'
            }
         ]
      });

      //title
      app.setPageTitle({
         title: "MyFirstApp"
      });

      //pull-down-to-refresh
      app.pullDown({
         enable: true,
         callback: function ()
         {
            document.location.reload();
         },
         downtext: "Тяни...",
         pulltext: "Отпускай...",
         loadtext: "Жди..."
      });

   </script>

   <button style="width:100%;height:50px" onclick="openTable();">Table</button>
<? require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php") ?>

Далее необходимо создать /myfirst_app/list.php с таким содержанием:

<?
require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
$data = Array(
    "data"=>Array(
        "company"=>Array(
                    Array(
                        "ID"=>1, //идентификатор записи
                        "NAME"=>"Google", //имя для отображения
                        "URL" => "http://google.ru",
                        "IMAGE"=>"http://www.mintfo.com/wp-content/uploads/2012/08/New-blue-logo-Google-revamps-mainpage-favicon-300x300.png",
                        "TAGS" => "Заграничный поисковик",
                        "SECTION_ID"=>"milk"//принадлежность к секции
                    ),
                    Array(
                        "ID"=>2,
                        "NAME"=>"Bitrix",
                        "SECTION_ID"=>"meat",
                        "IMAGE"=>"http://www.incr.ru/img/bitrix-logo.png",
                        "TAGS"=>"Отечественная CMS",
                        "URL"=>"http://bitrix.ru"
                    ),
                    Array(
                        "ID"=>3,
                        "NAME"=>"Yandex",
                        "SECTION_ID"=>"meat",
                        "IMAGE"=>"http://blogs.computerra.ru/wp-content/uploads/2012/10/yandex-browser-logo-289x300.jpg",
                        "TAGS" => "Свой домашний браузер",
                        "URL"=>"http://yandex.ru"
                    )
            ),
        ),
        "names"=>Array("company"=>"Компании")
);
$data = $APPLICATION->ConvertCharsetArray($data, "windows-1251","utf-8");
$APPLICATION->RestartBuffer();
echo json_encode($data);
die();

Запустим приложение и перейдем по пункту Новый пункт меню - увидим страницу с кнопкой + на панели с заголовком Потяни,чтобы-обновить и кнопкой Table. Нажмем на кнопку Table - откроется таблица c данными.

События

В мобильном приложении есть события, которые позволяют гибко решать множество задач. Обрабатывать эти события просто. Например:

BX.addCustomEvent("onOpenPageAfter", function(){
      setTimeout(function(){
            app.closeController();
   },2000);
});

Размещая этот код, мы как бы говорим странице: "После открытия закройся обратно через 2 секунды."

Таким образом, мы получили скелет приложения - навигацию и первую страницу. За основу также можно взять уже готовое решение Мобильный интернет-магазин (модуль eshop_app).


Создание мобильного приложения
3 / 105

В данном разделе рассказывается, как создать аккаунты в программе для разработчиков и даны рекомендации по всем пунктам заполнения данных в Форме заявки на компиляцию.


Регистрация в программе для разработчиков
4 / 105

Остановимся более подробно на создании аккаунтов на Google Play и Apple Developer Center.

Регистрация в программе для разработчиков

Итак, регистрация в программе для разработчиков - для чего это нужно? Регистрация в программе разработчиков дает возможность публикации ваших приложений в магазинах приложений Google Play и AppStore.

  • Google Play

    Чтобы стать участником программы для разработчиков Google Play, нужно иметь аккаунт Google. Зарегистрироваться можно по адресу.

    Далее Ваш аккаунт нужно зарегистрировать в Google Play. Сделать это можно по следующему адресу.

  • Apple Developer Center

    Для того, чтобы стать участником программы для разработчиков Apple Developer Center, нужно иметь аккаунт AppleID. Зарегистрироваться можно по адресу.

    После этого, аккаунт нужно зарегистрировать в Apple Developer Center. Сделать это можно по следующему адресу, войдя под своим AppleID (или ссылка Account в правом верхнем углу на сайте Apple Developer Center).

Поздравляем! Вы теперь участник программы разработчиков.

Внимание! Сроки регистрации могут варьироваться и зависеть от предыдущих попыток заявителя получить регистрацию программ, загруженности отдела поддержки разработчиков Google и Apple пр. Рабочий день - день, в который одновременно работают государственные учреждения в США и России.


Форма заявки на компиляцию
5 / 105

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


Вкладка «Общие»
6 / 105

Лицензионный ключ

Сборка приложения производится только при активном лицензионном ключе «1С-Битрикс: Мобильное приложение». В случае, если срок действия лицензионного ключа истек, сборка производится не будет. Чтобы избежать это, своевременно продлевайте срок действия лицензионного ключа.

Название приложения

Используется для отображения в магазинах приложений Google Play и App Store. Имеется ограничения по количеству символов:

  • Google Play - максимально 30 символов.
  • App Store - максимально 50 символов.

Рекомендации:

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

  1. Название должно быть коротким. Оптимальным образом на страницах приложения в App Store и Google Play, выглядят названия приложений длиной не более 25 символов. В то же время длина названия не единственный фактор, который стоит учитывать. Обратите внимание на то, что на отображение названия может повлиять место переноса названия на новую строку. Простое название приложения выглядит лучше, чем длинное и сложное.
  2. Используйте простые названия. Например, Вы решили дать своему приложение следующее название - «Мое приложение - самое лучшее и самое полезное приложение для всех». Это название является слишком длинным. Лучше назвать приложение просто «Мое приложение». Все остальное можно добавить в описание приложения.
  3. Используйте уникальное название. Не используйте в названии похожие с имеющимися уже приложениями. Например, Вы решили дать название своему приложение имя «Фонарик». Приложение с таким названием очень много, и по названию сложно понять чем они отличаются друг от друга. Выделиться можно, если дать оригинальное названия - «Оригинальный фонарик», «Фонарик - стробоскоп» и тд. Так же, если название приложения содержит текст описания совместимости, например, «Мое приложение для iPad», данный текст не принимается во внимание при определении соответствия названия требованиям недопустимости названий-дубликатов и соблюдения авторских прав. Иными словами, например, если в App Store уже имеется приложение с названием «Мое приложение», использовать название «Мое приложение для iPad» для другого приложения будет недопустимо.
  4. Помните об авторском праве. Убедитесь, что название приложения не нарушает законов о товарном знаке или права третьих лиц. Например, название «1С-Битрикс Новости» будет недопустимо, поскольку «1С-Битрикс» является зарегистрированной торговой маркой. Если Вы будете использовать в названии своего приложения, имя которого является чужой торговой маркой или уже используется в App Store или Google Play, приложение будет удалено из магазинов приложений App Store или Google Play.
  5. Изменение названия размещенного приложения. Название размещенного приложения можно изменить только при следующем обновлении двоичного файла приложения до новой версии. В противном случае, чтобы изменить название приложения, потребуется изъять его из магазина, а затем снова предоставить.

Краткое название (например, MyShop)

Используется для отображения названия приложения на устройствах.

Рекомендации:

  1. Не выбирайте слишком длинные названия. Большинство приложений с длинными названиями на устройствах будут заканчиваться точками и терять ясность названия приложения. Чтобы избежать такое, разработчикам рекомендуется использовать не более 10 символов типа w, и не более 13 символов типа i. Символами считаются набор цифр и букв, знаки препинания, а так же спецсимволы. Пробел тоже считается символом.
  2. Краткое название должно напоминать полное имя. Выбирая краткое название для Вашего приложения помните, пользователь должен найти установленное приложение на своем устройстве. Например, в магазинах приложений App Store и Google Play Ваше приложение называется «Програбли: бизнес в Интернете без ошибок», то краткое название «Програбли» ассоциируются с полным названием, и не нарушают правила публикации приложения.

Адрес подключения (с протоколом)

Укажите корректный адрес приложения в формате: <протокол>://<домен>/<имя_папки>.

Контактный email

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

Описание приложения

Данный пункт необходим в случае, если публикацию сборки в магазинах приложений Google Play и App Store помогают оформлять наши разработчики.

Используется для описания приложения в магазинах приложений Google Play и App Store.

Рекомендации:

  1. В описании должно быть понятно пользователю как работает Ваше приложение, и зачем оно нужно.
  2. Описание не должно быть более 4000 символов для Apple Store (рекомендовано 700) и 500 символов для Google Play.
  3. Избегайте технических деталей.
  4. Не пренебрегайте абзацами. Варьируйте длину предложения - это делает текст более выразительным. Используйте разрывы линии и маркеры, для того, чтобы увеличить четкость.

Дополнительная информация

В данном поле можно указать определенные условия сборки. Например, сборка должна быть только для телефонов, или только в портретном режиме. Либо, другую, необходимую информацию, для наших разработчиков.

Платформа

Укажите, на какой платформе необходима Вам сборка. На данный момент, сборки могут быть собраны на платформах iOS и Android. В течение срока действия лицензионного ключа, вы можете запросить, по мере необходимости, сборку либо на обе платформы, либо на конкретную платформу.

Буду публиковать сам

Данный способ подходит тем, кто уже публиковал самостоятельно свои сборки в магазинах приложений App Store и Google Play, и имеет представления о Сертификатах (Certificates), Идентификаторах приложений (Identifiers), о Профилях (Provisioning Profiles), сертификатах PKCS12, и знаком с сервисами Google..

В первую очередь, нашим разработчикам необходима информация о созданном уникальном идентификаторе приложения (Bundle ID).

Для возможности сборки Вашего приложения на платформе iOS, нашим разработчикам необходимо прислать: сгенерированные аккаунтом для разработчиков iOS Certificates, сертификат .p12 и iOS Provisioning Profiles для публикации (есть еще для разработчиков, их высылать не надо).

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

Если Вам необходимо будет использование push-уведомлений на платформе iOS, нашим разработчикам также нужен сгенерированный сертификат для push-уведомлений (Apple Push Service).

Примечание: Более подробно о создании необходимых сертификатов описано в документации App Distribution Guide: Maintaining Your Signing Identities and Certificates, Configuring Push Notifications.

Если Вы планируете использование push-уведомлений в Вашем приложении на платформе Android, то Вам необходимо прислать нашим разработчикам сгенерированные ключи сервиса Google Cloud Messaging.

Пошаговая инструкция:

  1. войдите в консоль с помощью Вашего оплаченного аккаунта по адресу: https://console.cloud.google.com;
  2. выберите Create Project, укажите Project name, нажмите Create;
  3. перейдите в созданный Project, откройте меню -> API Manager, на вкладке Google APIs в разделе Mobile APIs найдите и нажмите на Google Cloud Messaging -> Enable;
  4. перейдите в раздел Credentials -> Create credentials -> API key -> Server key -> Name любое, IP address пустой -> Create;
  5. пришлите нам Key, который был создан в п.4;
  6. откройте меню -> Home, разверните поле с заголовком Project: <имя Вашего проекта> и пришлите нам также Project ID и Project number.

Примечание: Если Вы не планируете использовать push-уведомления в текущей версии сборки, но планируете использовать push-уведомления в дальнейшем, то для подключения сервиса push-уведомлений необходимо будет выпускать обновление приложения.


Вкладка «Графические ресурсы»
7 / 105

Важно!
  • Весь графический материал должен быть только в формате PNG!
  • Весь графический материал не должен иметь альфа-каналы!
  • Проверьте формат графического материала, чтобы он не был другого формата. Например, изображение может быть формата jpg, но с переименованным расширением png.

Иконки приложения

Иконки используются в сборке приложения, и при оформлении заявки в магазинах приложений Google Play и App Store. Для сборки на платформе iOS необходима иконка размером 1024x1024 пикселей, для сборки на платформе Android иконка должна иметь размер 512x512 пикселей.

Рекомендации:

  1. Иконка должна соответствовать Вашему приложению и не вводить пользователей в заблуждение.
  2. Иконка должна быть квадратной. Устройства автоматически закругляют картинки под нужный угол.
  3. Иконка не должна иметь эффект глянца или тени. Устройства автоматически добавляют эффекты иконкам.
  4. Не увеличивайте изображения, если изначально картинка имеет маленькое разрешение.
  5. Иконка должна быть достаточно простой, чтобы одинаково хорошо смотреться и на экранах ультравысокой четкости Retina Display, и на странице Вашего приложения в магазинах приложений Google Play и App Store, и даже в меню настроек. Не пытайтесь втиснуть много деталей в ограниченное пространство. Зачастую, это может плохо маcштабироваться и выглядеть на экранах.
  6. Старайтесь не использовать текст. Если вы вообще можете обойтись без текста, то так и поступайте. Попробуйте использовать только символ или логотип для иконки.

Стартовые экраны

Стартовый экран - это окно, которое отображается до появления основного окна приложения. Обычно это - логотип компании. Не рекомендуется делать какие-либо надписи на стартовых экранах, так как стартовый экран появляется максимум на пару секунд, надпись просто не успеют прочесть. Также на устройствах, использующих платформу Android, из-за большого количества разрешений экранов, устройство может «подрезать под экран» по краям стартовый экран, и надпись может попасть в зону «подрезания» устройством.

Стартовые экраны должны соответствовать указанным размерам:

Стартовый экран (640x1136, iPhone 5)
Стартовый экран (640x960, iPhone Retina)
Стартовый экран (750 x 1334, iPhone6)
Стартовый экран (1242x2208, iPhone6+)
Стартовый экран (768x1024, iPad Portrait, iOS7)
Стартовый экран (1024x768, iPad Landscape, iOS 7)
Стартовый экран (1536x2008, iPad Retina Portrait, Android Portrait)
Стартовый экран (1536x2048, iPad Retina Portrait, iOS 7)
Стартовый экран (2048x1496, iPad Lanscape, Android Lanscape)
Стартовый экран (2048x1536, iPad Lanscape, iOS 7)

Рекомендации:

  1. Неправильный стартовый экран. Текст, или логотип слишком близко к краям изображения. Некоторые устройства «подрезают« края, и надпись, или логотип могут попасть в зону «подрезания» устройством.

  2. Правильный стартовый экран. По возможности, старайтесь не использовать текст в Стартовых экранах. Надпись просто не успеют прочесть.

Иконка уведомления

Иконка уведомления для клиентских приложений отображается на телефонах с ОС Android 5+ в виде белого квадрата. Примерно так:

и так:

Причина этого: неправильно подготовленное изображение иконки.

Требования к изображению:

  • прозрачный фон (именно из-за отсутствия прозрачности иконка выглядит как белый квадрат),
  • формат PNG,
  • размер 24х24.

Правильно подготовленная иконка даёт такой вид уведомлений:

и


Вкладка «App Store Connect»
8 / 105

Логин (APPLE ID)

Нужен для нескольких основных целей, связанных с разработкой приложений на платформе iOS и публикации сборки в App Store. Во-первых, нужен для сборки приложения, так как аккаунт проверяется уже на этапе создания двоичного файла для публикации. Во-вторых, аккаунт разработчика Apple Developer Center нужен для создания Сертификатов (Certificates), Идентификаторов (Identifiers), Профилей (Provisioning Profiles). Все это обеспечивает управление системой сертификации ваших приложений, дающих право публикации Вашего приложения в App Store.

Примечание: Как зарегистрировать аккаунт разработчика Apple Developer Center описано в документации Apple Developer Program.

Пароль

Пароль, который Вы использовали при регистрации APPLE ID. Вы можете изменить Ваш основной пароль, на временный. После публикации приложения в App Store, Вы можете вернуть Ваш основной пароль. В этом случае, у нас не будет доступа к Вашей учетной записи, но, в случае обновления приложения, нам потребуется пароль от Вашей учетной записи снова.

Версия( XX.XX.XX, X.X...)

Номер добавляемой версии приложения. Отображается в App Store для информирования клиентов. Нумерация должна следовать типичным правилам присвоения версий программному обеспечению (например, 1.0, 1.0.1, 1.1).

Название приложения (в магазине приложений)

Название приложения, которое будет отображаться в App Store. Его длина не может быть меньше двух символов, и не должно превышать 30 символов.

Указывается такое же Название приложения, как из вкладки Общие.

Рекомендации:

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

  1. Название должно быть коротким. Оптимальным образом на страницах приложения в App Store и Google Play, выглядят названия приложений длиной не более 25 символов. В то же время длина названия не единственный фактор, который стоит учитывать. Обратите внимание на то, что на отображение названия может повлиять место переноса названия на новую строку. Простое название приложения выглядит лучше, чем длинное и сложное.
  2. Используйте простые названия. Например, Вы решили дать своему приложение следующее название - «Мое приложение - самое лучшее и самое полезное приложение для всех». Это название является слишком длинным. Лучше назвать приложение просто «Мое приложение». Все остальное можно добавить в описание приложения.
  3. Используйте уникальное название. Не используйте в названии похожие с имеющимися уже приложениями. Например, Вы решили дать название своему приложение имя «Фонарик». Приложение с таким названием очень много, и по названию сложно понять чем они отличаются друг от друга. Выделиться можно, если дать оригинальное названия - «Оригинальный фонарик», «Фонарик - стробоскоп» и тд. Так же, если название приложения содержит текст описания совместимости, например, «Мое приложение для iPad», данный текст не принимается во внимание при определении соответствия названия требованиям недопустимости названий-дубликатов и соблюдения авторских прав. Иными словами, например, если в App Store уже имеется приложение с названием «Мое приложение», использовать название «Мое приложение для iPad» для другого приложения будет недопустимо.
  4. Помните об авторском праве. Убедитесь, что название приложения не нарушает законов о товарном знаке или права третьих лиц. Например, название «1С-Битрикс Новости» будет недопустимо, поскольку «1С-Битрикс» является зарегистрированной торговой маркой. Если Вы будете использовать в названии своего приложения, имя которого является чужой торговой маркой или уже используется в App Store или Google Play, приложение будет удалено из магазинов приложений App Store или Google Play.
  5. Изменение названия размещенного приложения. Название размещенного приложения можно изменить только при следующем обновлении двоичного файла приложения до новой версии. В противном случае, чтобы изменить название приложения, потребуется изъять его из магазина, а затем снова предоставить.

Краткое название (под иконкой)

Используется для отображения названия приложения на устройствах.

Указывается такое же Краткое название, как из вкладки Общие.

Рекомендации:

  1. Не выбирайте слишком длинные названия. Большинство приложений с длинными названиями на устройствах будут заканчиваться точками и терять ясность названия приложения. Чтобы избежать такое, разработчикам рекомендуется использовать не более 10 символов типа w, и не более 13 символов типа i. Символами считаются набор цифр и букв, знаки препинания, а так же спецсимволы. Пробел тоже считается символом.
  2. Краткое название должно напоминать полное имя. Выбирая краткое название для Вашего приложения помните, пользователь должен найти установленное приложение на своем устройстве. Например, в магазине приложений App Store Ваше приложение называется «Програбли: бизнес в Интернете без ошибок», то краткое название «Програбли» ассоциируются с полным названием, и не нарушают правила публикации приложения.

    3. Copyright

    Имя лица или название организации, которым принадлежат эксклюзивные права на приложение. Указывается после года получения прав (например, 2016, Bitrix Inc.).

    Название компании

    Если Вы участвуете в программе Apple Developer Program как компания, то можно указать, какое название компании использовать. Параметр company name (название компании) играет в магазине важную роль при перемещениях между приложениями и их группировке. Название юридического лица отображается в графе seller (продавец) Ваших приложений. Название компании отображается в магазине вместе с Вашими приложениями.

    Например, Apple – это название компании. При щелчке названия компании отображаются все ее приложения, представленные в магазине:

    А Apple Distribution International – название продавца.

    Внимание! Указать название компании, отличное от юридического лица, можно только один раз, при размещении первого приложения.

    Имя, Фамилия, Номер телефона (+7....), E-Mail

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

    Телефонный номер укажите в международном формате: +код страны (код города) номер телефона.

    +7 - Код России и Казахстана
    +380 - Код Украины
    +375 - Код Белоруссии

    Логин демо-пользователя

    При наличии в Вашем приложении формы авторизации необходимо указать имя пользователя. Данная учетная запись будет использована при проверке приложения и должна действовать до полной проверки и публикации приложения.

    Пароль демо-пользователя

    Пароль для учетной записи демо-пользователя с полным доступом. В случае не полного доступа к функциям приложения, модераторы App Store укажут на это, и вернут приложение с указанием, на изменение метаданных.

    Основная категория

    Один из важных аспектов доступности приложения - это категория, в которой оно отображается в магазине приложений App Store. Категории позволяют пользователям просматривать коллекции приложений. Постарайтесь приложить все усилия, чтобы выбрать категорию, которая наилучшим образом описывает основные функции Вашего приложения. Неправильный выбор категорий для приложения может послужить поводом возврата приложения модераторами App Store для изменения неправильно указанных категорий.

    Примечание: Более подробно про категории в App Store и их описание можно прочитать в документации Apple.

    Дополнительная категория

    В App Store Connect приложение можно поместить в две разные категории, повышая его шансы быть замеченным пользователями.

    Ключевые слова

    Одно или несколько ключевых слов, описывающих приложение. Список связанных поисковых терминов, разделенных запятыми. Требуется указать как минимум одно ключевое слово длиной более двух символов. Допустимый общий объем текста - до 100 байт (примерно до 100 символов). Поиск приложения выполняется по его названию и названию компании, поэтому эти значения не нужно дублировать в списке ключевых слов. Применение названий других приложений или компаний в качестве ключевых слов запрещено.

    Адрес поддержки (url)

    Создайте на своем веб-сайте систему поддержки для приложения. Обеспечьте пользователям возможность без труда связаться с Вами напрямую по вопросам, касающимся приложения, а также оставить отзыв и запрос дополнительного функционала. Чтобы обеспечить безпроблемное представление, избегайте использования ссылок на блоги или страницы, содержимое которых является преимущественно динамическим. Убедитесь, что все упомянутые веб-страницы доступны, когда приложение будет готово для продажи в магазинах приложений App Store и Google Play.

    Политика конфеденциальности (url)

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

    Описание (для магазина)

    Локализованное подробное описание возможностей и функциональности приложения. Объем описания не должен превышать 4000 символов. Описание должно быть простым текстом с разбиением по строкам при необходимости. HTML-форматирование не допускается и не распознается. Рекомендуется проверить описание на предмет орфографических и грамматических ошибок.

    Что нового

    При добавлении новой версии предоставляются сведения об этой версии, дополняющие общее описание приложения в магазине.

    Сообщение запроса прав на использование геолокации

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


Вкладка «Google Play»
9 / 105

Логин (***@gmail.com)

Необходим для подключения push-уведомлений и публикации приложений.

Пароль

Пароль, который Вы использовали при регистрации Google Play. Вы можете изменить Ваш основной пароль, на временный. После публикации приложения Вы можете вернуть Ваш основной пароль. В этом случае, у нас не будет доступа к Вашей учетной записи, но, в случае обновления приложения, нам потребуется пароль от Вашей учетной записи снова.

Версия( XX.XX.XX, X.X...)

Номер добавляемой версии приложения. Отображается в Google Play для информирования клиентов. Нумерация должна следовать типичным правилам присвоения версий программному обеспечению (например, 1.0, 1.0.1, 1.1).

Название (для магазина)

Название должно быть уникальным и понятным. Подчеркните особенности приложения, избегая стандартных формулировок. Название должно быть коротким: длинные названия могут обрезаться на некоторых устройствах. Максимальный размер 30 символов.

Указывается такое же Название приложения, как из вкладки Общие.

Рекомендации:

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

  1. Название должно быть коротким. Оптимальным образом на страницах приложения в App Store и Google Play, выглядят названия приложений длиной не более 25 символов. В то же время длина названия не единственный фактор, который стоит учитывать. Обратите внимание на то, что на отображение названия может повлиять место переноса названия на новую строку. Простое название приложения выглядит лучше, чем длинное и сложное.
  2. Используйте простые названия. Например, Вы решили дать своему приложение следующее название - «Мое приложение - самое лучшее и самое полезное приложение для всех». Это название является слишком длинным. Лучше назвать приложение просто «Мое приложение». Все остальное можно добавить в описание приложения.
  3. Используйте уникальное название. Не используйте в названии похожие с имеющимися уже приложениями. Например, Вы решили дать название своему приложение имя «Фонарик». Приложение с таким названием очень много, и по названию сложно понять чем они отличаются друг от друга. Выделиться можно, если дать оригинальное названия - «Оригинальный фонарик», «Фонарик - стробоскоп» и тд. Так же, если название приложения содержит текст описания совместимости, например, «Мое приложение для iPad», данный текст не принимается во внимание при определении соответствия названия требованиям недопустимости названий-дубликатов и соблюдения авторских прав. Иными словами, например, если в Google Play уже имеется приложение с названием «Мое приложение», использовать название «Мое приложение для Android» для другого приложения будет недопустимо.
  4. Помните об авторском праве. Убедитесь, что название приложения не нарушает законов о товарном знаке или права третьих лиц. Например, название «1С-Битрикс Новости» будет недопустимо, поскольку «1С-Битрикс» является зарегистрированной торговой маркой. Если Вы будете использовать в названии своего приложения, имя которого является чужой торговой маркой или уже используется в App Store или Google Play, приложение будет удалено из магазинов приложений App Store или Google Play.
  5. Изменение названия размещенного приложения. Название размещенного приложения можно изменить только при следующем обновлении двоичного файла приложения до новой версии. В противном случае, чтобы изменить название приложения, потребуется изъять его из магазина, а затем снова предоставить.

Краткое название (под иконкой)

Используется для отображения названия приложения на устройствах.

Указывается такое же Краткое название, как из вкладки Общие.

Рекомендации:

  1. Не выбирайте слишком длинные названия. Большинство приложений с длинными названиями на устройствах будут заканчиваться точками и терять ясность названия приложения. Чтобы избежать такое, разработчикам рекомендуется использовать не более 10 символов типа w, и не более 13 символов типа i. Символами считаются набор цифр и букв, знаки препинания, а так же спецсимволы. Пробел тоже считается символом.
  2. Краткое название должно напоминать полное имя. Выбирая краткое название для Вашего приложения помните, пользователь должен найти установленное приложение на своем устройстве. Например, в магазинах приложений Google Play Ваше приложение называется «Програбли: бизнес в Интернете без ошибок», то краткое название «Програбли» ассоциируются с полным названием, и не нарушают правила публикации приложения.

    3. Краткое описание

    Краткое, и функциональное описание Вашего приложения. Выводится для смартфонов и планшетов.

    Категория

    Один из важных аспектов доступности приложения - это категория, в которой оно отображается в Google Play. Категории позволяют пользователям просматривать коллекции приложений. В Google Play можно выбрать только одну категорию. Постарайтесь приложить все усилия, чтобы выбрать категорию, которая наилучшим образом описывает основные функции Вашего приложения.

    Примечание:Более подробно про категории в Google Play и их описание можно прочитать в документации.

    Описание (для магазина)

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

    В мобильной версии появляется, если после краткого описания нажать «ЧИТАТЬ ДАЛЬШЕ».

    • В мобильной версии Google Play:

    • В веб-версии Google Play:


Статусы публикации приложения
10 / 105

У каждой заявки на публикацию есть статусы отдельно по каждой платформе. На странице списка приложений можно видеть соответствующие колонки.

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

Что означает каждый статус?

  • Ожидает обработки

    Пока ваш запрос на сборку приложения находится в очереди на обработку. Максимальное время ожидания – до 2 рабочих недель. На время ожидания может повлиять длинная очередь на сборку приложений или иные факторы. Чаще всего все происходит в течение 4-5 дней.

  • Проверка заявки

    Ваша заявка обрабатывается. Если все данные в заявке заполнены корректно, предоставлены все аккаунты для магазинов приложений, не требуется дополнительных данных и сервер вашего приложения доступен, то заявка скоро будет переведена в статус Публикация.

  • Приостановлено, ожидаются исправления

    Возможные причины приостановки проверки приложения:

    • Некорректные данные для авторизации/неоплаченные аккаунты в Apple Developer Center или Google Developer Console.
    • Неточности в заполнении заявки на сборку.
    • Необходимость предоставления дополнительных данных (тестовых аккаунтов, информации по заполнению профиля приложения в AppStore или Google Play).

    После исправления Вам нужно перейти в список ваших приложений и из контекстного меню выбрать пункт Продолжить публикацию (#PLATFORM#). Тогда разработчик продолжит работу с вашей заявкой.

  • Публикация

    Ваша заявка проверена и ваше приложение в процессе сборки и отправки в магазин приложений. Пока от вас ничего не требуется. Сроки публикации в AppStore для приложений на платформе iOS определить нельзя, все зависит от проверяющих Apple. В Google Play нет предварительной модерации и приложение оказывается доступным в день публикации.

  • Публикация завершена

    Конечный статус. Очередная версия вашего приложения опубликована в магазине приложений.

  • Не удалось опубликовать

    По каким-то определенным причинам публикация приложения невозможна.

Как запустить публикацию очередной версии приложения?

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

Тоже самое нужно сделать, если процесс публикации был прерван проверяющим по каким-либо причинам.


Комментарии к заявке
11 / 105

Вы можете контактировать с проверяющими ваше приложение прямо на сайте, без необходимости переписки по e-mail.

На страницу обсуждения также можно перейти из контекстного меню в списке приложений.

После чего откроется диалог с проверяющим.

О каждом комментарии на e-mail автора заявки уходит уведомление.


Конструктор мобильных приложений
12 / 105

В обновлении модуля Мобильная платформа версии 14.5.1 появился новый функционал под названием Конструктор мобильного приложения. Это большой шаг к упрощению процесса создания мобильных приложений на платформе «1C-Битрикс».

Какие задачи решает Конструктор мобильного приложения:

  • Создание базового макета серверной части мобильного приложения на платформе BitrixMobile.
  • Настройка параметров нативных элементов приложения.
  • Настройка параметров мобильного приложения по платформам - Android и iOS.

Рассмотрим подробнее каждый из пунктов.

Создание серверной части мобильного приложения

В административной части сайта нужно перейти в раздел Конструктор мобильных приложений (Сервисы > Мобильное приложение > Конструктор мобильных приложений).

Далее создаем приложение, нажав кнопку Создать приложение, появляется форма создания.

В форме создания приложения вам предлагается указать следующее:

  • Название приложения.
  • Код приложения (используем только латиницу и знаки подчеркивания).
  • Название папки приложения, которая будет создана в корне сайта (только латиница и знаки подчеркивания).
  • Шаблон приложения - можно создать новый, указав латиницей идентификатор, выбрать из существующих или ничего не делать.

Если все данные введены корректно, кнопка Создать станет активной - нажмите на нее.

После создания приложения у вас в корне сайта появляется папка с файлами нужной структуры, создается шаблон сайта с подключенной мобильной платформой и назначается на эту папку. В дальнейшем всю разработку будем вести именно в созданной папке. В данном случае, это http://<мой_сайт>/mobile_app/.

Проверим работоспособность созданного макета на сервере. Для этого установим и запустим мобильное приложение для разработчиков BitrixMobile из Google Play или AppStore.

Введем адрес приложения в формате http://<домен>/<имя_папки> и нажмем подключиться. Если все хорошо, то увидим следующее:

Макет создан, можно приступить к настройке нативных элементов интерфейса.

Настройка параметров приложения и вида нативных элементов

Итак, после создания приложения открывается редактор, в котором мы увидим разбитые на группы параметры (справа) и легкое превью (слева). В верхней панели располагается селектор для переключения между приложениями и табы для переключения между конфигурациями. В панели можно добавить еще одно приложение или добавить конфигурацию к уже созданному приложению. По умолчанию к приложению создается Общая конфигурация, которая будет применяться как для Android, так и для iOS.

Параметры в редакторе разделяются по нескольким типам:

  • цвет;
  • изображение;
  • число;
  • строка;
  • флаг;
  • значение из списка;

Некоторые из них включатся в себя соответствующими контролы:

Результат изменения некоторых параметров отображается в превью.

Пока есть три экрана:
  • Загрузка - отображает параметры экрана загрузки
  • Главный экран - параметры фона
  • Списки

Важно! Чтобы не искать параметры в группах, можно просто кликнуть на элемент превью - редактор переключится на нужную группу параметров и подсветит их.

Изображения

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

Некоторые изображения снабжены дополнительным параметром растягивания с режимами crop/stretch/repeat:

Изменение любого параметра сопровождается авсохранением и можно сразу увидеть сделанные изменения в мобильном приложении для разработчика.

Отдельные параметры для отдельной платформы

В верхней панели можно добавлять и удалять конфигурации, а также добавить конфигурацию для Android и, подключаясь приложением для разработки, можно увидеть именно Android-конфигурацию, а не общую.

Примечания

С момента выпуска этого конструктора рекомендуется формировать параметры приложения именно через него. Теперь не нужно разбираться в структуре параметров и искать в документации их названия - все будет в конструкторе. Конструктор создает в папке вашего приложения файл settings.php, на который мы будем ориентироваться при сборке.

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


Офлайн-режим в BitrixMobile
13 / 105

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


Настройка в конструкторе приложений
14 / 105
  • Создание приложения с офлайн-настройками
  • Раздел «Офлайн»:
    • Режимы запуска
    • Стартовые офлайн-страницы

Создание офлайн приложения

Для создания макета офлайн-приложения нужно:

  1. Перейти в раздел Сервисы > Конструктор мобильных приложений и нажать кнопку Создать приложение.
  2. Заполните поля формы, выберите шаблон публичной части приложения Обычное приложение и выставите опцию Добавить шаблон и настройки офлайн приложения:

  3. Макет приложения создан - можно переходить к настройке.

Раздел Офлайн

Данный раздел настроек конструктора предназначен для конфигурирования будущего приложения. Он содержит следующие параметры:

  1. Режим запуска приложения
    • Только при наличии сети - приложение будет запускаться по классической схеме - со страницами с дальнего сервера.
    • Только офлайн - в этом режиме приложение будет стартовать только указанными в настройках стартовыми офлайн-ресурсами (главная страница, левое меню, правое меню).
    • Смешанный - этот режим позволяет запускать приложение с разными вариантами в зависимости от наличия интернета. Если есть активное интернет-соединение - приложение будет запускаться с дальнего сервера, нет - будет запускать офлайн-страницы, указанные в настройках.

  2. Офлайн файлы - это список файлов, которые будут доступны в офлайн-режиме. Это могут быть: файлы изображений, html-страницы, файлы скриптов и стилей.

    Добавление файлов осуществляется в формате ключ-значение:

    • ключ - имя, которое будет дано файлу в файловой структуре на стороне приложение;
    • значение - путь к файлу на сервере.

    Внимание: в процессе разработки приложения не забывайте дополнять этот список файлами, которые используются для офлайн-доступа. В противном случае, файлы не будут включены в итоговый bundle и при тестировании приложение будет работать некорректно.

  3. Главная страница - это файл из списка Офлайн файлы, стартовая офлайн-страница приложения. Рекомендуется указывать именно html-файл. Эта страница будет загружаться в качестве основной, если режим запуска выставлен Только офлайн, или в случае отсутствия сети - в режиме запуска Смешанный.

  4. Страница левой части слайдера - это файл из списка Офлайн файлы, стартовая страница в левой части слайдера приложения. Рекомендуется указывать html-файл.

    Для активации левого слайдера нужно вызвать следующий код в теле страницы:

    BXMSlider.setEnabled(BXMSlider.state.LEFT, true)

  5. Страница правой части слайдера - это файл из списка Офлайн файлы, стартовая офлайн-страница правой части слайдера приложения. Рекомендуется указывать html-файл.

    Для активации правого слайдера нужно вызвать следующий код в теле страницы:

    BXMSlider.setEnabled(BXMSlider.state.RIGHT, true)


Итоговая файловая структура офлайн-ресурсов
15 / 105

После создания первичной структуры приложения в папке приложения появится папка offline. В ней содержатся файлы следующей структуры A:

/myapp/offline/index.html
/myapp/offline/menu.html
/myapp/offline/script.js
/myapp/offline/style.css

Можно добавить свои файлы и новая структура файлов будет выглядеть, например, вот так:

/myapp/offline/mydir/another_script.js
/myapp/offline/mydir/another_style.css
/myapp/offline/somedir/images/img.png
/myapp/offline/index.html
/myapp/offline/menu.html
/myapp/offline/script.js
/myapp/offline/style.css

Обозначим дополненную структура файлов буквой B.

Важно: Есть одна особенность: структура файлов при разработке будет отличаться от структуры файлов, которые будут помещены в приложение. Так, структура файлов B в приложении будет иметь вид:
another_script.js
another_style.css
img.png
index.html
menu.html
script.js
style.css
Т.е. все файлы будут располагаться на одном уровне. При обращении к этим файлам нужно учитывать этот момент.


Офлайн-страница
16 / 105
  • Мета тег viewport
  • Подключение ядра платформы BitrixMobile
  • Подключение скриптов и стилей
  • Использование API BitrixMobile

Основными ресурсами для мобильных браузеров, конечно же, являются html-страницы. Нужно помнить о правилах оформления html-страниц для мобильных браузеров.

Мета тег viewport

В отличие от классического приложения на BitrixMobile, где управление масштабированием и размерами страницы осуществляется в PHP, в офлайн-приложении мета-тег viewport не выставляется автоматически. Т.е. размеры контента, масштабирование страницы придется выставлять в каждом файле самостоятельно, включая мета-тег viewport в <head> страницы. Например, вот так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=320">
 </head>
...

Примечание: Более подробно ознакомиться с viewport-атрибутами и рекомендациями по его конфигурированию можно в официальной документации по платформам iOS и Android.

Важно! Платформа BitrixMobile iOS использует WKWebView для отображения веб-контента. С апреля 2020 года компания Apple отказалась от поддержки UIWebView в пользу WKWebView с современным API WebKit. В WKWebView была изменена работа с пользовательскими схемами и для обращения к офлайн-ресурсу в BitrixMobile необходимо обязательно использовать схему bxlocal://.

Подключение ядра платформы BitrixMobile

Опять же, на офлайн-страницах автоматически не подключается ядро мобильной платформы. Это нужно сделать самостоятельно.

Для начала нужно подключить базовый скрипт Cordova __deviceload__/cordova.js, используя схему bxlocal://:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
  <!--Include mobile platform-->
  <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
</head>

На офлайн-страницах не будут доступны javascript-библиотеки платформы «1C-Битрикс» в том виде, в котором они доступны на обычных страницах на удаленном сервере. Но будет доступен bundle из нескольких javascript-библиотек, которые нужно обязательно подключить для работы с основным API. Чтобы его использовать нужно подключить скрипт bitrix_mobile_core.js, используя схему bxlocal://:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
</head>

Теперь на странице можно использовать весь API платформы BitrixMobile, который описан ниже в данном курсе в разделе API.

В bitrix_mobile_core.js входят:

  • Основная библиотека: /bitrix/js/main/core/core.js
  • Библиотека для работы с ajax-запросами: /bitrix/js/main/core/core_ajax.js
  • Библиотека для работы с базой данных SQLite: /bitrix/js/main/core/core_db.js
  • Мобильные библиотеки: /bitrix/js/mobileapp/bitrix_mobile.js и /bitrix/js/mobileapp/mobile_lib.js

Подключение скриптов и стилей

Как уже было указано в уроке Итоговая файловая структура офлайн-ресурсов, все файлы офлайн ресурсов располагаются в приложении на одном уровне (в одной папке). Поэтому подключать js- и css-файлы можно просто, указав имя файла в атрибуте src/href со схемой bxlocal://:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="bxlocal://script.js"></script>
    <link href="bxlocal://style.css" rel="stylesheet" type="text/css">
</head>

Обращение к изображениям в css-файлах и javascript-файлах также осуществляется по простому названию файла. Он будет браться относительно текущего расположения файла.

Использование API BitrixMobile

Здесь нет ограничений. Все так же, как и раньше. Но для работоспособности всего набора функций нужно на странице объявить версию API, которую вы будете использовать. Сейчас это 17 API. Также нужно определить версию платформы ios или android. Это можно сделать через определение user-agent браузера прямо javascript. В примере ниже мы просто установили platform="ios" и appVersion=17:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
      <script type="text/javascript">var appVersion = 17;var platform = "ios";</script>
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="bxlocal://script.js"></script>

    <link href="bxlocal://style.css" rel="stylesheet" type="text/css">
</head>


Обращение к ресурсам через API
17 / 105

Для обращения к офлайн-ресурсу используется схема bxlocal:// или через виртуальную директорию __bxoffline__. Используя эту схему, вы сообщаете платформе, что хотите обратится к локальному контенту.

Еще одна из важных особенностей офлайн-приложения на BitrixMobile - свобода в использовании офлайн-ресурсов:

  1. Доступ к офлайн-страницам
    • Старт приложения из офлайн-страниц. Страницы указываются в конструкторе.
    • Открытие офлайн-страницы из другой офлайн-страницы.

      Например, через простую ссылку:

          <a href="bxlocal://detail.html">Детальная страница</a>
    <a href="http://mysite.com/__bxoffline__/detail.html">Детальная страница</a>
      или через BXMobileApp.PageManager с передачей параметров:
      <script>
BXMobileApp.PageManager.loadPageBlank({
url: "bxlocal://detail.html",
data:{key:"value"},
title: "Детальная страница"
});
</script>
    • Открытие офлайн-страницы со страницы на удаленном сервере. Точно также как и в п.2.
    • Открытие страницы на удаленном сервере с офлайн-страницы:
      <script>
BXMobileApp.PageManager.loadPageBlank({
url: "/mobile_app/detail.php",
data:{key:"value"},
title: "Детальная страница"
});
</script>
    • Открытие страницы на удаленном сервере с офлайн-страницы.

  2. Доступ к офлайн-изображениям:
        <img src="bxlocal://myimage.png">

  3. Доступ к контенту других файлов (только для Android).

    Например, можно добавить файл data.json c содержимым:

    {
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
}

    Данные из этого файла можно получить через ajax-запрос. В разных ситуациях это делается по-разному:

    • Если вы пытаетесь получить контент офлайн-файла со страницы на удаленном сервере, то нужно использовать виртуальную директорию __bxoffline__:
      BX.ajax.get("/__bxoffline__/data.json",{},function(data){
console.log(data);
});
    • Если запрос осуществляется с офлайн-страницы, то можно использовать как предыдущий вариант, так и упрощенный:
      BX.ajax.get("data.json",{},function(data){
console.log(data);
});


Контекст офлайн-страниц
18 / 105

Офлайн-ресурсы в приложении загружаются в контексте сервера, а не в контексте файловой структуры.

Например, если вы попытаетесь загрузить условную офлайн-страницу detail.html:

<script>
BXMobileApp.PageManager.loadPageBlank({
url: "bxlocal://detail.html",
data:{key:"value"},
title: "Детальная страница"
});
</script>
то адресом этой страницы будет:
http://mysite.com/__bxoffline__/detail.html

Т.е. как-будто страница была загружена с удаленного сервера. Это дает возможность использовать сущности, привязанные к домену вашего сайта - cookies, хранилище в формате ключ-значение localstorage и локальные базы данных indexedDB и SQLite.


Запросы и кэширование данных
19 / 105

Как уже было упомянуто в уроке Подключение ядра платформы BitrixMobile, в офлайн-режиме доступны javascript-библиотеки платформы «1С-Битрикс» и ядро мобильной платформы. Соответственно, для запросов можно использовать BX.ajax, а для кэширования - BX.database.

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


Работа с базой данных
20 / 105

Создание базы данных:

var db  = new BX.dataBase({
        name: "MyDatabase",
        displayName: "MyDatabase",
        capacity: 1024 * 1024 * 4,
        version: "1.2"
});

Функции для типичных операций:

  • db.createTable(params) - создание своей таблицы;
  • db.dropTable(params) - удаление таблицы;
  • db.addRow(params) - добавление записи в таблицу;
  • db.getRows(params) - получение данных из таблицы;
  • db.updateRows(params) - апдейт таблицы;
  • db.deleteRows(params) - удаление записей из таблицы.

Примеры использования

  1. Свой запрос:
    var queryData = {
      query: "SELECT * FROM MYTABLE WHERE ID=? AND CODE=?",
      values: [12, "some_code"]
   };
   db.query(
   queryData,
      function (res)
      {
         //code
      },
      function (e)
      {
         //code
      }
   );
  2. Создание таблицы:
    var createTableParams = {
   tableName: "mytable",
   fields: [
      {name: "id", unique: true},
      "name",
      "data"
   ],
   success: function (res)
   {
      console.log("success");

   },
   fail: function (e)
   {
      console.log("some error");
      console.log(e);
   }
};

db.createTable(createTableParams);
  3. Добавление записи в таблицу:
      db.addRow(
   {
      tableName: "mytable",
      insertFields: {
         id: 10,
         name: "newRecord",
         data: "sadasd"
      },
      success: function (res)
      {
         console.log("success");
      },
      fail: function (e)
      {
         console.log("some error");
         console.log(e);
      }
   });
  4. Обновление таблицы:
    db.updateRows({
      tableName: "mytable",
      updateFields: {
         data: "Very important data!"
      },
      filter: {
         id: 10
      },
      success: function (res)
      {
         alert("Success")
      },
      fail: function (e)
      {
         alert("Error!");
      }
   });
  5. Получение данных:
    db.getRows({
      tableName: "mytable",
      filter: {
         id: 10
      },
      success: function (res)
      {
         //res.items - массив записей
         console.log(res);
         if (res.items.length > 0)
            console.log("Success");

      },
      fail: function (e)
      {
         console.log(e);
      }
   });


Тестирование
21 / 105

После разработки своего приложения следует протестировать его работу в разных режимах: с Интернетом и без него.

Главное что нужно проверить:

  1. Запуск приложения в онлайне.
  2. Работа приложения в онлайне.
  3. Выключение Интернета, когда приложение уже запущено.
  4. Запуск приложения без доступа в Интернет.


Пример приложения
22 / 105

В качестве примера можно использовать готовое демо-приложение News (Скачать, zip, 86,2 Кб).

В этом демо-приложении есть примеры работы с базой данных, запросами и с локальными ресурсами.

Как посмотреть пример

  1. В административной части сайта перейдите в Конструктор мобильных приложений (Сервисы > Конструктор мобильных приложений) и создайте приложение с кодом news и с папкой denonews. В форме создания отметьте галку Добавить шаблон и настройки офлайн приложения.
  2. Затем скопируйте содержимое папки demonews из zip-архива в папку demonews, которую создал конструктор в корне вашего сайта.
  3. Вернитесь в Конструктор (в раздел Офлайн) и добавьте в список офлайн-файлов недостающие файлы из папки /demonews/offline/. Реальные имена файлов должны совпадать с их именами в левой колонке:

  4. Установите на мобильное устройство Приложение для разработчиков BitrixMobile (Google Android или Apple iOS).
  5. На странице Конструктора нажмите на кнопку Подключиться. Следуйте инструкциям в открывшемся окне.

    6. Обратите внимание, что подключиться к сайту http://localhost/ вы не сможете, нужно использовать ip-адрес.

Также можно посмотреть видео (длительность 30 мин.) с докладом «Новые возможности мобильной платформы для разработки своих приложений. Офлайновые приложения, пуш нотификации, события» с зимней партнерской конференции «1С-Битрикс» 2016 года.


Отладка приложения на BitrixMobile
23 / 105

Приложение для разработчиков BitrixMobile распространяется через официальные магазины приложений GooglePlay и AppStore. К сожалению, с приложениями из магазина нельзя использовать стандартные средства удаленной отладки компонента браузера, которые описаны здесь: Remote Debugging on Android with Chrome и Safari Web Inspector Guide.

Для отладки приложений, написанных на HTML5/JS, можно использовать Weinre - WEb INspector REmote. Этот инструмент представляет из себя усеченную версию Web Inspector (отладчика WebKit-based браузеров).

  • Установка и запуск Weinre
  • Отладка приложения

Установка и запуск Weinre

Для начала нужно установить на компьютер NodeJS.

Далее нужно проделать следующие шаги:

  1. Выполнить в терминале вашей ОС установку weire:
    sudo npm install -g weinre

    Примечание: для ОС Windows использовать sudo не нужно.

  2. Запустить weinre следующей командой, заменив в ней ip-адрес на адрес вашей машины, который вы сможете найти в настройка сети:
    weinre --boundHost x.x.x.x --httpPort xxxx
    Например:
    weinre --boundHost 192.168.1.171 --httpPort 8081
  3. Теперь перейдите на страницу в браузере со следующим адресом: http://192.168.1.171:8081/, где будет доступна стартовая страница weinre:

Отладка приложения

Сервер weinre запущен. Теперь нужно инициализировать отладку на страницах приложения.

  1. Для этого в код страницы, которую нужно отладить, в блоке <head> нужно вставить следующее:
    <script src="http://192.168.1.171:8081/target/target-script-min.js#anonymous"></script>
  2. Далее нужно открыть приложение и в нем перейти на страницу, которую нужно отладить.
  3. Теперь на компьютере в браузере перейдите по ссылке http://192.168.1.171:8081/client/#anonymous и вы увидите список страниц приложения, которые можно инспектировать (блок Targets):

  4. Выберите страницу (кликните на нужную) и начните отладку. Можно инспектировать элементы, использовать javascript-консоль для отладки, просматривать содержимое локальных хранилищ и баз данных, просматривать http-запросы. Брэйкпоинт в данном отладчике не поддерживаются.


Push-уведомления
24 / 105

Взаимодействие с пользователем через уведомления - это одно из преимуществ мобильных приложений в целом. Уведомлениями можно привлечь клиента к своему сервису или магазину, сообщить о скидках, уведомить об изменении статуса заказа и многое другое. Кроме этого, можно легко определить, по каким уведомлениям переходит пользователь, понять, что ему интересно и персонализировать рассылки и контент.


Идентификатор приложения
25 / 105

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

Чтобы получить такой идентификатор для вашего приложения, его требуется указать в поле Идентификатор приложения для отправки (Конструктор мобильных приложений > Дополнительно):

При сборке приложения наши специалисты зарегистрируют этот идентификатор в сервисе BitrixCloudMessaging для платформ iOS и Android. После этого вы сможете отправлять уведомления пользователям вашего приложения.


Токены
26 / 105

Токен - это идентификатор устройства, который регистрируется в сервисах Apple и Google для отправки уведомлений.

  • Получение токена и отправка на сервер
  • Сохранение токена
  • Обновление токена

Получение токена и отправка на сервер

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

Получить токен, а затем отправить методом GET или POST на php-скрипт можно через javascript-код, который нужно разместить на стартовой странице своего приложения:

app.exec("getToken", {
    callback:function(token)
    {
    var platform = (window.platform == "ios"? "APPLE": "GOOGLE");

    var config =
    {
        url: "myurl.php" ,
        method: "POST",
        data: {
            device_name: (typeof device.name == "undefined" ? device.model : device.name),
            uuid: device.uuid,
            device_token: token,
            app_id: “MyAPPid”,
            device_type: platform,
            sessid: BX.bitrix_sessid()
        }
    };

    BX.ajax(config);
}

});

Обратите внимание, в JS-скрипте используется объект device, существующий только в рамках мобильной платформы BitrixMobile. Данный объект используется для получения информации об устройстве.

Сохранение токена

В примере выше мы получили токен устройства и отправили его на php-скрипт myurl.php. Теперь его нужно сохранить для дальнейшего использования:

<?php

use Bitrix\Main\Web\Json;

require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");

$result = Array("status" => "failed");

if (!\Bitrix\Main\Loader::includeModule("pull"))
{
    $result["error"] = "Module 'pull' is not installed";
}
else
{
    /**
     * @var $DB CAllDatabase
     * @var $USER CALLUser
     */
    $data = null;
    $userId = $USER->GetID();
    if (!$userId)
    {
        $userId = 0;
    }

    if ($_REQUEST["device_token"])
    {
        $res = array("status" => "failed", "error" => "some unknown error");
        $data = array(
            "DEVICE_TOKEN" => $_REQUEST["device_token"],
            "DEVICE_ID" => $_REQUEST["uuid"],
            "DEVICE_TYPE" => $_REQUEST["device_type"],
            "APP_ID" => $_REQUEST["app_id"],
            "DATE_AUTH" => ConvertTimeStamp(getmicrotime(), "FULL"),
            "USER_ID" => $userId
        );

        $dbres = CPullPush::GetList(Array(), Array("DEVICE_ID" => $data["DEVICE_ID"]));
        $arToken = $dbres->Fetch();
        $status = "failed";

        if ($arToken["ID"])
        {
            CPullPush::Update($arToken["ID"], $data);
            $status = "updated";
        }
        else
        {
            if ($res = CPullPush::Add($data))
            {
                $status = "registered";
            }
        }

        $result = array(
            "token_status" => $status
        );
    }
}
$result["data"] = $data != null ? $data : array();

header("Content-Type: application/x-javascript");
echo Json::encode($result);
die();

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

Обновление токена

Токены устройств со временем могут меняться или истекать.

Например, при обновлении операционной системы на устройстве токен может поменяться. Поэтому рекомендуется периодически удалять неактивные токены и обновлять существующие. Иными словами, при каждом запуске приложения следует повторять операцию обновления.


Уведомления
27 / 105
  • Отправка уведомлений
  • Обработка уведомлений

Отправка уведомлений

Для каждого сервиса логика отправки уведомлений разная, поэтому механизм отправки нужно реализовать самостоятельно. Для отправки уведомлений используется класс CPushManager модуля Push&Pull.

Пример кода отправки:

if (CModule::IncludeModule("pull"))
{
    $arMessages = array();
    $message = Array(
        "USER_ID" => 2, //Идентификатор пользователя
        "TITLE" => "Title", //заголовок, только для Android
        "APP_ID" => "MyAppID", //Идентификатор приложения
        "MESSAGE" => “У нас сегодня акция! Не пропусти!”,
        "EXPIRY" => 0, //время жизни уведомления на сервере Apple и Google
        "PARAMS"=>array("PARAMS"=>array("tst"=>"1")),
        "BADGE" => 1 //счетчик на иконке приложения
    );

    $arMessages[] = $message;
    $manager = new CPushManager();
    $manager->SendMessage($arMessages);
}

Важным является ключ PARAMS. Данные по этому ключу помогут обработать открытие уведомления пользователем.

Обработка уведомлений

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

На стартовой странице нужно разместить javascript-код следующего вида:

var lastNotification = BXMobileApp.PushManager.getLastNotification();

В переменной lastNotification будет объект данных уведомления, по которому пользователь перешел в приложение. В объекте будет ключ params, который вы отправляли через метод CPushManager::SendMessage().

Дополнительно

Иконка уведомления


Тестирование
28 / 105

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


Генерация ключей для push-уведомлений (Android)
29 / 105

Для работы push-уведомлений на платформе BitrixMobile нужно при публикации Android-приложения предоставить 3 ключа: Идентификатор приложения, Ключ сервера и Идентификатор отправителя.

Для этого необходимо:

  1. Авторизоваться под аккаунтом разработчика и перейти в Google Firebase. и далее в консоль:

  2. Далее создать проект, нажав на кнопку Добавить проект:

  3. Ввести Название проекта, Регион для Analytics и оплаты, согласиться с Условиями использования и нажать кнопку Создать проект:

  4. После создания проекта нужно Добавить Firebase в свое приложение для Android:

  5. Откроется страница сервиса Добавление Firebase в приложение для Android, где нужно зарегистрировать приложение:

    Название пакета Android можно выбрать как составное из названия вашего домена, написанное наоборот, и названия вашего приложения. Например, домен вашего сайта example.com, а приложения MyApp, тогда название пакета Android будет com.example.myapp.

  6. После регистрации приложения можно сразу перейти к обзору проекта:

  7. Далее выбрать в меню Настройки проекта:

  8. Во вкладке Общие у нужного приложения получаем Идентификатор приложения:

  9. А на следующей вкладке Cloud Messaging получаем Ключ сервера и Идентификатор отправителя:

Полученные Идентификатор приложения, Ключ сервера и Идентификатор отправителя необходимо будет ввести при заявке на публикацию Android-приложения на платформе BitrixMobile.


Гарантии доставки push-уведомлений
30 / 105

Сервис push-уведомлений гарантирует отправку уведомлений в сервисы Google Gloud Messaging и Apple Push Notification Service, но не гарантирует 100% получение уведомления пользователем от этих сервисов.

Почему уведомление может не дойти до получателя?

Причины по которым Google Сloud Messaging и Apple Push Notification Service не доставляют уведомления:

  • Пользователь находился в офлайн или у него были проблемы с сетью.
    Каждое уведомление имеет «время жизни» и указывается разработчиком при отправке. Если за «время жизни» уведомления пользователь так и не вышел в сеть, то данное уведомление никогда не будет доставлено.
  • Зарегистрированный токен устройства устарел и более не является актуальным для сервисов Google Сloud Messaging и Apple Push Notification Service.
    Токены устройств, которые сохраняются разработчиком для последующей отправки уведомлений, могут стать неактуальными в любой момент. Разработчик приложения должен позаботиться об обновлении токенов в базе данных. Если пользователь долгое время вообще не открывал приложение, то велика вероятность, что его токен перестанет быть актуальным и он больше не будет получать уведомления.
    Токен также станет неактуальным по причинам:
    • переустановка приложения,
    • обновления операционной системы или какого-либо обновления сервиса отправки уведомлений (Google Сдoud Messaging и Apple Push Notification Service), которое требует повторной регистрации устройства.
  • Пользователь выключил уведомления для приложения.
  • Пользователь перевел устройство в режим экономии энергии, что может ограничить активность устройства в плане работы с сетью и подключении к сервисам уведомлений.
    В Android 6.0 появился Doze Mode - режим, при котором сервисы и приложения «засыпают» на время блокировки устройства, в этом режим уведомления также могут доставлены с опозданием или не доставлены вообще.
  • Размер push-уведомления превысил ограничения (4кб для iOS и 8кб для Android).
  • В момент отправки уведомления пользователь находится в приложении. Уведомления доставляются на устройства пользователя, только если приложение выгружено из памяти или находится в фоне.
  • Слишком много уведомлений в очереди для одного устройства (iOS). Более подробную информацию вы можете узнать здесь.
  • В момент отправки не доступны сервисы Google Сloud Messaging и Apple Push Notification Service
  • Ошибки в работе сервисов Google Сloud Messaging и Apple Push Notification Service.


API
31 / 105

Ниже представлен справочник по API платформы BitrixMobile.


BXMobileApp.UI.Slider - управление слайдером
32 / 105
Каждое приложение на платформе BitrixMobile имеет свой слайдер, который может состоять из трех зон для контента:
  • Левая часть;
  • Правая часть;
  • Центральная часть.

    • Центральная часть слайдера

    Центральная часть содержит свой собственный стек навигации с одной и больше страницами, которые можно добавлять и удалять. К каждой странице в стеке навигации центральной части можно добавлять нативные элементы: кнопки, заголовки, панели и т.д.

    Левая и правая части слайдера

    Эти части слайдера используются как основные элементы навигации в приложении, они могут скрываться и «жить» на фоне приложения. Javascript все это время работает на этих страницах, поэтому рекомендуется использовать эти страницы как постоянное пространство, в котором можно размещать javascript-код для периодического обновления данных в приложении, long-polling соединений, а также web-страницу с меню, списками или любыми другими компонентами, которые помогают быстро перемещаться по приложению.

    Важные моменты:
    1. У боковых частей слайдера нет своего стека навигации, и они могут содержать только одну страницу.
    2. Все вызываемые функции объекта BXMobileApp.PageManager будут осуществлять действия в стеке навигации центральной части.


UI.Slider.setState
33 / 105

Описание:

Функция изменяет состояние слайдера. Слайдер может быть в одном из 3-х состояниях:

  • Открыта левая часть.
  • Открыта правая часть.
  • Обе части слайдера закрыты.

Синтаксис:

BXMobileApp.UI.Slider.setState(sliderState)
Аргументы Описание

sliderState

Состояние слайдера. Возможные значения:

  • BXMobileApp.UI.Slider.state.LEFT (1) - открыта левая часть;
  • BXMobileApp.UI.Slider.state.RIGHT (2) - открыта правая часть;
  • BXMobileApp.UI.Slider.state.CENTER (0) - обе части слайдера закрыты.

Пример:

//Открытие левой части слайдера
BXMobileApp.UI.Slider.setState(BXMobileApp.UI.Slider.state.LEFT);

//Открытие правой части слайдера
BXMobileApp.UI.Slider.setState(BXMobileApp.UI.Slider.state.RIGHT);

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Slider.setStateEnabled
34 / 105

Описание:

Функция блокировки/разблокировки состояний слайдера. По умолчанию левая и правая части слайдера заблокированы.

Синтаксис:

BXMobileApp.UI.Slider.setStateEnabled(state, enabled);
Аргументы Описание
  • state - состояние слайдера, которое нужно разблокировать/заблокировать;
  • enabled - флаг блокировки состояния:
    • true - разблокирован;
    • false - заблокирован.

Пример:

//Блокируем открытие правой части слайдера
BXMobileApp.UI.Slider.setStateEnabled(BXMobileApp.UI.Slider.state.RIGHT, false);

//Блокируем открытие левой части слайдера
BXMobileApp.UI.Slider.setStateEnabled(BXMobileApp.UI.Slider.state.LEFT, false);

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Photo - показ фото или фото ряда
35 / 105
Объект предназначен для работы с нативным контролом показа фото, с возможностью масштабирования и шаринга.


UI.Photo.show
36 / 105

Описание:

Функция для показа фото через нативный контрол. Изображение(-я) открывае(ю)тся в отдельном окне. Допускается два варианта использования: Одиночный и Множественный.

В зависимости от платформы в просмотрщике доступен разный набор функций.

iOS:
  • поддержка «ночного» режима;
  • закрытие кнопкой и «смахиванием»;
  • поддержка жестов: масштабирование двойным нажатием с удержанием и последующим сдвигом, увеличение 2 пальцами;
  • функция шаринга.
Android:
  • поддержка жестов: масштабирование двойным нажатием с удержанием и последующим сдвигом, увеличение 2 пальцами;

Синтаксис:

BXMobileApp.UI.Photo.show(params);
Аргументы Описание

photos

Массив объектов с описанием изображения:

Структура объекта описания изображения:
  • url - путь до картинки;
  • description - сопроводительный текст к картинке.

Пример одиночного варианта:

BXMobileApp.UI.Photo.show({"photos":[
          {
              "url":"http://mysite.com/sample.jpg",
              "description": "description text"
          }
     ]});

Видео:

iOS | Antroid
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Пример режима множественного просмотра изображений:

BXMobileApp.UI.Photo.show({"photos":[
          {
              "url":"http://mysite.com/sample.jpg",
              "description": "description text"
          },
          {
              "url":"/sample2.jpg",
              "description": "description text 2"
          }
          ...
     ]});

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Document - просмотр документов
37 / 105
Объект для управления документами.


UI.Document.open
38 / 105

Описание:

Функция для отображения или скачивания документов (.doc,.pdf,.txt,.txt и т.п.).

В зависимости от платформы доступен разный набор функций и реализовано разное поведение.

iOS:
  • поддержка жестов: прокрутка, масштабирование двойным нажатием с удержанием и последующим сдвигом, увеличение 2 пальцами;
  • функция шаринга;
  • автоматическое кэширование документа на устройстве. Сброс закешированных документов возможен в настройках приложения.
Android:
  • только скачивание. Открытие скачанного документа возможно только с помощью сторонних программ!

Синтаксис:

BXMobileApp.UI.Document.open(params);
Аргументы Описание

params

Объект с описанием документа:

Ключи для описания документа:
  • url - ссылка на документ.

Пример:

BXMobileApp.UI.Document.open({"url":"/mysite.com/text.txt"});

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.DatePicker - контрол выбора даты
39 / 105
Контрол предоставляет возможность выбрать время и дату, а результат выбора возвращается в заданную функцию обратного вызова в заданном формате.

Внимание: В современных версиях Android и iOS этот контрол уже встроен, достаточно задать атрибут type="date" в теге <input>. Однако, это не заработает на Android ниже версии 4.4 (за исключением устройств от Samsung), для этих случаев и создан аналогичный контрол в BitrixMobile.


UI.DatePicker.show
40 / 105

Описание:

Функция для показа контрола выбора даты и времени.

Синтаксис:

BXMobileApp.UI.DatePicker.show();
Для показа контрола выбора дат нужно предварительно задать параметры через:
BXMobileApp.UI.DatePicker.setParams(pickerParams);
Аргументы Описание

pickerParams

Объект описания пикера:

Ключи описания пикера:
  • start_date - начальное значение даты, времени или даты и времени. Если не задается, отображается текущая дата (время);
  • min_date - позволяет задать минимально возможную для выбора дату;
  • max_date - позволяет задать максимально возможную для выбора дату;
  • format - формат даты и времени. В этом формате нужно передавать start_date, min_date и max_date. В этом формате пикер вернет выбранную дату в функцию обратного вызова;
  • callback - обработчик события выбора даты и времени. Первым аргументом в обработчик передается выбранная дата в формате format;
  • type - тип пикера. Используются следующие типы отображения:
    • datetime - дата и время;
    • time - время;
    • date - позволяет задать максимально возможную для выбора дату.

Внимание! Формат даты должен соответствовать переданному типу пикера.

Пример отображения для выбора только времени:

//Отображение пикера времени, с заданным начальным временем:
BXMobileApp.UI.DatePicker.setParams({
               type: "time",
               start_date: "09:12",
               format: "h:mm",
               callback: function (d)
               {
                 app.alert({title:"time", text:JSON.stringify(d)});
               }
             }
);
BXMobileApp.UI.DatePicker.show();

Пример для отображения контрола выбора только даты:

//Отображение пикера даты, с заданной начальной датой:
BXMobileApp.UI.DatePicker.setParams({
               type: "date",
               start_date: "29.06.1998",
               format: "dd.MM.yyyy",
               callback: function (d)
               {
                 app.alert({title:"date", text:JSON.stringify(d)});
               }
             }
);
BXMobileApp.UI.DatePicker.show();

Пример пример отображения контрола для выбора даты и времени:

//Отображение пикера даты и времени, с заданной начальной датой и временем. В iOS год не отображается для выбора, но передается, с выбранной датой и временем:
BXMobileApp.UI.DatePicker.setParams({
               type: "datetime",
               start_date: "29.06.1998, 09:12",
               format: "dd.MM.yyyy, h:mm",
               callback: function (d)
               {
                 app.alert({title:"datetime", text:JSON.stringify(d)});
               }
             }
);
BXMobileApp.UI.DatePicker.show();

Пример с ограничением выбора даты:

//Задаем минимально возможную для выбора дату. В данном примере задана дата - 09.01.2014. На платформе iOS, в случае выбора даты меньше, чем 09.01.2014, пикер отобразит минимально возможную дату, а именно 09.01.2014:
BXMobileApp.UI.DatePicker.setParams({
               type: "date",
               format: "dd.MM.yyyy",
               min_date: "09.01.2014",
               callback: function (d)
               {
                 app.alert({title:"datetime", text:JSON.stringify(d)});
               }
             });
BXMobileApp.UI.DatePicker.show();

Пример:

//Задаем максимально возможную для выбора дату. В данном примере задана дата - 02.03.2015. На платформе iOS, в случае выбора даты больше, чем 02.03.2015, пикер отобразит максимально возможную дату, а именно 02.03.2015:
BXMobileApp.UI.DatePicker.setParams({
               type: "date",
               format: "dd.M.yyyy",
               max_date: "02.03.2015",
               callback: function (d)
               {
                 app.alert({title:"datetime", text:JSON.stringify(d)});
               }
             });
BXMobileApp.UI.DatePicker.show();

Пример:

//Использование изначально заданной даты и времени, с ограничением выбора по установленной максимальной дате и времени (начально заданная дата и временя, должны быть одинакового формата с максимально возможной для выбора датой и временем). В данном примере заданы дата и время - 01.03.2015, 09:12. На платформе iOS, в случае выбора даты и времени больше, чем 01.03.2015, 09:12, пикер отобразит максимально возможную дату и время, а именно 01.03.2015, 09:12:

BXMobileApp.UI.DatePicker.setParams({
               type: "datetime",
               start_date: "01.03.2015, 09:12",
               format: "dd.MM.yyyy, h:mm",
               max_date: "02.03.2015, 09:00",
               callback: function (d)
               {
                 app.alert({title:"datetime", text:JSON.stringify(d)});
               }
             });
BXMobileApp.UI.DatePicker.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.DatePicker.hide
41 / 105

Описание:

Функция для скрытия контрола выбора даты и времени.

Синтаксис:

BXMobileApp.UI.DatePicker.hide();


BXMobileApp.UI.SelectPicker - контрол выбора значений
42 / 105
Объект контрола выбора значений. Интерфейсно схож с контролом обычного <select>.


UI.SelectPicker.show
43 / 105

Описание:

Функция для вызова контрола выбора значений. Работает в двух режимах - Одиночном и Множественном.

Синтаксис:

BXMobileApp.UI.SelectPicker.show(pickerParams);
Аргументы Описание

pickerParams

Объект параметров.

Может содержать ключи:
  • values - массив значений;
  • default_value - заданное по умолчанию значение из массива values;
  • multiselect - флаг множественного выбора, если true - выбор множественный;
  • callback - обработчик события выбора значений. Первый аргументом передается массив выбранных значений.

Пример с одиночным выбором:

var items = ["Отлично!", "Хорошо!", "Очень плохо!"];
BXMobileApp.UI.SelectPicker.show({
               callback: function (data)
               {
                 app.alert({title:"Selected", text:JSON.stringify(data)});
               },
               values: items,
             });

Пример с множественным выбором:

var items = ["Отлично!", "Хорошо!", "Очень плохо!"];
BXMobileApp.UI.SelectPicker.show({
               multiselect:true,
               callback: function (data)
               {
                 app.alert({title:"Selected", text:JSON.stringify(data)});
               },
               values: items,
               default_value: items [1],
             });

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.BarCodeScanner - сканер bar-кодов
44 / 105
Объект бар-код сканера. Сканер умеет считывать штрих и qr-коды разных форматов.


UI.BarCodeScanner.open
45 / 105

Описание:

Функция открывает barcode-сканнер.

Синтаксис:

BXMobileApp.UI.BarCodeScanner.open(params);
Аргументы Описание

params

Объект с параметрами страницы:

Ключи объекта-аргумента:
  • callback - обработчик события успешного сканирования кода. Первым аргументом в обработчик передается объект вида {text:<текст>, format: <формат>}.

Поддерживаемые форматы:

iOS - QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39.

Android - QR_CODE, DATA_MATRIX, UPC_E, UPC_A, EAN_8, EAN_13, CODE_128, CODE_39, ITF, RSS14, PDF417, RSS_EXPANDED.

Пример:

BXMobileApp.UI.BarCodeScanner.open({
             callback:function(data)
             {
               if (data.text)
               {
                   app.alert({title:"Barcode", text:"Format: " + JSON.stringify(data.format) + "Barcode: " + JSON.stringify(data.text)});
               }
               else
              {
                   app.alert({
                         text: "MOB_SCAN_ERROR",
                         button:"OK"
                     });
               }
             }
         });

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Table - управление списками
46 / 105
Списки - нативные элементы, интерфейс которых приближен к интерфейсу списков платформы.

Назначение:

  • Вывод данных с вложенной структурой (каталог с товарами, папки с документами, отделы и сотрудники и т.д.);
  • Вывод данных с линейной структурой (мероприятия, список дел, план упражнений на день и т.д.);
  • Отображение списка для выбора значений пользователей.

Элементы списка можно отображать с разделением по секциям или алфавиту. Данный элемент интерфейса позволяет увеличить производительность при отображении списочных данных за счет заложенных механизмов кэширования и lazyload'а для картинок, и функции фильтрации загруженного списка.

Описание:

Функция возвращает объект нативного списка

Синтаксис:

var myTable = new BXMobileApp.UI.Table(params, table_id);
Аргументы Описание

params

Объект с параметрами списка:

Ключи описания списка:
  • url - путь относительно корня сайта, откуда будут браться данные. Данные должны возвращаться в формате json;
  • isroot - флаг, указывающий на способ открытия списка:
    • false - список добавится в текущий стек навигации;
    • true - текущий стек навигации уничтожается, создается новый стек, а список добавляется как первый элемент стека навигации.
  • table_settings - для режима выборки данных, включает в себя следующие параметры:
    • markmode - флаг, включает режим выборки:
      • true - элементы в списке будут отображаться с чекбоксами и элементы можно отмечать;
      • false - выключает режим выборки.
    • searchField - флаг, включает отображение поиска по списку:
      • true - в списке будет отображаться панель поиска;
      • false - панель поиска по списку отображаться не будет.
    • multiple - флаг, при включенном режиме выборки данных, параметр включает и выключает мультивыбор элементов в списке:
      • true - в списке можно выбрать несколько элементов;
      • false - в списке можно выбрать только один элемент.
    • selected - набор данных, которые будут уже отмечены при открытии списка. Например: {users:[1,2,3,10]} - в открывшемся списке галочками уже будут отмечены записи с идентификаторами 1,2,3 и 10. Идентификаторы записей определяются самим разработчиком при формировании данных в формате json на сервере.
    • okname - задается название для кнопки OK.
    • cancelname - задается название кнопки закрытия списка.
    • callback - функция, которая отработается при нажатии на кнопку OK. В обработчик первым параметром передаются данные, которые были отмечены галочками. Работает, только если markmode принимает значение true.
    • modal - флаг позволяет открывать список в модальном окне таблицы:
      • true - список будет открыт в модальном окне;
      • false - список будет открыт в стеке навигации или внешнем браузере (установлен по умолчанию).
    • showtitle - флаг отображает заголовок списка в панели навигации:
      • true - показывает заголовок в панели навигации;
      • false - заголовок не будет показан.
    • alphabet_index - флаг отображает алфавитный указатель для списка:
      • true - включает отображение алфавитного указателя;
      • false - алфавитный указатель не отображается.
    • use_sections - флаг включает режим отображения по секциям:
      • true - включает отображение по секциям, при этом игнорируются параметры: markdown, selected, alphabet_index;
      • false - отключает режим отображения по секциям.
    • footer - Текст внизу списка. Например, это может быть текст: Всего файлов: 2.
    • cache - флаг, включает кэширование списка на стороне приложения:
      • true - включает кэширование списка (по умолчанию);
      • false - выключает.
  • button - Кнопка на панели навигации справа. Параметр является объектом, который включает в себя следующее
    • name - имя кнопки;
    • type - тип кнопки (right_text, plus, user, context-menu, menu, back).
    • callback - JS-обработчик этой кнопки.

table_id

Идентификатор списка

Функции:

  • show - отображает список.
  • clearCache - очистка кэша списка на стороне приложения.

Пример:

var table = new BXMobileApp.UI.Table({url: "/my_site/list.php"}, "table");
table.show();


Формирование источников данных для нативных списков
47 / 105

Описание:

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

Синтаксис:

var table = new BXMobileApp.UI.Table( {url: "<адрес источника данных>"},"table");

Структура данных для списков

  • Структура первого уровня:
    • data - содержит категории данных. Каждая категория данных представляется собой массив элементов списка.
    • sections - содержит списки секций для каждой категории данных.
    • names - содержит наименование категорий.

    Схематичное представление:

    {
     "data":{   // data сожержит категории данных
                 "category_code":   //ключ категории данных, значением этого ключа является массив элементов этого списка
                 [
                  {
                   NAME: "element1",
                   URL: "url1",
                   IMAGE: "1.png",
                   SECTION_ID: "id1"
                  },
                  {
                   NAME: "element2",
                   URL: "url2",
                   IMAGE: "2.png",
                   SECTION_ID: "id2"
                  }
                 ....
                 ],
                 "category_code2":[ // ключ другой катеории
                 .....
                 ]
           },
 "sections":{ // sections содержит списки секций для каждой категории данных
                 "category_code":   //ключ категории данных, значением этого ключа является массив секций списка данной категории
                 [
                  {
                   NAME: "section_name1",
                   ID: "id1"
                  },
                  {
                   NAME: "section_name2",
                   ID: "id2"
                  }
                  ....
                  ],
                 "category_code2"
                  [
                  ....
                  ]
                 },
     "names"{ //содержит наименование категорий
                 "category_code": "category_name",
                 "category_code2": "category_name2",
            }
}
  • Структура элемента списка:
    • ID - идентификатор записи.
    • NAME - имя для отображения.
    • TABLE_URL - адрес списка, на который будет осуществлен переход при выборе этого элемента списка.
    • IMAGE - картинка к записи.
    • TAGS - дополнительная информация к записи.
    • URL - адрес, на который будет осуществлен переход во внешнем браузере.


Пример 1
48 / 105
Источник данных - list.php:
<?
$data = Array(
   "data"=>Array( //data содержит категории данных
       "company"=>Array( //category_code - ключ категории данных, значением этого ключа является массив элементов этого списка
                   Array(
                       "ID"=>1, //идентификатор записи
                       "NAME"=>"ПроГрабли", //имя для отображения
                       "TABLE_URL" => "/demo_api/list_nest.php", // адрес списка, на который будет осуществлен переход при выборе этого элемента списка
                       "IMAGE"=>"http://prograbli.ru/bitrix/templates/new_posts/images/pg-logo.png", //картинка к записи
                       "TAGS" => "Про бизнес в интернете без ошибок", //дополнительная информация к записи
                   ),
                   Array(
                       "ID"=>2,
                       "NAME"=>"Bitrix",
                       "IMAGE"=>"/demo_api/img/bitrixico.png", //картинка к записи (локальная)
                       "TAGS"=>"Отечественная CMS",
                       "URL"=>"http://bitrix.ru" // адрес страницы, на которую будет осуществлен переход при выборе этого элемента списка
                   ),
                   Array(
                       "ID"=>3,
                       "NAME"=>"Digital Workplace",
                       "IMAGE"=>"/demo_api/img/digitalwork.png",
                       "TAGS" => "Социальный интранет: Эксперты",
                       "URL"=>"http://www.digitalworkplace.ru"
                   )
           ),
       ),
       "names"=>Array("company"=>"Компании") //содержит наименование категорий
);

echo json_encode($data);
?>

Открытие списка:

Открытие списка с использованием поля для поиска и заголовком.

Пример:

//Задаем параметры отображения списка
var params = {
   url: "/my_site/list.php",
               table_settings:
               {
                   searchField: true,
                   showtitle: true,
                   name: "Список", //
               }
           };
var simple_table = new BXMobileApp.UI.Table(params, "tableId");
simple_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Открытие списка с единичной выборкой (markmode)

Открытие списка с использованием единичной выборки, и отработкой события данной выборки. Обязательное указание флага multiple:false.

Пример:

//задаем параметры отображения списка
var params = {  url: "/my_site/list.php",
               table_settings:
               {
                 markmode: true,
                 multiple: false,
                 callback: function (data)
                 {
                   app.alert({title:"Markmode", text:JSON.stringify(data)});
                 }
               }
           };
var markmode_table = new BXMobileApp.UI.Table(params, "tableId");
markmode_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Открытие списка с множественной выборкой (markmode_multiple)

Открытие списка с использованием с множественной выборки.

Пример:

//задаем параметры отображения списка
var params = {  url: "/my_site/list.php",
               table_settings:
               {
                 markmode: true,
                 multiple: true,
               }
           };
var markmode_multiple_table = new BXMobileApp.UI.Table(params, "tableId");
markmode_multiple_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Открытие списка с заданной множественной выборкой (selected)

Открытие списка с использованием множественной выборки и заданными, выбранными элементами списка.

Пример:

//задаем параметры отображения списка
var params = {  url: "/demo_api/list.php",
               table_settings:
               {
                 markmode: true,
                 multiple: true,
                 selected:({company:[1,2]}),
               }
           };
var selected_markmode_table = new BXMobileApp.UI.Table(params, "tableId");
selected_markmode_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Текст внизу списка (footer)

Задается текст внизу списка.

Пример:

//задаем параметры отображения списка

var params = {  url: "/my_site/list.php",
               table_settings:
               {
                   footer: "Table Footer"
               }
           };
var footer_table = new BXMobileApp.UI.Table(params, "tableId");
footer_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


Пример 2
49 / 105
Источник данных - list2.php:
<?
$data = Array(
   "data"=>Array(
       "company"=>Array(
                   Array(
                       "ID"=>1,
                       "NAME"=>"Bitrix",
                       "IMAGE"=>"/demo_api/img/bitrixico.png",
                       "TAGS"=>"Отечественная CMS",
                       "URL"=>"http://bitrix.ru",
                   ),
                   Array(
                       "ID"=>2,
                       "NAME"=>"Digital Workplace",
                       "IMAGE"=>"/demo_api/img/digitalwork.png",
                       "TAGS"=>"Социальный интранет: Эксперты",
                       "URL"=>"http://www.digitalworkplace.ru"
                   ),
                   Array(
                       "ID"=>4,
                       "NAME"=>"1С-Битрикс: Демонстрационный магазин",
                       "URL" => "https://www.1c-bitrix.ru/products/mobile/demo.php",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/ecommerce/features/mobile/demo.png",
                       "TAGS" => "Демонстрационное мобильное приложение",
                   ),
                   Array(
                       "ID"=>5,
                       "NAME"=>"1С-Битрикс: Администрирование",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/ecommerce/features/mobile/unnamed.png",
                       "TAGS"=>"Приложение для администраторов и менеджеров",
                       "URL"=>"https://www.1c-bitrix.ru/products/mobile/adm.php"
                   ),
                   Array(
                       "ID"=>6,
                       "NAME"=>"1С-Битрикс: Разработка приложения",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/ecommerce/features/mobile/dev.png",
                       "TAGS" => "Приложение для разработки собственных мобильных приложений",
                       "URL"=>"https://www.1c-bitrix.ru/products/mobile/#tab-develop-link"
                   ),
                   Array(
                       "ID"=>7,
                       "NAME"=>"Облачный сервис «Инспектор сайта»",
                   "IMAGE"=>"https://www.1c-bitrix.ru/images/ecommerce/features/mobile/inspector1.png",
                       "TAGS" => "Мониторинг доступности и работоспособности сайта",
                       "URL"=>"https://www.1c-bitrix.ru/products/cms/new/#tab-monitor-link"
                   ),
                   Array(
                       "ID"=>8,
                       "NAME"=>"Мобильное приложение «Мой город»",
                     "IMAGE"=>"https://www.1c-bitrix.ru/images/solutions/gov/mobile_map_ios.png",
                       "TAGS" => "Приложение для решения «Сайт государственной организации»",
                       "URL"=>"https://www.1c-bitrix.ru/solutions/gov/site.php#tab-mobile-link!mob"
                   ),
                   Array(
                       "ID"=>9,
                       "NAME"=>"Мобильное приложение для «Битрикс24»",
                       "IMAGE"=>"http://www.bitrix24.ru/images/content/b24-ios7.png",
                       "TAGS" => "Бесплатное приложение для iOS и Android",
                       "URL"=>"http://www.bitrix24.ru/features/apps.php"
                   ),
                   Array(
                       "ID"=>10,
                       "NAME"=>"Управление сайтом",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/box/bus_154_170.png",
                       "TAGS" => "1С-Битрикс: Управление сайтом",
                       "URL"=>"https://www.1c-bitrix.ru/products/cms/"
                   ),
                   Array(
                       "ID"=>11,
                       "NAME"=>"Корпоративный портал",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/box/cp141.png",
                       "TAGS" => "1С-Битрикс: Корпоративный портал",
                       "URL"=>"https://www.1c-bitrix.ru/products/intranet/"
                   )
           ),
       ),
       "names"=>Array("company"=>"Компании")
);

echo json_encode($data);
?>

Алфавитный указатель для списка (alphabet_index)

Открытие списка с использованием вертикального алфавитного указателя. Массив объектов разделяется по группам, отсортированные по алфавиту от имени объекта. В качестве разделителя используются секции, имя секции задается первой буквой группы.

Пример:

//Задаем параметры отображения списка
var params = {  url: "/my_site/list2.php",
               table_settings:
               {
                 alphabet_index: true,
               }
           };
var alphabet_index_table = new BXMobileApp.UI.Table(params, "table");
alphabet_index_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


Пример 3
50 / 105
Источник данных - list3.php:
<?
$data = Array(
   "data"=>Array(
       "company"=>Array(
                   Array(
                       "ID"=>1,
                       "NAME"=>"Bitrix",
                       "IMAGE"=>"/demo_api/img/bitrixico.png",
                       "TAGS"=>"Отечественная CMS",
                       "URL"=>"http://bitrix.ru",
                       "SECTION_ID"=>"site",
                   ),
                   Array(
                       "ID"=>2,
                       "NAME"=>"Digital Workplace",
                       "SECTION_ID"=>"site",
                       "IMAGE"=>"/demo_api/img/digitalwork.png",
                       "TAGS"=>"Социальный интранет: Эксперты",
                       "URL"=>"http://www.digitalworkplace.ru"
                   ),
                   Array(
                       "ID"=>9,
                       "NAME"=>"Мобильное приложение для «Битрикс24»",
                       "SECTION_ID"=>"bitrix",
                       "IMAGE"=>"http://www.bitrix24.ru/images/content/b24-ios7.png",
                       "TAGS" => "Бесплатное приложение для iOS и Android",
                       "URL"=>"http://www.bitrix24.ru/features/apps.php"
                   ),
                   Array(
                       "ID"=>10,
                       "NAME"=>"Управление сайтом",
                       "SECTION_ID"=>"bitrix",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/box/bus_154_170.png",
                       "TAGS" => "1С-Битрикс: Управление сайтом",
                       "URL"=>"https://www.1c-bitrix.ru/products/cms/"
                   ),
                   Array(
                       "ID"=>11,
                       "NAME"=>"Корпоративный портал",
                       "SECTION_ID"=>"bitrix",
                       "IMAGE"=>"https://www.1c-bitrix.ru/images/box/cp141.png",
                       "TAGS" => "1С-Битрикс: Корпоративный портал",
                       "URL"=>"https://www.1c-bitrix.ru/products/intranet/"
                   )
            ),
       ),
       "sections"=>Array(

// sections содержит списки секций для каждой категории данных
               "company"=>Array(

//ключ категории данных, значением этого ключа является массив секций списка данной категории
                   Array(
                       "NAME"=>"Bitrix", //наименование секции
                       "ID"=>"bitrix" // строковый идентификатор секции для привязки к ней элементов списка
                   ),
                   Array(
                       "NAME"=>"Сайты",
                       "ID"=>"site"
                   )
               )
       ),
"names"=>Array("company"=>"company")
);
echo json_encode($data);
?>

Открытие списка с секциями (use_sections)

Открытие списка с использованием разделительных секций. Массив объектов, отсортированные по заданному идентификатору секции. В качестве имени секции используется наименование секции.

Пример:

//Задаем параметры отображения списка
var params = {  url: "/my_site/list3.php",
               table_settings:
               {
                 use_sections:true,
               }
           };
var section_table = new BXMobileApp.UI.Table(params, "table");
section_table.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Page - управление страницей (экраном)
51 / 105
Объект предназначен для управления конкретной страницей в стеке навигации. Для каждой страницы можно создать свои нативные элементы интерфейса: кнопки, панели, заголовки, меню и другое.


UI.Page.isVisible
52 / 105

Описание:

Функция проверяет, видит ли пользователь текущую страницу\экран в данный момент.

Синтаксис:

BXMobileApp.UI.Page.isVisible(params);
Аргументы Описание

params

Объект с параметрами:

Ключи описания параметров:
  • callback - обработчик события при проверки видимости текущей страницы\экрана в данный момент;

Пример:

BXMobileApp.UI.Page.isVisible(
{
     'callback' : function(data)
     {
           if (data && data.status == 'visible')
           {
                 //пользователь видит текущую страницу\экран в данный момент
           }
           else
           {
                 //пользователь не видит текущую страницу\экран в данный момент
           }
     }
});


UI.Page.reload
53 / 105

Описание:

Функция перезагружает текущий экран.

Синтаксис:

BXMobileApp.UI.Page.reload();

Пример:

//перегружаем текущий экран
BXMobileApp.UI.Page.reload();


UI.Page.close
54 / 105

Описание:

Функция закрывает текущий экран, возвращаясь к предыдущему (имитирует нажатие кнопки Назад).

Синтаксис:

BXMobileApp.UI.Page.close(params);
Аргументы Описание

params

Объект параметров закрытия текущего экрана:

Ключи описания параметров закрытия текущего экрана:
  • drop - флаг, указывающий удалять текущий экран из памяти, после закрытия:
    • true - удалять текущий экран из памяти;
    • false - не удалять текущий экран из памяти.

Пример:

//закрываем текущий экран
BXMobileApp.UI.Page.close();


UI.Page.captureKeyboardEvents
55 / 105

Описание:

Функция включает или выключает генерацию событий показа/скрытия клавиатуры (onKeyboardWillShow, onKeyboardWillHide, onKeyboardDidHide, onKeyboardDidShow).

Синтаксис:

BXMobileApp.UI.Page.captureKeyboardEvents(enable_status);
Аргументы Описание

enable_status
  • true - включает генерацию событий показа/скрытия клавиатуры;
  • false - выключает генерацию событий показа/скрытия клавиатуры.
По умолчанию - false.

Пример:

//Включаем слежение за клавиатурой
BXMobileApp.UI.Page.captureKeyboardEvents(true);

//Регистрирует обработчик события появления клавиатуры
BX.addCustomEvent("onKeyboardDidShow", function(){
    //клавиатура появилась, здесь можно что-то делать
});


BXMobileApp.PageManager - менеджер страниц
56 / 105
Объект BXMobileApp.PageManager предназначен для управления страницами/экранами в рамках стека навигации.

Стек навигации начинается со «стартовой» страницы, с которой нельзя вернуться назад. В стек навигации можно добавлять неограниченное число новых страниц. С каждой добавленной страницы можно перейти назад (программно или через нажатие соответствующей кнопки в панели навигации) - будет осуществлен возврат к предыдущей странице в стеке навигации.

В разных платформах стек навигации ведет себя по-разному в силу архитектурных особенностей.

Особенности на Android:

  • По страницам можно перемещаться свайпом;
  • После ухода со страницы путем нажатия Назад страница удаляется из стека и из памяти. При повторном добавлении страницы в стек она будет загружаться заново.

Особенности на iOS:

  • Перемещаться свайпом можно только к предыдущей странице;
  • После ухода со страницы путем нажатия Назад страница удаляется из стека, но не удаляется из памяти. На этой странице будет продолжать работать javascript и при повторном добавлении этой страницы в стек навигации будет взята именно страница из памяти. Перезагрузка страницы при повторном добавлении не осуществляется.


PageManager.loadPageBlank
57 / 105

Описание:

Функция добавляет новый экран\страницу к текущей навигационной цепочке с переданным адресом, заголовком и параметрами.

Синтаксис:

BXMobileApp.PageManager.loadPageBlank(params);
Аргументы Описание

params

Объект с параметрами страницы:

Обязательные:
  • url - адрес нового экрана\страницы.
Необязательные:
  • title - заголовок страницы;
  • cache - логический тип:
    • true - включено кэширование (по умолчанию);
    • false - выключено кэширование.
  • data - данные, которые будут сохранены для страницы, в формате data: {param1: "test1", param2:"test2"}.

Пример:

//Открытие страницы с заголовком “Demo”
BXMobileApp.PageManager.loadPageBlank({
       url: "/demo_api/index_demo.php",
       title: "Demo",
   });

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


PageManager.loadPageStart
58 / 105

Описание:

Функция загружает страницу в качестве стартовой в навигационной цепочке. Перед этим очищается вся цепочка открытых экранов и очищается история переходов.

Синтаксис:

BXMobileApp.PageManager.loadPageStart(params);
Аргументы Описание

params

Объект с параметрами страницы:

Обязательные:
  • url - адрес нового экрана\страницы.
Необязательные:
  • title - заголовок страницы;
  • page_id - идентификатор страницы. Если он задан, то страница будет закэширована (работает только на iOS).

Пример:

BXMobileApp.PageManager.loadPageStart({
       url: "/demo_api/index_demo_start.php",
       title: "Стартовая",
       page_id: "demo_page_start",
   });

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


PageManager.loadPageModal
59 / 105

Описание:

Функция открывает страницу в модальном окне. Это означает, что создается еще один стек навигации поверх существующего. При закрытии этого окна осуществляется возврат к родительскому экрану.

Синтаксис:

BXMobileApp.PageManager.loadPageModal(params);
Аргументы Описание

params

Объект с параметрами страницы:

Обязательные:
  • url - адрес страницы.
Необязательные:
  • title - заголовок страницы;

Пример:

BXMobileApp.PageManager.loadPageModal({
       url: "/demo_api/index_demo_start.php",
       title: "Модальная",
   });

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


PageManager.setWhiteList
60 / 105

Описание:

Функция позволяет выставить список дополнительных доменов, которые могут быть открыты внутри приложения. Эта функция может быть использована для реализации авторизации в социальных сетях или оплаты заказов через внешние платежные системы. Функция должна вызываться при каждом запуске приложения, и для использования «белого списка» должна быть вызвана хотя бы один раз на любой странице.

Внимание: Нужно учитывать, что некоторые сайты могут автоматически перенаправлять с указанной страницы на другой адрес, например на тот же домен, но с другим протоколом или на поддомен. Такие адреса также необходимо добавить в «белый список». Формат: <протокол>://<домен>

Синтаксис:

BXMobileApp.PageManager.setWhiteList(string);
Аргументы | Описание
string | Входящий строковый параметр - список шаблонов, перечисленных через точку с запятой: BXMobileApp.PageManager.setWhiteList("<шаблон>;<шаблон>;<шаблон>");

Примеры:

// Доступ к example.com:
BXMobileApp.PageManager.setWhiteList("http://example.com")

// Доступ по ssl к example.com (https://):
BXMobileApp.PageManager.setWhiteList("https://example.com")

// Доступ для всех поддоменов example.com, * - можно указать как для всех протоколов, поддоменов, так и для всех ссылок домена:
BXMobileApp.PageManager.setWhiteList("http://*.example.com/")

// Доступ для любого протокола, любого поддомена:
BXMobileApp.PageManager.setWhiteList("*://*.example.com")

// Доступ только адреса внутри /path:
BXMobileApp.PageManager.setWhiteList("*://*.example.com/path")

// Несколько путей:
BXMobileApp.PageManager.setWhiteList("*://*.example.ru/*;*://*.example.com/*")


BXMobileApp.UI.Page.TextPanel - нативная панель ввода текста
61 / 105
Нативная панель для ввода текста и обработки этого текста. Располагается внизу экрана и статична относительно web-контента.

Назначение:

  • Написание комментариев или отзывов;
  • Написание сообщений в чате;

Внимание! Нативная панель ввода текста может быть только одна на страницу.


UI.Page.TextPanel.show
62 / 105

Описание:

Функция отображает текстовую панель.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.show(params);
Аргументы Описание

params

Объект с параметрами панели ввода текста:

Ключи описания параметров панели ввода текста:
  • placeholder - текст-подсказка в текстовом поле (аналогичный параметру placeholder HTML-тега <input>);
  • button_name - текст на кнопке подтверждения. Игнорируется при useImageButton=true (см. ниже);
  • action - функция, выполняемая после нажатия кнопки Отправить и принимающая один аргумент - введенный текст;
  • plusAction - функция без аргументов, выполняемая при нажатии на кнопку "+";
  • callback - обработчик, который вызывается при возникновении события. Первым параметром передается объект события. Формат объекта события:
    {
    event: <событие>, //onKeyPress|removeFocus|getFocus
    text: "<введённый текст>"
}
  • useImageButton - флаг, при установке которого кнопка подтверждения будет заменена иконкой (встроена в приложение) вместо текста, указанного в параметре button_name (см. выше). По умолчанию флаг установлен в true.

Пример:

//Отобразится текстовая панель, с параметрами по умолчанию
BXMobileApp.UI.Page.TextPanel.show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.hide
63 / 105

Описание:

Функция скрывает текстовое поле..

Синтаксис:

BXMobileApp.UI.Page.TextPanel.hide()

Пример:

BXMobileApp.UI.Page.TextPanel.hide();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.setParams
64 / 105

Описание:

Функция задает параметры для текстовой панели ввода.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.setParams:(params);

Пример 1:

//Задаем текст, внутри текстового поля, который пропадет после получения фокуса, и переименовываем название кнопки, заданной по умолчанию
var params =
 {
       placeholder: "Какой-то текст...",
       button_name: "Отправить",
 };

BXMobileApp.UI.Page.TextPanel.setParams(params);

//Показываем текстовую панель со своими параметрами
BXMobileApp.UI.Page.TextPanel.show();

Видео 1:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Пример 2:

//Использование параметра plusAction

var params =
 {
       placeholder: "Text here...",
       button_name: "Send",
       plusAction: function()
       {
         app.alert({title:"plusAction", text:"Дополнительные действия"});
       }
};
BXMobileApp.UI.Page.TextPanel.setParams(params);

//Показываем текстовую панель со своими параметрами
BXMobileApp.UI.Page.TextPanel.show()

Видео 2:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.setUseImageButton
65 / 105

Описание:

Функция делает кнопку Отправить в виде изображения.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.setUseImageButton(use);
Аргументы Описание

use

Флаг, для отображения кнопки в виде изображения:

  • true - отобразить кнопку в виде изображения;
  • false - отобразить текстовую кнопку.
По умолчанию - false.

Пример:

BXMobileApp.UI.Page.TextPanel.show();
//передаем true, чтобы показать кнопку "Отправить" в виде изображения.
BXMobileApp.UI.Page.TextPanel.setUseImageButton(true);

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.setText
66 / 105

Описание:

Функция устанавливает текст в текстовом поле.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.setText(text)
Аргументы | Описание
text | Текст, который нужно отобразить в поле

Пример:

// отображаем нужный текст в текстовом поле;
BXMobileApp.UI.Page.TextPanel.show();
BXMobileApp.UI.Page.TextPanel.setText('Мой текст!');

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.focus
67 / 105

Описание:

Функция устанавливает фокус в текстовом поле.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.focus();

Пример:

//Покажем текстовую панель с заданным текстом с курсором в конце нашего текста. Клавиатура будет автоматически показана

BXMobileApp.UI.Page.TextPanel.show();
BXMobileApp.UI.Page.TextPanel.setText('Мой текст!');
BXMobileApp.UI.Page.TextPanel.focus();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.clear
68 / 105

Описание:

Функция для очистки текстового поля.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.clear();

Пример:

BXMobileApp.UI.Page.TextPanel.clear();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TextPanel.showLoading
69 / 105

Описание:

Кнопка Отправить в виде загрузчика.

Синтаксис:

BXMobileApp.UI.Page.TextPanel.showLoading: function(shown){};
Аргументы Описание

shown

Флаг, для отображения кнопки в виде загрузчика:

  • true - показать загрузчик;
  • false - отобразить кнопку по умолчанию.

Пример:

//Передаем true, чтобы показать кнопку "Отправить" в виде изображения, false - чтобы убрать.
BXMobileApp.UI.Page.TextPanel.showLoading(true);

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Page.TopBar - навигационная панель
70 / 105
Навигационная панель располагается вверху экрана в центральной части слайдера. Панель статична относительно веб-страницы.

Назначение:

  • Вывод активных заголовков страницы;
  • Вывод нативных кнопок страницы.

Каждая страницы в стеке навигации имеет свой персональный вид навигационной панели (заголовок и кнопка). При переходе от страницы к странице данные в навигационной панели меняются автоматически.


UI.Page.TopBar.hide
71 / 105

Описание:

Функция скрывает навигационную панель.

Синтаксис:

BXMobileApp.UI.Page.TopBar.hide();

Пример:

//Cкрываем навигационную панель
BXMobileApp.UI.Page.TopBar.hide();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.show
72 / 105

Описание:

Функция отображает верхнюю панель.

Синтаксис:

BXMobileApp.UI.Page.TopBar.show();

Пример:

//Показываем скрытую навигационную панель.
BXMobileApp.UI.Page.TopBar.show();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.addRightButton
73 / 105

Описание:

Функция добавляет правую кнопку на навигационную панель.

Синтаксис:

BXMobileApp.UI.Page.TopBar.addRightButton: function(buttonObject){};
Аргументы Описание

buttonObject

Объект с параметрами правой кнопки на навигационной панели:

Ключи описания параметров кнопки:
  • callback - обработчик действий, по нажатию кнопки;
  • name - название, которое должно отобразиться на кнопке;
  • badgeCode - идентификатор для бейджа;
  • type - можно использовать стандартные типы иконок, либо свой тип, определив его через конструктор приложений. Стандартный набор типов иконок следующий:
    • plus - иконка добавления;
    • user - иконка пользователей;
    • back - иконка в виде стрелочки;
    • text - текст;
    • refresh - иконка обновления;
    • context-menu - иконка контекстного меню;
    • basket - иконка корзины;
    • menu - иконка меню;
    • edit - иконка для редактирования.

Пример:

//Отображаем правую кнопку на навигационной панели, с кнопкой и текстом на ней, при нажатии на которую будет показано сообщение.
var params = {
   callback:function(){
     app.alert({title:"addRightButton", text:"Вы нажали правую кнопку!"});
   },
   name:"Right Text",
   type:"text"
 };
BXMobileApp.UI.Page.TopBar.addRightButton(params);

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.setColors
74 / 105

Описание:

Цветовая настройка навигационной панели.

Синтаксис:

BXMobileApp.UI.Page.TopBar.setColors(params);
Аргументы Описание

buttonObject

Параметры настройки цветов панели уведомления:

  • background - цвет фона навигационной панели;
  • titleText - цвет текста заголовка;
  • titleDetailText - цвет дополнительного текста заголовка;

Пример:

BXMobileApp.UI.Page.TopBar.setColors(
{
background:"#fb0000",
titleText: "#ffffff",
titleDetailText: "#ffffff"
});

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.updateButtons
75 / 105

Описание:

Функция обновляет правую кнопку на навигационной панели.

Синтаксис:

BXMobileApp.UI.Page.TopBar.updateButtons: function(buttonObject){};
Аргументы Описание

buttonObject

Объект с параметрами правой кнопки на навигационной панели.

Ключи описания параметров кнопки:

  • callback - обработчик действий, по нажатию кнопки;
  • name - название, которое должно отобразиться на кнопке;
  • badgeCode - идентификатор для бейджа;
  • type - можно использовать стандартные типы иконок, либо свой тип, определив его через конструктор приложений. Стандартный набор типов иконок следующий:
    • plus - иконка добавления;
    • user - иконка пользователей;
    • back - иконка в виде стрелочки;
    • text - текст;
    • refresh - иконка обновления;
    • context-menu - иконка контекстного меню;
    • basket - иконка корзины;
    • menu - иконка меню;
    • edit - иконка для редактирования.

Пример:

//Обновляем правую кнопку на навигационной панели, при нажатии на которую будет показано сообщение.
var params = {
    button1:{
        callback:function(){
            app.alert({title:"updateButtons", text:"Вы обновили правую кнопку!"});
        },
        type:"refresh"
    }
};
BXMobileApp.UI.Page.TopBar.updateButtons(params);


BXMobileApp.UI.Page.TopBar.title - управление заголовком
76 / 105
Объект позволяет управлять активным заголовком страницы, который отображается в навигационной панели.


UI.Page.TopBar.title.setText
77 / 105

Описание:

Функция задает текст заголовка на верхней панели.

Внимание! Для отображения всего заголовка (с картинкой и детальным текстом) обязательно должен быть задан основной текст.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setText(text)
Аргументы | Описание
text | Основной текст заголовка

Пример:

//Задаем текст к заголовку
BXMobileApp.UI.Page.TopBar.title.setText('Title Text Test Navigation');

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.title.setDetailText
78 / 105

Описание:

Функция задает дополнительный текст заголовка.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setDetailText(text);
Аргументы | Описание
text | Текст детального заголовка

Пример:

//Задаем дополнительный текст к заголовку
BXMobileApp.UI.Page.TopBar.title.setDetailText('Detail Text');

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.title.setImage
79 / 105

Описание:

Функция задает изображение к заголовку на верхней панели.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setImage(imageUrl);
Аргументы | Описание
imageUrl | Путь до изображения. Возможен вариант указания полного пути к картинке со стороннего сервера:

Пример:

//Задаем изображение к заголовку

var url = '/my_site/img.png';
BXMobileApp.UI.Page.TopBar.title.setImage(url);

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.title.setCallback
80 / 105

Описание:

Функция для установки javascript-обработчика нажатия на заголовок в навигационной панели. Используется только после применения.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setCallback(callback);
Аргументы | Описание
callback | Обработчик события нажатия на заголовок.

Пример:

//По нажатию на заголовок, выводим сообщение

BXMobileApp.UI.Page.TopBar.title.setCallback(function()
{
   app.alert({title:"setCallback", text:"Вы нажали на Заголовок!"});
});

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.title.show
81 / 105

Описание:

Функция отображает заголовок в навигационной панели.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.show(params);

Пример:

//Задаем текст заголовка
BXMobileApp.UI.Page.TopBar.title.setText('Title Text Test Navigation');

//Отображаем заголовок в навигационной панели.
BXMobileApp.UI.Page.TopBar.title.show();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.TopBar.title.hide
82 / 105

Описание:

Функция для скрытия заголовка в навигационной панели.

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.hide: function(){};

Пример:

//Скрываем заголовок на навигационной панели
BXMobileApp.UI.Page.TopBar.title.hide();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Page.SlidingPanel - скользящая панель
83 / 105
Скользящая панель - это дополнительный элемент интерфейса, который предназначен для размещение кнопок, выполняющих быстрые действия на текущем экране или странице. Панель располагается под навигационной панелью.
Скользящая панель имеет два режима поведения:
  • Статичный - при скроллировании страницы панель остается на месте;
  • Скользящий - при скроллировании страницы вниз панель скрывается.

Скользящая панель может быть только одна на страницу.


UI.Page.SlidingPanel.show
84 / 105

Описание:

Функция отображает скользящую панель.

Синтаксис:

BXMobileApp.UI.Page.SlidingPanel.show(params);
Аргументы Описание

params

Объект параметров скользящей панели:

Ключи описания параметров скользящей панели:
  • hidden_sliding_panel - флаг, определяющий поведение панели на родительском контроллере. Если флаг установлен в:
    • true - при прокрутке панель будет динамически скрываться или отображаться в зависимости от направления прокрутки;
    • false - панель будет жестко зафиксирована вверху окна.
    Параметр является необязательным. По умолчанию - true;
  • buttons - объект Dictionary, в котором передается список кнопок, которые необходимо отобразить в панели. Ограничена тремя кнопками. Каждая кнопка описывается в виде Dictionary, ключом является id кнопки. Кнопка может принимать следующие параметры:
    • name - название, которое должно отобразиться на кнопке;
    • url - адрес, по которому следует перейти при нажатии на указанную кнопку;
    • action - действие, которое должно быть выполнено, при нажатии на указанную кнопку;
    • callback - Callback, который должен быть вызван на указанном или родительском контроллере, если панель отображается;
    • scroll_backlash - определение максимального смещения при прокрутке вниз, перед началом отображения кнопочной панели;
    • type - тип кнопки, согласно которому определяется внешний вид, отображаемой на кнопке иконки. Можно использовать стандартные типы иконок, либо свой тип, определив его через конструктор приложений. Стандартный набор типов иконок следующий:
      • plus - иконка добавления;
      • user - иконка пользователей;
      • back - иконка в виде стрелочки;
      • refresh - иконка обновления;
      • context-menu - иконка контекстного меню;
      • basket - иконка корзины;
      • page_back - стрелка Назад в web-браузере;
      • page_forward - стрелка Вперед в web-браузере;
      • page_refresh - стрелка Обновить в web-браузере;
      • menu - иконка меню;
      • edit - иконка для редактирования.

Пример:

//Создаем скользящую панель с тремя кнопками разных типов и обработчиками событий при нажатии на каждую кнопку.

BXMobileApp.UI.Page.SlidingPanel.show({
               hidden_sliding_panel: true,
               scroll_backlash: 20.0,
               buttons:
               {
        id_button1:
        {
          name: "Только текст",
           type: "right_text",
           callback: function ()
           {
                               app.alert({title:"SlidingPanel", text:"Только текст"});
                   }
                  },
                       id_button2:
                       {
                 name: "Текст",
                 type: "basket",
                 callback: function ()
                   {
                           app.alert({title:"SlidingPanel", text:"Иконка и текст"});
                           }
                         },
                         id_button3:
                         {
            name: "",
            type: "menu",
            callback: function ()
             {
                 app.alert({title:"SlidingPanel", text:"Только иконка"});
              }
   }
}
});

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.SlidingPanel.hide
85 / 105

Описание:

Функция для скрытия панели.

Синтаксис:

BXMobileApp.UI.Page.SlidingPanel.hide();

Пример:

//Скрываем дополнительную кнопочную панель
BXMobileApp.UI.Page.SlidingPanel.hide();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Page.LoadingScreen - экран загрузки
86 / 105
Экран загрузки - это нативный элемент, который застилает веб-контент с индикатором загрузки в середине. Его можно увидеть при загрузке/перезагрузке страницы. Предназначен для отображения потенциально длительных процессов запроса и обработки данных или скрытия процесса динамического перестроения интерфейса страницы.


UI.Page.LoadingScreen.show
87 / 105

Описание:

Функция для показа экран загрузки на странице.

Синтаксис:

BXMobileApp.UI.Page.LoadingScreen.show();

Пример:

//Отображаем экран загрузки на странице
BXMobileApp.UI.Page.LoadingScreen.show();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.LoadingScreen.hide
88 / 105

Описание:

Функция для скрытия экрана загрузки на странице.

Синтаксис:

BXMobileApp.UI.Page.LoadingScreen.hide();

Пример:

//Скрываем экран загрузки на странице
BXMobileApp.UI.Page.LoadingScreen.hide();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.LoadingScreen.setEnabled
89 / 105

Описание:

Функция включает или отключает возможность автоматического показа / скрытия загрузочного экрана в текущей странице.

Синтаксис:

BXMobileApp.UI.Page.LoadingScreen.setEnabled(enabled);
Аргументы Описание

enabled

Флаг, управляющий автоматическим показом загрузочного экрана:

  • true - включает автоматический показ загрузочного окна (например, при обновлении страницы);
  • false - выключает автоматический показ загрузочного окна.

Пример:

//запрещаем автоматический показ загрузочного экрана
BXMobileApp.UI.Page.LoadingScreen.setEnabled(false);


BXMobileApp.UI.Page.Scroll - управление скроллингом
90 / 105
Объект для управления скроллингом страницы.


UI.Page.Scroll.setEnabled
91 / 105

Описание:

Функция разрешает/запрещает скроллинг на странице.

Синтаксис:

BXMobileApp.UI.Page.Scroll.setEnabled(enabled);
Аргументы Описание

enabled

Флаг,определяющий использования скроллинга на странице:

  • true - разрешает скроллинг на странице;
  • false - запрещает использование скроллинга на странице.

Пример:

//запрещаем использование скроллинга на странице
BXMobileApp.UI.Page.Scroll.setEnabled(false);


BXMobileApp.UI.Page.Refresh - контрол обновления
92 / 105
Нативный контрол обновления, предназначен для отображения процесса обновления.


UI.Page.Refresh.setParams
93 / 105

Описание:

Функция для установки параметров контрола обновления.

Синтаксис:

BXMobileApp.UI.Page.Refresh.setParams(params);
Аргументы Описание

params

Объект параметров контрола обновления:

Ключи описания параметров скользящей панели:
  • enable - флаг отображения объекта, при значении false - объект создан, но не отображается;
  • callback - обработчик события, действия выполняемые контролом;
  • timeout - задается максимальное время отображения контрола;
  • pullText - задается текст состояния максимального движения контрола вниз (параметр доступен только в iOS!);
  • releaseText - задается текст состояния движения контрола вниз после максимального движения вниз (параметр доступен только в iOS!);
  • loadText - задается текст состояния момента загрузки (параметр доступен только в iOS!).

Пример:

//Задаем свои параметры для контрола обновлений, с сопроводительным текстом при обновлении, заданным максимальным временем отображения контрола и обработчика событий.

var params = {
        timeout: "20",
        enabled: true,
        callback: function (){app.alert({title:"Pull to Refresh", text:"Pull to refresh!"})},
        pullText: "Pull to refresh",
        releaseText: "Release to refresh",
        loadText: "Loading..."
        };
BXMobileApp.UI.Page.Refresh.setParams(params);

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.Refresh.setEnabled
94 / 105

Описание:

Функция активирует контрол обновление. Пользователь может потянуть страницу вниз и отработает js-функция обратного вызова (см. параметр callback). В функции обратного вызова можно совершать произвольные действия, по окончании которых анимацию обновления следует остановить (см. BXMobileApp.UI.Page.Refresh.stop).

Синтаксис:

BXMobileApp.UI.Page.Refresh.setEnabled(enabled);
Аргументы Описание

enabled

Флаг задает состояние отображения контрола обновлений на странице:

  • true - контрол обновлений будет показан;
  • false - контрол не будет отображаться.

Пример:

//Деактивация контрола
BXMobileApp.UI.Page.Refresh.setEnabled(false);


UI.Page.Refresh.start
95 / 105

Описание:

Функция стартует анимацию обновления, программно (без участия пользователя).

Синтаксис:

BXMobileApp.UI.Page.Refresh.start();

Пример:

//Старт анимации
BXMobileApp.UI.Page.Refresh.start();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Page.Refresh.stop
96 / 105

Описание:

Функция останавливает анимацию обновления.

Синтаксис:

BXMobileApp.UI.Page.Refresh.stop();

Пример:

//Останавливаем анимацию
BXMobileApp.UI.Page.Refresh.stop();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео


BXMobileApp.UI.ActionSheet - выпадающее меню
97 / 105
Описание:

Функция создает набор кнопок, представляющих несколько возможных вариантов выполнения действий.

Синтаксис:

BXMobileApp.UI.ActionSheet(params, id);
Аргументы Описание

id

Идентификатор выпадающего меню.

params

Объект параметров выпадающего меню:

Ключи описания параметров выпадающего меню:
  • title - заголовок выпадающего меню (пока только на Android).
  • buttons - объект Dictionary, в котором передается список кнопок, необходимых для отображения в выпадающем меню. Каждая кнопка описывается в виде Dictionary, ключом является id кнопки. Кнопка может принимать следующие параметры:
    • title - наименование кнопок;
    • callback - обработчик события действий, выполняемых нажатием кнопки.

Пример:

//Создаем выпадающее меню, с двумя кнопками и обработчиками событий при нажатии на данные кнопки. В данном примере “test” является идентификатором данного выпадающего меню.

var actionSheet = new BXMobileApp.UI.ActionSheet(
{
 title:"Продукты Bitrix",
 buttons:
 [
               {
                   title:"Управление сайтом",
                   callback:function()
                       {
                           app.alert({
                                       title: "Управление сайтом",
                                       button: "OK",
                                       text: "Профессиональная система управления веб-проектами, универсальный программный продукт для создания, поддержки и успешного развития"
                           });
                       }
               },
               {
                   title:"Корпоративный портал",
                   callback:function()
                       {
                           app.alert({
                                       title: "Корпоративный портал",
                                       button: "OK",
                                       text: "Система управления внутренним информационным ресурсом компании для коллективной работы над задачами, проектами и документами, для эффективных внутренних коммуникаций. "
                           });
                       }
               },
                {
               title:"Мобильное приложение",
               callback:function()
                 {
                       app.alert({
                            title: "Мобильное приложение",
                             button: "OK",
                             text: "Это технология, позволяющая быстро разрабатывать мобильные приложения под iOS и Android для сайтов, созданных на платформе «1С-Битрикс»."
                     });
                 }
                }
  ]
}, "test");


UI.ActionSheet.show
98 / 105

Описание:

Функция для отображения созданного выпадающего меню.

Синтаксис:

BXMobileApp.UI.ActionSheet.show();

Пример:

//Создаем выпадающее меню с двумя кнопками и обработчиками событий при нажатии на данные кнопки. В данном примере “test” является идентификатором данного выпадающего меню.

var actionSheet = new BXMobileApp.UI.ActionSheet(
{
 title:"Продукты Bitrix",
 buttons:
 [
               {
                   title:"Управление сайтом",
                   callback:function()
                       {
                           app.alert({
                                       title: "Управление сайтом",
                                       button: "OK",
                                       text: "Профессиональная система управления веб-проектами, универсальный программный продукт для создания, поддержки и успешного развития"
                           });
                       }
               },
               {
                   title:"Корпоративный портал",
                   callback:function()
                       {
                           app.alert({
                                       title: "Корпоративный портал",
                                       button: "OK",
                                       text: "Система управления внутренним информационным ресурсом компании для коллективной работы над задачами, проектами и документами, для эффективных внутренних коммуникаций. "
                           });
                       }
               },
                {
               title:"Мобильное приложение",
               callback:function()
                 {
                       app.alert({
                            title: "Мобильное приложение",
                             button: "OK",
                             text: "Это технология, позволяющая быстро разрабатывать мобильные приложения под iOS и Android для сайтов, созданных на платформе «1С-Битрикс»."
                     });
                 }
                }
  ]

}, "test");

//Отображаем созданное выпадающее меню.
actionSheet.show();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Menu - контекстное меню
99 / 105
Описание:

Функция создает контекстное меню страницы.

Синтаксис:

BXMobileApp.UI.Menu(params, id);
Аргументы Описание

params

Объект параметров контекстного меню:

Ключи описания параметров контекстного меню:
  • items - массив пунктов меню. Каждый пункт описывается объектом, содержащим следующие ключи:
    • name - название пункта меню;
    • action - javascript-функция, которая будет выполняться при нажатии на пункт меню;
    • url - страница, на которую будет осуществляться переход при нажатии на пункт меню;
    • image - путь к своей иконке пункта меню (относительно корня сайта или полный путь вместе с доменом);
    • icon - код иконки из стандартного набора;
    • arrowFlag - флаг, для отображения индикатора перехода. Используется вместе с url.

id

Идентификатор контекстного меню.

Пример:

//Создаем контекстное меню, состоящее из трех пунктов. В данном примере “test” является идентификатором данного контекстного меню.

var menu = new BXMobileApp.UI.Menu(
{
    items:

[
               {
                   name:"Управление сайтом",
                   image: "/demo_api/img/upravlenie-saitom.png",
                   url:"http://www.1c-bitrix.ru/products/cms/",
               },
                  {
                   name:"Корпоративный портал",
                   action:function()

{

app.alert(
           {
        title: "Корпоративный портал",
         button: "OK",
         text: "Система управления внутренним информационным ресурсом компании для коллективной работы над задачами, проектами и документами, для эффективных внутренних коммуникаций. "
    });
},

icon: 'check'

},
           {
               name:"Мобильное приложение",
               url:"/my_site/index2.php",
               arrowFlag:"true"
           }
]
}, "test");


UI.Menu.show
100 / 105

Описание:

Функция для отображения созданного контекстного меню.

Синтаксис:

BXMobileApp.UI.Menu.show();

Пример:

//Создаем контекстное меню, состоящее из трех пунктов. В данном примере “test” является идентификатором данного контекстного меню.

var menu = new BXMobileApp.UI.Menu(
{
    items:

[
               {
                   name:"Управление сайтом",
                   image: "/demo_api/img/upravlenie-saitom.png",
                   url:"http://www.1c-bitrix.ru/products/cms/",
               },
                  {
                   name:"Корпоративный портал",
                   action:function()

{

app.alert(
           {
        title: "Корпоративный портал",
         button: "OK",
         text: "Система управления внутренним информационным ресурсом компании для коллективной работы над задачами, проектами и документами, для эффективных внутренних коммуникаций. "
    });
},

icon: 'check'

},
           {
               name:"Мобильное приложение",
               url:"/my_site/index2.php",
               arrowFlag:"true"
           }
]

}, "test");

//Отобразим данное контекстное меню путем нажатия на заголовок в навигационной панели, используя методы навигационной панели. Задаем основной текст заголовка, используя BXMobileApp.UI.Page.TopBar.title.setText();. Используя обработчик события нажатия на заголовок BXMobileApp.UI.Page.TopBar.title.setCallback();, отобразим созданное контекстное меню. Используем BXMobileApp.UI.Page.TopBar.title.show();, чтобы отобразить активный заголовок на навигационной панели.

BXMobileApp.UI.Page.TopBar.title.setText('Заголовок');
BXMobileApp.UI.Page.TopBar.title.setCallback(function()
{
   menu.show();//отображаем созданное контекстное меню
});
BXMobileApp.UI.Page.TopBar.title.show();

Видео:

iOS | Android
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео. | Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Menu.hide
101 / 105

Описание:

Функция для программного скрытия контекстного меню.

Синтаксис:

BXMobileApp.UI.Menu.hide();

Пример:

//Скрываем контекстное меню.
BXMobileApp.UI.Menu.hide();


BXMobileApp.UI.NotificationBar - локальные уведомления
102 / 105

Описание:

Локальные уведомления используются для оповещения пользователя о каких-либо событиях, о протекании каких-либо процессов. Например, в интернет-магазине можно сообщать пользователю о смене статуса заказа, в чате можно показать новое сообщение от пользователя или оповестить о проблемах соединения с сервером.

Синтаксис:

BXMobileApp.UI.NotificationBar(params);
Аргументы Описание

params

Параметры уведомления:

  • message - текст сообщения;
  • contentType - тип текста сообщения:
    • html - переданный текст будет интерпретироваться как html (в режиме html распознаются только самые простейшие теги);
    • text - переданный текст будет интерпретироваться как text.
  • groupId - идентификатор группы;
  • color - цвет фона в формате hex (поддерживается альфа-канал);
  • textColor - цвет текста в формате hex (поддерживается альфа-канал);
  • loaderColor - цвет загрузчика в формат hex (поддерживается альфа-канал);
  • bottomBorderColor - цвет нижней границы панели уведомления формат hex (поддерживается альфа-канал);
  • indicatorHeight - высота иконки уведомления;
  • maxLines - максимальное число строк уведомления;
  • useLoader - флаг отображения загрузчика:
    • true - загрузчик отображается;
    • false - загрузчик не отображается.
  • imageURL - ссылка на изображение, которое будет использовано в качестве иконки;
  • iconName - название изображения в ресурсах приложения, которое будет использоваться в качестве иконки;
  • imageBorderRadius - радиус скругления изображения индикатора в процентах;
  • align - горизонтальное выравнивание контента уведомления:
    • left - по левому краю;
    • center - по центру.
  • autoHideTimeout - тайм-аут автоматического закрытия уведомления в миллисекундах;
  • hideOnTap - флаг закрытия панели по тапу (прикосновению). Если true, то при прикосновении к уведомлению оно скроется;
  • onHideAfter - обработчик, который будет вызван после закрытия уведомления:
    {
"id" : "<идентификатор уведомления>",
"groupId" : "<группа>",
"isAutoHide" : "<флаг скрытия по таймауту>",
"extra" : <данный ключ extra>
}
  • onTap - обработчик, который будет вызван, если пользователь нажмет на уведомление. Первым параметром в обработчик передается объект следующего формата:
    {
"id" : "<идентификатор уведомления>",
"groupId" : "<группа>",
"extra" : <данный ключ extra>
}
  • extra - дополнительные данные, которые будут переданы в обработчики на onTap и onHideAfter. Произвольный js-объект.
  • isGlobal - флаг глобального уведомления. Глобальные уведомление всегда отображаются на видимом пользователем экране. Локальные уведомления отображаются только на странице, которая инициировала показ.
  • id - идентификатор уведомления.

Важно! Параметр groupId служит для объединения уведомлений в одну группу. Уведомления, принадлежащие одной группе, не могут одновременно отображаться на экране. Соответственно, если было создано уведомление А и Б с одинаковым groupId, то при показе уведомления А будет автоматически скрыто уведомление Б, если оно отображается в данный момент.

Пример №1

// Уведомление с лоудером

var notifyBar = new BXMobileApp.UI.NotificationBar(
{
    message: ‘Уведомление с лоудером’,
    useLoader: true,
    align:"center",
color: "#76088c",
    autoHideTimeout:2000,
    hideOnTap:true,
});
notifyBar.show(); //show - функция отображения панели уведомления.
notifyBar.hide(); //hide - функция скрытия панели уведомления.

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.

Пример №2

// Многострочное уведомление с картинкой

new BXMobileApp.UI.NotificationBar(
{
    message:  ‘Демо нотификационной панели. Панель можно увеличить, уменьшить, добавить иконку, картинку, загрузчик, поменять цвет фона и текста. Также можно изменить прозрачность от 0 до 100%’,
    maxLines: 10,
    contentType: 'html',
    indicatorHeight:60,
    autoHideTimeout:10000,
    hideOnTap:true,
    textColor:"#ffffff",
    color:"#cc000000",
    imageURL: dataPath+"/img/addition-icon.png"

}).show();

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BXMobileApp.UI.Badge - управление бейджами
103 / 105


UI.Badge.setIconBadge
104 / 105

Описание:

Счетчик на иконке приложения. Указывает на пропущенные уведомления в приложении.

Синтаксис:

BXMobileApp.UI.Badge.setIconBadge(number);
Аргументы Описание

params

Объект с параметрами страницы:

  • number - значение счетчика.

Пример:

//Передаем бейджу на иконке приложения значение, равное 2

BXMobileApp.UI.Badge.setIconBadge(2);

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


UI.Badge.setButtonBadge
105 / 105

Описание:

Счетчик на кнопках в приложении. Указывает на пропущенные уведомления.

Синтаксис:

BXMobileApp.UI.Badge.setButtonBadge(badgeCode, number);
Аргументы Описание

params

Объект с параметрами страницы:

  • badgeCode - идентификатор для счетчика. Передается в параметрах при создании кнопки.
  • number - значение счетчика.

Пример:

//Назначаем кнопке с указанным badgeCode 'demobutton'  бейдж со значением, равное 3

BXMobileApp.UI.Badge.setButtonBadge('demobutton', 3);

Видео:

iOS
Ваш браузер не поддерживает тег "video" - просмотр невозможен! Скачайте видео.


BitrixMobile - создание кроссплатформенных мобильных приложений
0 / 105
BitrixMobile 3.0 - технология создания кроссплатформенных мобильных приложений.

Гибридные мобильные приложения имеют доступ к функциям смартфона:

  • GPS;
  • Информация об устройстве;
  • Акселерометр;
  • Файловая структура;
  • Адресная книга.

BitrixMobile прибавляет к этим возможностям широкий набор нативных интерфейсов, чтобы приложение работало быстрее и выглядело привычнее для пользователя. Разработка ведется полностью на HTML5/Javascript/CSS. Взаимодействие с функциями телефона и нативным интерфейсом осуществляется через функции специальной JS-библиотеки - BXMobileApp.

В рамках данного курса будут подробно рассмотрены возможности библиотеки BXMobileApp, которая позволяет создавать сложные бизнес-приложения на BitrixMobile.

На каждой странице курса авторизованный на сайте посетитель может дать комментарий к содержимому страницы. Комментарий - не форум, там не ведётся обсуждений или разъяснений. Это инструмент для сообщений нам об ошибках, неточностях. Для отправки комментария воспользуйтесь расположенной в правом нижнем углу окна браузера кнопкой:

Для изучения оффлайн

Скачать материалы курса в формате CHM. Файлы формата CHM обновляются ежемесячно, тем не менее, возможно некоторое отставание их от онлайновой версии курса.

Если не видно содержание файла CHM
Внимание! Если вы не видите содержимое файла формата .chm, то причина - настройки безопасности операционной системы: скачанные из интернета файлы находятся под наблюдением системы, которая ограничивает доступ к ним.

Чтобы отключить подобное отношение к файлу необходимо:

  • перейти в свойства файла на вкладку Общие. Внизу у Вас отобразится сообщение о том, что этот файл был заблокирован системой с целью защиты компьютера.

  • нажать кнопку Разблокировать.

Отсутствие кнопки Разблокировать возможно в двух случаях:

  1. Файл лежит не локально, а на сетевом ресурсе.
  2. Если файл лежит на локальном диске, но путь к нему содержит спецсимволы (# и прочие).