Создание мобильных приложений для построения диаграмм при помощи Dojo Toolkit

Упрощенная разработка приложений для построения диаграмм для мобильных устройств

Исследуйте возможности пакетов dojox.mobile и dojox.charting. В данной статье приводятся пошаговые примеры создания с помощью Dojo Toolkit мобильного приложения для построения диаграмм и добавления в это приложение поддержки сенсорного интерфейса. Также затрагиваются дополнительные темы, такие как улучшение производительности визуализации.

Кристоф Джолиф, инженер-программист, IBM

Кристоф Джолиф (Christophe Jolif) – фотографияКристоф Джолиф (Christophe Jolif) работает инженером-программистом в IBM France. Руководит группой разработки IBM ILOG Elixir и принимает участие в проекте с открытыми исходными кодами Dojo Toolkit. Он пишет о ILOG Elixir в блоге группы и технических статьях, а также участвует в разработке технической документации по продуктам. До прихода в IBM Кристоф более десяти лет работал в компании ILOG, создавая расширенные компоненты визуализации на Java™, Ajax и Adobe® Flex.



Дамиен Мандриоли, инженер-программист, IBM

Photo of Damien MandrioliДамиен Мандриоли (Damien Mandrioli) работает инженером-программистом в IBM. В сферу его профессиональных интересов входят компоненты визуализации, разработка Web-приложений и удобного пользовательского интерфейса. До прихода в группу разработки Dojo Toolkit Дамиен пять лет занимался разработкой компонентов и демонстрационных материалов для продукта IBM ILOG Elixir.



04.07.2012

Введение

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

Также, можно загрузить исходный код для данной статьи.


Создание приложения Dojo Mobile для построения диаграмм

Для создания мобильного приложения при помощи Dojo рекомендуется взять за основу пакет dojox.mobile. Это относительно тонкий Dojo-уровень, предоставляющий ориентированный на мобильные устройства набор облегченных виджетов, синтаксический анализатор и инфраструктуру преобразования. Учитывая важность этих функций для мобильных приложений, можно допустить, что данную инфраструктуру скорее всего будет использовать большинство мобильных Dojo-приложений для построения диаграмм.

Простейший способ создать экземпляр диаграммы в контексте приложения dojox.mobile – положиться на синтаксический анализатор и поместить код прорисовки диаграммы в разметку виджета dojox.mobile (аналогично коду обычного настольного Dijit-приложения). Для начала нам понадобятся HTML-файл, определяющий разметку приложения, и исходный JavaScript-файл, содержащий JavaScript-логику приложения, на который ссылается HTML-файл.

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

Листинг 1. Исходный HTML-файл мобильного приложения для построения графиков
<!DOCTYPE HTML> 
<html> 
  <head> 
    <title>Dojo Toolkit Mobile Charting</title> 
    <meta name="viewport" content="width=device-width,initial-scale=1, 
      maximum-scale=1,minimum-scale=1,user-scalable=no"/> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 
    <link rel="stylesheet" type="text/css" 
      href="../../../dojo_current/dojox/mobile/themes/iphone/iphone.css"> 
    <script type="text/javascript" src="../../../dojo_current/dojo/dojo.js" 
      data-dojo-config="parseOnLoad: true"></script> 
    <script type="text/javascript" src="src_01.js" charset="utf-8"></script> 
  </head> 
  <body> 
    <div id="view1" data-dojo-type="dojox.mobile.View"> 
      <h1 id="head1" data-dojo-type="dojox.mobile.Heading">Chart View</h1> 
      <div data-dojo-type="dojox.mobile.RoundRect"> 
        <button id="b1" data-dojo-type="dojox.mobile.Button" 
          class="mblBlueButton">Zoom</button> 
        <button id="b2" data-dojo-type="dojox.mobile.Button" 
          class="mblBlueButton">Unzoom</button> 
        <div data-dojo-type="dojox.charting.widget.Chart" id="chart" 
          style="width: 100%; height: 180px;"> 
          <div class="plot" name="grid" type="Grid" 
               vMinorLines="true"></div>             
          <div class="axis" name="x" 
               fixUpper="minor"   
               majorTickStep="1" 
               minorTicks="false"></div> 
          <div class="axis" name="y" vertical="true" min="0"></div> 
          <div class="plot" name="plot" type="Columns" ></div> 
          <div class="series" name="data" plot="plot" 
            data="20, 32, 32, 45, 37, 28, 24, 48, 44, 21, 32, 33, 
                32, 34, 44, 32, 39, 43, 44, 46, 36, 41, 25, 27, 
                28, 45, 46, 33, 34, 35, 29, 44, 48, 48, 49, 43"></div> 
        </div> 
      </div> 
    </div> 
  </body> 
