Создание виджетов

Разобран процесс разработки виджета с помощью Adobe Flex 3.

1. Загрузите демо-проект библиотеки с уже одним созданным виджетом. Проект был создан в Adobe Flex Builder 3 и может быть использован повторно; однако, это не мешает использовать его с Flex SDK.

2. В проекте есть три файла (два первых – основные):

• BlockImageLink.mxml – код отображения виджета
• BlockImageLinkEditor.mxml – код редактора, который появляется по двойному щелчку на виджете в режиме редактирования.
• BlockImageLinkEditorAlt.mxml – альтернативный вариант редактора (рассматривается здесь).

BlockImageLink

Компонент, отображающий виджет, должен реализовывать интерфейс com.fuzzle.interfaces.IBlock. Этот интерфейс подразумевает реализацию двух функций:

• public function loadFromXML(settings:XML):void, которая вызывается у компонента, когда ему передаются конфигурационный XML 
• public function saveToXML():XML, которая вызывается при сохранении страницы и запрашивает текущую конфигурацию компонента.

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

public function saveToXML():XML {
  return _configXML;                        
}
            
private var _configXML: XML = <settings><imageSrc />
<linkURL /><glow>0</glow></settings>;
            
public function loadFromXML(settings:XML):void {
  _configXML = settings;
  // --- обработка присланных параметров ---
  swfBlock.source = settings.imageSrc;
  linkURL = settings.linkURL;
  // ... и так далее
}

BlockImageLinkEditor

Компонент-редактор виджета должен реализовывать интерфейс com.fuzzle.interfaces.com.fuzzle.interfaces.IBlockEditor. Этот интерфейс подразумевает реализацию двух функций:

• public function setXML(value:XML):void, которая вызывается у редактора, когда ему передают конфигурационный XML виджета.
• public function getXML():XML, которая вызывается в случае, если пользователь подтвердил изменения конфигурации виджета.

При вызове первой функции устанавливается значения для текстового поля ссылки, флажка “Glow” и соответствующих ему параметров и т.д.

При вызове второй функции все эти параметры считываются в XML.

Пример использования компонента выбора картинки (FZUserFileSelectImage):

<ns2:FZUserFileSelectImage id="ufSelect" fileSelect="onSelect();" />
<mx:SWFLoader id="swfBlock" autoLoad="true" />

public function onSelect():void {
  swfBlock.source = ufSelect.selectedFileURL;
}