One approach for advanced internet-programs creation on example of widget-programs developing
Considers use of methodology for advanced internet-programs creation on base of Adobe Flex 2.0, using design patterns and architecture shell. Approach illustrated by developing widget-programs.Problems in programming 2011; 4: 49-55
Gespeichert in:
| Datum: | 2025 |
|---|---|
| Hauptverfasser: | , , |
| Format: | Artikel |
| Sprache: | English |
| Veröffentlicht: |
PROBLEMS IN PROGRAMMING
2025
|
| Schlagworte: | |
| Online Zugang: | https://pp.isofts.kiev.ua/index.php/ojs1/article/view/825 |
| Tags: |
Tag hinzufügen
Keine Tags, Fügen Sie den ersten Tag hinzu!
|
| Назва журналу: | Problems in programming |
| Завантажити файл: |  |
Institution
Problems in programming| id |
pp_isofts_kiev_ua-article-825 |
|---|---|
| record_format |
ojs |
| resource_txt_mv |
ppisoftskievua/12/48ce7a4f4ee7735f8001a25509875512.pdf |
| spelling |
pp_isofts_kiev_ua-article-8252025-09-02T15:42:07Z One approach for advanced internet-programs creation on example of widget-programs developing Создание развитых интернет-программ на примере построения виджет-программ Створення розвинених інтернет-програм на прикладі побудови віджет-програм Glybovets, M.M. Koval, I.V. Koren, O.M. UDC 004.4 УДК 004.4 Considers use of methodology for advanced internet-programs creation on base of Adobe Flex 2.0, using design patterns and architecture shell. Approach illustrated by developing widget-programs.Problems in programming 2011; 4: 49-55 Рассмотрено применение методологии создания развитых Интернет-программ на основе Adobe Flex 2.0 с применением паттернов проектирования и архитектурного каркаса. Подход проиллюстрирован построением виджет-программ.Problems in programming 2011; 4: 49-55 Розглянуто застосування методології створення розвинених інтернет-програм на основі Adobe Flex 2.0 з використання патернів проектування та архітектурного каркасу. Підхід проілюстровано побудовою віджет-програм.Problems in programming 2011; 4: 49-55 PROBLEMS IN PROGRAMMING ПРОБЛЕМЫ ПРОГРАММИРОВАНИЯ ПРОБЛЕМИ ПРОГРАМУВАННЯ 2025-09-02 Article Article application/pdf https://pp.isofts.kiev.ua/index.php/ojs1/article/view/825 PROBLEMS IN PROGRAMMING; No 4 (2011); 49-55 ПРОБЛЕМЫ ПРОГРАММИРОВАНИЯ; No 4 (2011); 49-55 ПРОБЛЕМИ ПРОГРАМУВАННЯ; No 4 (2011); 49-55 1727-4907 en https://pp.isofts.kiev.ua/index.php/ojs1/article/view/825/877 Copyright (c) 2025 PROBLEMS IN PROGRAMMING |
| institution |
Problems in programming |
| baseUrl_str |
https://pp.isofts.kiev.ua/index.php/ojs1/oai |
| datestamp_date |
2025-09-02T15:42:07Z |
| collection |
OJS |
| language |
English |
| topic |
UDC 004.4 |
| spellingShingle |
UDC 004.4 Glybovets, M.M. Koval, I.V. Koren, O.M. One approach for advanced internet-programs creation on example of widget-programs developing |
| topic_facet |
UDC 004.4 УДК 004.4 |
| format |
Article |
| author |
Glybovets, M.M. Koval, I.V. Koren, O.M. |
| author_facet |
Glybovets, M.M. Koval, I.V. Koren, O.M. |
| author_sort |
Glybovets, M.M. |
| title |
One approach for advanced internet-programs creation on example of widget-programs developing |
| title_short |
One approach for advanced internet-programs creation on example of widget-programs developing |
| title_full |
One approach for advanced internet-programs creation on example of widget-programs developing |
| title_fullStr |
One approach for advanced internet-programs creation on example of widget-programs developing |
| title_full_unstemmed |
One approach for advanced internet-programs creation on example of widget-programs developing |
| title_sort |
one approach for advanced internet-programs creation on example of widget-programs developing |
| title_alt |
Создание развитых интернет-программ на примере построения виджет-программ Створення розвинених інтернет-програм на прикладі побудови віджет-програм |
| description |
Considers use of methodology for advanced internet-programs creation on base of Adobe Flex 2.0, using design patterns and architecture shell. Approach illustrated by developing widget-programs.Problems in programming 2011; 4: 49-55 |
| publisher |
PROBLEMS IN PROGRAMMING |
| publishDate |
2025 |
| url |
https://pp.isofts.kiev.ua/index.php/ojs1/article/view/825 |
| work_keys_str_mv |
AT glybovetsmm oneapproachforadvancedinternetprogramscreationonexampleofwidgetprogramsdeveloping AT kovaliv oneapproachforadvancedinternetprogramscreationonexampleofwidgetprogramsdeveloping AT korenom oneapproachforadvancedinternetprogramscreationonexampleofwidgetprogramsdeveloping AT glybovetsmm sozdanierazvityhinternetprogrammnaprimerepostroeniâvidžetprogramm AT kovaliv sozdanierazvityhinternetprogrammnaprimerepostroeniâvidžetprogramm AT korenom sozdanierazvityhinternetprogrammnaprimerepostroeniâvidžetprogramm AT glybovetsmm stvorennârozvinenihínternetprogramnaprikladípobudovivídžetprogram AT kovaliv stvorennârozvinenihínternetprogramnaprikladípobudovivídžetprogram AT korenom stvorennârozvinenihínternetprogramnaprikladípobudovivídžetprogram |
| first_indexed |
2025-09-17T09:24:29Z |
| last_indexed |
2025-09-17T09:24:29Z |
| _version_ |
1843502587373944832 |
| fulltext |
Програмування для комп’ютерних мереж та Internet
УДК 004.4
Н.Н. Глибовец, И.В. Коваль, А.Н. Корень
СОЗДАНИЕ РАЗВИТЫХ ИНТЕРНЕТ-ПРОГРАММ НА
ПРИМЕРЕ ПОСТРОЕНИЯ ВИДЖЕТ-ПРОГРАММ
Рассмотрено применение методологии создания развитых Интернет-программ на основе Adobe Flex 2.0
с применением паттернов проектирования и архитектурного каркаса. Подход проиллюстрирован по-
строением виджет-программ.
Введение
Формирование нового подхода все-
гда ставит ряд вопросов, связанных с его
эффективностью, целесообразностью, на-
личием преимуществ и недостатков, сфе-
рами применения. Не стала исключением
технология развитых Интернет-программ
(РИП) как новый шаг в эволюции Интер-
нет-программ, отразивший постепенный,
однако неизбежный переход веб-
приложений от простой модели тонкого
клиента к развитой модели распределен-
ных функций [1].
Продемонстрируем применение
технологии Adobe Flex 2.0. Разработчики
Flex-приложений пишут код MXML и
ActionScript в интегрированной среде раз-
работки Flex Builder или в традиционных
текстовых редакторах.
Flex framework – компонентно-
ориентированный программный каркас
разработки РИП для Flash Player среды
исполнения [2], включающей MXML,
ActionScript и библиотеку классов Flex.
Предоставляет богатый набор расширяе-
мых компонентов для интерфейса (более
100 компонентов и контейнеров), гибкую
модель для контроля размещения и взаи-
модействия с пользователем, устойчивую к
ошибкам инфраструктуру доступа к дан-
ным через удаленные сервисы, связывание
этих данных с объектами данных и кон-
троллерами интерфейса. Язык MXML
(Multimedia eXtensible Markup Language)
обеспечивает декларативный подход к со-
зданию визуального представления РИП, а
ActionScript 3.0 – мощный объектный язык
программирования.
Библиотека классов Flex содержит
набор классов, компоненты, менеджеры
размещения и сервисные компоненты. Ис-
пользуя компонентно-ориентированную
модель разработки Flex, разработчики мо-
гут использовать встроенные компоненты,
создавать композитные компоненты из
встроенных или создавать новые, расши-
ряя встроенные компоненты или их клас-
сы.
Для достижения эффективности
разработки Flex РИП, их масштабируемо-
сти и удобства поддержки, целесообразно
учитывать паттерн разработки модель-
представление-контроль. Удачным архи-
тектурным каркасом для построения Flex
РИП является Cairngorm, который базиру-
ется на MVC паттерне.
Использование предлагаемой мето-
дологии создания Flex РИП продемонст-
рируем на примере разработки РИП, кото-
рая предоставляет пользователю набор
виджетов (часы, новости, калькулятор,
блокнот, список задач и т.п.) и панель для
управления ими. Как мини-программы,
виджеты обеспечивают определенную
функциональность. Далее для обозначения
созданной РИП используем название "РИП
персонализированных виджетов".
1. Создание и настройка про-
екта в Flex
Для создания любой Flex РИП целе-
сообразно использовать интегрированную
среду разработки Adobe Flex Builder 2, что
позволяет работать с библиотеками клас-
сов Flex, языками программирования
MXML и ActionScript 3.0 и компилятором
для Flex-приложений. В Flex Builder все
Flex-приложения содержатся в проектах.
Для разработки РИП персонализирован-
49
© Н.Н. Глибовець, И.В. Коваль, А.Н. Корень, 2011
ISSN 1727-4907. Проблеми програмування. 2011. № 4
Програмування для комп’ютерних мереж та Internet
ных виджетов использовался базовый тип
проекта (Basic), предусматривающий дос-
туп к данным с помощью XML или веб-
сервисов на PHP / JSP / ASP.NET. Всего
есть три типа проектов: Basic, ColdFusion
Flash Remoting Service и Flex Data Services.
Визард для нового Flex-проекта ав-
томатически генерирует конфигурацион-
ные файлы проекта, папку для результата
проекта (bin), где будут размещаться
скомпилированные SWF-файлы и основ-
ной файл проекта будет иметь расширение
mxml.
Основной файл проекта сразу после
создания будет иметь такое же название,
как и проект, однако целесообразно пере-
именовывать его в index.mxml.
Когда проект создан, необходимо
подключить внешние библиотеки. РИП
персонализированных виджетов базирует-
ся на архитектурном каркасе Cairngorm,
поэтому надо подключить библиотеку
cairngorm.swc. Библиотека cairngorm.swc
общедоступна, ее можно взять из
http://labs.adobe.com/wiki/index.php/Cairn-
gorm:Downloads. Подключение библиоте-
ки осуществляется в окне свойств проекта
в разделе Flex Build Path на вкладке Library
path с помощью кнопки Add SWC (Рис. 1 и
2).
Рис. 1. Подключение библиотеки cairngorm.swc
Рис. 2. Указание пути к дополнительным файлам с исходным кодом
50
Програмування для комп’ютерних мереж та Internet
Для реализации РИП персонализи-
рованных виджетов использовалась также
общедоступная библиотека эффектов
DistortionEffects.swc
(http://weblogs.macromedia.com/auhlmann/ar
chives/DistortionEffects.zip). Подключается
аналогично библиотеке Cairngorm [3].
Проект Flex РИП может использо-
вать дополнительные файлы с исход-
ным кодом. Это один из способов обес-
печения повторного использования компо-
нентов. Для РИП персонализированных
виджетов используются исходные
файлы компонентов ResizableWindow и
Debug (разработанные ранее), размещен-
ные в отдельной папке под названием
components. Пути к ним прописаны в окне
свойств проекта в разделе Flex Build Path
на вкладке Source path с помощью кнопки
Add Folder.
Изначальное содержание in-
dex.mxml будет иметь следующий вид:
<?xml version="1.0"
encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/20
06/mxml" layout="absolute">
</mx:Application>
2. Архитектура РИП персо-
нализированных виджетов
В создании архитектуры РИП целе-
сообразно руководствоваться рекоменда-
циями архитектурного каркаса Cairngorm.
Согласно документации Cairngorm API
содержит ряд пакетов. Flex-проект имеет
такую структуру папок:
• business – содержит классы, отве-
чающие за обмен данными с серверной
частью, использование сервисов;
• commands – содержит классы для
различных команд; классы команд реали-
зуют интерфейс Command архитектурного
каркаса и интерфейс IResponder
(mx.rpc.IResponder);
• control – содержит классы собы-
тий, каждый из которых расширяет класс
CairngormEvent архитектурного каркаса, и
обработчик этих событий, расширяющий
класс FrontController архитектурного кар-
каса Cairngorm;
• model – содержит классы, форми-
рующие модель РИП, один из классов реа-
лизует интерфейс ModelLocator архитек-
турного каркаса;
• view – содержит набор классов,
формирующих пользовательский интер-
фейс;
• vo – содержит классы с описания-
ми объектов для обмена между разными
уровнями программы, (классы реализуют
интерфейс ValueObject архитектурного
каркаса).
Структуру проекта можно расши-
рить другими папками. В частности проект
РИП персонализированных виджетов со-
держит папку skin с файлом CSS для опи-
сания стилей Flex компонентов и с файла-
ми SWF, содержащими графические эле-
менты, из которых формируется визуаль-
ное представление каждого виджета и РИП
в целом. Также есть папка constants с клас-
сом, который содержит все константы
РИП.
3. Структура и взаимосвязи
в РИП персонализированных
виджетов
На структуру РИП персонализиро-
ванных виджетов и взаимосвязи внутри
РИП повлиял MVC паттерн и архитектур-
ный каркас Cairngorm. Каждый из видже-
тов имеет свое представление, т. е. собст-
венный MXML файл с описанием его вида
и заданием внутренней функциональности,
которое не влияет на состояние модели.
Каждый виджет расширяет класс Widget,
который в свою очередь реализует интер-
фейс IWidgetView.
С каждым виджетом связывается
его контроллер, расширяющий класс
WidgetController, что в свою очередь реа-
лизует интерфейс IWidgetController. Все
контроллеры виджетов являются классами,
входящими в состав модели РИП персона-
лизированных виджетов. Контроллер со-
держит данные, необходимые виджету, и
отвечает за связь виджета с остальными
элементами РИП.
Для нового виджета используем
WidgetFactory, реализующий паттерн
Factory.
Виджет может инициировать ряд
событий. Каждому событию соответствует
свой класс. Например, OpenWidgetEvent,
RemoveWidgetEvent, SaveWidgetDataEvent
51
http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip
http://weblogs.macromedia.com/auhlmann/archives/DistortionEffects.zip
Програмування для комп’ютерних мереж та Internet
используются всеми виджетами РИП. Од-
нако специальные события можно ини-
циировать только определенным видже-
том, например, LoadRadioDataEvent,
LoadNewsEvent, LoadCalendarDataEvent.
Все события обрабатывает класс
MYFNFrontController.
В результате конкретного события
выполняется заранее определенная коман-
да. Каждая команда связана с обращением
к серверу и имеет три public метода:
execute, result и fault. Метод execute содер-
жит инструкции, которые необходимо вы-
полнить о передаче полномочий делегату
веб-сервиса. Метод result вызывается, ко-
гда успешно получен результат взаимо-
действия РИП с сервисом, а метод fault – в
случае неудачи (содержит код ошибки).
Все доступные для РИП сервисы
описаны в Services.mxml, расширяющем
класс ServiceLocator архитектурного кар-
каса Cairngorm. Делегаты (Delegate) отве-
чают за обращение к конкретному сервису,
передачу ему параметров и связывание
результата взаимодействия сервиса с ко-
мандой, которая делегировала вызов сер-
виса.
Активизация виджета в РИП и его
удаление осуществляется посредством па-
нели управления виджетами. Некоторые из
виджетов, такие как радио и калькулятор,
могут иметь только один экземпляр, ос-
тальные - произвольное количество. Мо-
дель РИП персонализированных виджетов
реализует механизм отслеживания актив-
ных виджетов.
4. Схема добавления виджета
Рассмотрим схему добавления но-
вого виджета радио для иллюстрации ас-
пектов, описанных в предыдущем разделе.
Прежде всего в папке view для нового
виджета создаем представление как описа-
ние графического отображения
RadioWidget.mxml посредством языка
MXML. Функции RadioWidget.mxml соз-
даются посредством языка ActionScript 3.0
и размещаются в тезисе Script:
<mx:Script>
<![CDATA[
// код мовою ActionScript
]]>
</mx:Script>
Для представления виджета созда-
ется контроллер RadioController.as в папке
model/widgets. К константам РИП в
MYFNConstansts.as добавляется новая
константа, соответствующая названию
нового виджета для его идентификации:
public static const WID-
GET_RADIO:String = "RadioWidget";
В WidgetFactory.as добавляется
возможность создания нового виджета
радио.
К DashboardView.mxml, содержа-
щему панель управления виджетами, до-
бавляется новая кнопка, отвечающая за
активацию виджета радио. С каждой кноп-
кой, которая является экземпляром класса
ToolbarIcon.mxml, связано событие
OpenWidgetEvent, параметром которого
является название виджета.
private function clickI-
con(name:String):void {
var
event:OpenWidgetEvent = new
OpenWidgetEvent(name);
CairngormEventDispatcher.getInsta
nce().dispatchEvent(event);}
Конструктор классса
OpenWidgetEvent, расширяющий класс
CairngormEvent, имеет следующий вид:
public function
OpenWidgetEvent
(widgetName:String, wid:String =
null) {
super(MYFNFrontControll
er.OPEN_WIDGET);
this.widgetName =
widgetName;
this.wid = wid;}
Класс MYFNFrontController обраба-
тывает событие OpenWidgetEvent, с кото-
рым связана команда
OpenWidgetCommand:
public function
MYFNFrontController() {
addCommand(OPEN_WIDGET,
OpenWidgetCommand);
...}
Для радио необходимо загрузить с
сервера список радиостанций, которые
будут проигрываться с помощью виджета.
С этой целью следует создать событие
LoadRadioDataEvent и соответствующую
команду LoadRadioDataCommand.
52
Програмування для комп’ютерних мереж та Internet
Класс LoadRadioDataEvent имеет
вид:
package control
{ import
model.widgets.IWidgetController;
import
com.adobe.cairngorm.control.Cairn
gormEvent;
public class
LoadRadioDataEvent extends
CairngormEvent
{ public var
widgetController:IWidgetControlle
r;
public function
LoadRadioDataEvent
(widgetController:
IWidgetController) {
su-
per(MYFNFrontController.LOAD_RADI
O_DATA);
this.widgetController =
widgetController;
} } }
Класс LoadRadioDataCommand может опи-
сать следующим образом:
package commands
{ import
com.adobe.cairngorm.commands.Comm
and;
import
mx.rpc.IResponder;
...
import
model.MYFNModelLocator;
public class
LoadRadioDataCommand implements
Command, IResponder
{ private var
widgetController:RadioController;
public function
execute(event:CairngormEvent):voi
d {
widgetController =
RadioController(
LoadRadioDataEvent(event).widgetC
ontroller);
var
delegate:LoadRadioDataDelegate =
new
LoadRadioDataDelegate(this);
var
authTicket:String =
MYFNModelLocator.
getInstance().authTicket;
delegate.loadService(au
thTicket); }
public function
result(data:Object):void
{ try {
var
xml:XML = MYFNU-
tils.strToXML(data.result);
widgetController.resultStati
ons(
xml.LoadRssResult);
} catch (e:Error) {
Debug.write(e.message);
} }
public function
fault(info:Object):void {
De-
bug.write(FaultEvent(info).fault.
faultString);
} } }
Инициализация события
LoadRadioDataEvent происходит в методе
loadStations класса RadioController с помо-
щью CairngormEventDispatcher:
public function loadStations
():void {
var
event:LoadRadioDataEvent = new
LoadRadioDataEvent(this);
CairngormEventDispatcher.get
Instance().dispatchEvent(event);}
После инициализации событие бу-
дет обработано в MYFNFrontController. Он
определяет, какую команду выполнить при
условии наступления того или иного собы-
тия. Поэтому в MYFNFrontController необ-
ходимо добавить следующий код:
public static var
LOAD_RADIO_DATA:String = "load
radio data";
public function
MYFNFrontController() {
...
addCommand(LOAD_RADIO_D
ATA, LoadRadioDataCommand);
...}
Таким образом создано событие и
добавлен код, который отвечает за его
инициализацию. Обработчик событий бу-
дет анализировать новое событие, связы-
вая с ним созданную команду. Теперь пе-
реходим к созданию делегатора
LoadRadioDataDelegate, вызываемого ко-
мандой LoadRadioDataCommand. Сначала
следует задать сервис, который будет ис-
пользовать делигатор. Описать сервис не-
53
Програмування для комп’ютерних мереж та Internet
обходимо в Services.mxml, используя та-
кой код, к примеру:
<mx:WebService
id="rssService"
wsdl="http://www.flexmonster
.com/myfn/RssService.asmx?wsdl"
showBusyCursor="true">
<mx:operation
name="LoadRss"
resultFormat="xml">
<mx:request>
<authTicket></authTicket>
<url></url>
<login></login>
<password></password>
</mx:request>
</mx:operation>
</mx:WebService>
Делегат LoadRadioDataDelegate от-
вечает за обращение к сервису rssService.
Он обеспечивает передачу параметров
authTicket, url, login и password сервису и
связывание результата взаимодействия
сервиса с командой, которая делегировала
вызов сервиса. Ниже приведен код
LoadRadioDataDelegate:
package business
{
import mx.rpc.IResponder;
import com.adobe.cairngorm.business.ServiceLocator;
import mx.rpc.AsyncToken;
import constants.MYFNConstansts;
import mx.rpc.soap.WebService;
public class LoadRadioDataDelegate
{
protected var command:IResponder;
protected var service:Object;
public function LoadRadioDataDelegate
(command:IResponder) {
this.service = ServiceLocator.getInstance().
getWebService("rssService") as WebService;
this.command = command;
}
public function loadService(authTicket:String):void {
var url:String = MYFNConstansts.RADIO_LINK;
var login:String = MYFNConstansts.RADIO_LOGIN;
var password:String = MYFNConstansts.RADIO_PASSWORD;
service.loadWSDL();
var token:AsyncToken = service.LoadRss(authTicket, url, login,
password);
token.addResponder(command);
}
}
}
Так происходит добавление нового
виджета в разработанную РИП.
Выводы
Развитые Интернет-программы как
новый подход к созданию веб-систем, ко-
торые реализуют модель клиент-серверной
архитектуры с толстым клиентом. Они
используют преимущества асинхронного
режима взаимодействия с сервером, разви-
вают сервисно-ориенти-рованную архи-
тектуру и самого сервисно-
ориентированного клиента.
Комплексным решением для по-
строения развитых интернет-программ
видится технология Adobe Flex 2.0, на базе
которой создана методология разработки
РИП, продемонстрированная на примере
54
Програмування для комп’ютерних мереж та Internet
разработки развитой интернет-программы,
предоставляющей пользователю набор
виджетов (часы, новости, калькулятор,
блокнот, список задач) и панель для
управления ими.
1. Driver. M., Valdes. R., Phifer. G. Rich
Internet Applications Are the Next Evolution
of the Web // Technical report, Gartner. –
2005. – P. 6–23.
2. Webster. S. Developing Flex RIAs with
Cairngorm Microarchitecture / S. Webster //
Adobe Consulting [Electronic resource]. –
Available at:
http://www.adobe.com/devnet/flex/articles/cai
rngorm_pt1.html
3. Flex Application Design for Cairngorm
[Electronic resource]. – Available at:
http://www.digimmersion.com/support/Flex%
20UI%20Design %20For%20Cairngorm.pdf
4. Colin M. Essential ActionScript 2.0 //
O'Reilly. – 2004. – 544 p.
Получено 06.04.2011
Про авторів:
Глибовець Микола Миколайович,
доктор фізико-математичних наук,
професор, декан факультету інформатики
Національного університету «Києво-
Могилянська Академія»,
Корень Олександр Миколайович,
пошукувач,
Коваль Ірина Володимирівна,
магістр.
Місце роботи авторів:
Національний університет
«Києво-Могилянська Академія»,
04071, Київ, вул. Г. Сковороди, 2.
Тел.: 067 209 0740.
glib@ukma.kiev.ua
55
http://www.digimmersion.com/support/Flex%20UI%20Design
http://www.digimmersion.com/support/Flex%20UI%20Design
СОЗДАНИЕ РАЗВИТЫХ ИНТЕРНЕТ-ПРОГРАММ НА ПРИМЕРЕ ПОСТРОЕНИЯ ВИДЖЕТ-ПРОГРАММ
Выводы
|