Badge and BadgeElement
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f2b61d6f Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f2b61d6f Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f2b61d6f Branch: refs/heads/feature/mdl Commit: f2b61d6ff6765090784905d98c53d9de7d58da1e Parents: 4df6595 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Thu Nov 3 20:15:00 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sat Nov 5 00:18:33 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 28 +++ .../src/main/flex/org/apache/flex/mdl/Badge.as | 233 +++++++++++++++++++ .../src/main/flex/org/apache/flex/mdl/Slider.as | 16 +- .../org/apache/flex/mdl/beads/BadgeEffect.as | 121 ++++++++++ .../src/main/resources/mdl-manifest.xml | 2 + 5 files changed, 390 insertions(+), 10 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2b61d6f/examples/flexjs/MDLExample/src/main/flex/App.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/App.mxml b/examples/flexjs/MDLExample/src/main/flex/App.mxml index 8487f5b..8b3ebbc 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -106,6 +106,34 @@ limitations under the License. <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> + <js:VContainer> + <mdl:Badge text="This is a Badge" dataBadge="5" linkUrl="http://flex.apache.org";> + <js:beads> + <mdl:BadgeEffect overlap="true" noBackground="true"/> + </js:beads> + </mdl:Badge> + + <mdl:Badge id="badge1" text="Loving this." dataBadge="1" linkUrl="http://flex.apache.org"/> + </js:VContainer> + + <mdl:Button text="TYPE LINK" click="badge1.type = 0"> + <js:beads> + <mdl:ButtonEffect raised="true" colored="true"/> + </js:beads> + </mdl:Button> + + <mdl:Button text="TYPE TEXT" click="badge1.type = 1"> + <js:beads> + <mdl:ButtonEffect raised="true" colored="false"/> + </js:beads> + </mdl:Button> + + <mdl:Button text="TYPE CONTAINER" click="badge1.type = 2; badge1.text='account_box'"> + <js:beads> + <mdl:ButtonEffect raised="true" accent="true"/> + </js:beads> + </mdl:Button> + </js:Form> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2b61d6f/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as new file mode 100644 index 0000000..fa4ffd1 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Badge.as @@ -0,0 +1,233 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.mdl +{ + import org.apache.flex.core.UIBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The Badge class provides a MDL UI-like appearance for a badge. + * A Badge is an onscreen notification element consists of a small circle, + * typically containing a number or other characters, that appears in + * proximity to another object + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class Badge extends UIBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Badge() + { + super(); + } + + private var _type:Number = 0; + public static const LINK_TYPE:Number = 0; + public static const TEXT_TYPE:Number = 1; + public static const CONTAINER_TYPE:Number = 2; + + /** + * the type of badge + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get type():Number + { + return _type; + } + + public function set type(value:Number):void + { + _type = value; + + COMPILE::JS + { + if(value == LINK_TYPE) + { + var link:HTMLElement = document.createElement('a') as HTMLElement; + link.setAttribute('href', linkUrl); + link.setAttribute('data-badge', dataBadge); + link.appendChild(textNode); + link.className = 'mdl-badge'; + + element.parentNode.replaceChild(link, element); + + + element = link as WrappedHTMLElement; + } + else if(value == TEXT_TYPE) + { + var span:HTMLSpanElement = document.createElement('span') as HTMLSpanElement; + span.setAttribute('data-badge', dataBadge); + span.appendChild(textNode); + span.className = 'mdl-badge'; + + element.parentNode.replaceChild(span, element); + + element = span as WrappedHTMLElement; + } + else if(value == CONTAINER_TYPE) + { + var div:HTMLDivElement = document.createElement('div') as HTMLDivElement; + div.setAttribute('data-badge', dataBadge); + div.appendChild(textNode); + div.className = 'mdl-badge material-icons'; + + element.parentNode.replaceChild(div, element); + + element = div as WrappedHTMLElement; + } + + positioner = element; + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + } + } + + private var _text:String = ""; + + /** + * The text of the link + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get text():String + { + COMPILE::SWF + { + return _text; + } + COMPILE::JS + { + return textNode.nodeValue; + } + } + + public function set text(value:String):void + { + COMPILE::SWF + { + _text = value; + } + COMPILE::JS + { + textNode.nodeValue = value; + } + } + + private var _linkUrl:String = "#"; + + /** + * the link url + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get linkUrl():String + { + return _linkUrl; + } + + public function set linkUrl(value:String):void + { + _linkUrl = value; + + COMPILE::JS + { + (element as HTMLElement).setAttribute('href', value); + } + } + + + private var _dataBadge:Number = 0; + + /** + * The current value of the Badge that appers inside the circle. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get dataBadge():Number + { + return _dataBadge; + } + public function set dataBadge(value:Number):void + { + _dataBadge = value; + + COMPILE::JS + { + (element as HTMLElement).setAttribute('data-badge', _dataBadge.toString()); + } + } + + COMPILE::JS + private var textNode:Text; + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + * @flexjsignorecoercion HTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + var a:HTMLElement = document.createElement('a') as HTMLElement; + a.setAttribute('href', linkUrl); + a.setAttribute('data-badge', dataBadge); + + textNode = document.createTextNode('') as Text; + a.appendChild(textNode); + + element = a as WrappedHTMLElement; + + positioner = element; + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = 'mdl-badge'; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2b61d6f/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as index 31267ad..126ea12 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as @@ -32,14 +32,11 @@ package org.apache.flex.mdl [Event(name="valueChange", type="org.apache.flex.events.Event")] /** - * The Slider class is a component that displays a range of values using a - * track and a thumb control. The Slider uses the following bead types: + * The Slider class provides a MDL UI-like appearance for a slider. + * It displays a range of values using a track and a thumb control. + * The Slider uses the following bead types: * * org.apache.flex.core.IBeadModel: the data model, typically an IRangeModel, that holds the Slider values. - * org.apache.flex.core.IBeadView: the bead that constructs the visual parts of the Slider. - * org.apache.flex.core.IBeadController: the bead that handles input. - * org.apache.flex.core.IThumbValue: the bead responsible for the display of the thumb control. - * org.apache.flex.core.ITrackView: the bead responsible for the display of the track. * * @langversion 3.0 * @playerversion Flash 10.2 @@ -60,8 +57,6 @@ package org.apache.flex.mdl { super(); - //className = "Slider"; - IRangeModel(model).value = 0; IRangeModel(model).minimum = 0; IRangeModel(model).maximum = 100; @@ -201,12 +196,13 @@ package org.apache.flex.mdl input = document.createElement('input') as HTMLInputElement; input.type = "range"; + input.className = 'mdl-slider mdl-js-slider'; + input.value = IRangeModel(model).value.toString(); input.min = IRangeModel(model).minimum.toString(); input.max = IRangeModel(model).maximum.toString(); input.step = IRangeModel(model).stepSize.toString(); - input.className = 'mdl-slider mdl-js-slider'; - + p.appendChild(input); element = input as WrappedHTMLElement; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2b61d6f/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as new file mode 100644 index 0000000..0cc62a8 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/BadgeEffect.as @@ -0,0 +1,121 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.flex.mdl.beads +{ + import org.apache.flex.core.IStrand; + import org.apache.flex.core.IBead; + import org.apache.flex.mdl.Badge; + + + /** + * The BadgeEffect class is a specialty bead that can be used with + * a MDL Badge control to apply some MDL complementary effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class BadgeEffect implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function BadgeEffect() + { + } + + private var _noBackground:String = ""; + /** + * A boolean flag to activate "mdl-badge--no-background" effect selector. + * Applies open-circle effect to badge + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get noBackground():Boolean + { + return _noBackground; + } + public function set noBackground(value:Boolean):void + { + if(value) { + _noBackground = " mdl-badge--no-background"; + } else { + _noBackground = ""; + } + } + + private var _overlap:String = ""; + /** + * A boolean flag to activate "mdl-badge--overlap" effect selector. + * Make the badge overlap with its container + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get overlap():Boolean + { + return _overlap; + } + public function set overlap(value:Boolean):void + { + if(value) { + _overlap = " mdl-badge--overlap"; + } else { + _overlap = ""; + } + } + + private var _strand:IStrand; + + /** + * @copy org.apache.flex.core.IBead#strand + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + * @flexjsignorecoercion org.apache.flex.mdl.TextInput; + */ + public function set strand(value:IStrand):void + { + _strand = value; + + COMPILE::JS + { + if (value is Badge) { + var badge:Badge = value as Badge; + badge.className = _noBackground + _overlap; + } else { + throw new Error("Host component must be an MDL Badge."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f2b61d6f/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml index bf24f3b..f60da64 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -31,5 +31,7 @@ <component id="TextInputEffect" class="org.apache.flex.mdl.beads.TextInputEffect"/> <component id="Disabled" class="org.apache.flex.mdl.beads.Disabled"/> <component id="Slider" class="org.apache.flex.mdl.Slider"/> + <component id="Badge" class="org.apache.flex.mdl.Badge"/> + <component id="BadgeEffect" class="org.apache.flex.mdl.beads.BadgeEffect"/> </componentPackage>
