Статьи

Диаграмма данных из базы данных с использованием Adobe Flex и PHP

Апрель 20, 2019

Создание диаграмм и визуализация данных — одна из областей, в которых Adobe Flash сияет. Сочетание очень мощного API рисования, который позволяет легко создавать графические объекты и интерактивность, означает, что Flash идеально подходит для интеграции визуализаций данных. Раньше вам приходилось хорошо разбираться с Flash и сценариями, чтобы работать с графиками. Существует несколько великолепных библиотек Flash-диаграмм, но они часто стоят денег или не позволяют полностью настроить внешний вид графиков.

 

Представляем Flex

Программное обеспечение Adobe Flex было разработано для разработчиков. Приложения Flex запускаются на Flash Player (или AIR), поэтому вы получаете все преимущества Flash, имея инструмент и язык, специально предназначенные для разработчиков. Вы используете комбинацию XML-разметки и сценариев для создания приложений. Кроме того, вы можете использовать синтаксис CSS для настройки внешнего вида графиков. Flex упрощает добавление интерактивных диаграмм в веб-приложения.

 

Ввод данных в Flex

Flex не может напрямую взаимодействовать с базой данных, поэтому он использует сторонний сервер для получения данных. Flex может просто получать данные XML или веб-службы на основе SOAP, но если вы используете PHP, вы можете использовать протокол AMF, который упаковывает данные в легкий двоичный формат, который идеально подходит для больших наборов данных. Flash Builder 4 включает набор мастеров данных, которые помогут вам начать работу. В этом случае у меня установлен MAMP с некоторыми классами PHP, которые предоставляют данные Национальной лесной службы. С помощью Flash Builder 4 я могу настроить свое приложение так, чтобы оно вызывало эти данные и отображало их на графике.

Начните с создания нового проекта и обязательно установите тип сервера PHP. На следующем экране установите параметры конфигурации сервера. Информация о сервере требуется, чтобы Flex установил связь с сервером, чтобы классы PHP могли вызываться напрямую. После этого вы можете нажать кнопку «Готово», и Flash Builder создаст проект скелета.

 

 

Выберите меню «Данные» и выберите «Подключиться к PHP». Это вызывает настройку службы PHP. Убедитесь, что файлы PHP находятся в веб-доступном месте, а затем выберите ForestAcreService. Мастер автоматически заполняет для вас соглашения об именах по умолчанию, и после нажатия кнопки «Далее» отобразится список доступных функций PHP. После этого нажмите «Готово», и Flash Builder автоматически сгенерирует код, необходимый для подключения к классам PHP. 

 

 

Легко убедиться, что все работает, щелкнув правой кнопкой мыши имя метода на панели «Данные / службы» и выбрав «Тестовая операция». Затем вы можете вызвать метод непосредственно из Flash Builder и убедиться, что результат возвращается правильно. Последний шаг — определить тип данных для данных результата. Щелкните правой кнопкой мыши метод getAllForestAcres и выберите «Настроить тип возвращаемых данных». Затем просто выберите параметр автоопределения, и Flash Builder вызовет метод, а затем предоставит возможность создания настраиваемого типа данных на основе имени класса со свойствами из базы данных. В этом случае он точно соответствует типу данных PHP с сервера.

 

 

Диаграмма данных

При использовании мастеров данных легко начать диаграмму данных с помощью представления конструктора. Затем график может быть настроен и уточнен с использованием кода. Во-первых, переключитесь из режима просмотра исходного кода в режим конструктора, если в нем еще нет Flash Builder. Должна быть панель компонентов со списком компонентов, сгруппированных в папки. Выделите нижнюю категорию, помеченную как Диаграммы, а затем перетащите AreaChart на панель представления дизайна. Дайте ему идентификатор, и на экране отобразится диаграмма с некоторыми фиктивными данными. Панель свойств может быть использована для изменения положения х / у и размера диаграммы. Я изменил мой на x / y = 0, а ширина и высота установлены на 100% каждый. 

Чтобы заполнить диаграмму данными из базы данных, просто перетащите метод getAllForestAcres () с панели «Данные / службы» на диаграмму в режиме разработки. Появится диалоговое окно, чтобы как сгенерировать вызов службы, так и связать результат с диаграммой. Для этого метода установите для поля Y значение total_acres, а для поля оси X — год и нажмите кнопку ОК.

 

 