</html>

Исходный код, приведенный в листинге 1, в атрибутах Dojo data-type ссылается на классы dojox.mobile и dojox.charting. Для корректного анализа и создания экземпляра этой разметки необходимо импортировать соответствующие модули в JavaScript-файл, как показано в листинге 2.

Листинг 2. Исходный JavaScript-файл мобильного приложения
require(["dojo", "dojox/mobile", "dojox/mobile/parser", 
  "dojox/mobile/Button", "dojox/charting/widget/Chart", 
  "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
  "dojox/charting/plot2d/Grid"]);

Приведенные в данной статье примеры основаны на недавно представленном AMD-синтаксисе управления зависимостями Dojo-приложения (ссылки на более подробную информацию об AMD приведены в разделе Ресурсы). Если вы не хотите переходить на новый формат, создайте аналогичное приложение, используя для зависимостей старый формат dojo.require.

После запуска соответствующего приложения вы должны получить следующие результаты (см. рисунок 1):

Рисунок 1. Мобильное приложение для построения диаграмм
Рисунок 1. Мобильное приложение для построения диаграмм

На рисунке 1 изображена неинтерактивная диаграмма с жестко закодированными данными из атрибута data ряда данных, определенного в разметке. Прежде чем двигаться дальше, нужно немного изменить приложение.

На данном этапе приложение предназначено для мобильных и настольных браузеров на основе Webkit. Чтобы приложение лучше работало с настольными браузерами (например, Firefox), нужно изменить список зависимостей и добавить в него модуль dojox/mobile/compat, как показано в листинге 3. AMD-плагин dojo/has используется в примере только для подключения модуля dojox/mobile/compat (при условии, что вы не работаете в Webkit–браузере), поэтому необходим модуль совместимости.

Листинг 3. Добавление поддержки не-Webkit браузера
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojox/mobile", "dojox/mobile/parser",
	"dojo/has!webKit?:dojox/mobile/compat", 
	"dojox/mobile/Button", "dojox/charting/widget/Chart", 
	"dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
	"dojox/charting/plot2d/Grid"]);

Следующий шаг – подключить внешний источник данных для диаграммы вместо жестко кодирования их в приложении. Для этого можно использовать интерфейс хранилища данных как Dojo Charting, так и Dojo Core.

В пакетах dojo.data и dojox.data имеются классы, позволяющие загружать данные из разнообразных источников данных и подключать их к компонентам Dojo. Предположим, например, что на нашем сервере имеются JSON-данные, приведенные в листинге 4, и мы хотим загрузить их.

Листинг 4. Пример JSON-данных
{
  "items": 
  [ 
{"value": 0}, {"value": 32}, {"value": 32}, {"value": 45}, {"value": 37}, {"value": 28}, 
{"value": 24}, {"value": 48}, {"value": 44}, {"value": 21}, {"value": 32}, 
{"value": 33}, {"value": 32}, {"value": 34}, {"value": 44}, {"value": 32}, 
{"value": 39}, {"value": 43}, {"value": 44}, {"value": 46}, {"value": 36}, 
{"value": 41}, {"value": 25}, {"value": 27}, {"value": 28}, {"value": 45}, 
{"value": 46}, {"value": 33}, {"value": 34}, {"value": 35}, {"value": 29}, 
{"value": 44}, {"value": 48}, {"value": 48}, {"value": 49}, {"value": 43} 
  ]
}

