When creating own widgets, you typically start off by creating a custom widget type. As described in the previous sections, the dashboard is configured in terms of columns and widget states. Each widget state carries a widget type id which associates it with its widget type. In order to get from widget states to the actual widget instances shown on the dashboard, the different widget types are consulted. A widget type is responsible for creating the widget components from their associated widget states.

You could define your own widget type by creating a class from scratch that implements the interface WidgetType. However, a convenient default implementation ComponentBasedWidgetType, is provided out of the box. For many cases it is sufficient to let your own widget type extend it. In order to do so, you have to define a widget component that defines the UI for widgets of your new widget type. For instance, the predefined SimpleSearchWidgetType is simply defined in MXML as follows:

<editor:ComponentBasedWidgetType
        name="..."
        description="..."
        iconCls="...">
  <editor:WidgetComponent>
    <editor:SimpleSearchWidget/>
  </editor:WidgetComponent>
</editor:ComponentBasedWidgetType>

Besides setting the parameters name, description and iconCls, the widget component SimpleSearchWidget is set. The following listing shows the code of the SimpleSearchWidget:

<?xml version="1.0" encoding="UTF-8"?>
<local:SimpleSearchWidgetBase
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:local="com.coremedia.cms.editor.sdk.dashboard.widgets.search.*"
        xmlns:exml="http://www.jangaroo.net/exml/0.8"
        xmlns="exml:ext.config">
  <fx:Script><![CDATA[
    public static const xtype:String = "com.coremedia.cms.editor.sdk.config.simpleSearchWidget";

    private var config:SimpleSearchWidget;

    public native function SimpleSearchWidget(config:SimpleSearchWidget = null);
    ]]></fx:Script>
  <fx:Declarations>
    <!---
      The search text that is used for the collection view.
      Default "".
     -->
    <fx:String id="searchText"/>

    <!---
      The content type that is used in the content type filter.
      Default "Document_".
     -->
    <fx:String id="contentType"/>

    <!---
      Whether to restrict the search to the preferred site.
      Default true.
     -->
    <fx:Boolean id="preferredSite"/>
  </fx:Declarations>

</local:SimpleSearchWidgetBase>

The component can be configured with the parameters searchText and contentType in order to show a corresponding search result. Executing the search and obtaining the search results is carried out in the base class SimpleSearchWidgetBase. When extending that class, a value expression that references the search result can be obtained via getContentValueExpression() and is used by a WidgetContentList to display the result.

There is one further important aspect concerning the base class SimpleSearchWidgetBase. It implements the Reloadable interface. This indicates that a reload button should be placed in the widget header, calling the widget's reload() method for refreshing the widget's contents. In this case, the base class simply triggers a new search.