close

Filter

loading table of contents...

Studio Developer Manual / Version 2107

Table Of Contents

7.21.1.1 Examples

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>
      

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.