JSON-данные может загружать экземпляр dojo.data.ItemFileReadStore. Для работы с диаграммой подключите ваш экземпляр dojo.data к объекту Series, который будет отвечать за заполнение диаграммы элементами данных, полученными из хранилища.

Сначала необходимо изменить в HTML объявление рядов данных, чтобы они не принимали жестко закодированные данные, а ссылались на хранилище данных store. Для этого измените объявление Series, приведенное в листинге 6, и включите в него строку store="store", как показано в листинге 7.

Листинг 6. Предыдущее объявление Series
            <div class="series" name="data" plot="plot" 
              data="20, 32, 32, 45, 37, 28, 24, 48, 44, 21, 32, 33,
                    32, 34, 44, 32, 39, 43, 44, 46, 36, 41, 25, 27,
                  28, 45, 46, 33, 34, 35, 29, 44, 48, 48, 49, 43"></div>
Листинг 7. Предыдущее объявление Series, включающее хранилище данных
            <div class="series" name="data" store="store" plot="plot"></div>

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

Листинг 8. HTML-определение хранилища
	    <div data-dojo-type="dojo.data.ItemFileReadStore" url="data.json"
       		 data-dojo-id="store" urlPreventCache="true" clearOnClose="true"></div>

Код, приведенный в листинге 8, с помощью класса ItemFileReadStore загружает на сервер файл data.json и связывает результаты с переменной store, используемой в качестве входных данных для ряда данных. В приложение необходимо включить класс store в составе оператора require (см. листинг 9).

Листинг 9. Подключение класса store
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojo/data/ItemFileReadStore",
        "dojo/has!webKit?:dojox/mobile/compat", 
        "dojox/mobile", "dojox/mobile/parser", 
        "dojox/mobile/Button", "dojox/charting/widget/Chart", 
        "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
        "dojox/charting/plot2d/Grid"]);

Теперь у нас есть мобильное приложение для построения диаграмм, визуализирующее данные, поступающие с сервера. В примере по оси Х пока еще отображаются индексы данных, а не месяцы. Укажите ссылку на функцию label для оси, как показано в листинге 10.

Листинг 10. Указание функции label
            <div class="axis" name="x" 
	         fixUpper="minor" majorTickStep="1"
                 minorTicks="false" labelFunc="displayDate"></div>

Затем определим в исходном файле функцию displayDate, как показано в листинге 11.

Листинг 11. Реализация функции label на JavaScript
var displayDate;
require(["dojo/_base/kernel", "dojo/_base/sniff", "dojo/data/ItemFileReadStore",
       "dojo/has!webKit?:dojox/mobile/compat", 
       "dojox/charting/action2d/TouchZoomAndPan", 
       "dojox/mobile", "dojox/mobile/parser", 
       "dojox/mobile/Button", "dojox/charting/widget/Chart", 
       "dojox/charting/axis2d/Default", "dojox/charting/plot2d/Columns",
       "dojox/charting/plot2d/Grid"], function(dojo){
  var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", 
                "Oct", "Nov", "Dec"];
  var years = ["08", "09", "10", "11"];
  displayDate = function(idx){
    if ((idx%2) == 0){
     return " ";
    }
			
    var m = parseInt(idx-1);
    if (m%12 == 0){
      // Отображать год только для января
      return months[m%12] + " " + years[m/12];
    }else{
      return months[m%12];
    }
  }
});

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

Результат работы показан на рисунке 2.

Рисунок 2. Настройка меток на оси
Рисунок 2. Настройка меток на оси

Реализация сенсорного взаимодействия с графиком

