Содержание


Создание графического приложения для контроля KPI с помощью Dojo Mobile

Использование Dojo Mobile для сбора и представления ключевых показателей эффективности в нативном мобильном приложении

Dojo Mobile – это расширительный модуль Dojo Toolkit, хорошо поддерживаемой среды на базе HTML5 и JavaScript, сопоставимой с JQuery. Будучи расширением Dojo Toolkit, Dojo Mobile использует библиотеки JavaScript dojox и пакет или соглашение об именах dojox/mobile.

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

KPI служит количественной мерой, которая в зависит от целей организации. Кроме того, различные подразделения внутри организации используют свои собственные меры оценки того, в какой степени они достигают поставленных целей. Типичный KPI может быть частью панели управления для руководителей с возможностями построения диаграмм, измерения показателей, уведомлений и детализации. Следуя примерам из настоящего руководства, вы разработаете упрощенное нативное Dojo Mobile-приложение с диаграммой и аналоговым индикатором для отображения KPI.

Что нужно для создания приложения

Панель индикации KPI

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

Чтобы оптимизировать работу пользователей, не перегружайте пользователя ненужными деталями. Модули Dojo dgauge облегчают своевременную доставку значений с помощью индикаторов или графиков и диаграмм, которые изменяются с течением времени.

Многие бизнес-пользователи предпочитают индикаторы, имитирующие аналоговую приборную панель автомобиля, хотя это и не оптимальный способ использования пространства экрана для отображения KPI. Такие индикаторы могут в режиме реального или близком к реальному времени указывать, как ведут себя различные показатели подразделения. Главное правило — сохранять простоту.

API Dojo

Примеры из этого руководства основаны на Dojo Toolkit версии 1.9 с использованием формата AMD. AMD – это открытый стандарт, что означает, что его могут использовать и другие совместимые загрузчики.

Загрузите Dojo Toolkit и примените загрузчик, импортировав файл JavaScript dojo.js из дистрибутива Dojo. В листинге 1 показано, как импортировать файл dojo.js:

Листинг 1. Импорт dojo.js
........... 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <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" > 

    <title>Company XYZ<title> 

   <script src="dojo-1.9/dojo/dojo.js" data-dojo-config="isDebug:1, async:1"></script>  
 ........... 
 ........... 
 <head>

Импорт dojo.js обеспечивает доступ к мобильным и стандартным модулям Dojo, необходимым для разработки приложения Dojo Mobile. В процессе разработки параметру isDebug нужно присвоить значение True (1). При использовании AMD необходимо также присвоить значение True (1) параметру async.

Для загрузки и анализа HTML-страницы достаточно включить нужные классы Dojo. В листинге 2 показано, как простое мобильное приложение загружает различные приборы и индикаторы Dojo из библиотеки dojox/dgauges. Показанные модули полезны для отображения KPI на мобильной приборной панели. Обратите внимание, что модули сгруппированы по группам Dojo, Dijit и Dojox.

Листинг 2. Загрузка модулей, стиль AMD
require(["dojox/mobile/parser", "dojo/ready","dojo/dom","dojo/_base/xhr", 
"dojox/dgauges/components/default/CircularLinearGauge", 
"dijit/registry","dojox/mobile/deviceTheme","dojox/mobile",  
"dojox/mobile/ScrollableView", "dojox/mobile/TabBar", "dojox/mobile/compat"],  
function(parser,ready,registry,deviceTheme)  
{  
 
parser.parse(); 
// Здесь же выполняются другие операции. 
 
 } );

В Dojo Mobile можно использовать dojox.dgauges для создания круглых, полукруглых и линейчатых индикаторов. Кроме того, можно построить свои собственные индикаторы, в том числе с использованием специальных элементов, таких как встроенный текст для обозначения текущего значения, фон или стрелки. Используйте dojox.dgauges так, как показано в листинге 2. В версии Dojo 2.0 старая версия библиотеки dojox.gauges будет исключена.

Доступ к данным с помощью REST/JSON или WebSocket

