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
The following commit(s) were added to refs/heads/feature/vivid-ui-set by this push: new f7d5356 Introduce RadioButton f7d5356 is described below commit f7d53565de98a5223ad19dd41ba592729329878f Author: Carlos Rovira <carlosrov...@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 carlosrov...@apache.org.