После создания мобильного Dojo-приложения для построения диаграмм можно добавить к нему специфические мобильные возможности, такие как взаимодействие с графиком посредством касаний. Это относительно несложно. Как и для других функций диаграммы, для добавления касания достаточно одной строки кода в определении диаграммы. Например, для добавления возможности масштабирования и прокрутки просто добавьте содержимое листинга 12 в HTML-разметку.

Листинг 12. Добавление поддержки сенсорного масштабирования и прокрутки
<div class="action" type="dojox.charting.action2d.TouchZoomAndPan" 
     plot="plot" maxScale="7"></div>

Атрибут plot позволяет подключать действия (action) к отдельным элементам диаграммы. Можно также использовать и другие параметры, например, разрешение масштабирования (enableZoom="false") или максимальный масштаб диаграммы (maxScale="7").

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

Использование кода, приведенного в листинге 13, приводит к результатам, показанным на рисунке 3, при касании диаграммы одним пальцем.

Листинг 13. Добавление поддержки индикатора касания
<div class="action" type="dojox.charting.action2d.TouchIndicator" plot="plot" 
     series="data" dualIndicator="true"></div>
Рисунок 3. Интерактивный индикатор единичного касания
Рисунок 3. Интерактивный индикатор единичного касания

Результат двойного касания показан на рисунке 4.

Рисунок 4. Интерактивный индикатор двойного касания
Рисунок 4. Интерактивный индикатор двойного касания

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

Листинг 14. Настройка индикатора касания в JavaScript
var indicatorFillFunc = function(v1, v2){
  if(v2){
    return v2.y>v1.y?"green":"red";
}else{
  // одна точка касания
    return "#ff9000";
  }
};
var indicator = new TouchIndicator(chart, "plot", {
               series: "series", dualIndicator: true, 
               font: "normal normal bold 12pt Helvetica",
               fillFunc: indicatorFillFunc
});

Некоторые мобильные устройства (например, работающие на Android 2.2 и 2.3) не поддерживают несколько одновременных событий касания в браузере. Чтобы охватить все устройства, некоторые действия, основанные на двойном касании (например, масштабирование), можно отобразить на кнопки и единичные касания. Для таких ситуаций начиная с самого первого листинга данной статьи в пользовательском интерфейсе были предусмотрены неактивные кнопки. Теперь самое время добавить код реагирования на нажатие или касание этих кнопок. В листинге 15 показано определение функции zoom.

Листинг 15. Определение функции zoom
          <button id="b1" data-dojo-type="dojox.mobile.Button" 
		    onclick="zoomChart()"
            class="mblBlueButton">Zoom</button>
          <button id="b2" data-dojo-type="dojox.mobile.Button"
		  	onclick="zoomChart(true)" 
            class="mblBlueButton">Unzoom</button>

Код в листинге 15 вызывает функцию zoomChart для обеих кнопок – zoom и unzoom. Поскольку действия zoom и unzoom очень похожи, используется одна функция с аргументом, устанавливаемым в значение true для unzoom.

Определите функцию zoomChart в исходном JavaScript-файле, как показано в листинге 16. Идея состоит в получении текущих границ для вычисления нового диапазона, передаваемого в функцию zoomIn Dojo-компонента chart.

Листинг 16. Реализация функции zoom в Javascript
  zoomChart = function(back){
    var chart = dijit.byId("chart").chart;
    var b = chart.getAxis("x").getScaler().bounds;
    var r = 1.25;
    if (back){
      // Unzoom
      chart.zoomIn("x", [b.from / r, b.to * r]);
    }else{
      // Zoom
     chart.zoomIn("x", [b.from * r, b.to / r]);
    }
};

Оптимизация приложения

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