Вам, вероятно, знакомы веб-сервисы RESTful и JSON. В следующем фрагменте Dojo JavaScript показано, как интернет-магазин измеряет количество ежедневного возврата товаров по данным, полученным из ресурса, доступного через RESTful.

Листинг 3. Получение данных для KPI
require(['dojo/ready','dojo/_base/xhr'],  
     function(ready,xhr){ 
          ready(function () { 
               var targetNode = dojo.byId("kpiGauge"); 
  xhr.get({ 
    url:"resources/kpi", handleAs:"json",timeout:10, 
    load: function(data){ 

                    var parsedJSON = dojo.fromJson(dojo.toJson(data)); 

                    addGauge(parsedJSON.dailyReturnMetric); 

    }, 
                    error: function (error) { 
                    targetNode.innerHTML = "An unexpected error occurred: " + error; 
                } 
  }); 
     }); 

        });

Еще один способ извлечения данных – использование протокола WebSocket. Это идеально подходит для мобильного веб-приложения, отображающего показатели KPI, которые часто обновляются. К счастью, Dojo предоставляет клиентские модули для установления основанного на сокете dojox соединения WebSocket с использованием Comet-подобного соединения реального времени.

В листинге 4 dojox.socket используется для извлечения KPI через Comet-ресурс, указанный в параметре url. В данном случае возвращаемая информация остается в формате JSON. В листинге 3 показано, как легко заменить протокол, используемый для извлечения данных.

Листинг 4. Код WebSocket
var socket = dojox.socket({ 
    url:"/comet", 
    headers: { 
        "Accept": "application/json", 
        "Content-Type": "application/json" 
    }});

Шаг 1. Создание мобильного приложения для индикации KPI

Для примера приложения используется платформа IBM MobileFirst Platform Foundation Developer Edition, которая работает поверх профиля IBM WebSphere Application Server V8.5 Liberty. Среда MobileFirst Platform представляет собой комплекс, состоящий из пяти компонентов: MobileFirst Studio, MobileFirst Server, MobileFirst Device Runtime Components, WebSphere Liberty и MobileFirst Console.

Установите MobileFirst Platform Foundation Developer Edition и WebSphere Liberty, если вы еще не сделали этого.

Теперь можно приступать к созданию приложения. Создайте проект, открыв IDE Eclipse, содержащую ссылку на сервер разработки MobileFirst Platform. Веб-приложение Dojo Mobile и веб-сервис RESTful удобно создавать внутри одного и того же проекта. Динамический веб-проект будет включать в себя веб-сервис Java EE с примерами данных одного из KPI:

  1. Создайте динамический веб-проект и свяжите среду выполнения с сервером разработки IBM MobileFirst Platform.
  2. Скопируйте исходный код Dojo (в виде dojo-1.9) в папку WebContent.
  3. Создайте одностраничное мобильное приложение в виде файла index.html в папке WebContent.
  4. Но можно создать и свой собственный пример веб-сервиса – учебное пособие на базе Java EE, развернутое на сервере приложений Java.

Код Dojo Mobile можно быстро проверить с реальным веб-сервисом RESTful, создав три файла исходного кода Java — ApplicationConfig.java (листинг 5), KPIMetricBean.java (Листинг 6) и KPIMobileResource.java (Листинг 7) — и развернув их на сервере приложений Java EE. Это послужит RESTful-ресурсом для получения значения Daily Metric Resource в примере приложения, как будет показано ниже на рисунке 4.

Листинг 5. ApplicationConfig.java
package kpi; 
 
import javax.ws.rs.core.Application; 
 
@javax.ws.rs.ApplicationPath("resources") 
public class ApplicationConfig extends Application { 
 
}
Листинг 6. KPIMetricBean.java
package kpi; 
 
import javax.ejb.Singleton; 
 
@Singleton 
public class KPIMetricBean { 
 
    private final String dailyReturnMetric = "56"; 
 
    /** 
     * @return the singleValue 
     */ 
    public String getDailyReturnMetric() { 
        return dailyReturnMetric; 
    } 
 
