#26 form element validation: studio implementation

tallence · Aug 10, 2019 · 108ca9f · 108ca9f
1 parent 8ab9780
commit 108ca9f
Show file tree

Hide file tree

Showing 20 changed files with 462 additions and 80 deletions.
diff --git a/form-editor-studio-plugin/pom.xml b/form-editor-studio-plugin/pom.xml
@@ -41,6 +41,12 @@
       <type>swc</type>
     </dependency>
 
+    <dependency>
+      <groupId>com.coremedia.blueprint.base</groupId>
+      <artifactId>bpbase-studio-dynamic-query-list</artifactId>
+      <type>swc</type>
+    </dependency>
+
   </dependencies>
 
 

diff --git a/...tudio-plugin/src/main/joo/com/tallence/formeditor/studio/AppliedFormElementContainer.mxml b/...tudio-plugin/src/main/joo/com/tallence/formeditor/studio/AppliedFormElementContainer.mxml
@@ -1,14 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <local:AppliedFormElementsContainerBase
-    xmlns:fx="http://ns.adobe.com/mxml/2009"
-    xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
-    xmlns="exml:ext.config"
-    xmlns:exml="http://www.jangaroo.net/exml/0.8"
-    xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
-    xmlns:dragdrop="com.tallence.formeditor.studio.dragdrop.*"
-    xmlns:local="com.tallence.formeditor.studio.*"
-    xmlns:u="exml:untyped"
-    xmlns:ui="exml:com.coremedia.ui.config">
+        xmlns:fx="http://ns.adobe.com/mxml/2009"
+        xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
+        xmlns="exml:ext.config"
+        xmlns:exml="http://www.jangaroo.net/exml/0.8"
+        xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
+        xmlns:dragdrop="com.tallence.formeditor.studio.dragdrop.*"
+        xmlns:local="com.tallence.formeditor.studio.*"
+        xmlns:u="exml:untyped"
+        xmlns:ui="exml:com.coremedia.ui.config"
+        xmlns:plugins="com.tallence.formeditor.studio.plugins.*"
+        xmlns:components="com.tallence.formeditor.studio.components.*">
 
   <fx:Script><![CDATA[
     public static const xtype:String = "com.tallence.formeditor.studio.config.appliedFormElementContainer";
@@ -21,11 +23,11 @@
 
   <local:items>
     <!-- We need to overwrite the collapsedCls. Otherwise the header would have a transparent background.  -->
-    <editor:CollapsiblePanel margin="10 15 0 10"
+    <components:StateFulCollapsiblePanel margin="10 15 0 10"
                              itemId="{FORM_ELEMENT_PANEL}"
                              collapsedCls="collapsed-form-element"
                              animCollapse="false">
-      <editor:plugins>
+      <components:plugins>
         <ui:BindPropertyPlugin bidirectional="false"
                                componentProperty="collapsed"
                                transformer="{collapsedTransformer}"
@@ -35,12 +37,13 @@
                                ifUndefined="{getTitleUndefinedValue(config.formElement)}"
                                transformer="{titleTransformer}"
                                bindTo="{config.formElement.getFormElementVE().extendBy('name')}"/>
-      </editor:plugins>
-      <editor:items>
+        <plugins:ShowFormIssuesPlugin issuesVE="{config.formElement.getFormIssuesVE()}"/>
+      </components:plugins>
+      <components:items>
         <!-- The form element editor is added dynamically bye the
         {@link com.coremedia.ui.util.IReusableComponentsService} -->
-      </editor:items>
-      <editor:header>
+      </components:items>
+      <components:header>
         <!--Using focusableContainer(cm9-17 style) and enableFocusableContainer(cm9-18 style) to be compatible with all cm9-versions-->
         <Header titlePosition="2.0"
                 itemId="{FORM_ELEMENT_HEADER}"
@@ -60,12 +63,12 @@
             </ui:IconButton>
           </items>
         </Header>
-      </editor:header>
-    </editor:CollapsiblePanel>
+      </components:header>
+    </components:StateFulCollapsiblePanel>
     <dragdrop:FormElementDropContainer formElementsManager="{config.formElementsManager}"
                                        formElementId="{config.formElement.getId()}"
                                        forceReadOnlyValueExpression="{config.forceReadOnlyValueExpression}"/>
 
   </local:items>
 
-</local:AppliedFormElementsContainerBase>
+</local:AppliedFormElementsContainerBase>
diff --git a/form-editor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/FormsStudioPlugin.mxml b/form-editor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/FormsStudioPlugin.mxml
@@ -8,6 +8,8 @@
     xmlns:local="com.tallence.formeditor.studio.*"
     xmlns:bpb-components="exml:com.coremedia.blueprint.base.components.config" xmlns:ui="exml:com.coremedia.ui.config">
   <fx:Metadata>
+    [ResourceBundle('com.tallence.formeditor.studio.bundles.FormContentTypes')]
+    [ResourceBundle('com.coremedia.blueprint.base.queryeditor.QueryEditor')]
     [ResourceBundle('com.coremedia.cms.editor.ContentTypes')]
     [ResourceBundle('com.coremedia.cms.editor.sdk.validation.Validators')]
     [ResourceBundle('com.coremedia.cms.editor.sdk.actions.Actions')]
@@ -18,12 +20,6 @@
 
     public static const xtype:String = "com.tallence.formeditor.studio.config.formsStudioPlugin";
 
-    private var config:FormsStudioPlugin;
-
-    // called by generated constructor code
-    private function __initialize__(config:FormsStudioPlugin):void {
-    }
-
     public native function FormsStudioPlugin(config:FormsStudioPlugin = null);
     ]]></fx:Script>
 

