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.


This a real Fuzzle CMS widget code (name “Image with link”).

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).

You can define any number of widgets in library; but we discuss the example with only one widget.

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 ....
}


As you can see, _configXML have default value. It reflects the fact, that during block creation it's necessary to setup internal properties “by default”, because during creation CMS doesn't call loadFromXML procedure.

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;
}


How to make widget installation package?

Making widget editor – alternative method?

 

Developer guide


Overview

API

Lessons