    /** 
     * @param singleValue the singleValue to set 
     */ 
    public void setDailyReturnMetric(String dailyReturnMetric) { 
            this.dailyReturnMetric = dailyReturnMetric; 
    }  
}
Листинг 7. KPIMobileResource.java
package kpi; 
 
import javax.ejb.EJB; 
import javax.ejb.Stateless; 
import javax.ws.rs.Path; 
import javax.ws.rs.GET; 
import javax.json.JsonObject; 
import javax.ws.rs.Produces; 
import javax.json.Json; 
import javax.ws.rs.PathParam; 
import javax.ws.rs.core.MediaType; 
 
 
@Stateless 
@Path("/kpi") 
public class KPIMobileResource { 
 
    @EJB 
    private KPIMetricBean kpiMetric; 
 
    @GET 
   @Produces({MediaType.APPLICATION_JSON}) 
    public KPIMetricBean getDailyReturns() { 
 
    return  kpiMetric;   

    } 
 
}

Шаг 1a. Добавление меню и заголовков

Создайте хорошо отформатированную базовую HTML-страницу (index.html) и приступайте к разработке приложения Dojo Mobile, используя Листинг 1 и Листинг 2. Чтобы создать заголовок мобильного приложения, вставьте код из листинга 8 в тег <body>.

Листинг 8. Заголовки и элементы списка
    <!-- Start Main List --> 
<div id="main" data-dojo-type="dojox.mobile.View" data-dojo-props="selected: true"> 
    <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props="fixed: 'top'"> 
        <!-- the refresh button --> 
        <div data-dojo-type="dojox.mobile.ToolBarButton" style="float:right;">  
        <!-- you can place a refresh icon here if you choose --> </div> 
        Company XYZ 
    </h1> 
    <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Commerce KPI</h2> 
    <ul data-dojo-type="dojox.mobile.RoundRectList"> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="inStore" transition="slide"> 
           In Store 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="web" transition="slide"> 
           Web 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="mobile" transition="slide"> 
           Mobile 
        </li> 
    </ul> 
 
</div> 

    <!-- End Main List -->

dojox.mobile.RoundRectCategory помещает в верхнюю строку заголовок Company KPI, когда пользователь переходит от одного представления списка к другому, а dojox.mobile.RoundRectList служит контейнером для элементов списка. Для каждого элемента списка используйте dojox.mobile.RoundRectList. Каждый определенный элемент предоставляет пользователю основные средства навигации для выбора нужного KPI. В данном примере имеется три элемента списка для определения KPI магазина на основе данных о продажах: In Store, Web и Mobile.

Когда пользователь выбирает определенный элемент списка, параметр transition="slide" вызывает переход к указанному тегу <div>. Параметр moveTo="toDivName" указывает, какой именно тег <div> выбрал пользователь.

В листинге 9 в основном повторяется синтаксис, который мы объяснили в листинге 8. Пользователь указывает на один из ранее выбранных элементов списка, и отображается еще один простой список, сужающий выбор до конкретного KPI. В данном примере KPI для каждого родительского элемента списка – это Revenue (выручка), Customers (клиенты) и Returns (возврат).

Листинг 9. Объявление элемента списка
   <!-- Start In Store KPI --> 
      <div id="inStore" data-dojo-type="dojox.mobile.View"> 
       <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
       moveTo="#main">In Store KPI</h1> 
       <br/> 
       <ul data-dojo-type="dojox.mobile.RoundRectList"> 
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
           moveTo="storeRevenueKPI" transition="slide"> 
           Revenue 
           </li> 
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
            moveTo="storeCustomerKPI" transition="slide"> 
            Customers 
          </li> 
           <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
           moveTo="storeReturnKPI" transition="slide"> 
            Returns 
        </li> 
 
    </ul> 
</div> 

    <div id="storeRevenueKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#inStore">In Store Revenue KPI</h1> 
    <br/> 
    <div class="claro" id="simplechart" style="width: 450px; 
 height: 550px; "></div> 
</div> 
 
<div id="storeCustomerKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#inStore">In Store Customer KPI</h1> 
    <br/> 
    <div style="width:300px;height:300px;left:100px;top:100px" id="kpiGauge"> 
