Studio Developer Manual / Version 2107
Table Of Contents
The following example shows how to add an annotated link list form
to an already existing annotated link list (for further annotations).
The ExampleAnnotatedLinkListForm
shows a simple form
containing a CheckBox
. The base class is ExampleAnnotatedLinkListFormBase
and it needs to implement IAnnotatedLinkListForm
.
<?xml version="1.0" encoding="UTF-8"?> <local:ExampleAnnotatedLinkListFormBase xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:local="com.coremedia.blueprint.studio.forms.containers.*" xmlns:exml="http://www.jangaroo.net/exml/0.8" xmlns="exml:ext.config" xmlns:ui="exml:com.coremedia.ui.config" xmlns:editor="exml:com.coremedia.cms.editor.sdk.config" settingsVE="{config.bindTo.extendBy('properties','localSettings')}"> <fx:Script><![CDATA[ import com.coremedia.cap.struct.Struct; import com.coremedia.cms.editor.sdk.util.IAnnotatedLinkListProvider; ... /** * Custom predicate to decide if the row widget is annotated * @param annotatedLinkListProvider * @param rowIndex * @return Boolean */ public static function isAnnotated(annotatedLinkListProvider:IAnnotatedLinkListProvider, rowIndex:Number):Boolean { var struct:Struct = annotatedLinkListProvider.getAnnotatedLinkListVE().getValue()[rowIndex] as Struct; return struct ? struct.get('examplePropertyEnabled') === true : false; } ]]></fx:Script> <local:plugins exml:mode="append"> <ui:Binding source="ctaSettings.examplePropertyEnabled" destination="exampleViewModel.ExamplePropertyEnabled" twoWay="true"/> <editor:PropertyFieldPlugin propertyName="exampleConfiguration"/> </local:plugins> <local:items> <ui:StatefulCheckbox boxLabel="..."> <ui:plugins> <ui:BindPropertyPlugin bidirectional="true"> <ui:bindTo> <ui:ValueExpression context="{exampleViewModel}" expression="ExamplePropertyEnabled"/> </ui:bindTo> </ui:BindPropertyPlugin> </ui:plugins> </ui:StatefulCheckbox> </local:items> </local:ExampleAnnotatedLinkListFormBase>
To add this ExampleAnnotatedLinkListForm
to an existing annotated link list,
it is recommended to write a custom plugin which extends the NestedRulesPlugin
as shown in the
AddExampleConfigurationFormToAnnotatedLinkListPlugin
example. This plugin needs to
be attached to the nearest container above the annotated LinkListGridPanel
.
<?xml version="1.0" encoding="UTF-8"?> <ui:NestedRulesPlugin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:exml="http://www.jangaroo.net/exml/0.8" xmlns="exml:ext.config" xmlns:ui="exml:com.coremedia.ui.config" xmlns:editor="exml:com.coremedia.cms.editor.sdk.config" xmlns:bpforms="exml:com.coremedia.blueprint.studio.config"> <fx:Script><![CDATA[ import com.coremedia.blueprint.studio.forms.containers.FixedIndexConfigurationForm; import com.coremedia.cms.editor.sdk.premular.DocumentTabPanel; public native function AddExampleConfigurationFormToAnnotatedLinkListPlugin( config:AddExampleConfigurationFormToAnnotatedLinkListPlugin = null); protected var componentConfig:DocumentTabPanel; // called by generated constructor code private function __initialize__(config:AddExampleConfigurationFormToAnnotatedLinkListPlugin):void { componentConfig = DocumentTabPanel(config.cmp.initialConfig); } ]]></fx:Script> <ui:rules> <editor:LinkListGridPanel> <editor:plugins exml:mode="append"> <ui:AddArrayItemsPlugin arrayProperty="rowWidgetsAnnotatedPredicates" items="{[ExampleConfigurationForm.isAnnotated]}"/> </editor:plugins> </editor:LinkListGridPanel> <ui:AnnotatedLinkListWidget> <ui:plugins exml:mode="append"> <ui:AddItemsPlugin> <ui:items> <bpforms:ExampleConfigurationForm bindTo="{componentConfig.bindTo}" collapsible="false" forceReadOnlyValueExpression="{componentConfig.forceReadOnlyValueExpression}"/> </ui:items> </ui:AddItemsPlugin> </ui:plugins> </ui:AnnotatedLinkListWidget> </ui:rules> </ui:NestedRulesPlugin>