diff --git a/...io-plugin/src/main/joo/com/tallence/formeditor/studio/bundles/FormContentTypes.properties b/...io-plugin/src/main/joo/com/tallence/formeditor/studio/bundles/FormContentTypes.properties
@@ -8,4 +8,11 @@ FormEditor_formData_text=Form-Settings
 FormEditor_spamProtectionEnabled_text=activate spam protection
 FormEditor_spamProtectionEnabled_true_text=activate spam protection
 FormEditor_spamProtectionEnabled_group_text=Spam protection
-FormEditor_icon=tallence-icons tallence-icons--form
+FormEditor_icon=tallence-icons tallence-icons--form
+
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.name_text=Name
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.hint_text=Hint
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.linkTarget_text=Consent Form
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.groupElements_text=Check-, Radio-Boxes
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.validator.maxSize_text=Max. Characters
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.validator.minSize_text=Min. Characters
diff --git a/...plugin/src/main/joo/com/tallence/formeditor/studio/bundles/FormContentTypes_de.properties b/...plugin/src/main/joo/com/tallence/formeditor/studio/bundles/FormContentTypes_de.properties
@@ -7,4 +7,10 @@ FormEditor_formAction_group_text=Formular-Ziel
 FormEditor_formData_text=Formular-Einstellungen
 FormEditor_spamProtectionEnabled_text=Spam-Schutz aktivieren
 FormEditor_spamProtectionEnabled_true_text=Spam-Schutz aktivieren