</div> 
</div> 
 
<div id="storeReturnKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
     moveTo="#inStore">In Store Returns KPI</h1> 
    <br/> 
    <div id="reportTotalsChartDiv" 
     style='display:block; clear:none; z-index:999; width:100%; height:100%;'></div> 
    <div id='reportTotalsLegendDiv'></div> 
</div> 

    <!-- End In Store KPI --> 

    <!-- Start Web KPI --> 

    <div id="web" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#main">Web KPI</h1> 
    <ul data-dojo-type="dojox.mobile.RoundRectList"> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="webRevenueKPI" transition="slide"> 
           Revenue 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="webCustomerKPI" transition="slide"> 
            Customers 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem"  
        moveTo="webReturnKPI" transition="slide"> 
            Returns 
        </li> 
 
    </ul> 
</div> 
<div id="webRevenueKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
     moveTo="#web">Web Revenue KPI</h1> 
    <br/> 
    <div class="claro" id="simplechart" style="width: 450px;  
height: 550px; "></div> 
</div> 
 
<div id="webCustomerKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#web">Web Customer KPI</h1> 
    <br/> 
    <div style="width:300px;height:300px;left:100px;top:100px" 
 id="webkpiGauge"> 
</div> 
</div> 
 
<div id="webReturnKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#web">Web Returns KPI</h1> 
    <br/> 
    <div id="reportTotalsChartDiv" style='display:block; 
     clear:none; z-index:999; width:100%; height:100%;'></div> 
    <div id='reportTotalsLegendDiv'></div> 
</div> 
 
    <!-- End Web KPI --> 
    <!-- Start Mobile KPI --> 

    <div id="mobile" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#main">Mobile KPI</h1> 
    <ul data-dojo-type="dojox.mobile.RoundRectList"> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
         moveTo="mobileRevenueKPI" transition="slide"> 
           Revenue 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
         moveTo="mobileCustomerKPI" transition="slide"> 
            Customers 
        </li> 
        <li class="mblVariableHeight" data-dojo-type="dojox.mobile.ListItem" 
         moveTo="mobileReturnKPI" transition="slide"> 
            Returns 
        </li> 
 
    </ul> 
</div> 
<div id="mobileRevenueKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back" 
     moveTo="#mobile">Mobile Revenue KPI</h1> 
    <br/> 
    <div class="claro" id="simplechart"  
style="width: 450px; height: 550px; "></div> 
</div> 
 
<div id="mobileCustomerKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#mobile">Mobile Customer KPI</h1> 
    <br/> 
    <div style="width:300px;height:300px;left:100px;top:100px" 
 id="mobilekpiGauge"> 
</div> 
</div> 
 
<div id="mobileReturnKPI" data-dojo-type="dojox.mobile.View"> 
    <h1 data-dojo-type="dojox.mobile.Heading" back="Back"  
    moveTo="#mobile">Mobile Returns KPI</h1> 
    <br/> 
    <div id="reportTotalsChartDiv" 
     style='display:block; clear:none; z-index:999; width:100%; 
 height:100%;'></div> 
    <div id='reportTotalsLegendDiv'></div> 
</div> 
 
    <!-- End Mobile KPI -->

В листинге 9 важны параметры moveTo и transition. Параметр moveTo указывает, какой элемент <div> отображать, а transition=slide позволяет представлению использовать шаблон слайдов, характерный для мобильных устройств. При визуализации представления <div>, указанного в moveTo, появляется новая страница.

В этом примере имеется еще одно представление списка KPI Revenue, Customers и Returns. На слайде отображается отчет по KPI с использованием того же шаблона, что и в главном окне. Теперь можно перейти к визуализации отчета, придерживаясь метода «сохранения простоты». Для построения диаграмм и аналоговых индикаторов достаточно просто использовать богатую библиотеку модулей Dojo, а для сбора данных – Ajax/JSON.