Диаграмма не будет обновляться автоматически, но если вы запустите приложение, вы увидите рендеринг данных из базы данных. Наведите указатель мыши на график, чтобы получить подробный обзор данных До сих пор, если для свойств ширины / высоты установлено значение 100%, приложение занимает всю страницу. Во многих случаях SWF-файл с диаграммой будет встроен в страницу с HTML-содержимым. Для этого начните с установки ширины 500 и высоты 300 и удалите свойства minWidth и midHeight, чтобы тег приложения выглядел следующим образом:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" 
  width="500" height="300" 
  xmlns:forestacresservice="services.forestacresservice.*">

 

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

 

Изменение HTML-кода Flash Builder

Flash Builder использует серию шаблонов для создания файлов для просмотра диаграммы. Когда диаграмма запускается в браузере, на самом деле это HTML-страница и серия файлов JavaScript, которые затем встраивают SWF-файл и отображают его. Когда для SWF-файла задана конкретная высота / ширина, SWF-файл просто внедряется на страницу, и все, что находится в шаблонах, будет отображаться в конечном HTML-файле. 

Откройте страницу index.template.html в каталоге html-template. Внутри куча ссылок на скрипты и тег для встраивания. Есть также переменные, обозначенные $ {}, которые изменяются в зависимости от информации, установленной внутри тегов приложения. 

Добавьте следующую строку между концом тега noscript и концом тега body в конце страницы:

<p>Toggle Data</p>

 

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

 

Using the Flex/AJAX Bridge

It’s important to be able to update Flash content from HTML when using this configuration. Flash Builder offers a way to generate the code to expose functions in the Flex application to HTML content. 

Back in the main MXML file, add the following function to the script blog. 

protected function external_clickHandler(event:MouseEvent):void
  {
     if(areaSeries.yField == "total_acres")
  {
     areaSeries.yField = "total_national_forests";
  } else {
     areaSeries.yField = "total_acres";
  }
}

 

There are two sets of data from the database. One shows the total amount of acreage by year and the other shows the total number of national forests by year. This function toggles between the two. 

Now right click on the project folder and select Create Ajax Bridge. This brings up a screen where specific functions or properties can be selected to expose to the HTML page. Select the external_clickHandler function and click OK.

 

 

This generates both the Flash code and a sample of HTML/JS code a folder called AjaxBridge. In the lib folder of that directory is a file called FABridge.js. Copy that file and the InteractiveChartsWithPHP.js file to the html-template directory.

Go back to the index.template.html file. The first thing to do is to add the two external JavaScript files to the index file. Add the following lines below the script tag with a src of swfobject.js:

<script type="text/javascript"src="FABridge.js"></script>
<script type="text/javascript"src="InteractiveChartsWithPHP.js"></script>

 

The last step to make the AjaxBridge work is to call it when the user clicks on the text. To do this, just call the function using the APIs from the FABridge.js file. 

<p><ahref="#"onclick="b_InteractiveChartsWithPHP_root.external_clickHandler()">Change Data</a></p>

 

Animating the Chart

The last step is optional but shows how to add some animation to the chart. Flex has a few default hooks for animating data when it changes on a chart. There are a number of series transitions that can be used including the slide, interpolate, and zoom. Those effects can be tweaked to create various animations when the data changes. In this case, SeriesSlide can be added to do a left to right wipe when the chart displays or changes data.

Add the following lines inside of the Declarations tags:

<mx:SeriesSlide id="slideIn" duration="500" direction="up" />
<mx:SeriesSlide id="slideOut" duration="500" direction="down" />

 

Now the chart needs to be modified so that the effects can be applied to an change in data. To do this, add a couple of showData properties to the AreaSeries tag:

<mx:AreaChart x="0" y="0" id="areachart1" width="100%" height="100%"
  creationComplete="areachart1_creationCompleteHandler(event)"
  dataProvider="{getAllForestAcresResult.lastResult}" showDataTips="true">

 

And that’s all there is to it. That provides an overview of how to get started with charting in Flex and then manipulate that chart in an HTML environment. 

33
Share: