Merge remote-tracking branch 'gravitystorm/form-layout' into form-layout
authorRichard Fairhurst <richard@systemeD.net>
Sun, 4 Mar 2012 15:12:48 +0000 (15:12 +0000)
committerRichard Fairhurst <richard@systemeD.net>
Sun, 4 Mar 2012 15:12:48 +0000 (15:12 +0000)
13 files changed:
embedded/tab_transport.png
net/systemeD/potlatch2/TagViewer.mxml
net/systemeD/potlatch2/mapfeatures/editors/CheckboxEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/ChoiceEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/FreeTextEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/NumberEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/RouteEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/SingleTagEditor.as
net/systemeD/potlatch2/mapfeatures/editors/SingleTagEditorFactory.as
net/systemeD/potlatch2/mapfeatures/editors/SliderEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/SpeedEditor.mxml
net/systemeD/potlatch2/mapfeatures/editors/TurnRestrictionEditor.mxml
styles/Application.css

index 5cb7d91cd97172dffc4af6c8ac8c3ea732ebac0e..8c0969071f1b4beb26d8c66cf9667f57b73c1c32 100644 (file)
Binary files a/embedded/tab_transport.png and b/embedded/tab_transport.png differ
index bbca135b9170cd8350fc5cb32be7e6b9a8bf87a3..693bc6569cc53801775f2228a658517d1c946667 100644 (file)
       import net.systemeD.controls.CollapsiblePanel;
 
       import mx.collections.*;
-      import mx.containers.*;
+      import mx.containers.VBox;
+      import mx.containers.HBox;
+      import mx.containers.TabNavigator;
+      import mx.containers.Accordion;
       import mx.events.*;
       import mx.core.*;
       import mx.managers.PopUpManager;
       import mx.managers.DragManager;
       import mx.core.DragSource;
       import mx.controls.TabBar;
+      import spark.components.Form;
+      import spark.layouts.FormLayout;
 //    import flexlib.containers.SuperTabNavigator;
 
       [Bindable] [Embed(source="../../../embedded/tab_basic.png"       )] private var tabIconBasic:Class;
                        // Add to basic editor box first
                        if ( factory.presence.isEditorPresent(factory, selectedEntity, null) ) {
                                var editor:DisplayObject = factory.createEditorInstance(selectedEntity);
-                               if (editor) basicEditorBox.addChild(editor);
+                               if (editor) Form(basicEditorBox.getChildByName("form")).addElement(UIComponent(editor));
                        }
 
                        // Then prepare to add to category panel
                                        subpanel.styleName="subcategoryPanel";
                                        subpanel.title=subcategory;
                                        subpanels[category][subcategory]=subpanel;
+                                       var form:Form = new Form();
+                                       form.name = "form";
+                                       form.layout = getFormLayout();
+                                       subpanel.addChild(form);
                                        tabComponents[tab].push(subpanel);
                                }
-                               subpanel.addChild(catEditor);
+                               Form(subpanel.getChildByName("form")).addElement(UIComponent(catEditor));
                        } else {
                                tabComponents[tab].push(catEditor);
                        }
           box.percentWidth = 100;
           box.percentHeight = 100;
           box.styleName = "dndEditorContainer";
+          var form:Form = new Form();
+          form.name = "form";
+          form.layout = getFormLayout();
+          box.addChild(form);
           return box;
       }
 
           if ( components == null || tab == null || tab.numChildren >= components.length )
               return;
           for each (var component:DisplayObject in components ) {
-              tab.addChild(component);
+              Form(tab.getChildByName("form")).addElement(UIComponent(component));
           }
       }
 
                if (rows!=Math.floor(rows)) { rows=Math.floor(rows+1); }
                event.target.height=rows*(event.target.rowHeight+1);
        }
+
+    private function getFormLayout():FormLayout {
+        var layout:FormLayout = new FormLayout();
+          // This is ugly, and should really be done with a skin. See
+          // http://stackoverflow.com/questions/5126756/flex-spark-form-item-gap
+        layout.gap = -8;
+        return layout;
+    }
   ]]></fx:Script>
 </mx:VBox>
 