Наконец, реализуем страницы просмотра и перехода, включая меню вкладок в нижней строке экрана. Добавьте вкладку main, которая переводит элементы представления списка, и вкладку settings, которую можно использовать для перехода к предпочтениям пользователя:

Листинг 10. Вкладки Main и Settings
     <!--  Start Settings for KPI  --> 
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView"> 
    <h1 data-dojo-type="dojox.mobile.Heading"  
    data-dojo-props="fixed: 'top'">Settings</h1> 
    <h2 data-dojo-type="dojox.mobile.RoundRectCategory">Settings code here</h2> 
 
</div> 
 
<!-- End Settings for KPI --> 
 
<!--  Keep this at bottom for navigating main screen and settings 'TabBar' --> 
<ul data-dojo-type="dojox.mobile.TabBar" 
	 data-dojo-props=" fixed: 'bottom'"> 
    <!-- top left width height --> 
    <li data-dojo-type="dojox.mobile.TabBarButton"  
    data-dojo-props=" selected: true, moveTo: 'main'">Main</li> 
    <li data-dojo-type="dojox.mobile.TabBarButton"  
    data-dojo-props=" moveTo:'settings'">Settings</li> 
</ul>

Начальная странице приложения отображает заголовки показателей, меню вкладок и представления списков:

Рисунок 1. Начальная страница мобильного приложения KPI
Начальная страница мобильного приложения KPI
Начальная страница мобильного приложения KPI

При выборе элемента из списка появляется следующий набор представлений списка. На рисунке 2 выбран элемент In Store, что позволяет выбрать диаграмму или индикатор KPI Revenue, Customers или Returns.

Рисунок 2. Выбор формата KPI
Выбор формата KPI
Выбор формата KPI

Шаг 1b. Проверка доступа к данным

Прежде чем программировать JavaScript-вызовы RESTful, полезно убедиться в доступности данных. Это поможет при устранении неполадок. Преимущество веб-сервисов RESTful в том, что при вызовах GET для проверки правильности URL-адресов и наличия необходимых параметров обычно можно использовать свой веб-браузер.

Шаг 1c. Отображение KPI

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

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

В демонстрационных целях можно поместить на страницу index.html код JavaScript из листинга 11. Или создать свои собственные файлы JavaScript и импортировать их на главную HTML-страницу.

Листинг 11. Настройка графика KPI
require(["dojox/charting/Chart","dojox/charting/themes/Julie", 
		"dojox/charting/plot2d/Columns","dojox/charting/plot2d/Markers", 
		"dojox/charting/axis2d/Default","dojo/domReady!", 
		"dojox/charting/widget/Legend"], function(Chart, theme) { 

        //Каждый элемент отражает общий доход за месяц для определенного канала продаж 
        var sampleRevenueData = [10000,9200,11811,12000,7662,13887, 
        14200,7142,8002,10009,11288,12099]; 
 
        var chart = new dojox.charting.Chart("kpiChart", { 
            title: "Monthly Revenue Volume - 2013", 
            titlePos: "bottom", 
            titleGap: 25, 
            titleFont: "normal normal normal 15pt Arial", 
            titleFontColor: "black" 
          }); 
 
        chart.setTheme(theme); 
        chart.addPlot("default", { 
            type: "Columns", 
            label: true, 
            gap: 1, 
            styleFunc: function(item){ 
         if(item < 10000){ 
                  return { fill : "red" }; 
                }else if(item > 9999 && item < 11000){ 
                  return { fill: "yellow" }; 
                } 
                else if(item >= 11000){ 
                    return { fill: "green" }; 
                  }       
                return {}; 
            } 
        }); 
 
        chart.addAxis("x"); 
        chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" }); 
     	chart.addSeries("Monthly Volume - 2013 ",sampleRevenueData); 
		chart.render(); 

       	var chartLegend = new dojox.charting.widget.Legend( 
       	{chart: chart, horizontal: true}, "chartLegend"); 

    });

Этот код JavaScript строит график, показанный на рисунке 3. Цвет столбца (зеленый, желтый или красный) определяется с помощью логических операций со значениями данных. Вдоль левой оси (y) показана выручка, а по нижней (x) – интервал времени с января по декабрь.

