You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/11/04 16:10:39 UTC
[03/35] git commit: [flex-asjs] [refs/heads/feature/mdl] - Badge and
BadgeElement
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/84a3070b
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/84a3070b
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/84a3070b
Branch: refs/heads/feature/mdl
Commit: 84a3070bafdf3b207a66ab3a45de7e72807da581
Parents: 346280c
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 3 20:15:00 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Fri Nov 4 17:10:12 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/84a3070b/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/84a3070b/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/84a3070b/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/84a3070b/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/84a3070b/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>