You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/11/16 14:07:06 UTC

[royale-asjs] branch develop updated: -remove wizardlayout in favor of css layout config -formitem and heading label changes -improve wizard layout and example -some cleaning of code

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 719e9ad  -remove wizardlayout in favor of css layout config -formitem and heading label changes -improve wizard layout and example -some cleaning of code
719e9ad is described below

commit 719e9adad3c59698f5359130b171d3c9158c6c73
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Nov 16 15:06:58 2018 +0100

    -remove wizardlayout in favor of css layout config
    -formitem and heading label changes
    -improve wizard layout and example
    -some cleaning of code
---
 .../src/main/royale/FormsValidationPlayGround.mxml |  88 +---------------
 .../src/main/royale/WizardPlayGround.mxml          |  45 ++++++--
 .../src/main/royale/components/FormExample.mxml    | 112 ++++++++++++++++++++
 .../projects/Jewel/src/main/resources/defaults.css |   8 +-
 .../projects/Jewel/src/main/royale/JewelClasses.as |  17 +--
 .../royale/org/apache/royale/jewel/FormHeading.as  | 116 ++++++++++-----------
 .../royale/org/apache/royale/jewel/FormItem.as     |   4 +-
 .../beads/controllers/DropDownListController.as    |   1 -
 .../jewel/beads/controllers/WizardController.as    |   3 +-
 .../royale/jewel/beads/layouts/WizardLayout.as     |  51 ---------
 .../royale/jewel/beads/views/FormHeadingView.as    |  11 ++
 .../royale/jewel/beads/views/FormItemView.as       |  15 ++-
 .../apache/royale/jewel/beads/views/WizardView.as  |  11 +-
 .../Jewel/src/main/sass/components/_wizard.sass    |   8 +-
 14 files changed, 257 insertions(+), 233 deletions(-)

diff --git a/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
index 2aea9d4..ad05795 100644
--- a/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
@@ -20,93 +20,13 @@ limitations under the License.
 <j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
 				  xmlns:j="library://ns.apache.org/royale/jewel"
 				  xmlns:js="library://ns.apache.org/royale/basic"
-				  xmlns:html="library://ns.apache.org/royale/html"
-				  xmlns:models="models.*">
+				  xmlns:html="library://ns.apache.org/royale/html" 
+				  xmlns:components="components.*">
 				  
-	<fx:Script>
-		<![CDATA[
-			import org.apache.royale.utils.StringPadder;
-			import org.apache.royale.jewel.Alert;
-
-			[Bindable]
-			public var randomCode:String = StringPadder.pad(String(Math.round(Math.random() * 10000)), "0", 5);
-
-            public function customValidate(host:TextInput):String {
-				return (host.text == randomCode) ? "" : "The entered code doesn't match " + randomCode;
-            }
-
-            public function doSubmit(event:Event):void {
-				Alert.show("Data is valid submitted", "Sending Form!");
-            }
-		]]>
-	</fx:Script>
-
-	<j:beads>
-        <js:ContainerDataBinding/>
-    </j:beads>
-
-	<j:model>
-        <models:ListsModel id="listModel"/>
-	</j:model>
-
 	<j:Card width="600">
 		<html:H3 text="Jewel Form And Validators"/>
 