Рисунок 3. График KPI с цветными столбцами
График KPI с цветными столбцами
График KPI с цветными столбцами

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

В листинге 12 приведен код для загрузки на экран индикатора Dojo Circular Linear Gauge.

Листинг 12. Объявление индикатора
require(["dojox/dgauges/components/classic/CircularLinearGauge"], 
    function (CircularLinearGauge) { 
 
        var kpiGauge = new CircularLinearGauge({ 
 
            minimum: 0, 
            maximum: 100, 
            majorTickInterval: 25, 
            minorTickInterval: 5 
        }, dojo.byId("kpiGauge")); 
        kpiGauge.startup(); 

    });

Далее, создайте загружаемый код JavaScript и вызовите веб-сервис RESTful для загрузки страницы. Если вы создали RESTful-сервис Java EE из исходных Java-файлов, описанных в листингах 5, 6 и 7, то вы увидите данные из листинга 13. После успешного извлечения этих данных вызывается функция addGauge, которая визуализирует цвета пороговых значений на цифровых шкалах и стрелку, указывающую на полученное значение.

Листинг 13. Использование Ajax/JSON для получения данных
require(['dojo/ready','dojo/_base/xhr'],  
     function(ready,xhr){ 
          ready(function () { 
               var targetNode = dojo.byId("kpiGauge"); 
  xhr.get({ 
    url:"resources/kpi", handleAs:"json",timeout:10, 
    load: function(data){ 

                    var parsedJSON = dojo.fromJson(dojo.toJson(data)); 

                 addGauge(parsedJSON.dailyReturnMetric);     

	 }, 
                    error: function (error) { 
                    targetNode.innerHTML = "An unexpected error occurred: " + error; 
                } 
  }); 
     }); 

        });

Функция addGauge настраивает индикатор для визуализации.

Листинг 14. Настройка индикатора KPI
function addGauge(value)  
{ 
require(["dojo/ready","dojo/dom","dojo/_base/xhr", "dijit", "dojox/dgauges/TextIndicator", 
    "dojox/dgauges/LinearScaler","dojox/dgauges/CircularScale", 
    "dojox/dgauges/CircularRangeIndicator","dojox/dgauges/CircularValueIndicator"], 
    function (ready,dom, xhr,dijit, TextIndicator, LinearScaler, CircularScale, 
              CircularRangeIndicator,CircularValueIndicator) { 
        ready(function () { 
 
            var kpiGauge = dijit.registry.byId("kpiGauge"); 
 
            kpiGauge.addElement("background", function(g){ 
                g.createEllipse({ 
                    cx: 100, 
                    cy: 100, 
                    rx: 100, 
                    ry: 100 
                }).setFill("#FFFFFF");  
                // The background fill of our gauge. This overrides the default fill 

            }); 
 
          // Set our range values and tick increments 
            var range = new LinearScaler({ 
                minimum: 0, // scale starting value ( i.e. 0 ) 
                maximum: 100, // scale ending value (i.e.100 ) 
                majorTickInterval: 10, // Big ticks every 10th value, 10,20,30,40, etc. 
                minorTickInterval: 5  // minor tick lines every 5th value 
            }); 
 
            var scale = new CircularScale({ 
                scaler: range, 
                originX: 100, 
                originY: 100, 
                startAngle: 110, 
                endAngle: 70, 
                radius: 70, 
                labelPosition: "outside", 
                tickShapeFunc: function(group, scale, tick){ 
                    return group.createLine({ 
                        x1: tick.isMinor ? 2 : 0, 
                        y1: 0, 
                        x2: tick.isMinor ? 8 : 12, 
                        y2: 0 
                    }).setStroke({ 
                            color: tick.isMinor ? "black" : "white", 
                            width: tick.isMinor ? 0.5 : 1 
                        }); 
                } 
            }); 
            kpiGauge.addElement("scale", scale); 
 
            // This is our needle 
            var indicator = new CircularValueIndicator({ 
                interactionArea: "none", 
                indicatorShapeFunc: function(group){ 
                    return group.createPolyline([15, -6, 60, 0, 15, 6, 16, -6]) 
                    .setFill("black").setStroke("white"); 
                }, 
                value : value 
            }); 

            scale.addIndicator("indicator", indicator); 

          // Our Green threshold is set 
            var rangeIndicatorGreen = new CircularRangeIndicator({ 
                start: 0, 
                value: 20, // End our Green max on the gauge 
                radius: 60, 
                startThickness:5, 
                endThickness: 5, 
                fill: "green", 
                interactionMode: "none" 
            }); 
            scale.addIndicator("rangeIndicatorGreen", rangeIndicatorGreen, true); 
 
           // Our Yellow threshold is set 
            var rangeIndicatorYellow = new CircularRangeIndicator({ 
                start: 20, 
                value: 50, // End our Yellow max on the gauge 
                radius: 60, 
                startThickness:5, 
                endThickness: 5, 
                fill: "yellow", 
                interactionMode: "none" 
            }); 
            scale.addIndicator("rangeIndicatorYellow", rangeIndicatorYellow, true) 
 

         // Our Red threshold is et 
            var rangeIndicatorRed = new CircularRangeIndicator({ 
                start: 50, 
                value: 100, // End our red max on the gauge 
                radius: 60, 
                startThickness:5, 
                endThickness: 5, 
                fill: "red", 
                interactionMode: "none" 
            }); 
            scale.addIndicator("rangeIndicatorRed", rangeIndicatorRed, true); 
 
            // The sets the text of the current value 

            var indicatorText = new TextIndicator(); 

            indicatorText.set("value", value + "%"); 
            indicatorText.set("x", 100); 
            indicatorText.set("y", 120); 
            kpiGauge.addElement("indicatorText", indicatorText); 
 
 
        }); 
    }); 

    }

