Appboard/old/custom flex widgets

AppBoard developers may have existing Flex components that need to be integrated into an AppBoard project. This section details the procedure for integrating Flex components.

<videoflash>_AEoJtcKSag|600|300</videoflash>

Setting up a Development Environment

You will need the following tools and files:

1. Latest version of Flash Builder 4, with the 4.0.0 SDK
   • Do not use Flex SDK version 4.1.0, as it has some major defects
2. Latest version of the AppBoard Turnkey Server (delivered as a zip file)

Perform the following to create your development environment:

1. Unzip the AppBoard master zip file to any desired location on the server
2. Unzip the "Appboard Turnkey Server" zip file that is inside the master zip file
   • This is your "turnkey server".
3. Start the turnkey server by running the Tomcat startup executable in [TURNKEY_HOME]/bin/
   • Windows: startup.bat
   • Unix: startup.sh
4. Open Flash Builder 4
   • Optionally create a new workspace named "Appboard"
5. In Flash Builder 4, click "File" -> "Import" -> "Other" -> "General" -> "Existing Projects into Workspace" -> "Next"
6. Click "Select archive file" and Browse for the "Appboard_VisualBuilder_SDK...zip" file
7. Enable "Copy projects into workspace"
8. Click Finish
9. Right click on the "Appboard_VisualBuilder_SDK" project folder, and choose "Properties"
10. Under "Flex Build Path", point the output folder to [TURNKEY_HOME]/webapps/enportal/visualizer-custom
11. Check that the Output URL is proper, and ends with "visualizer-debug"
12. Under "Flex Compiler" ensure that you are using "Flex SDK 4.0"
13. Click OK
14. Click "Project" -> "Clean" in the menu bar.
15. Click "Debug" (icon) -> "Appboard_Builder"

Your browser should now launch and be running in a debug build of the Visual Builder interface.

Architecture of an Appboard Widget

Widgets are simply flex DisplayObject components that implement the com.edgetech.widget.IWidget interface. There are several example widgets included in the Appboard_VisualBuilder_SDK that you can use for reference. Start with com.edgetech.widget.FooWidget, as it is has only the most basic structure required.

Important Classes and Interfaces

The IWidget interface defines all of the necessary methods for an Appboard widget. See the IWidget.as source code for an explanation of each method.

As noted in IWidget, each widget must define a "ConfigurationUIClass". This class is simply an MXML that extends "WidgetConfigurationBase". The configuration UI is used when adding or editing a widget. See the "WidgetConfigurationBase.as" file for more information about its methods.

DataObjects

Appboard makes extensive use of the DataObject class as a means by which to transfer and store information on the Appboard server. The sever creates DataObjects to represent rows in a DataSource. The client creates DataObjects as a means of configuration storage. DataObjects are identified by their "MetaClass Name" and unique id. Use DataObject's "getMetaClass().name" method to obtain the "meta" class name of the DataObject. Use the "id" property to obtain the unique id.

Configuration DataObjects

Each widget is given one "Configuration DataObject". A configuration DataObject is a blank slate on which the configuration UI can store properties; such as strings, booleans, numbers and dates. The configuration DataObject is then used by the widget component to drive its behavior. Here are the types of items you can store on a configuration object.

1. String, Number, Date, Int, Boolean
2. Array of DataObjects

Here is an example of storing native types on a configuration DataObject.[php,N]

configuration.myStringProperty = "some string";

configuration.myCustomDate = new Date();

configuration.someNumber = 4;

configuration.booleanFlag = false;

To create a DataObject, use the DataModel singleton's "createDataObject" method. Example:[php,N]

var dataModel:DataModel = DataModel.getInstance();

var customDataObject:DataObject = dataModel.createDataObject("appboard.config.WidgetName.FooSomething");

configuration.customDataObjects = [customDataObject];

With the above code, the configuration would now have a property named "customDataObjects", which holds an array of one DataObject.

'Factory Modules'

When you are ready to load your custom widget on to your AppBoard server, simply edit the "CustomWidgetsFactoryModule.mxml" file. Use the documented "addClass" method to add a reference to your widget class.

'Debugging'

Click the "Debug" icon and choose "Appboard_Builder". This should launch the AppBoard Builder interface from the "visualizer-debug" directory. Your custom widget will be loaded via the factory module, and you will find your widget listed in the "Add Widget" dialog. You can use Flash Builder's debugger to create break points and variable watchers.