-		<j:Form valid="doSubmit(event)">
-			<j:beads>
-				<j:FormValidator trigger="{btn}" triggerEvent="click" requiredFieldError="There are invalid data, please check it."/>
-			</j:beads>
-			
-			<j:FormHeading label="Form with validation example"/>
-
-			<j:FormItem label="Your name" required="true">
-				<j:TextInput>
-					<j:beads>
-						<j:TextPrompt prompt="Name"/>
-						<j:StringValidator required="3" autoTrim="true" requiredFieldError="Need more than 3 characters"/>
-					</j:beads>
-				</j:TextInput>
-			</j:FormItem>
-
-			<j:FormItem label="Your born date" required="true">
-				<j:DateField>
-					<j:beads>
-						<j:DateValidator requiredFieldError="The value is not a valid date"/>
-					</j:beads>
-				</j:DateField>
-			</j:FormItem>
-
-			<j:FormItem label="Your Favorite Avenger" required="true">
-				<j:ComboBox labelField="label" dataProvider="{listModel.avengers}">
-					<j:beads>
-						<j:SelectedItemNullValidator requiredFieldError="You must to select one value from the list"/>
-					</j:beads>
-				</j:ComboBox>
-			</j:FormItem>
-
-			<j:FormItem label="Favorite movies (at least 2)" required="true">
-				<j:VGroup gap="3">
-					<j:beads>
-						<j:CheckBoxValidator required="2" requiredFieldError="Please choose at least 2 movies"/>
-					</j:beads>
-					<j:CheckBox text="The Godfather"/>
-					<j:CheckBox text="Scent of a woman"/>
-					<j:CheckBox text="Star Wars"/>
-					<j:CheckBox text="The Shawshank Redemption"/>
-				</j:VGroup>
-			</j:FormItem>
-
-			<j:FormItem label="Verification code: {randomCode}" required="true">
-				<j:HGroup gap="3">
-					<j:TextInput>
-						<j:beads>
-							<j:TextPrompt prompt="Enter Verification Code"/>
-							<j:StringValidator validateFunction="{customValidate}"/>
-						</j:beads>
-					</j:TextInput>
-					<j:Button id="btn" text="send" emphasis="primary"/>
-				</j:HGroup>
-			</j:FormItem>
-		</j:Form>
+		<components:FormExample label="Form with validation example"/>
+		
 	</j:Card>
 </j:SectionContent>
diff --git a/examples/royale/JewelExample/src/main/royale/WizardPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/WizardPlayGround.mxml
index 2766bec..c4f1316 100644
--- a/examples/royale/JewelExample/src/main/royale/WizardPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/WizardPlayGround.mxml
@@ -20,7 +20,8 @@ limitations under the License.
 <j:SectionContent xmlns:fx="http://ns.adobe.com/mxml/2009"
 		xmlns:j="library://ns.apache.org/royale/jewel"
 		xmlns:js="library://ns.apache.org/royale/basic"