Индикатор имеет цветную шкалу пороговых уровней, причем красный цвет означает «проблему», как показано на этом рисунке. Индикатор KPI показывает значение 56%, указывающее на наличие проблемы. Надо думать, что пользователь проанализирует эту проблему, чтобы выяснить ее причину.

Рисунок 4. Аналоговый индикатор KPI
Аналоговый индикатор KPI
Аналоговый индикатор KPI

Шаг 2. Тестирование приложения

Для тестирования приложения KPI Dojo Mobile можно использовать имитатор мобильного браузера для различных устройств.

Шаг 2a. Использование имитатора

Имитатор мобильного браузера — это отличное средство для тестирования приложения KPI Dojo Mobile, готовое к применению с приложениями MobileFirst Platform и имитирующее широкий спектр мобильных устройств. При локальном исполнении перейдите в каталог http://localhost:10080/_MobileBrowserSimulator/ и введите URL-адрес мобильного приложения для его просмотра на различных имитируемых устройствах. В их число входит множество устройств BlackBerry, Android и iOS. Для облегчения процесса ввода имени узла в браузере устройства имитатор даже содержит QR-код URL-адреса, который необходимо проверить, когда вы будете готовы к тестированию на реальном мобильном устройстве.

Рисунок 5. Имитатор мобильного устройства сервера разработки MobileFirst Platform
Имитатор мобильного устройства сервера разработки MobileFirst Platform
Имитатор мобильного устройства сервера разработки MobileFirst Platform

Шаг 2b. Тестирование с устройством

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

Заключение

Вот вы и освоили практическое руководство по использованию графиков, диаграмм и индикаторов Dojo Mobile для создания быстрой и эффективной панели контроля KPI на мобильном устройстве. Разработка мобильной панели для контроля KPI не сильно отличается от разработки такой же панели для настольной среды. Разработчику, знакомому с Dojo Toolkit, ничего не стоит перейти модули диаграмм, графиков и индикаторов, используемые в примере приложения, в мобильный вариант Dojo Mobile.


Ресурсы для скачивания


Похожие темы

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Мобильные приложения, Open source
ArticleID=1024507
ArticleTitle=Создание графического приложения для контроля KPI с помощью Dojo Mobile
publish-date=10182015