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/09 20:24:31 UTC
[royale-asjs] branch develop updated: Jewel FormItem and
FormHeading and example of both in JewelExample
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 c2ee89b Jewel FormItem and FormHeading and example of both in JewelExample
c2ee89b is described below
commit c2ee89bf0e1e91bf64a1d251878c9b60c2261894
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Nov 9 21:24:24 2018 +0100
Jewel FormItem and FormHeading and example of both in JewelExample
---
.../src/main/royale/FormsValidationPlayGround.mxml | 83 +++---
.../projects/Jewel/src/main/resources/defaults.css | 39 +++
.../Jewel/src/main/resources/jewel-manifest.xml | 2 +
.../projects/Jewel/src/main/royale/JewelClasses.as | 4 +
.../royale/org/apache/royale/jewel/FormHeading.as | 86 +++++++
.../royale/org/apache/royale/jewel/FormItem.as | 250 ++++++++++++++++++
.../royale/jewel/beads/models/FormItemModel.as | 106 ++++++++
.../royale/jewel/beads/views/FormHeadingView.as | 125 +++++++++
.../royale/jewel/beads/views/FormItemView.as | 286 +++++++++++++++++++++
.../supportClasses/formitem/FormItemLayoutProxy.as | 237 +++++++++++++++++
.../src/main/sass/components/_formheading.sass | 39 +++
.../Jewel/src/main/sass/components/_formitem.sass | 44 ++++
.../projects/Jewel/src/main/sass/defaults.sass | 2 +
13 files changed, 1263 insertions(+), 40 deletions(-)
diff --git a/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
index 7e11af9..8d05de2 100644
--- a/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
+++ b/examples/royale/JewelExample/src/main/royale/FormsValidationPlayGround.mxml
@@ -57,51 +57,54 @@ limitations under the License.
<j:FormValidator trigger="{btn}" triggerEvent="click" requiredFieldError="There are invalid data, please check it."/>
</j:beads>
- <html:H4 text="Your name"/>
- <j:TextInput>
- <j:beads>
- <j:TextPrompt prompt="Name"/>
- <j:StringValidator required="3" autoTrim="true" requiredFieldError="Need more than 3 characters"/>
- </j:beads>
- </j:TextInput>
-
- <html:H4 text="Your born date"/>
- <j:DateField>
- <j:beads>
- <j:DateValidator requiredFieldError="The value is not a valid date"/>
- </j:beads>
- </j:DateField>
-
- <html:H4 text="Your Favorite Avenger"/>
- <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>
-
- <html:H4 text="Favorite movies (at least 2)"/>
- <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>
-
- <html:H4 text="Verification code: {randomCode}"/>
- <j:HGroup gap="3">
+ <j:FormHeading label="Form with validation example"/>
+
+ <j:FormItem label="Your name" required="true">
<j:TextInput>
<j:beads>
- <j:TextPrompt prompt="Enter Verification Code"/>
- <j:StringValidator validateFunction="{customValidate}"/>
+ <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:Button id="btn" text="send" emphasis="primary"/>
- </j:HGroup>
+ <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: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: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>
</j:Card>
</j:SectionContent>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
index 670d18a..d02a8d3 100644
--- a/frameworks/projects/Jewel/src/main/resources/defaults.css
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -717,6 +717,45 @@ j|DropDownList {
IPopUp: ClassReference("org.apache.royale.jewel.supportClasses.dropdownlist.DropDownListList");
}
}
+.jewel.formheading {
+ color: #3CADF1;
+ font-size: 1.4em !important;
+ line-height: 2em;
+}
+.jewel.formheading .jewel.label.spacerLabel {
+ width: 160px;
+}
+.jewel.formheading .jewel.label.requiredSpacerLabel {
+ width: 10px;
+}
+
+j|FormHeading {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormHeadingView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel");
+ gap: 3;
+ itemsVerticalAlign: itemsCentered;
+}
+
+.jewel.formitem .jewel.label.formlabel {
+ width: 160px;
+}
+.jewel.formitem .jewel.label.required {
+ color: red;
+ font-size: 1.6em !important;
+ width: 10px;
+}
+
+j|FormItem {
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout");
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormItemView");
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.FormItemModel");
+ IFormItemContentArea: ClassReference("org.apache.royale.jewel.Group");
+ IFormItemLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout");
+ gap: 3;
+ itemsVerticalAlign: itemsCentered;
+}
+
.fonticon {
cursor: default;
}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
index 3f62585..18bb146 100644
--- a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -68,6 +68,8 @@
<component id="ToolTipLabel" class="org.apache.royale.jewel.supportClasses.tooltip.ToolTipLabel" />
<component id="Form" class="org.apache.royale.jewel.Form"/>
+ <component id="FormItem" class="org.apache.royale.jewel.FormItem"/>
+ <component id="FormHeading" class="org.apache.royale.jewel.FormHeading"/>
<component id="ErrorTipLabel" class="org.apache.royale.jewel.supportClasses.tooltip.ErrorTipLabel"/>
<component id="Snackbar" class="org.apache.royale.jewel.Snackbar"/>
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
index f422325..ec20445 100644
--- a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -38,6 +38,7 @@ package
import org.apache.royale.jewel.beads.models.ComboBoxModel; ComboBoxModel;
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.controllers.SpinnerMouseController; SpinnerMouseController;
import org.apache.royale.jewel.beads.controllers.SliderMouseController; SliderMouseController;
@@ -66,6 +67,8 @@ package
import org.apache.royale.jewel.beads.views.ComboBoxView; ComboBoxView;
import org.apache.royale.jewel.beads.views.ComboBoxPopUpView; ComboBoxPopUpView;
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;
COMPILE::SWF
@@ -96,6 +99,7 @@ package
import org.apache.royale.jewel.supportClasses.table.TBodyContentArea; TBodyContentArea;
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.util.positionInsideBoundingClientRect; positionInsideBoundingClientRect;
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
new file mode 100644
index 0000000..aeaa7a1
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormHeading.as
@@ -0,0 +1,86 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ 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();
+
+ typeNames = "jewel formheading";
+ }
+
+ /**
+ * @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#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
new file mode 100644
index 0000000..4d2dd6d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/FormItem.as
@@ -0,0 +1,250 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IContainerBaseStrandChildrenHost;
+ import org.apache.royale.core.ITextModel;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.models.FormItemModel;
+ import org.apache.royale.jewel.beads.views.FormItemView;
+
+ /**
+ * FormItem is a label, and option required indicator (no validation is implied)
+ * and a content with one or more controls
+ */
+ public class FormItem extends Group implements IContainerBaseStrandChildrenHost
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormItem()
+ {
+ super();
+
+ typeNames = "jewel formitem";
+ }
+
+ /**
+ * @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#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;
+ }
+
+ /**
+ * If <code>true</code>, puts the FormItem skin into the
+ * <code>required</code> state. By default, this state displays
+ * an indicator that the FormItem children require user input.
+ * If <code>false</code>, the indicator is not displayed.
+ *
+ * This property controls skin's state only.
+ * You must assign a validator to the child
+ * if you require input validation.
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get required():Boolean
+ {
+ return FormItemModel(model).required;
+ }
+ /**
+ * @private
+ */
+ public function set required(value:Boolean):void
+ {
+ FormItemModel(model).required = value;
+ }
+
+ /**
+ * The align of the textLabel component
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get labelAlign():String
+ {
+ return FormItemModel(model).labelAlign;
+ }
+ /**
+ * @private
+ */
+ public function set labelAlign(value:String):void
+ {
+ FormItemModel(model).labelAlign = value;
+ }
+
+
+ public function $addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ super.addElement(c, dispatchEvent);
+ }
+
+ /**
+ * @private
+ * @suppress {undefinedNames}
+ * Support strandChildren.
+ */
+ public function $addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+ {
+ super.addElementAt(c, index, dispatchEvent);
+ }
+
+ public function get $numElements():int
+ {
+ return super.numElements;
+ }
+
+ public function $getElementAt(index:int):IChild
+ {
+ return super.getElementAt(index);
+ }
+
+ /**
+ * @private
+ * @suppress {undefinedNames}
+ * Support strandChildren.
+ */
+ public function $removeElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ super.removeElement(c, dispatchEvent);
+ }
+
+ /**
+ * @private
+ * @suppress {undefinedNames}
+ * Support strandChildren.
+ */
+ public function $getElementIndex(c:IChild):int
+ {
+ return super.getElementIndex(c);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ formItemView.contentArea.addElement(c, dispatchEvent);
+ formItemView.contentArea.dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ formItemView.contentArea.addElementAt(c, index, dispatchEvent);
+ formItemView.contentArea.dispatchEvent(new Event("layoutNeeded"));
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function getElementIndex(c:IChild):int
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ return formItemView.contentArea.getElementIndex(c);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ formItemView.contentArea.removeElement(c, dispatchEvent);
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function get numElements():int
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ return formItemView.contentArea.numElements;
+ }
+
+ /**
+ * @private
+ * @royaleignorecoercion org.apache.royale.html.beads.FormItemView
+ */
+ override public function getElementAt(index:int):IChild
+ {
+ var formItemView:FormItemView = view as FormItemView;
+ return formItemView.contentArea.getElementAt(index);
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as
new file mode 100644
index 0000000..6d75578
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/models/FormItemModel.as
@@ -0,0 +1,106 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.models
+{
+ import org.apache.royale.events.Event;
+ import org.apache.royale.jewel.beads.controls.TextAlign;
+
+ /**
+ * The FormItemModel bead class holds the values for a org.apache.royale.jewel.FormItem
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ [Bindable]
+ public class FormItemModel extends TextModel
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormItemModel()
+ {
+ super();
+ }
+
+ private var _required:Boolean;
+
+ [Bindable("requiredChange")]
+ /**
+ * If <code>true</code>, shows the
+ * <code>required</code> label. By default, this displays
+ * an indicator that the FormItem children require user input.
+ * If <code>false</code>, the indicator is not displayed.
+ *
+ * This property controls indicator visibility only.
+ * You must assign a validator to the child
+ * if you require input validation.
+ *
+ * @default false
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get required():Boolean
+ {
+ return _required;
+ }
+
+ /**
+ * @private
+ */
+ public function set required(value:Boolean):void
+ {
+ if (value == null)
+ value = "";
+ if (value != _required)
+ {
+ _required = value;
+ dispatchEvent(new Event("requiredChange"));
+ }
+ }
+
+ private var _labelAlign:String = TextAlign.RIGHT;
+ /**
+ * How textLabel form item part will align.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get labelAlign():String
+ {
+ return _labelAlign;
+ }
+
+ public function set labelAlign(value:String):void
+ {
+ _labelAlign = value;
+ }
+ }
+}
\ 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
new file mode 100644
index 0000000..df25d54
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormHeadingView.as
@@ -0,0 +1,125 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.ITextModel;
+ import org.apache.royale.html.beads.GroupView;
+ import org.apache.royale.jewel.FormHeading;
+ import org.apache.royale.jewel.Label;
+
+ /**
+ * The FormHeadingView class creates the visual elements of the org.apache.royale.jewel.FormHeading
+ * component. A FormHeading has two org.apache.royale.jewel.Labels.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormHeadingView extends GroupView implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormHeadingView()
+ {
+ super();
+ }
+
+ private var model:ITextModel;
+
+ /**
+ * The org.apache.royale.jewel.FormItem component
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var formHeading:FormHeading;
+
+
+ private var spacerLabel:Label;
+ private var requiredSpacerLabel:Label;
+ private var headingLabel:Label;
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.IBeadLayout
+ * @royaleignorecoercion org.apache.royale.core.IChild
+ * @royaleignorecoercion org.apache.royale.core.IViewport
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ formHeading = value as FormHeading;
+
+ model = _strand.getBeadByType(ITextModel) as ITextModel;
+
+ if (spacerLabel == null) {
+ spacerLabel = createLabel("");
+ spacerLabel.className = "spacerLabel";
+ }
+ if (spacerLabel != null && spacerLabel.parent == null) {
+ formHeading.addElement(spacerLabel);
+ }
+
+ if (requiredSpacerLabel == null) {
+ requiredSpacerLabel = createLabel("");
+ requiredSpacerLabel.className = "requiredSpacerLabel";
+ }
+ if (requiredSpacerLabel != null && requiredSpacerLabel.parent == null) {
+ formHeading.addElement(requiredSpacerLabel);
+ }
+
+ if (headingLabel == null) {
+ headingLabel = createLabel(model.text);
+ }
+ if (headingLabel != null && headingLabel.parent == null) {
+ formHeading.addElement(headingLabel);
+ }
+ }
+
+ /**
+ *
+ */
+ public function createLabel(labelText:String = null):Label
+ {
+ var l:Label = new Label();
+ if(labelText != null)
+ l.text = labelText;
+ return l;
+ }
+ }
+}
\ 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
new file mode 100644
index 0000000..83f35f4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/FormItemView.as
@@ -0,0 +1,286 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.views
+{
+ import org.apache.royale.core.IBeadLayout;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IContainerBaseStrandChildrenHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IViewport;
+ import org.apache.royale.core.SimpleCSSStylesWithFlex;
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.ValuesManager;
+ import org.apache.royale.events.Event;
+ import org.apache.royale.events.IEventDispatcher;
+ 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;
+
+
+ /**
+ * The FormItemView class creates the visual elements of the org.apache.royale.jewel.FormItem
+ * component. A FormItem has two org.apache.royale.jewel.Label (one for text and other to show requeriment),
+ * and content.
+ *
+ * @viewbead
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormItemView extends GroupView implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormItemView()
+ {
+ super();
+ }
+
+ /**
+ * The org.apache.royale.jewel.FormItem component
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ protected var formItem:FormItem;
+
+ private var _contentArea:UIBase;
+ /**
+ * The content area of the formItem.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get contentArea():UIBase
+ {
+ return _contentArea;
+ }
+ public function set contentArea(value:UIBase):void
+ {
+ _contentArea = value;
+ }
+
+ private var model:FormItemModel;
+
+ private var textLabel:Label;
+ private var textLabelAlign:TextAlign;
+
+ private var requiredLabel:Label;
+
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * @royaleignorecoercion org.apache.royale.core.IBeadLayout
+ * @royaleignorecoercion org.apache.royale.core.IChild
+ * @royaleignorecoercion org.apache.royale.core.IViewport
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+
+ formItem = value as FormItem;
+
+ model = _strand.getBeadByType(FormItemModel) as FormItemModel;
+
+ // 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
+ // to the strand.
+ var beads:Array = formItem.beads;
+ var transferLayoutBead:IBeadLayout;
+ var transferViewportBead:IViewport;
+ if (formItem.beads != null) {
+ for(var i:int=formItem.beads.length-1; i >= 0; i--) {
+ if (formItem.beads[i] is IBeadLayout) {
+ transferLayoutBead = formItem.beads[i] as IBeadLayout;
+ formItem.beads.splice(i, 1);
+ }
+ else if (formItem.beads[i] is IViewport) {
+ transferViewportBead = formItem.beads[i] as IViewport
+ formItem.beads.splice(i, 1);
+ }
+ }
+ }
+
+ if (!_contentArea) {
+ var cls:Class = ValuesManager.valuesImpl.getValue(_strand, "iFormItemContentArea");
+ _contentArea = new cls() as UIBase;
+ // _contentArea.id = "content";
+
+ // add the layout bead to the content area.
+ if (transferLayoutBead)
+ _contentArea.addBead(transferLayoutBead);
+ else
+ setupContentAreaLayout();
+
+ // add the viewport bead to the content area.
+ if (transferViewportBead)
+ _contentArea.addBead(transferViewportBead);
+ }
+
+ COMPILE::SWF {
+ IEventDispatcher(value).addEventListener("widthChanged", handleSizeChange);
+ IEventDispatcher(value).addEventListener("heightChanged", handleSizeChange);
+ IEventDispatcher(value).addEventListener("sizeChanged", handleSizeChange);
+ IEventDispatcher(value).addEventListener("childrenAdded", handleChildrenAdded);
+ IEventDispatcher(value).addEventListener("initComplete", handleInitComplete);
+ }
+
+ // super.strand = value;
+
+ if (textLabel == null) {
+ textLabel = createLabel(model.text);
+ textLabel.multiline = true;
+ textLabel.className = "formlabel";
+ }
+ if (textLabel != null && textLabel.parent == null) {
+ (_strand as IContainerBaseStrandChildrenHost).$addElement(textLabel);
+ textLabelAlign = new TextAlign();
+ textLabelAlign.align = model.labelAlign;
+ textLabel.addBead(textLabelAlign);
+ }
+
+ if (requiredLabel == null) {
+ var ast:String = model.required ? "*" : "";
+ requiredLabel = createLabel(ast);
+ requiredLabel.className = "required";
+ }
+ if (requiredLabel != null && requiredLabel.parent == null) {
+ (_strand as IContainerBaseStrandChildrenHost).$addElement(requiredLabel);
+ }
+
+ if (contentArea.parent == null) {
+ (_strand as IContainerBaseStrandChildrenHost).$addElement(contentArea as IChild);
+ }
+
+ setupLayout();
+ }
+
+ /**
+ *
+ */
+ public function createLabel(labelText:String = null):Label
+ {
+ var l:Label = new Label();
+ if(labelText != null)
+ l.text = labelText;
+ return l;
+ }
+
+ protected function setupContentAreaLayout():void
+ {
+ var defaultContentAreaLayout:VerticalLayout = new VerticalLayout();
+ defaultContentAreaLayout.gap = 3;
+ defaultContentAreaLayout.itemsHorizontalAlign = "itemsCenter";
+ contentArea.addBead(defaultContentAreaLayout);
+ }
+
+ protected function setupLayout():void
+ {
+ COMPILE::SWF {
+ _contentArea.percentWidth = 100;
+
+ if (_contentArea.style == null) {
+ _contentArea.style = new SimpleCSSStylesWithFlex();
+ }
+ _contentArea.style.flexGrow = 1;
+ _contentArea.style.order = 2;
+ }
+
+ // Now give the FormItem its own layout
+ //var layoutBead:IBeadLayout = new VerticalLayout();
+ //layoutBead.itemsVerticalAlign = "itemsCentered";
+ //_strand.addBead(layoutBead);
+ }
+
+ private var _formItemLayoutProxy:FormItemLayoutProxy;
+
+ /**
+ * The sub-element used as the parent of the container's elements. This does not
+ * include the chrome elements.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ override public function get contentView():ILayoutView
+ {
+ // we want to return a proxy for the formItem which will have numElements, getElementAt, etc.
+ // functions that will use the formItem.$numElements, formItem.$getElementAt, etc. functions
+ if (_formItemLayoutProxy == null) {
+ _formItemLayoutProxy = new FormItemLayoutProxy(_strand);
+ }
+ return _formItemLayoutProxy;
+ }
+
+ override protected function completeSetup():void
+ {
+ super.completeSetup();
+
+ performLayout(null);
+ }
+
+ protected function handleSizeChange(event:Event):void
+ {
+ COMPILE::JS {
+ // _titleBar.percentWidth = 100;
+ _contentArea.percentWidth = 100;
+ }
+
+ performLayout(event);
+ }
+
+ private var sawInitComplete:Boolean;
+
+ private function handleChildrenAdded(event:Event):void
+ {
+ if (sawInitComplete ||
+ ((formItem.isHeightSizedToContent() || !isNaN(formItem.explicitHeight)) &&
+ (formItem.isWidthSizedToContent() || !isNaN(formItem.explicitWidth))))
+ {
+ _contentArea.dispatchEvent(new Event("layoutNeeded"));
+ performLayout(event);
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/formitem/FormItemLayoutProxy.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/formitem/FormItemLayoutProxy.as
new file mode 100644
index 0000000..704d518
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/formitem/FormItemLayoutProxy.as
@@ -0,0 +1,237 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.supportClasses.formitem
+{
+ import org.apache.royale.core.UIBase;
+ import org.apache.royale.core.IChild;
+ import org.apache.royale.core.IContainerBaseStrandChildrenHost;
+ import org.apache.royale.core.ILayoutView;
+ import org.apache.royale.core.IParent;
+ import org.apache.royale.events.IEventDispatcher;
+
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The FormItemLayoutProxy class is used by Wizard in order for layouts to operate
+ * on the Wizard itself. If Wizard were being used, its numElements, getElementAt, etc.
+ * functions would actually redirect to its Container content. In order for a layout
+ * to work on the Wizard directly (its PreviousButton, NextButton and Container),
+ * this proxy is used which will invoke the Wizard's $numElements, $getElementAt, etc
+ * functions.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public class FormItemLayoutProxy implements ILayoutView, IParent
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function FormItemLayoutProxy(host:Object)
+ {
+ super();
+ _host = host;
+ }
+
+ private var _host:Object;
+
+ public function get host():Object
+ {
+ return _host;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * The width of the bounding box.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get width():Number {
+ return (host as UIBase).width;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * The height of the bounding box.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get height():Number {
+ return (host as UIBase).height;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * The number of elements in the parent.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function get numElements():int
+ {
+ return (host as IContainerBaseStrandChildrenHost).$numElements;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * Get a component from the parent.
+ *
+ * @param c The index of the subcomponent.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getElementAt(index:int):IChild
+ {
+ return (host as IContainerBaseStrandChildrenHost).$getElementAt(index);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * Gets the index of this subcomponent.
+ *
+ * @param c The subcomponent to add.
+ * @return The index (zero-based).
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function getElementIndex(c:IChild):int
+ {
+ return (host as IContainerBaseStrandChildrenHost).$getElementIndex(c);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * Add a component to the parent.
+ *
+ * @param c The subcomponent to add.
+ * @param dispatchEvent Whether to dispatch an event after adding the child.
+ *
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ (host as IContainerBaseStrandChildrenHost).$addElement(c);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * Add a component to the parent.
+ *
+ * @param c The subcomponent to add.
+ * @param index The index where the subcomponent should be added.
+ * @param dispatchEvent Whether to dispatch an event after adding the child.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+ {
+ return (host as IContainerBaseStrandChildrenHost).$addElementAt(c, index);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.IContainerBaseStrandChildrenHost
+ * Remove a component from the parent.
+ *
+ * @param c The subcomponent to remove.
+ * @param dispatchEvent Whether to dispatch an event after removing the child.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+ {
+ return (host as IContainerBaseStrandChildrenHost).$removeElement(c);
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ public function get somethingelse():WrappedHTMLElement
+ {
+ return (host as UIBase).element;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ public function get element():WrappedHTMLElement
+ {
+ return (host as UIBase).element;
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ * The display style is used for both visible
+ * and layout so is managed as a special case.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.9.4
+ */
+ COMPILE::JS
+ public function setDisplayStyleForLayout(value:String):void
+ {
+ (host as UIBase).setDisplayStyleForLayout(value);
+ }
+ /**
+ * @royaleignorecoercion org.apache.royale.core.UIBase
+ */
+ COMPILE::JS
+ public function get displayStyleForLayout():String
+ {
+ return (host as UIBase).displayStyleForLayout;
+ }
+
+ }
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass b/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass
new file mode 100644
index 0000000..4b52d4d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_formheading.sass
@@ -0,0 +1,39 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel FormHeading
+
+// FormHeading variables
+
+.jewel.formheading
+ color: #3CADF1
+ font-size: 1.4em !important
+ line-height: 2em
+
+ .jewel.label.spacerLabel
+ width: 160px
+ .jewel.label.requiredSpacerLabel
+ width: 10px
+
+j|FormHeading
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormHeadingView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.TextModel")
+ gap: 3
+ itemsVerticalAlign: itemsCentered
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass b/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass
new file mode 100644
index 0000000..ca9b332
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/components/_formitem.sass
@@ -0,0 +1,44 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+// Jewel FormItem
+
+// FormItem variables
+
+.jewel.formitem
+
+ .jewel.label.formlabel
+ width: 160px
+
+ .jewel.label.required
+ color: red
+ font-size: 1.6em !important
+ width: 10px
+
+ .content
+
+
+j|FormItem
+ IBeadLayout: ClassReference("org.apache.royale.jewel.beads.layouts.HorizontalLayout")
+ IBeadView: ClassReference("org.apache.royale.jewel.beads.views.FormItemView")
+ IBeadModel: ClassReference("org.apache.royale.jewel.beads.models.FormItemModel")
+ IFormItemContentArea: ClassReference("org.apache.royale.jewel.Group")
+ IFormItemLayout: ClassReference("org.apache.royale.jewel.beads.layouts.VerticalLayout")
+ gap: 3
+ itemsVerticalAlign: itemsCentered
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/sass/defaults.sass b/frameworks/projects/Jewel/src/main/sass/defaults.sass
index baff257..5c8afd6 100644
--- a/frameworks/projects/Jewel/src/main/sass/defaults.sass
+++ b/frameworks/projects/Jewel/src/main/sass/defaults.sass
@@ -34,6 +34,8 @@
@import "components/divider"
@import "components/drawer"
@import "components/dropdownlist"
+@import "components/formheading"
+@import "components/formitem"
@import "components/icons"
@import "components/image"
@import "components/itemRenderer"