-		xmlns:html="library://ns.apache.org/royale/html">
+		xmlns:html="library://ns.apache.org/royale/html"
+		xmlns:components="components.*">
 
 	<fx:Script>
 		<![CDATA[
@@ -35,7 +36,7 @@ limitations under the License.
 	<j:Card width="600">
 		<html:H3 text="Wizard Example"/>
 
-		<j:Wizard id="wizard" >
+		<j:Wizard id="wizard" width="100%" height="400">
 			<j:previousButton>
 				<j:IconButton emphasis="{Button.SECONDARY}">
 					<j:icon>
@@ -56,35 +57,65 @@ limitations under the License.
 				<views:step>
 					<j:WizardStep name="page1" nextStep="page2" initialPage="true"/>
 				</views:step>
-				<j:Label text="Page 1"/>
+				
+				<components:FormExample label="Page 1"/>
+
 			</j:WizardPage>
 			
 			<j:WizardPage id="page2">
 				<views:step>
 					<j:WizardStep name="page2" previousStep="page1" nextStep="page3"/>
 				</views:step>
-				<j:Label text="Page 2"/>
+				
+				<j:Group>
+					<j:beads>
+						<j:VerticalCenteredLayout gap="9"/>
+					</j:beads>
+					<html:H1 text="Page 2"/>
+				</j:Group>
+
 			</j:WizardPage>
 			
 			<j:WizardPage id="page3">
 				<views:step>
 					<j:WizardStep name="page3" previousStep="page2" nextStep="page4"/>
 				</views:step>
-				<j:Label text="Page 3"/>
+				
+				<j:Group>
+					<j:beads>
+						<j:VerticalCenteredLayout gap="9"/>
+					</j:beads>
+					<html:H1 text="Page 3"/>
+				</j:Group>
+
 			</j:WizardPage>
 			
 			<j:WizardPage id="page4">
 				<views:step>
 					<j:WizardStep name="page4" previousStep="page3" nextStep="page5"/>
 				</views:step>
-				<j:Label text="Page 4"/>
+				
+				<j:Group>
+					<j:beads>
+						<j:VerticalCenteredLayout gap="9"/>
+					</j:beads>
+					<html:H1 text="Page 4"/>
+				</j:Group>
+
 			</j:WizardPage>
 			
 			<j:WizardPage id="page5">
 				<views:step>
 					<j:WizardStep name="page5" previousStep="page4"/>
 				</views:step>
-				<j:Label text="Page 5"/>
+				
+				<j:Group>
+					<j:beads>
+						<j:VerticalCenteredLayout gap="9"/>
+					</j:beads>
+					<html:H1 text="Page 5"/>
+				</j:Group>
+
 			</j:WizardPage>
 		</j:Wizard>
 	</j:Card>
diff --git a/examples/royale/JewelExample/src/main/royale/components/FormExample.mxml b/examples/royale/JewelExample/src/main/royale/components/FormExample.mxml
new file mode 100644
index 0000000..50ef8b5
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/components/FormExample.mxml
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You 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.
+
+-->
+<j:Form xmlns:fx="http://ns.adobe.com/mxml/2009"
+        xmlns:j="library://ns.apache.org/royale/jewel"
+        xmlns:js="library://ns.apache.org/royale/basic"
+        xmlns:html="library://ns.apache.org/royale/html"
+        xmlns:models="models.*"
+        valid="doSubmit(event)">
+
+    <fx:Script>
+		<![CDATA[
+			import org.apache.royale.jewel.Alert;
+			import org.apache.royale.utils.StringPadder;
+
+			[Bindable]
+            /**
+             * @royalesuppresspublicvarwarning
+             */
+			public var randomCode:String = StringPadder.pad(String(Math.round(Math.random() * 10000)), "0", 5);
+
+            public function customValidate(host:TextInput):String {
+				return (host.text == randomCode) ? "" : "The entered code doesn't match " + randomCode;
+            }
+
+            public function doSubmit(event:Event):void {
+				Alert.show("Data is valid submitted", "Sending Form!");
+            }
+            
+            /**
+             * @royalesuppresspublicvarwarning
+             */
+            public var label:String = "";
+		]]>
+	</fx:Script>
+
+    <j:beads>
+        <j:FormValidator trigger="{btn}" triggerEvent="click" requiredFieldError="There are invalid data, please check it."/>
+        <js:ContainerDataBinding/>
+    </j:beads>
+
+	<j:model>
+        <models:ListsModel id="listModel"/>
+	</j:model>
+    
+    <j:FormHeading initComplete="event.target.label = label"/>
+
+    <j:FormItem label="Your name" required="true">
+        <j:TextInput>
+            <j:beads>
+                <j:TextPrompt prompt="Name"/>
+                <j:StringValidator required="3" autoTrim="true" requiredFieldError="Need more than 3 characters"/>
+            </j:beads>
+        </j:TextInput>
+    </j:FormItem>
+
+    <j:FormItem label="Your born date" required="true">
+        <j:DateField>
+            <j:beads>
+                <j:DateValidator requiredFieldError="The value is not a valid date"/>
+            </j:beads>
+        </j:DateField>
+    </j:FormItem>
+
+    <j:FormItem label="Your Favorite Avenger" required="true">
+        <j:ComboBox labelField="label" dataProvider="{listModel.avengers}">
+            <j:beads>
+                <j:SelectedItemNullValidator requiredFieldError="You must to select one value from the list"/>
+            </j:beads>
+        </j:ComboBox>
+    </j:FormItem>
+
+    <j:FormItem label="Favorite movies (at least 2)" required="true">
+        <j:VGroup gap="3">
+            <j:beads>
+                <j:CheckBoxValidator required="2" requiredFieldError="Please choose at least 2 movies"/>
+            </j:beads>
+            <j:CheckBox text="The Godfather"/>
+            <j:CheckBox text="Scent of a woman"/>
+            <j:CheckBox text="Star Wars"/>
+            <j:CheckBox text="The Shawshank Redemption"/>
+        </j:VGroup>
+    </j:FormItem>
+
+    <j:FormItem label="Verification code: {randomCode}" required="true">
+        <j:HGroup gap="3">
+            <j:TextInput>
+                <j:beads>
+                    <j:TextPrompt prompt="Enter Verification Code"/>
+                    <j:StringValidator validateFunction="{customValidate}"/>
+                </j:beads>
+            </j:TextInput>
+            <j:Button localId="btn" text="send" emphasis="primary"/>
+        </j:HGroup>
+    </j:FormItem>
+</j:Form>
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index d4f5076..6ec410a 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -3664,9 +3664,6 @@ j|TopAppBarTitle {
   IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.NullLayout");
 }
 
-.jewel .wizard {
-  width: 100%;
-}
 .jewel .next {
   flex: 1 1 0;
 }
@@ -3674,15 +3671,18 @@ j|TopAppBarTitle {
   flex: 1 1 0;
 }
 .jewel .wizardcontent {
+  height: 100%;
   flex-grow: 100;
 }
 
 j|Wizard {
   IBeadView: ClassReference("org.apache.royale.jewel.beads.views.WizardView");
   IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.WizardController");
+  IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
   IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.WizardModel");
-  IWizardLayout: ClassReference("org.apache.royale.jewel.beads.layouts.WizardLayout");
   IWizardContentArea: ClassReference("org.apache.royale.jewel.WizardContent");
+  gap: 3;
+  itemsVerticalAlign: itemsCentered;
 }
 
 j|WizardContent {
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index 8d0b6ff..c6ad360 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -39,6 +39,8 @@ package
 		import org.apache.royale.jewel.beads.models.SnackbarModel; SnackbarModel;
 		import org.apache.royale.jewel.beads.models.DropDownListModel; DropDownListModel;
         import org.apache.royale.jewel.beads.models.FormItemModel; FormItemModel;
+        import org.apache.royale.jewel.beads.models.WizardModel; WizardModel;
+        import org.apache.royale.jewel.beads.models.WizardStep; WizardStep;
 
         import org.apache.royale.jewel.beads.controllers.SpinnerMouseController; SpinnerMouseController;
         import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
@@ -51,6 +53,7 @@ package
         import org.apache.royale.jewel.beads.controllers.ComboBoxController; ComboBoxController;
 		import org.apache.royale.jewel.beads.controllers.SnackbarController; SnackbarController;
 		import org.apache.royale.jewel.beads.controllers.DropDownListController; DropDownListController;
+        import org.apache.royale.jewel.beads.controllers.WizardController; WizardController;
         
         import org.apache.royale.jewel.beads.views.ImageView; ImageView;
         import org.apache.royale.jewel.beads.views.SpinnerView; SpinnerView;
@@ -69,7 +72,7 @@ package
 		import org.apache.royale.jewel.beads.views.SnackbarView; SnackbarView;
         import org.apache.royale.jewel.beads.views.FormItemView; FormItemView;
         import org.apache.royale.jewel.beads.views.FormHeadingView; FormHeadingView;
-
+        import org.apache.royale.jewel.beads.views.WizardView; WizardView;
         
         COMPILE::SWF
 	    {
@@ -100,21 +103,11 @@ package
         import org.apache.royale.jewel.supportClasses.combobox.ComboBoxPopUp; ComboBoxPopUp;
         import org.apache.royale.jewel.supportClasses.list.DataGroup; DataGroup;
         import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy; FormItemLayoutProxy;
+        import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy; WizardLayoutProxy;
         
         import org.apache.royale.jewel.supportClasses.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
 
         //import org.apache.royale.jewel.beads.views.JewelLabelViewBead; JewelLabelViewBead;
-
-        import org.apache.royale.jewel.beads.views.WizardView; WizardView;
-        
-        import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy; WizardLayoutProxy;
-
-        import org.apache.royale.jewel.beads.controllers.WizardController; WizardController;
-
-        import org.apache.royale.jewel.beads.models.WizardModel; WizardModel;
-        import org.apache.royale.jewel.beads.models.WizardStep; WizardStep;
-
-        import org.apache.royale.jewel.beads.layouts.WizardLayout; WizardLayout;
     }
 
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormHeading.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormHeading.as
index aeaa7a1..49e61e1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormHeading.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormHeading.as
@@ -20,67 +20,67 @@ package org.apache.royale.jewel
 {
     import org.apache.royale.core.ITextModel;
 
-    /**
-	 * FormHeading is a label, and option required indicator (no validation is implied)
-	 * and a content with one or more controls
-	 */
-    public class FormHeading extends Group
-    {
-        /**
-		 *  constructor.
-		 *
-		 *  @langversion 3.0
-		 *  @playerversion Flash 10.2
-		 *  @playerversion AIR 2.6
-		 *  @productversion Royale 0.9.4
-		 */
-		public function FormHeading()
-		{
-			super();
+      /**
+       * FormHeading is a label, and option required indicator (no validation is implied)
+       * and a content with one or more controls
+       */
+      public class FormHeading extends Group
+      {
+            /**
+             *  constructor.
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.4
+             */
+            public function FormHeading()
+            {
+                  super();
 
-            typeNames = "jewel formheading";
-		}
+                  typeNames = "jewel formheading";
+            }
 
+            [Bindable(event="change")]
 		/**
-         *  @copy org.apache.royale.html.Label#text
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.4
-         */
-		public function get label():String
-		{
-            return ITextModel(model).text;
-		}
-
-        /**
-         *  @private
-         */
-		public function set label(value:String):void
-		{
-            ITextModel(model).text = value;
-		}
+             *  @copy org.apache.royale.html.Label#text
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.4
+             */
+            public function get label():String
+            {
+                  return ITextModel(model).text;
+            }
+            /**
+             *  @private
+             */
+            public function set label(value:String):void
+            {
+                  ITextModel(model).text = value;
+            }
 
+            [Bindable(event="change")]
 		/**
-         *  @copy org.apache.royale.html.Label#html
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.4
-         */
-		public function get html():String
-		{
-            return ITextModel(model).html;
-		}
-
-        /**
-         *  @private
-         */
-		public function set html(value:String):void
-		{
-            ITextModel(model).html = value;
-		}
-    }
+             *  @copy org.apache.royale.html.Label#html
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.4
+             */
+            public function get html():String
+            {
+                  return ITextModel(model).html;
+            }
+            /**
+             *  @private
+             */
+            public function set html(value:String):void
+            {
+                  ITextModel(model).html = value;
+            }
+      }
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormItem.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormItem.as
index 4d2dd6d..b638a86 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormItem.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormItem.as
@@ -46,6 +46,7 @@ package org.apache.royale.jewel
             typeNames = "jewel formitem";
 		}
 
+		[Bindable(event="change")]
 		/**
          *  @copy org.apache.royale.html.Label#text
          *
@@ -58,7 +59,6 @@ package org.apache.royale.jewel
 		{
             return ITextModel(model).text;
 		}
-
         /**
          *  @private
          */
@@ -67,6 +67,7 @@ package org.apache.royale.jewel
             ITextModel(model).text = value;
 		}
 
+		[Bindable(event="change")]
 		/**
          *  @copy org.apache.royale.html.Label#html
          *
@@ -79,7 +80,6 @@ package org.apache.royale.jewel
 		{
             return ITextModel(model).html;
 		}
-
         /**
          *  @private
          */
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as
index 162e103..62d4896 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/DropDownListController.as
@@ -118,7 +118,6 @@ package org.apache.royale.jewel.beads.controllers
             model.selectedIndex = event.index;
 			model.selectedItem = event.data;
             view.host.dispatchEvent(new Event(Event.CHANGE));
-            trace(model, model.selectedIndex, model.selectedItem, view.host);
         }
 		
         // private function clickHandler(event:org.apache.royale.events.MouseEvent):void
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
index 8442688..d2fce4a 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/controllers/WizardController.as
@@ -26,8 +26,8 @@ package org.apache.royale.jewel.beads.controllers
 	import org.apache.royale.jewel.Wizard;
 	import org.apache.royale.jewel.WizardPage;
 	import org.apache.royale.jewel.beads.models.WizardModel;
-	import org.apache.royale.jewel.beads.views.WizardView;
 	import org.apache.royale.jewel.beads.models.WizardStep;
+	import org.apache.royale.jewel.beads.views.WizardView;
 	
     /**
      *  The WizardController class is the controller for
@@ -142,7 +142,6 @@ package org.apache.royale.jewel.beads.controllers
         {
             if(model.currentStep.page.validate())
             {
-                trace("next:", model.currentStep.autoSkip);
                 var stepToGo:WizardStep = findStep(model.currentStep, false);
                 wizard.dispatchEvent(new Event("goToNextStep"));
                 model.currentStep = stepToGo;
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/WizardLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/WizardLayout.as
deleted file mode 100644
index 7c7084c..0000000
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/WizardLayout.as
+++ /dev/null
@@ -1,51 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-//  Licensed to the Apache Software Foundation (ASF) under one or more
-//  contributor license agreements.  See the NOTICE file distributed with
-//  this work for additional information regarding copyright ownership.
-//  The ASF licenses this file to You 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 org.apache.royale.jewel.beads.layouts
-{
-    import org.apache.royale.jewel.beads.layouts.HorizontalLayout;
-
-    /**
-     *  The BasicLayout class is a simple layout
-     *  bead.  It takes the set of children and lays them out
-     *  as specified by CSS properties like left, right, top
-     *  and bottom.
-     *
-     *  @langversion 3.0
-     *  @playerversion Flash 10.2
-     *  @playerversion AIR 2.6
-     *  @productversion Royale 0.9.4
-     */
-	public class WizardLayout extends HorizontalLayout
-	{
-        /**
-         *  Constructor.
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.2
-         *  @playerversion AIR 2.6
-         *  @productversion Royale 0.9.4
-         */
-		public function WizardLayout()
-		{
-			super();
-
-            gap = 3;
-		}
-    }
-}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
index df25d54..4a871e6 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
@@ -21,6 +21,7 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.core.IBeadView;
     import org.apache.royale.core.IStrand;
     import org.apache.royale.core.ITextModel;