-FormEditor_spamProtectionEnabled_group_text=Spam-Schutz
+FormEditor_spamProtectionEnabled_group_text=Spam-Schutz
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.name_text=Name
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.hint_text=Hinweis
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.linkTarget_text=Einverst\u00E4ndniserkl\u00E4rung
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.groupElements_text=Check-, Radio-Boxes
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.validator.maxSize_text=Max. Zeichen
+FormEditor_localSettings.formElements.{formElementId\:[0-9]+}.validator.minSize_text=Min. Zeichen
diff --git a/...ugin/src/main/joo/com/tallence/formeditor/studio/components/StateFulCollapsiblePanel.mxml b/...ugin/src/main/joo/com/tallence/formeditor/studio/components/StateFulCollapsiblePanel.mxml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<local:StateFulCollapsiblePanelBase xmlns:fx="http://ns.adobe.com/mxml/2009"
+                                    xmlns:local="com.tallence.formeditor.studio.components.*">
+
+  <fx:Script><![CDATA[
+    public native function StateFulCollapsiblePanel(config:StateFulCollapsiblePanel = null);
+    ]]>
+    </fx:Script>
+
+</local:StateFulCollapsiblePanelBase>
diff --git a/...in/src/main/joo/com/tallence/formeditor/studio/components/StateFulCollapsiblePanelBase.as b/...in/src/main/joo/com/tallence/formeditor/studio/components/StateFulCollapsiblePanelBase.as
@@ -0,0 +1,61 @@
+/*
+ * Copyright 2018 Tallence AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package com.tallence.formeditor.studio.components {
+import com.coremedia.cms.editor.sdk.premular.CollapsiblePanel;
+import com.coremedia.ui.mixins.IHighlightableMixin;
+import com.coremedia.ui.mixins.IValidationStateMixin;
+import com.coremedia.ui.mixins.ValidationState;
+
+/**
+ * This component extends the {@link CollapsiblePanel} and implements the {@link IValidationStateMixin} and
+ * {@link IHighlightableMixin} interface to display a validation state.
+ */
+public class StateFulCollapsiblePanelBase extends CollapsiblePanel implements IValidationStateMixin, IHighlightableMixin {
+
+  public function StateFulCollapsiblePanelBase(config:StateFulCollapsiblePanel = null) {
+    super(config);
+    this.initValidationStateMixin();
+  }
+
+  /** @inheritDoc */
+  public native function initValidationStateMixin():void;
+
+  /** @private */
+  [Bindable(event="DUMMY")]
+  public native function set validationState(validationState:ValidationState):void;
+
+  /** @private */
+  [Bindable(event="DUMMY")]
+  public native function set validationMessage(validationMessage:String):void;
+
+  /** @inheritDoc */
+  [Bindable(event="DUMMY")]
+  public native function get validationState():ValidationState;
+
+  /** @inheritDoc */
+  [Bindable(event="DUMMY")]
+  public native function get validationMessage():String;
+
+  /** @private */
+  [Bindable(event="DUMMY")]
+  public native function set highlighted(newHighlighted:Boolean):void;
+
+  /** @inheritDoc */
+  [Bindable(event="DUMMY")]
+  public native function get highlighted():Boolean;
+}
+}
diff --git a/...udio-plugin/src/main/joo/com/tallence/formeditor/studio/elements/AbstractFormElement.mxml b/...udio-plugin/src/main/joo/com/tallence/formeditor/studio/elements/AbstractFormElement.mxml
@@ -30,15 +30,14 @@
     [Bindable]
     public var formElement:FormElementStructWrapper;
 
-    private var config:AbstractFormElement;
-
     public native function AbstractFormElement(config:AbstractFormElement = null);
     ]]>
     </fx:Script>
   <local:defaults>
     <fields:FormEditorField bindTo="{getBindTo()}"
                             forceReadOnlyValueExpression="{getForceReadOnlyVE()}"
-                            formElementStructVE="{getFormElementStructVE()}"/>
+                            formElementStructVE="{getFormElementStructVE()}"
+                            formIssuesVE="{getFormIssuesVE()}"/>
   </local:defaults>
 
