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

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

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

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

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

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

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

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

Мобильное приложение

<?
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") ?>
 

<?
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"
         )
      )
   )
);
?>

<?
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") ?> 

<?
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(); 

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

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

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

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

Остановимся более подробно на создании аккаунтов на 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).

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

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

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

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

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

Сборка приложения производится только при активном лицензионном ключе «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.

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

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

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

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

Платформа

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

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

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

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

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

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

Если Вы планируете использование 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.

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

Вкладка «App Store Connect»

Вкладка «Google Play»

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

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

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

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

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

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

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

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

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

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

Настройка в конструкторе приложений

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

После создания первичной структуры приложения в папке приложения появится папка 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.

another_script.js
another_style.css
img.png
index.html
menu.html
script.js
style.css

Офлайн-страница

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

<!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>
...

<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>

<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>

<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>

<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

Для обращения к офлайн-ресурсу используется схема 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);
     });
     

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

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

Например, если вы попытаетесь загрузить условную офлайн-страницу 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.

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

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

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

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

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

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);
         }
      });
   

Тестирование

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

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

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

Пример приложения

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

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

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

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

   

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

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

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

Приложение для разработчиков BitrixMobile распространяется через официальные магазины приложений GooglePlay и AppStore. К сожалению, с приложениями из магазина нельзя использовать стандартные средства удаленной отладки компонента браузера, которые описаны здесь: Remote Debugging on Android with Chrome и Safari Web Inspector Guide.
Для отладки приложений, написанных на HTML5/JS, можно использовать Weinre - WEb INspector REmote. Этот инструмент представляет из себя усеченную версию Web Inspector (отладчика WebKit-based браузеров).

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

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

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

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

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

Токены

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

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);
}

});

<?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();

Уведомления

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);
}

var lastNotification = BXMobileApp.PushManager.getLastNotification();

Тестирование

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

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

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

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

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

   

2. Начните добавление Firebase в свое приложение нажав на кнопку с иконкой [dw]Андройда[/dw][di][/di].

3. [dw]Зарегистрируйте[/dw][di] [/di] приложение.

4. Скачайте файл конфигурации:

   

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

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

   

7. Далее выбрать в меню [dw]Настройки проекта[/dw][di][/di].
8. Во вкладке General у нужного приложения получаем Идентификатор приложения:

   

9. Далее нужно разрешить использование API сообщений с помощью команды Manage API на закладке Cloud masaging:

   

10. В новом окне разрешите использование сообщений по кнопке [dw]Enable[/dw][di][/di].
11. После этого станут доступными Ключ сервера и Идентификатор отправителя:

    

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

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

Сервис 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

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

BXMobileApp.UI.Slider - управление слайдером

• Левая;
• Правая;
• и Центральная части.

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

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

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

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

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

UI.Slider.setState

  Описание

Функция изменяет состояние слайдера. Слайдер может быть в одном из 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





UI.Slider.setStateEnabled

  Описание

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

  Синтаксис

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





BXMobileApp.UI.Photo - показ фото или фото ряда

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



UI.Photo.show

  Описание

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

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

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

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

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

  Видео

iOS Android





BXMobileApp.UI.Document - просмотр документов

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





UI.Document.open

  Описание

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

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

iOS:

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

Android:

• только скачивание. Открытие скачанного документа возможно только с помощью сторонних программ!

  Синтаксис

BXMobileApp.UI.Document.open(params);

Аргументы Описание params Объект с описанием документа: Ключи для описания документа: url - ссылка на документ. filename - имя файла (необязательный ключ).

  Пример

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

  Видео

iOS Android





BXMobileApp.UI.DatePicker - контрол выбора даты

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

UI.DatePicker.show

  Описание

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

  Синтаксис

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





UI.DatePicker.hide

Описание:

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

Синтаксис:

BXMobileApp.UI.DatePicker.hide();





BXMobileApp.UI.SelectPicker - контрол выбора значений

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



UI.SelectPicker.show

  Описание

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

  Синтаксис

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





BXMobileApp.UI.BarCodeScanner - сканер bar-кодов

Объект бар-код сканера. Сканер умеет считывать штрих и qr-коды разных форматов.



UI.BarCodeScanner.open

  Описание

Функция открывает 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





BXMobileApp.UI.Table - управление списками

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

  Назначение и описание

 Назначение: 

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

Элементы списка можно отображать с разделением по секциям или алфавиту. Данный элемент интерфейса позволяет увеличить производительность при отображении списочных данных за счет заложенных механизмов кэширования и 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();





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

