ActionCenters provides a plugin point for client side Javascript components and controls. A user may import an xml definition of a new component or control into the ActionCenters server and it will be immediately available for use on the ActionCenter System.
This document will describe the process for building a Component or Control plugin. Both components and controls implement the same methods which will be called to instantiate and manipulate the component/control.
Registering to listen for contributions, relationships, and updates can be accomplished by using the ActionCenterListener
Adding, Updating, and Deleting contributions and relationships can be accomplished by using the actionCenterAPI
The xsd which defines the xml document for building a component/control can be found at http://actioncenters.svn.sourceforge.net/viewvc/actioncenters/trunk/AC/actioncenters-xml/ActionCenterElements.xsd.
The following is a sample xml document that defines a sample control.
<ActionCenterElements xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://server.actioncenters.org/svn/AC/actioncenters-xml/ActionCenterElements.xsd">
<!-- xsi:noNamespaceSchemaLocation="http://server.actioncenters.org/svn/AC/actioncenters-xml/ActionCenterElements.xsd"> -->
<Control type="AC_CustomContent">
<Categories>
<Category>
<Name>Basic configuration</Name>
<Fields>
<TextField>
<Name>name</Name>
<Label>Control Add User Name</Label>
<HelpText>A label</HelpText>
<HoverText>Control Add Name</HoverText>
<CharacterWidth>25</CharacterWidth>
<MaximumCharacters>65535</MaximumCharacters>
<RegularExpression/>
<ValidationMessage/>
<InitialTextValue>
<DefaultValue>Custom Content</DefaultValue>
<Incremented>true</Incremented>
<Required>true</Required>
</InitialTextValue>
</TextField>
<RichTextField>
<Name>markup</Name>
<Label>Markup</Label>
<HelpText>Design the html content here</HelpText>
<HoverText>Design the html content here.</HoverText>
<CharacterWidth>90</CharacterWidth>
<DisplayLines>11</DisplayLines>
<MaximumCharacters>11000</MaximumCharacters>
<RegularExpression />
<ValidationMessage />
<InitialMultiLineValue>
<DefaultValue></DefaultValue>
<Required>true</Required>
</InitialMultiLineValue>
</RichTextField>
<ImageField>
<Name>icon</Name>
<Label>Button icon</Label>
<HelpText>Visual image of the button.</HelpText>
<HoverText>Button icon</HoverText>
</ImageField>
</Fields>
</Category>
</Categories>
<js>
<code>
var AC_CustomContent = function(componentId, renderer, subrenderer, target) {
var configuration = renderer.getComponentConfiguration();
var markup = configuration.getPropertyValue('markup');
var tablearea = Ext.get(target);
tablearea.insertHtml('afterBegin',markup,true);
};
</code>
</js>
</Control>
</ActionCenterElements>
This example defines 3 properties "name", "markup", and "icon" which will be used by the control. The properties editor for this component will allow the user to set these three properties. These properties may be retrieved by the component at runtime. The last section of this sample xml is the javascript code for this component. It is surrounded by the "code" tag.
The constructor of the control must be in the form of...
var <control_name> = function(componentId, renderer, subrenderer, target)
control_name must match the name defined previously in the xml.
"componentId" - Not used by components.
"renderer" - This object contains the configuration settings for this component.
"subrenderer" - Not used by components.
"target" - A location on the screen where this component should be rendered.
Retrieving a component's configuration properties...
var configuration = renderer.getComponentConfiguration();
var markup = configuration.getPropertyValue('markup');
renderer.getComponentConfiguration() - Gets the control's configuration.
configuration.getPropertyValue('markup') - Gets a particular property value for this control.
Rendering the control to the target location...
var tablearea = Ext.get(target);
tablearea.insertHtml('afterBegin',markup,true);
Ext.get(target) - Gets the target screen location.
Once the target area is retrieved the control can be rendered to that location.
A component configuration is very similar to the control. The only difference in the xml is that the xml element type is "Component" instead of "Control".
The constructor of the component is the same as the component above. It must be in the form of...
var <component_name> = function(superiorContribution, renderer, subrenderer, target)
control_name must match the name defined previously in the xml.
"superiorContribution" - The root contribution to which all contributions displayed in this component are related directly or indirectly. This variable is of type AC.data.Contribution.
"renderer" - The AC.pss.ComponentRenderer that rendered this component.
"subrenderer" - An array of AC.pss.ComponentRenderers. This array contains a renderer for all components that are subordinate to the current (this) one.
"target" - A DOM element into which the component should render itself. If target is null, the component should not render itself anywhere, but it should provide a getPanel() function which will return a panel containing the component. The calling function can determine where to render this component.
Sample code...
var superiorContributionId = superiorContribution.getId();
Gets the superior contribution's unique id.
var component = renderer.getComponentConfiguration();
Gets this component's configuration.
renderer.launchPoint
Reference to the launchpoint from which this component was triggered.
subrenderer[0].renderComponent(rootContribution, thisLaunchpoint);
Renders a subcomponent. "rootContribution" is the root contribution for ths subcomponent. "thisLaunchpoint" is the launchpoint from which the subcomponent was triggered. Note: "thisLaunchpoint should have a function called "getSubComponentHeaderInfo(contributionId)" which returns an object containing the following properties
{'icon' : <icon source>,
'text' : <contribution text property>,
'cls' : css class,
'counter' : <contribution counters>,
'node' : <the root node};