Fix layout issues. Waste afternoon. Kill Flex.
authorRichard Fairhurst <richard@systemeD.net>
Sun, 4 Mar 2012 18:34:37 +0000 (18:34 +0000)
committerRichard Fairhurst <richard@systemeD.net>
Sun, 4 Mar 2012 18:34:37 +0000 (18:34 +0000)
net/systemeD/potlatch2/skins/CustomFormItemSkin.mxml [new file with mode: 0644]
net/systemeD/potlatch2/skins/CustomFormSkin.mxml [new file with mode: 0644]

diff --git a/net/systemeD/potlatch2/skins/CustomFormItemSkin.mxml b/net/systemeD/potlatch2/skins/CustomFormItemSkin.mxml
new file mode 100644 (file)
index 0000000..f03923e
--- /dev/null
@@ -0,0 +1,161 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ADOBE SYSTEMS INCORPORATED
+Copyright 2010 Adobe Systems Incorporated
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file
+in accordance with the terms of the license agreement accompanying it.
+
+-->
+
+<!-- TODO
+Move the indicator tooltip string to a resource bundle
+-->
+
+<!--- The default skin class for the Spark FormItem component.  
+
+@see spark.components.FormItem
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4.5
+-->
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+        xmlns:s="library://ns.adobe.com/flex/spark" 
+        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+        alpha.disabledStates=".5">  
+    
+    <!-- host component -->
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+        */
+        [HostComponent("spark.components.FormItem")]
+        ]]>
+    </fx:Metadata>
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[                
+            /**
+             *  @private
+             */
+            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+            {
+                // Push backgroundColor and backgroundAlpha directly.
+                // Handle undefined backgroundColor by hiding the background object.
+                if (isNaN(getStyle("backgroundColor")))
+                {
+                    background.visible = false;
+                }
+                else
+                {
+                    background.visible = true;
+                    bgFill.color = getStyle("backgroundColor");
+                    bgFill.alpha = getStyle("backgroundAlpha");
+                }
+                
+                var indicatorSource:Object;
+                if (currentState == "error" || currentState == "requiredAndError")
+                    indicatorSource = getStyle("errorIndicatorSource");
+                else if (currentState == "required" || "requiredAndDisabled")
+                    indicatorSource = getStyle("requiredIndicatorSource");
+                
+                if (indicatorSource && indicatorDisplay)
+                {
+                    indicatorDisplay.source = indicatorSource;
+                }
+                
+                super.updateDisplayList(unscaledWidth, unscaledHeight);
+            }
+            
+            /**
+             *  @private
+             */
+            override public function setCurrentState(stateName:String, playTransition:Boolean=true):void
+            {
+                super.setCurrentState(stateName, playTransition);
+                invalidateDisplayList();
+            }
+        ]]>        
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" stateGroups="disabledStates"/> 
+        <s:State name="error" stateGroups="errorStates"/>   
+        <s:State name="required" stateGroups="requiredStates"/> 
+        <s:State name="requiredAndDisabled" stateGroups="requiredStates, disabledStates"/>
+        <s:State name="requiredAndError" stateGroups="requiredStates, errorStates"/>    
+    </s:states>
+    
+    <s:layout>
+        <s:FormItemLayout>
+            <s:constraintColumns>
+                <!--- The column containing the sequence label. -->
+                <s:ConstraintColumn id="sequenceCol" />
+                <!--- The column containing the FormItem's label. -->
+                <s:ConstraintColumn id="labelCol" />
+                <!--- The column containing the FormItem's content. -->
+                <s:ConstraintColumn id="contentCol" width="100%"/>
+                <!--- The column containing the FormItem's help content. -->
+                <s:ConstraintColumn id="helpCol" maxWidth="200"/>
+            </s:constraintColumns>         
+            <s:constraintRows>
+                <!--- @private -->
+                <s:ConstraintRow id="row1" baseline="maxAscent:0" height="100%"/>
+            </s:constraintRows>  
+        </s:FormItemLayout>
+    </s:layout>
+            
+    <!--- Defines the appearance of the FormItem's background. -->
+    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
+        <s:fill>
+            <!--- @private -->
+            <s:SolidColor id="bgFill" color="#FFFFFF"/>
+        </s:fill>
+    </s:Rect>
+    
+    <!--- @copy spark.components.FormItem#sequenceLabelDisplay -->
+    <s:Label id="sequenceLabelDisplay" 
+             fontWeight="bold"
+             left="sequenceCol:0" right="sequenceCol:5"
+             bottom="row1:0" baseline="row1:0"/>
+    <!--- @copy spark.components.FormItem#labelDisplay -->
+    <s:Label id="labelDisplay"
+             fontWeight="bold"
+             left="labelCol:0" right="labelCol:5" 
+             bottom="row1:0" baseline="row1:0"/>  
+    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+    <!-- Don't show the error tip on the content elements -->
+    <s:Group id="contentGroup" showErrorTip="false" showErrorSkin="true"
+             left="contentCol:0" right="contentCol:1" 
+             baseline="row1:0" bottom="row1:10">
+        <s:layout>
+            <s:VerticalLayout/>
+        </s:layout>
+    </s:Group>
+    <!-- Don't include the indicator in layout since we position it ourselves -->
+    <s:Group x="{contentGroup.x + contentGroup.contentWidth + 4}" y="{contentGroup.y}"
+             height="{Math.max(indicatorDisplay.height, contentGroup.contentHeight)}" includeInLayout="false">
+        <!--- @private -->
+        <s:Image id="indicatorDisplay" verticalCenter="0"
+                       toolTip="Required" toolTip.errorStates=""
+                       includeIn="requiredStates,errorStates"/>
+    </s:Group>
+        
+    <!--- @copy spark.components.FormItem#helpContentGroup -->
+    <s:Group id="helpContentGroup" excludeFrom="errorStates"
+             fontStyle="italic" fontWeight="normal" color="0x666666"
+             left="helpCol:27" right="helpCol:10"
+             bottom="row1:0" baseline="row1:0"/>
+    <!--- @copy spark.components.FormItem#errorTextDisplay -->
+    <s:RichText id="errorTextDisplay" includeIn="errorStates"
+                fontStyle="italic" fontWeight="normal" color="0xFE0000"
+                left="helpCol:27" right="helpCol:10"
+                bottom="row1:0" baseline="row1:0" 
+                maxDisplayedLines="-1"/>    
+ </s:Skin>
\ No newline at end of file
diff --git a/net/systemeD/potlatch2/skins/CustomFormSkin.mxml b/net/systemeD/potlatch2/skins/CustomFormSkin.mxml
new file mode 100644 (file)
index 0000000..b772105
--- /dev/null
@@ -0,0 +1,90 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+ADOBE SYSTEMS INCORPORATED
+Copyright 2010 Adobe Systems Incorporated
+All Rights Reserved.
+
+NOTICE: Adobe permits you to use, modify, and distribute this file
+in accordance with the terms of the license agreement accompanying it.
+
+-->
+
+<!--- The default skin class for a Spark Form container.  
+
+This skin defines a contentGroup for the Form container with a 
+FormLayout as its layout object. The FormLayout is a VerticalLayout
+that has additional logic to align the columns of FormItems.
+
+@see spark.components.Form
+@see spark.layouts.FormLayout
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4.5
+-->
+<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
+        xmlns:s="library://ns.adobe.com/flex/spark" 
+        xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
+        alpha.disabled="0.5">
+    
+    <fx:Metadata>
+        <![CDATA[ 
+        /** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+        */
+        [HostComponent("spark.components.Form")]
+        ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        <![CDATA[         
+            /**
+             *  @private
+             */
+            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+            {
+                // Push backgroundColor and backgroundAlpha directly.
+                // Handle undefined backgroundColor by hiding the background object.
+                if (isNaN(getStyle("backgroundColor")))
+                {
+                    background.visible = false;
+                }
+                else
+                {
+                    background.visible = true;
+                    bgFill.color = getStyle("backgroundColor");
+                    bgFill.alpha = getStyle("backgroundAlpha");
+                }
+                
+                super.updateDisplayList(unscaledWidth, unscaledHeight);
+            }
+        ]]>        
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="error" />
+        <s:State name="disabled" />
+    </s:states>
+    
+    <!--- Defines the appearance of the Form class's background. -->
+    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
+        <s:fill>
+            <!--- @private -->
+            <s:SolidColor id="bgFill" color="#FFFFFF"/>
+        </s:fill>
+    </s:Rect>
+    <!--- @copy spark.components.SkinnableContainer#contentGroup -->
+    <!-- We set Form's showErrorTip and showErrorSkin to false, so we set them back 
+         to true for the Form's elements -->
+    <s:Group id="contentGroup" showErrorSkin="true" showErrorTip="true" 
+             left="0" right="0" top="0" bottom="0">
+        <s:layout>
+            <s:FormLayout gap="0"/>
+        </s:layout>
+    </s:Group>
+    
+    
+</s:Skin>