Описание:

Как источник списки используют данные в формате 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

  Источник данных

Источник данных - 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

  единичной выборкой (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





  множественной выборкой (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

  заданной множественной выборкой (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

  Текст внизу списка (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





Пример 2

  Источник данных

Источник данных - 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





Пример 3

  Источник данных

Источник данных - 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





BXMobileApp.UI.Page - управление страницей (экраном)

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



UI.Page.isVisible

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.isVisible(params);

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

Пример:

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





UI.Page.reload

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.reload();

Пример:

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





UI.Page.close

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.close(params);

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

Пример:

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





UI.Page.captureKeyboardEvents

Описание:

Функция включает или выключает генерацию событий показа/скрытия клавиатуры (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 - менеджер страниц

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

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

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

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

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

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

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




PageManager.loadPageBlank

  Описание

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

  Синтаксис

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",
   });

На открываемой странице нужно получать параметры так:

BXMobileApp.UI.Page.params.get({
   callback: function(data)
     {
       //using data
     }
});

  Видео

iOS Android





PageManager.loadPageStart

  Описание

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

  Синтаксис

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





PageManager.loadPageModal

  Описание

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

  Синтаксис

BXMobileApp.PageManager.loadPageModal(params);

Аргументы Описание params Объект с параметрами страницы: Обязательные: url - адрес страницы. Необязательные: title - заголовок страницы;

  Пример

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

  Видео

iOS Android





PageManager.setWhiteList

  Описание

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

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

  Синтаксис

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 - нативная панель ввода текста

Нативная панель для ввода текста и обработки этого текста. Располагается внизу экрана и статична относительно web-контента.

Назначение:

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




UI.Page.TextPanel.show

  Описание

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

  Синтаксис

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





UI.Page.TextPanel.hide

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TextPanel.hide()

Пример:

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

Видео:

iOS





UI.Page.TextPanel.setParams

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео 1

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

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

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

Видео

iOS

  Пример и видео 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()

Видео

iOS





UI.Page.TextPanel.setUseImageButton

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TextPanel.setUseImageButton(use);

Аргументы Описание use Флаг, для отображения кнопки в виде изображения: true - отобразить кнопку в виде изображения; false - отобразить текстовую кнопку. По умолчанию - false.

  Пример и видео

Пример

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

Видео

iOS





UI.Page.TextPanel.setText

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TextPanel.setText(text)

Аргументы Описание text Текст, который нужно отобразить в поле

  Пример и видео

Пример

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

Видео

iOS





UI.Page.TextPanel.focus

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

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

Видео

iOS





UI.Page.TextPanel.clear

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео

iOS





UI.Page.TextPanel.showLoading

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TextPanel.showLoading: function(shown){};

Аргументы Описание shown Флаг, для отображения кнопки в виде загрузчика: true - показать загрузчик; false - отобразить кнопку по умолчанию.

  Пример и видео

Пример

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

Видео

iOS





BXMobileApp.UI.Page.TopBar - навигационная панель

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

Назначение: 

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

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





UI.Page.TopBar.hide

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





UI.Page.TopBar.show

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео

iOS Android





UI.Page.TopBar.addRightButton

  Описание

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

  Синтаксис

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





UI.Page.TopBar.setColors

  Описание

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

  Синтаксис

BXMobileApp.UI.Page.TopBar.setColors(params);

Аргументы Описание buttonObject Параметры настройки цветов панели уведомления: background - цвет фона навигационной панели; titleText - цвет текста заголовка; titleDetailText - цвет дополнительного текста заголовка;

  Пример

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

  Видео

iOS





UI.Page.TopBar.updateButtons

  Описание

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

  Синтаксис

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 - управление заголовком

Объект позволяет управлять активным заголовком страницы, который отображается в навигационной панели.



UI.Page.TopBar.title.setText

  Описание. Синтаксис

Описание:

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

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

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setText(text)

Аргументы Описание text Основной текст заголовка

  Пример и видео

Пример

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

Видео

iOS Android





UI.Page.TopBar.title.setDetailText

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setDetailText(text);

Аргументы Описание text Текст детального заголовка

  Пример и видео

Пример

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

Видео

iOS Android





UI.Page.TopBar.title.setImage

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setImage(imageUrl);

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

  Пример и видео

Пример

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

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

Видео:

iOS Android





UI.Page.TopBar.title.setCallback

  Описание. Синтаксис

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.TopBar.title.setCallback(callback);

Аргументы Описание callback Обработчик события нажатия на заголовок.

  Пример и видео

Пример

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

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

Видео:

iOS Android





UI.Page.TopBar.title.show

  Описание. Синтаксис

Описание:

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

Синтаксис:

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





UI.Page.TopBar.title.hide

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео

iOS Android





BXMobileApp.UI.Page.SlidingPanel - скользящая панель

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




UI.Page.SlidingPanel.show

  Описание

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

  Синтаксис

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





UI.Page.SlidingPanel.hide

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





BXMobileApp.UI.Page.LoadingScreen - экран загрузки

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




UI.Page.LoadingScreen.show

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





UI.Page.LoadingScreen.hide

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





UI.Page.LoadingScreen.setEnabled

  Описание

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

  Синтаксис

BXMobileApp.UI.Page.LoadingScreen.setEnabled(enabled);

Аргументы Описание enabled Флаг, управляющий автоматическим показом загрузочного экрана: true - включает автоматический показ загрузочного окна (например, при обновлении страницы); false - выключает автоматический показ загрузочного окна.

  Пример

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





BXMobileApp.UI.Page.Scroll - управление скроллингом

Объект для управления скроллингом страницы.



UI.Page.Scroll.setEnabled

Описание:

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

Синтаксис:

BXMobileApp.UI.Page.Scroll.setEnabled(enabled);

Аргументы Описание enabled Флаг,определяющий использования скроллинга на странице: true - разрешает; false - запрещает.

Пример:

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





BXMobileApp.UI.Page.Refresh - контрол обновления

Нативный контрол обновления, предназначен для отображения процесса обновления.



UI.Page.Refresh.setParams

  Описание

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

  Синтаксис

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





UI.Page.Refresh.setEnabled

Описание:

Функция активирует контрол обновление. Пользователь может потянуть страницу вниз и отработает 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

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





UI.Page.Refresh.stop

  Описание. Синтаксис

Описание:

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

Синтаксис:

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

  Пример и видео

Пример

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

Видео:

iOS Android





BXMobileApp.UI.ActionSheet - выпадающее меню

  Описание

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

  Синтаксис

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

  Описание. Синтаксис

Описание:

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

Синтаксис:

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





BXMobileApp.UI.Menu - контекстное меню

  Описание

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

  Синтаксис

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

  Описание. Синтаксис

Описание:

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

Синтаксис:

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





UI.Menu.hide

Описание:

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

Синтаксис:

BXMobileApp.UI.Menu.hide();

Пример:

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





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

  Описание

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

  Синтаксис

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, то при показе уведомления А будет автоматически скрыто уведомление Б, если оно отображается в данный момент.

  Пример. Уведомление с лоудером

// Уведомление с лоудером

var notifyBar = new BXMobileApp.UI.NotificationBar(
{
	message: ‘Уведомление с лоудером’,
	useLoader: true,
	align:"center",
color: "#76088c",
	autoHideTimeout:2000,
	hideOnTap:true,
});
notifyBar.show(); //show - функция отображения панели уведомления.
notifyBar.hide(); //hide - функция скрытия панели уведомления.

  Видео

iOS

  Пример. Многострочное уведомление с картинкой

// Многострочное уведомление с картинкой

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





BXMobileApp.UI.Badge - управление бейджами

UI.Badge.setIconBadge

  Описание. Синтаксис

Описание:

Счетчик на иконке приложения. Указывает на пропущенные уведомления в приложении.

Синтаксис:

BXMobileApp.UI.Badge.setIconBadge(number);

Аргументы Описание params Объект с параметрами страницы: number - значение счетчика.

  Пример и видео

Пример

//Передаем бейджу на иконке приложения значение, равное 2

BXMobileApp.UI.Badge.setIconBadge(2);

Видео

iOS





UI.Badge.setButtonBadge

  Описание. Синтаксис

Описание:

Счетчик на кнопках в приложении. Указывает на пропущенные уведомления.

Синтаксис:

BXMobileApp.UI.Badge.setButtonBadge(badgeCode, number);

Аргументы Описание params Объект с параметрами страницы: badgeCode - идентификатор для счетчика. Передается в параметрах при создании кнопки. number - значение счетчика.

  Пример и видео

Пример

//Назначаем кнопке с указанным badgeCode 'demobutton'  бейдж со значением, равное 3

BXMobileApp.UI.Badge.setButtonBadge('demobutton', 3);

Видео

iOS