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 1b6d8d4bad96c76c01d8c88b9c5d33e57ea3846e
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.

Reply via email to