How to make widget?

Adobe Flex 3 required

1. Download library demo project with one created widget. Project was build using Adobe Flex Builder 3, but you can use it with Flex SDK.

2. There are three files:

• BlockImageLink.mxml – class for widget view
• BlockImageLinkEditor.mxml – widget editor (appears by double click).
• BlockImageLinkEditorAlt.mxml – alternative widget editor (see here).

BlockImageLink component

Component, a widget view, must implement com.fuzzle.interfaces.IBlock interface. This interface requires two functions:

• public function loadFromXML(settings:XML):void – is calling, when component receive configuration XML to setup it's internal parameters.
• public function saveToXML():XML is calling during page save, and get current configuration XML.

The important part of component is a reading and saving configuration XML. It save in _configXML var and return during page saving process.

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;
  // --- processing configuration ---
  swfBlock.source = settings.imageSrc;
  linkURL = settings.linkURL;
  // ... etc ....
}

BlockImageLinkEditor component

Editor component must implement com.fuzzle.interfaces.com.fuzzle.interfaces.IBlockEditor interface. This interface requires two functions:

• public function setXML(value:XML):void – calling, when editor receive the configuration XML.
• public function getXML():XML – calling, when user press “OK” and save configuration changes.

During setXML call we setup the link field text, “Glow” checkbox and other.

During getXML call we serialize all that parameters to XML.

Image choose component example (FZUserFileSelectImage):

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

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