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/03/03 15:37:01 UTC
[royale-asjs] 02/12: Introduce RadioButton
This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch feature/vivid-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
commit b76bd959ce817e44cef4ce41a2101c4f3b44c4c8
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Fri Feb 23 20:26:03 2018 +0100
Introduce RadioButton
---
.../src/main/royale/TextInputPlayGround.mxml | 2 +
.../projects/Vivid/src/main/resources/defaults.css | 8 +
.../Vivid/src/main/resources/vivid-manifest.xml | 1 +
.../projects/Vivid/src/main/royale/VividClasses.as | 2 +
.../royale/org/apache/royale/vivid/RadioButton.as | 107 ++++++++
.../apache/royale/vivid/beads/RadioButtonView.as | 286 +++++++++++++++++++++
.../royale/vivid/supportClasses/RadioButtonIcon.as | 117 +++++++++
7 files changed, 523 insertions(+)
diff --git a/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
index eced5aa..ae694cc 100644
--- a/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
+++ b/examples/royale/VividExample/src/main/royale/TextInputPlayGround.mxml
@@ -25,4 +25,6 @@ limitations under the License.
<v:TextField text="Text Input" width="120" height="40"/>
+ <v:RadioButton/>
+
</js:Group>
diff --git a/frameworks/projects/Vivid/src/main/resources/defaults.css b/frameworks/projects/Vivid/src/main/resources/defaults.css
index e4a792a..ee46fc1 100644
--- a/frameworks/projects/Vivid/src/main/resources/defaults.css
+++ b/frameworks/projects/Vivid/src/main/resources/defaults.css
@@ -83,4 +83,12 @@ Slider {
iThumbView: ClassReference("org.apache.royale.vivid.beads.SliderThumbView");
iTrackView: ClassReference("org.apache.royale.vivid.beads.SliderTrackView");
}
+
+ RadioButton
+ {
+ IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+ IBeadView: ClassReference("org.apache.royale.vivid.beads.RadioButtonView");
+ /*font-size: 11px;
+ font-family: Arial;*/
+ }
}
diff --git a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
index 4c24222..6eebd31 100644
--- a/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
+++ b/frameworks/projects/Vivid/src/main/resources/vivid-manifest.xml
@@ -25,5 +25,6 @@
<component id="TextButton" class="org.apache.royale.vivid.TextButton"/>
<component id="TextField" class="org.apache.royale.vivid.TextField"/>
<component id="Slider" class="org.apache.royale.vivid.Slider"/>
+ <component id="RadioButton" class="org.apache.royale.vivid.RadioButton"/>
</componentPackage>
diff --git a/frameworks/projects/Vivid/src/main/royale/VividClasses.as b/frameworks/projects/Vivid/src/main/royale/VividClasses.as
index a069ba8..e1dd9bb 100644
--- a/frameworks/projects/Vivid/src/main/royale/VividClasses.as
+++ b/frameworks/projects/Vivid/src/main/royale/VividClasses.as
@@ -33,6 +33,8 @@ package
{
import org.apache.royale.vivid.beads.SliderThumbView; SliderThumbView;
import org.apache.royale.vivid.beads.SliderTrackView; SliderTrackView;
+
+ import org.apache.royale.vivid.beads.RadioButtonView; RadioButtonView;
}
}
diff --git a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/RadioButton.as b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/RadioButton.as
new file mode 100644
index 0000000..c230519
--- /dev/null
+++ b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/RadioButton.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.vivid
+{
+ import org.apache.royale.html.RadioButton;
+
+ COMPILE::SWF
+ {
+ import flash.display.DisplayObject;
+ }
+
+ COMPILE::JS
+ {
+ import org.apache.royale.core.WrappedHTMLElement;
+ import org.apache.royale.vivid.supportClasses.RadioButtonIcon;
+ import org.apache.royale.html.util.addElementToWrapper;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @toplevel
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ COMPILE::SWF
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
+ {
+ super(upState, overState, downState, hitTestState);
+ }
+ }
+
+ COMPILE::JS
+ public class RadioButton extends org.apache.royale.html.RadioButton
+ {
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ public static var radioCounter:int = 0;
+
+ private var labelFor:HTMLLabelElement;
+ private var textNode:Text;
+ private var icon:RadioButtonIcon;
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion HTMLLabelElement
+ * @royaleignorecoercion Text
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+
+
+ icon = new RadioButtonIcon()
+ icon.id = '_radio_' + org.apache.royale.vivid.RadioButton.radioCounter++;
+
+ textNode = document.createTextNode('') as Text;
+
+ labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
+ labelFor.appendChild(icon.element);
+ labelFor.appendChild(textNode);
+
+ (textNode as WrappedHTMLElement).royale_wrapper = this;
+ (icon.element as WrappedHTMLElement).royale_wrapper = this;
+
+ typeNames = 'RadioButton';
+
+ return element;
+ }
+ }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/RadioButtonView.as b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/RadioButtonView.as
new file mode 100644
index 0000000..e1fb359
--- /dev/null
+++ b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/beads/RadioButtonView.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.vivid.beads
+{
+ import flash.display.Shape;
+ import flash.display.SimpleButton;
+ import flash.display.Sprite;
+ import flash.text.TextFieldAutoSize;
+ import flash.text.TextFieldType;
+
+ import org.apache.royale.core.BeadViewBase;
+ import org.apache.royale.core.CSSTextField;
+ import org.apache.royale.core.IBeadView;
+ import org.apache.royale.core.IStrand;
+ import org.apache.royale.core.IValueToggleButtonModel;
+ import org.apache.royale.events.Event;
+
+ /**
+ * The RadioButtonView class creates the visual elements of the org.apache.royale.html.RadioButton
+ * component.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonView extends BeadViewBase implements IBeadView
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function RadioButtonView()
+ {
+ sprites = [ upSprite = new Sprite(),
+ downSprite = new Sprite(),
+ overSprite = new Sprite(),
+ upAndSelectedSprite = new Sprite(),
+ downAndSelectedSprite = new Sprite(),
+ overAndSelectedSprite = new Sprite() ];
+
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = new CSSTextField();
+ tf.type = TextFieldType.DYNAMIC;
+ tf.autoSize = TextFieldAutoSize.LEFT;
+ tf.name = "textField";
+ var icon:Shape = new Shape();
+ icon.name = "icon";
+ s.addChild(icon);
+ s.addChild(tf);
+ }
+ }
+
+ private var upSprite:Sprite;
+ private var downSprite:Sprite;
+ private var overSprite:Sprite;
+ private var upAndSelectedSprite:Sprite;
+ private var downAndSelectedSprite:Sprite;
+ private var overAndSelectedSprite:Sprite;
+
+ private var sprites:Array;
+
+ private var _toggleButtonModel:IValueToggleButtonModel;
+
+ /**
+ * The model used for the RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get toggleButtonModel() : IValueToggleButtonModel
+ {
+ return _toggleButtonModel;
+ }
+
+ /**
+ * @copy org.apache.royale.core.IBead#strand
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ override public function set strand(value:IStrand):void
+ {
+ super.strand = value;
+ _toggleButtonModel = value.getBeadByType(IValueToggleButtonModel) as IValueToggleButtonModel;
+ _toggleButtonModel.addEventListener("textChange", textChangeHandler);
+ _toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+ _toggleButtonModel.addEventListener("selectedValueChange", selectedValueChangeHandler);
+ if (_toggleButtonModel.text != null)
+ text = _toggleButtonModel.text;
+ if (_toggleButtonModel.html != null)
+ html = _toggleButtonModel.html;
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+ tf.styleParent = value;
+ }
+
+ layoutControl();
+
+ var hitArea:Shape = new Shape();
+ hitArea.graphics.beginFill(0x000000);
+ hitArea.graphics.drawRect(0,0,upSprite.width, upSprite.height);
+ hitArea.graphics.endFill();
+
+ SimpleButton(value).upState = upSprite;
+ SimpleButton(value).downState = downSprite;
+ SimpleButton(value).overState = overSprite;
+ SimpleButton(value).hitTestState = hitArea;
+
+ if (toggleButtonModel.text !== null)
+ text = toggleButtonModel.text;
+ if (toggleButtonModel.html !== null)
+ html = toggleButtonModel.html;
+
+ if (toggleButtonModel.selected && toggleButtonModel.value == value) {
+ selected = true;
+ }
+ }
+
+ /**
+ * The string label for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get text():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.text;
+ }
+ public function set text(value:String):void
+ {
+ for each( var s:Sprite in sprites )
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.text = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * The HTML string for the org.apache.royale.html.RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public function get html():String
+ {
+ var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+ return tf.htmlText;
+ }
+ public function set html(value:String):void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+ tf.htmlText = value;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function textChangeHandler(event:Event):void
+ {
+ text = toggleButtonModel.text;
+ }
+
+ /**
+ * @private
+ */
+ private function htmlChangeHandler(event:Event):void
+ {
+ html = toggleButtonModel.html;
+ }
+
+ private var _selected:Boolean;
+
+ /**
+ * The selection state of the RadioButton
+ */
+ public function get selected():Boolean
+ {
+ return _selected;
+ }
+ public function set selected(value:Boolean):void
+ {
+ _selected = value;
+
+ if( value ) {
+ SimpleButton(_strand).upState = upAndSelectedSprite;
+ SimpleButton(_strand).downState = downAndSelectedSprite;
+ SimpleButton(_strand).overState = overAndSelectedSprite;
+
+ } else {
+ SimpleButton(_strand).upState = upSprite;
+ SimpleButton(_strand).downState = downSprite;
+ SimpleButton(_strand).overState = overSprite;
+ }
+
+ layoutControl();
+ }
+
+ /**
+ * @private
+ */
+ private function selectedValueChangeHandler(event:Event):void
+ {
+ selected = _toggleButtonModel.value == _toggleButtonModel.selectedValue;
+ }
+
+ /**
+ * @private
+ */
+ protected function layoutControl() : void
+ {
+ for each(var s:Sprite in sprites)
+ {
+ var icon:Shape = s.getChildByName("icon") as Shape;
+ var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+
+ drawRadioButton(icon);
+
+ var mh:Number = Math.max(icon.height,tf.height);
+
+ icon.x = 0;
+ icon.y = (mh - icon.height)/2;
+
+ tf.x = icon.x + icon.width + 1;
+ tf.y = (mh - tf.height)/2;
+ }
+
+ }
+
+ /**
+ * @private
+ */
+ protected function drawRadioButton(icon:Shape) : void
+ {
+ icon.graphics.clear();
+ icon.graphics.beginFill(0xf8f8f8);
+ icon.graphics.lineStyle(1,0x808080);
+ icon.graphics.drawEllipse(0,0,10,10);
+ icon.graphics.endFill();
+
+ if( selected ) {
+ icon.graphics.beginFill(0);
+ icon.graphics.drawEllipse(3,3,4,4);
+ icon.graphics.endFill();
+ }
+ }
+ }
+}
diff --git a/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/RadioButtonIcon.as b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/RadioButtonIcon.as
new file mode 100644
index 0000000..ee153b1
--- /dev/null
+++ b/frameworks/projects/Vivid/src/main/royale/org/apache/royale/vivid/supportClasses/RadioButtonIcon.as
@@ -0,0 +1,117 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.vivid.supportClasses
+{
+ COMPILE::JS {
+ import org.apache.royale.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The RadioButton class is a component that displays a selectable Button. RadioButtons
+ * are typically used in groups, identified by the groupName property. RadioButton use
+ * the following beads:
+ *
+ * org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+ * org.apache.royale.core.IBeadView: the bead that constructs the visual parts of the RadioButton..
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion Royale 0.0
+ */
+ public class RadioButtonIcon
+ {
+ public function RadioButtonIcon()
+ {
+ COMPILE::JS {
+ createElement();
+ }
+
+ className = 'RadioButtonIcon';
+ }
+
+ /**
+ * @private
+ *
+ * @royalesuppresspublicvarwarning
+ */
+ COMPILE::JS
+ public var element:WrappedHTMLElement;
+
+ COMPILE::JS
+ public function get positioner():WrappedHTMLElement
+ {
+ return element;
+ }
+
+ private var _className:String;
+
+ /**
+ * @private
+ */
+ public function get className():String
+ {
+ return _className;
+ }
+ public function set className(value:String):void
+ {
+ _className = value;
+
+ COMPILE::JS {
+ element.className = value;
+ }
+ }
+
+ private var _id:String;
+
+ /**
+ * @private
+ */
+ public function get id():String
+ {
+ return _id;
+ }
+ public function set id(value:String):void
+ {
+ _id = value;
+
+ COMPILE::JS {
+ element.id = value;
+ }
+ }
+
+ /**
+ * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+ * @royaleignorecoercion HTMLInputElement
+ * @royaleignorecoercion Text
+ */
+ COMPILE::JS
+ protected function createElement():WrappedHTMLElement
+ {
+ //This class does not subclass anything, so these properties must be set explicitly
+ var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+ input.type = 'radio';
+
+ element = input as WrappedHTMLElement;
+ element.royale_wrapper = this;
+
+ return element;
+ }
+ }
+}
--
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.