Первый тип оптимизации, которую мы выполним, – это ускорение времени визуализации. Обычно мобильные устройства имеют более медленные процессор и память по сравнению с настольными устройствами и, следовательно, медленнее выполняют визуализацию. По умолчанию Dojo не кэширует отображенные элементы диаграммы. При масштабировании или прокрутке диаграммы многие отображаемые элементы удаляются и создаются заново. Запрет кэширования уместен при работе со статической диаграммой, поскольку обеспечивает более быструю первоначальную визуализацию. Однако для динамических диаграмм предпочтительнее разрешать кэширование. Для этого можно использовать параметр enableCache нескольких элементов диаграммы.

В исходном коде установите параметры enableCache элементов chart в значение true, как показано в листинге 17.

Листинг 17. Оптимизация визуализации
<div data-dojo-type="dojox.charting.widget.Chart" id="chart" 
    style="width: 100%; height: 180px;">
<div class="plot" name="grid" type="Grid"
    vMinorLines="true" enableCache="true"></div>
    <div class="axis" name="x" enableCache="true"
        fixUpper="minor"   
        majorTickStep="1"
        minorTicks="false"
        labelFunc="displayDate"></div>
    <div class="axis" name="y" vertical="true" min="0"></div>
    <div class="plot" name="plot" type="Columns" enableCache="true"></div>
    <div class="series" name="data" store="store" plot="plot"></div>
    <div class="action" type="dojox.charting.action2d.TouchZoomAndPan" 
        plot="plot" maxScale="7"></div>
</div>

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

Еще одним способом оптимизировать визуализацию мобильных приложений для построения диаграмм является предотвращение ненужной визуализации. Например, столбец может иметь контуры или тени, которые не являются абсолютно необходимыми элементами, но требуют затрат времени на визуализацию. Такие элементы имеет смысл удалить. Другим примером является индикатор данных, контур которого можно удалить, установив соответствующие параметры стиля в null, как показано в листинге 18.

Листинг 18. Удаление ненужной визуализации
<div class="action" type="dojox.charting.action2d.TouchIndicator" plot="plot" 
     series="data" dualIndicator="true" outline="null" lineOutline="null"
     markerOutline="null"></div>

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

Листинг 19. Включение асинхронной загрузки
    <script type="text/javascript" src="../../../dojo_current/dojo/dojo.js"
      data-dojo-config="parseOnLoad: true, async: true"></script>

Можно еще больше ускорить загрузку, удалив все вспомогательные программы, которые не нужны вашему приложению. Например, все мобильное приложение было определено с использованием разметки, основанной на синтаксическом анализаторе dojox.mobile. Этот облегченный анализатор намного меньше стандартного Dojo-анализатора. Если нужно еще больше ускорить загрузку приложения, можно полностью отказаться от использования анализатора и создать свое приложение на JavaScript.


Заключение

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

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


Загрузка

ОписаниеИмяРазмер
Исходный кодsource.zip10 КБ

Ресурсы

Научиться

Получить продукты и технологии

Комментарии

developerWorks: Войти

Обязательные поля отмечены звездочкой (*).


Нужен IBM ID?
Забыли Ваш IBM ID?


Забыли Ваш пароль?
Изменить пароль

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


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

Вся введенная информация защищена.

Выберите имя, которое будет отображаться на экране



При первом входе в developerWorks для Вас будет создан профиль и Вам нужно будет выбрать Отображаемое имя. Оно будет выводиться рядом с контентом, опубликованным Вами в developerWorks.

Отображаемое имя должно иметь длину от 3 символов до 31 символа. Ваше Имя в системе должно быть уникальным. В качестве имени по соображениям приватности нельзя использовать контактный e-mail.

Обязательные поля отмечены звездочкой (*).

(Отображаемое имя должно иметь длину от 3 символов до 31 символа.)

Нажимая Отправить, Вы принимаете Условия использования developerWorks.

 


Вся введенная информация защищена.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Мобильные приложения
ArticleID=824149
ArticleTitle=Создание мобильных приложений для построения диаграмм при помощи Dojo Toolkit
publish-date=07042012