+    import org.apache.royale.events.Event;
     import org.apache.royale.html.beads.GroupView;
     import org.apache.royale.jewel.FormHeading;
     import org.apache.royale.jewel.Label;
@@ -86,6 +87,8 @@ package org.apache.royale.jewel.beads.views
             formHeading = value as FormHeading;
 
             model = _strand.getBeadByType(ITextModel) as ITextModel;
+			model.addEventListener("textChange", textChangeHandler);
+			model.addEventListener("htmlChange", textChangeHandler);
 
 			if (spacerLabel == null) {
 				spacerLabel = createLabel("");
@@ -121,5 +124,13 @@ package org.apache.royale.jewel.beads.views
 				l.text = labelText;
 			return l;
 		}
+
+		/**
+		 * 
+		 */
+		public function textChangeHandler(event:Event):void
+		{
+			headingLabel.text = model.text;
+		}
     }
 }
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
index 83f35f4..20e88f9 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
@@ -33,11 +33,10 @@ package org.apache.royale.jewel.beads.views
     import org.apache.royale.html.beads.GroupView;
     import org.apache.royale.jewel.FormItem;
     import org.apache.royale.jewel.Label;
-    import org.apache.royale.jewel.beads.models.FormItemModel;
-    import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy;
     import org.apache.royale.jewel.beads.controls.TextAlign;
     import org.apache.royale.jewel.beads.layouts.VerticalLayout;