index 66b997b416bf563f0dbdea20b21d1636a749e31e..03cbe19e2a552fe6790242a9a8d2fc6caeafc193 100644 (file)
@@ -2,17 +2,17 @@
 <edit:SingleTagEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
-       verticalGap="0"
        width="100%"
        toolTip="{fieldDescription}"
-    direction="horizontal">
+       label="{fieldName}:">
+
+    <mx:CheckBox id="inputBox" creationComplete="initCheckbox()"
+                labelPlacement="right" label=""
+                change="value=toYesNo()" />
 
-       <mx:Label text="{fieldName}:"/>
-       <mx:CheckBox id="inputBox" creationComplete="initCheckbox()"
-                                labelPlacement="right" label=""
-                                change="value=toYesNo()" />
 
   <fx:Script><![CDATA[
   
index cd7489d79567bf6da705d8b40d15e7278b60149f..4bfe220bdae420312986f7f071d2ea98e7336133 100644 (file)
@@ -5,26 +5,26 @@
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        toolTip="{fieldDescription}"
-    direction="{fieldDirection}" styleName="titledEditor">
+       label="{fieldName}:"
+    styleName="titledEditor">
 
-  <mx:Label text="{fieldName}:"/>
-  <s:DropDownList id="inputBox" dataProvider="{choices}" selectedItem="{selectFromTag}"
-      change="value = inputBox.selectedItem.value" labelField="label">
-      <s:itemRenderer>
-        <fx:Component>
-        <mx:HBox toolTip="{data.description}" horizontalScrollPolicy="off">
-          <mx:Image source="{Choice(data).icon}"/>
-          <mx:Label htmlText="{getStyledLabel(Choice(data))}"/>
-                       <fx:Script><![CDATA[
-                             public function getStyledLabel(choice:Choice):String {
-                                 if (choice.value==null) return "<font color='#a0a0a0'><i>"+choice.label+"</i></font>";
-                                 return choice.label;
-                                 }
-                       ]]></fx:Script>
-        </mx:HBox>
-        </fx:Component>
-      </s:itemRenderer>
-  </s:DropDownList>
+    <s:DropDownList id="inputBox" dataProvider="{choices}" selectedItem="{selectFromTag}"
+        change="value = inputBox.selectedItem.value" labelField="label">
+        <s:itemRenderer>
+          <fx:Component>
+          <mx:HBox toolTip="{data.description}" horizontalScrollPolicy="off">
+            <mx:Image source="{Choice(data).icon}"/>
+            <mx:Label htmlText="{getStyledLabel(Choice(data))}"/>
+              <fx:Script><![CDATA[
+                    public function getStyledLabel(choice:Choice):String {
+                        if (choice.value==null) return "<font color='#a0a0a0'><i>"+choice.label+"</i></font>";
+                        return choice.label;
+                    }
+              ]]></fx:Script>
+          </mx:HBox>
+          </fx:Component>
+        </s:itemRenderer>
+    </s:DropDownList>
 
   <fx:Script><![CDATA[
       import mx.collections.*;
index 08ed76e89aec9c188dae89c0fd61c0618858b8a9..d67d91fae92bcfb826433f6270f7991062006f1a 100644 (file)
@@ -2,18 +2,17 @@
 <edit:SingleTagEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        xmlns:controls="net.systemeD.controls.*"
        width="100%"
        toolTip="{fieldDescription}"
-    direction="{fieldDirection}" styleName="titledEditor">
+    styleName="titledEditor" label="{fieldName}:">
 
-  <mx:Label text="{fieldName}:"/>
-  <controls:PromptingTextInputWarning id="inputBox" prompt="{prompt}" text="{value}" width="100%" 
+    <controls:PromptingTextInputWarning id="inputBox" prompt="{prompt}" text="{value}" width="100%"
       focusOut="value = inputBox.text" enter="value = inputBox.text"
       restrict="&#x0020;-&#x10FFFF;" />
-
   <fx:Script><![CDATA[
   
       [Bindable(event="factory_set")]
index ecf87611213e51af28cf10a03ac101b92079a154..7d8261493b26ce71f6e1555528a13224982200da 100644 (file)
@@ -2,26 +2,26 @@
 <edit:SingleTagEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+       xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
-       verticalGap="0"
        width="100%"
        toolTip="{fieldDescription}"
-    direction="{fieldDirection}" styleName="titledEditor">
+       label="{fieldName}:"
+    styleName="titledEditor">
 
-       <mx:Label text="{fieldName}:"/>
-    <mx:HBox horizontalGap="3" verticalAlign="middle">
-        <!-- it would be great if the numericStepper showed something other than zero when unset -->
-           <mx:NumericStepper id="input"
-                 minimum="{minimum}" maximum="{maximum}"
-                 stepSize="{stepSize}"
-                 value="{translatedValue}"
-                 enabled="{isValueValid}"
-                                change="value = input.value.toString()" />
-        <mx:LinkButton label="Clear" click="clear()" enabled="{isValueClearable}" />
-        <mx:Label text="{prompt}" visible="{value == null || value == ''}" includeInLayout="{value == null || value == ''}" styleName="promptText"/>
-        <mx:Label text="{warning}" visible="{!isValueValid}" includeInLayout="{!isValueValid}" styleName="warningText" />
-    </mx:HBox>
+      <mx:HBox horizontalGap="3" verticalAlign="middle">
+          <!-- it would be great if the numericStepper showed something other than zero when unset -->
+          <mx:NumericStepper id="input"
+                  minimum="{minimum}" maximum="{maximum}"
+                  stepSize="{stepSize}"
+                  value="{translatedValue}"
+                  enabled="{isValueValid}"
+                  change="value = input.value.toString()" />
+          <mx:LinkButton label="Clear" click="clear()" enabled="{isValueClearable}" />
+          <mx:Label text="{prompt}" visible="{value == null || value == ''}" includeInLayout="{value == null || value == ''}" styleName="promptText"/>
+          <mx:Label text="{warning}" visible="{!isValueValid}" includeInLayout="{!isValueValid}" styleName="warningText" />
+      </mx:HBox>
 
   <fx:Script><![CDATA[
     [Bindable(event="factory_set")]
index cfd4a9c0a8f9117b8bb3859d40337bb90ca15d31..1a8ea2ef4a200a572a78b8f7fa99e17f9015146a 100644 (file)
@@ -2,6 +2,7 @@
 <edit:RelationMemberEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        verticalGap="0"
@@ -9,7 +10,7 @@
        toolTip="{fieldDescription}"
        initialize="addRoutes()">
 
-  <mx:Label text="{fieldName}:"/>
+  <s:FormHeading label="{fieldName}"/>
   <mx:VBox verticalGap="0" width="100%" id="routeIcons"/>
   <mx:LinkButton label="Add to a route" click="addToRelation()" />
 
index d28e869a595b1b6a98d38911eb54f586a21c8df7..60df3b8ec1acd6e56f7516eb6adcdf0982dae4a0 100644 (file)
@@ -2,10 +2,10 @@ package net.systemeD.potlatch2.mapfeatures.editors {
 
     import net.systemeD.halcyon.connection.*;
     import net.systemeD.potlatch2.mapfeatures.*;
-    import mx.containers.Box;
+    import spark.components.FormItem;
     import flash.events.*;
 
-    public class SingleTagEditor extends Box {
+    public class SingleTagEditor extends FormItem {
 
       protected var _factory:SingleTagEditorFactory;
       protected var _entity:Entity;
index 2638b115df2d7f2825ba521b54f1833d36ee95f5..78b96090e6682da8f7f07079255f99bfa75642be 100644 (file)
@@ -24,7 +24,7 @@ package net.systemeD.potlatch2.mapfeatures.editors {
         }
         
         public function get direction():String {
-            return boxDirection;
+            return "ltr";
         }
         
         override public function createEditorInstance(entity:Entity):DisplayObject {
index e878850be5bbf988b146c9a56865381fff5894a2..ba17e6a8ab1fd8f7ef6d2d1428beefde81045568 100644 (file)
@@ -2,22 +2,22 @@
 <edit:SingleTagEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
-       verticalGap="0"
        width="100%"
        toolTip="{fieldDescription}"
-    direction="horizontal" styleName="titledEditor">
+       label="{fieldName}:"
+       styleName="titledEditor">
 
-       <mx:Label text="{fieldName}:"/>
-       <mx:HSlider id="inputSlider"
-                 minimum="{sliderMinimum}" maximum="{sliderMaximum}"
-                 snapInterval="{sliderSnapInterval}" tickInterval="{sliderSnapInterval}"
-                 labels="{sliderLabels}" dataTipFormatFunction="formatDataTip"
-                 value="{translatedValue}"
-                 enabled="{isValueValid}"
-                 liveDragging="true"
-                                change="setTagValueFromSlider()" />
+    <mx:HSlider id="inputSlider"
+                minimum="{sliderMinimum}" maximum="{sliderMaximum}"
+                snapInterval="{sliderSnapInterval}" tickInterval="{sliderSnapInterval}"
+                labels="{sliderLabels}" dataTipFormatFunction="formatDataTip"
+                value="{translatedValue}"
+                enabled="{isValueValid}"
+                liveDragging="true"
+                change="setTagValueFromSlider()" />
 
   <fx:Script><![CDATA[
 
index de780161a0e2e65ff635c9aa76cab4266f0dd81c..39450d6ae6711e845bfcaa0bb3f86ae8579508ce 100644 (file)
@@ -4,16 +4,18 @@
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        toolTip="{fieldDescription}"
-       direction="horizontal" styleName="titledEditor">
+       label="{fieldName}:"
+    styleName="titledEditor">
 
-  <mx:Label text="{fieldName}:"/>
-  <edit:ChoiceComboBox id="inputBox" dataProvider="{choices}" selectedItem="{selectFromTag}"
-      dropdownFactory="mx.controls.TileList"
-      change="value = inputBox.selectedItem.value"
-      itemRenderer="net.systemeD.potlatch2.mapfeatures.editors.RestrictionRenderer"
-      dropdownWidth="250" rowCount="4"
-      fontWeight="normal">
-  </edit:ChoiceComboBox>
+  <mx:VBox> <!-- This wrapper shouldn't be necessary, but without it the layout goes nuts -->
+    <edit:ChoiceComboBox id="inputBox" dataProvider="{choices}" selectedItem="{selectFromTag}"
+        dropdownFactory="mx.controls.TileList"
+        change="value = inputBox.selectedItem.value"
+        itemRenderer="net.systemeD.potlatch2.mapfeatures.editors.RestrictionRenderer"
+        dropdownWidth="250" rowCount="4"
+        fontWeight="normal">
+    </edit:ChoiceComboBox>
+  </mx:VBox>
 
   <fx:Script><![CDATA[
       import mx.collections.*;
index 27c7f2f3b701288e3c2b75f6d0da529bdc3a1a0c..3b770ffca2e543df7059cd506ac21d0b73392c7a 100644 (file)
@@ -2,16 +2,17 @@
 <edit:RelationMemberEditor
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/mx"
+    xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:edit="net.systemeD.potlatch2.mapfeatures.editors.*"
        xmlns:flexlib="flexlib.controls.*"
        verticalGap="0"
        width="100%"
        toolTip="{fieldDescription}"
+       label="{fieldName}:"
        initialize="addTurnRestrictions()">
 
-  <mx:Label text="{fieldName}:"/>
-  <mx:VBox verticalGap="0" width="100%" id="turnRestrictionIcons"/>
-  <mx:LinkButton label="Add new turn restriction" click="addNewTurnRestriction()" />
+    <mx:VBox verticalGap="0" width="100%" id="turnRestrictionIcons"/>
+    <mx:LinkButton label="Add new turn restriction" click="addNewTurnRestriction()" />
 
   <fx:Script><![CDATA[
        import net.systemeD.halcyon.connection.*;
index 6481249a62804c02b76da930af550f2ca928cea5..87bc9760db52ed6503f06f24299433f502539a37 100644 (file)
@@ -59,6 +59,10 @@ mx|Label {
        fontWeight: normal;
 }
 
+s|FormItem s|Label#labelDisplay {
+    textAlign: right;
+}
+
 /* Main window */
 
 mx|Application {