-</local:AbstractFormElementBase>
+</local:AbstractFormElementBase>
diff --git a/...io-plugin/src/main/joo/com/tallence/formeditor/studio/elements/AbstractFormElementBase.as b/...io-plugin/src/main/joo/com/tallence/formeditor/studio/elements/AbstractFormElementBase.as
@@ -34,6 +34,7 @@ public class AbstractFormElementBase extends Container implements FormElement {
   private var formElementStructVE:ValueExpression;
   private var bindTo:ValueExpression;
   private var forceReadOnlyValueExpression:ValueExpression;
+  private var formIssuesVE:ValueExpression;
 
   public function AbstractFormElementBase(config:AbstractFormElement = null) {
     if (!config.formElementType) {
@@ -63,6 +64,7 @@ public class AbstractFormElementBase extends Container implements FormElement {
     formElementStructVE = wrapper.getFormElementVE();
     bindTo = wrapper.getBindTo();
     forceReadOnlyValueExpression = wrapper.getForceReadOnlyValueExpression();
+    formIssuesVE = wrapper.getFormIssuesVE();
     fireEvent(FORM_ELEMENT_UPDATE_EVT);
   }
 
@@ -118,5 +120,22 @@ public class AbstractFormElementBase extends Container implements FormElement {
       return new ValueExpressionValueHolder(forceReadOnlyValueExpression);
     });
   }
+
+  /**
+   * Since the editors for form elements are reused, the component is created without a
+   * form issues value expression. As soon as the method updateFormElementStructWrapper is called and
+   * the form element is updated, a new value expression is returned. This is necessary so that the binding to the
+   * correct formIssuesVE works after the update.
+   */
+  public function getFormIssuesVE():ValueExpression {
+    if (!formIssuesVE) {
+      formIssuesVE = ValueExpressionFactory.createFromValue([]);
+    }
+    var self:AbstractFormElementBase = this;
+    return ValueExpressionFactory.createFromFunction(function ():ValueExpressionValueHolder {
+      DependencyTracker.dependOnObservable(self, FORM_ELEMENT_UPDATE_EVT);
+      return new ValueExpressionValueHolder(formIssuesVE);
+    });
+  }
+}
 }