-    import org.apache.royale.utils.string.contains;
+    import org.apache.royale.jewel.beads.models.FormItemModel;
+    import org.apache.royale.jewel.supportClasses.formitem.FormItemLayoutProxy;
     
 
     /**
@@ -121,6 +120,8 @@ package org.apache.royale.jewel.beads.views
             formItem = value as FormItem;
 
             model = _strand.getBeadByType(FormItemModel) as FormItemModel;
+			model.addEventListener("textChange", textChangeHandler);
+			model.addEventListener("htmlChange", textChangeHandler);
 
             // Look for a layout and/or viewport bead on the formItem's beads list. If one
 			// is found, pull it off so it will not be added permanently
@@ -206,6 +207,14 @@ package org.apache.royale.jewel.beads.views
 			return l;
 		}
 
+		/**
+		 * 
+		 */
+		public function textChangeHandler(event:Event):void
+		{
+			textLabel.text = model.text;
+		}
+
         protected function setupContentAreaLayout():void
         {
 			var defaultContentAreaLayout:VerticalLayout = new VerticalLayout();
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
index 5055a5d..7f1c4a1 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/WizardView.as
@@ -36,7 +36,6 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.jewel.Button;
 	import org.apache.royale.jewel.IconButton;
 	import org.apache.royale.jewel.Wizard;
-	import org.apache.royale.jewel.beads.layouts.WizardLayout;
 	import org.apache.royale.jewel.beads.models.WizardModel;
 	import org.apache.royale.jewel.supportClasses.wizard.WizardLayoutProxy;
 
@@ -237,8 +236,8 @@ package org.apache.royale.jewel.beads.views
 
 			if (previousButton == null) {
 				previousButton = createButton("previous", Button.SECONDARY);
-				previousButton.className = "previous";
 			}
+			previousButton.className = "previous";
 			if (previousButton != null && previousButton.parent == null) {
 				(_strand as IContainerBaseStrandChildrenHost).$addElement(previousButton);
 			}
@@ -249,8 +248,8 @@ package org.apache.royale.jewel.beads.views
 
 			if (nextButton == null) {
 				nextButton = createButton("next", Button.SECONDARY);
-				nextButton.className = "next";
 			}
+			nextButton.className = "next";
 			if (nextButton != null && nextButton.parent == null) {
 				(_strand as IContainerBaseStrandChildrenHost).$addElement(nextButton);
 			}
@@ -329,9 +328,9 @@ package org.apache.royale.jewel.beads.views
             // }
             
 			// Now give the Wizard its own layout
-			var layoutBead:WizardLayout = new WizardLayout();
-			layoutBead.itemsVerticalAlign = "itemsCentered";
-			_strand.addBead(layoutBead);
+			// var layoutBead:WizardLayout = new WizardLayout();
+			// layoutBead.itemsVerticalAlign = "itemsCentered";
+			// _strand.addBead(layoutBead);
 		}
 
 		private var _wizardLayoutProxy:WizardLayoutProxy;
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
index 1cc981a..9c267e3 100644
--- a/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
+++ b/frameworks/projects/Jewel/src/main/sass/components/_wizard.sass
@@ -23,21 +23,23 @@
 
 .jewel
     .wizard
-        width: 100%
+        
     .next
         flex: 1 1 0
     .previous
         flex: 1 1 0
     .wizardcontent
+        height: 100%
         flex-grow: 100
 
 j|Wizard
     IBeadView: ClassReference("org.apache.royale.jewel.beads.views.WizardView")
     IBeadController: ClassReference("org.apache.royale.jewel.beads.controllers.WizardController")
-    // IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.WizardLayout")
+    IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
     IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.WizardModel")
-    IWizardLayout: ClassReference("org.apache.royale.jewel.beads.layouts.WizardLayout")
     IWizardContentArea: ClassReference("org.apache.royale.jewel.WizardContent")
+    gap: 3
+    itemsVerticalAlign: itemsCentered
 
 // j|WizardNavigator
 //     IBeadView: ClassReference("org.apache.royale.jewel.beads.views.ListView")