-}
diff --git a/...itor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/AddOptionField.mxml b/...itor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/AddOptionField.mxml
@@ -1,11 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <fields:AddOptionFieldBase
-    xmlns:fx="http://ns.adobe.com/mxml/2009"
-    xmlns="exml:ext.config"
-    xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
-    xmlns:ui="exml:com.coremedia.ui.config"
-    xmlns:fields="com.tallence.formeditor.studio.fields.*"
-    xmlns:elements="exml:com.tallence.formeditor.studio.config">
+        xmlns:fx="http://ns.adobe.com/mxml/2009"
+        xmlns="exml:ext.config"
+        xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
+        xmlns:ui="exml:com.coremedia.ui.config"
+        xmlns:fields="com.tallence.formeditor.studio.fields.*"
+        xmlns:elements="exml:com.tallence.formeditor.studio.config"
+        xmlns:plugins="com.tallence.formeditor.studio.plugins.*">
 
   <fx:Script><![CDATA[
     public static const xtype:String = "com.tallence.formeditor.studio.editor.fields.addOptionField";
@@ -21,22 +22,24 @@
       <items>
         <FieldContainer fieldLabel="{config.fieldLabel}">
           <items>
-            <TextField width="240"
-                       fieldLabel="{resourceManager.getString('com.tallence.formeditor.studio.bundles.FormEditor', 'FormEditor_text_add_option')}">
-              <plugins>
+            <ui:StatefulTextField width="240"
+                                  fieldLabel="{resourceManager.getString('com.tallence.formeditor.studio.bundles.FormEditor', 'FormEditor_text_add_option')}">
+              <ui:plugins>
                 <editor:BindDisablePlugin bindTo="{config.bindTo}"
                                           forceReadOnlyValueExpression="{config.forceReadOnlyValueExpression}"/>
                 <ui:BindPropertyPlugin bidirectional="true"
                                        skipIfUndefined="true"
                                        bindTo="{getAddOptionVE()}"/>
-              </plugins>
-            </TextField>
+                <plugins:ShowFormIssuesPlugin issuesVE="{config.formIssuesVE}"
+                                              propertyName="{config.propertyName}"/>
+              </ui:plugins>
+            </ui:StatefulTextField>
           </items>
         </FieldContainer>
         <ui:IconButton
-            iconCls="{resourceManager.getString('com.coremedia.cms.editor.Editor', 'LinkListPropertyField_icon')}"
-            ariaLabel="{resourceManager.getString('com.tallence.formeditor.studio.bundles.FormEditor', 'FormEditor_text_add_option')}"
-            handler="{addGroupElement}">
+                iconCls="{resourceManager.getString('com.coremedia.cms.editor.Editor', 'LinkListPropertyField_icon')}"
+                ariaLabel="{resourceManager.getString('com.tallence.formeditor.studio.bundles.FormEditor', 'FormEditor_text_add_option')}"
+                handler="{addGroupElement}">
           <ui:plugins>
             <editor:BindDisablePlugin bindTo="{config.bindTo}"
                                       forceReadOnlyValueExpression="{config.forceReadOnlyValueExpression}"/>
@@ -61,4 +64,4 @@
     </Container>
   </fields:items>
 
-</fields:AddOptionFieldBase>
+</fields:AddOptionFieldBase>
diff --git a/...tor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/FormEditorField.mxml b/...tor-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/FormEditorField.mxml
@@ -1,16 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <fields:FormEditorFieldBase
-    xmlns:fx="http://ns.adobe.com/mxml/2009"
-    xmlns="exml:ext.config"
-    xmlns:fields="com.tallence.formeditor.studio.fields.*"
-    margin="10 0 0 0">
+        xmlns:fx="http://ns.adobe.com/mxml/2009"
+        xmlns="exml:ext.config"
+        xmlns:fields="com.tallence.formeditor.studio.fields.*"
+        margin="10 0 0 0">
   <fx:Script><![CDATA[
     import com.coremedia.ui.data.ValueExpression;
 
     public static const xtype:String = "com.tallence.formeditor.studio.editor.fields.formEditorField";
 
-    private var config:FormEditorField;
-
     /**
      * A value expression that is evaluated for the associated struct of the form element.
      */
@@ -41,8 +39,15 @@
     [Bindable]
     public var forceReadOnlyValueExpression:ValueExpression;
 
+    /**
+     * A value expression which contains all issues for the form element. This value expression is used by the
+     * {@link com.tallence.formeditor.studio.plugins.ShowFormIssuesPlugin} to display validation states and messages.
+     */
+    [Bindable]
+    public var formIssuesVE:ValueExpression;
+
     public native function FormEditorField(config:FormEditorField = null);
     ]]>
   </fx:Script>
 
-</fields:FormEditorFieldBase>
+</fields:FormEditorFieldBase>
diff --git a/...-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/LinkedContentField.mxml b/...-studio-plugin/src/main/joo/com/tallence/formeditor/studio/fields/LinkedContentField.mxml
@@ -1,12 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <fields:LinkedContentFieldBase
-    xmlns:fx="http://ns.adobe.com/mxml/2009"
-    xmlns="exml:ext.config"
-    xmlns:exml="http://www.jangaroo.net/exml/0.8"
-    xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
-    xmlns:fields="com.tallence.formeditor.studio.fields.*"
-    xmlns:container="ext.layout.container.*"
-    width="100%">
+        xmlns:fx="http://ns.adobe.com/mxml/2009"
+        xmlns="exml:ext.config"
+        xmlns:exml="http://www.jangaroo.net/exml/0.8"
+        xmlns:editor="exml:com.coremedia.cms.editor.sdk.config"
+        xmlns:fields="com.tallence.formeditor.studio.fields.*"
+        xmlns:container="ext.layout.container.*"
+        xmlns:plugins="com.tallence.formeditor.studio.plugins.*"
+        width="100%">
 
   <fx:Script><![CDATA[
     public static const xtype:String = "com.tallence.formeditor.studio.editor.fields.linkedContentField";
@@ -26,6 +27,8 @@
       <editor:plugins exml:mode="append">
         <editor:BindDisablePlugin bindTo="{config.bindTo}"
                                   forceReadOnlyValueExpression="{config.forceReadOnlyValueExpression}"/>
+        <plugins:ShowFormIssuesPlugin issuesVE="{config.formIssuesVE}"
+                                      propertyName="{config.propertyName}"/>
       </editor:plugins>
     </editor:SingleLinkEditor>
   </fields:items>