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 14:42:23 UTC
[22/34] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL Slider
MDL Slider
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c2ac3c7e
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c2ac3c7e
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c2ac3c7e
Branch: refs/heads/feature/mdl
Commit: c2ac3c7e1b07932e259258b5e8557ec50c9e31a7
Parents: 15a2d96
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Nov 2 23:39:59 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Fri Nov 4 15:41:34 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/pom.xml | 12 +-
.../flexjs/MDLExample/src/main/flex/App.mxml | 2 +
.../main/resources/mdl-js-index-template.html | 1 +
.../src/main/flex/MDLClasses.as | 24 +-
.../src/main/flex/org/apache/flex/mdl/Slider.as | 261 +++++++++++++++++++
.../src/main/resources/defaults.css | 9 +-
.../src/main/resources/mdl-manifest.xml | 1 +
7 files changed, 289 insertions(+), 21 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/examples/flexjs/MDLExample/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml
index 1503b57..17fc28d 100644
--- a/examples/flexjs/MDLExample/pom.xml
+++ b/examples/flexjs/MDLExample/pom.xml
@@ -44,12 +44,6 @@
<configuration>
<flashVersion>20.0</flashVersion>
<mainClass>App.mxml</mainClass>
- <includeFiles>
- <include-file>
- <name>defaults.css</name>
- <path>../src/main/resources/defaults.css</path>
- </include-file>
- </includeFiles>
</configuration>
<executions>
<!-- Add a second execution with output set to JavaScript (Flash is the default) -->
@@ -63,6 +57,12 @@
<outputJavaScript>true</outputJavaScript>
<htmlTemplate>${basedir}/src/main/resources/mdl-js-index-template.html</htmlTemplate>
<additionalCompilerOptions>-compiler.exclude-defaults-css-files=HTML-0.8.0-SNAPSHOT.swc:defaults.css</additionalCompilerOptions>
+ <includeFiles>
+ <include-file>
+ <name>mdl-styles.css</name>
+ <path>../src/main/resources/mdl-styles.css</path>
+ </include-file>
+ </includeFiles>
</configuration>
</execution>
</executions>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/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 9f76732..dca2da1 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -102,6 +102,8 @@ limitations under the License.
</mdl:RadioButton>
<mdl:RadioButton groupName="g1" text="Red"/>
+ <mdl:Slider minimum="0" maximum="100" value="0"/>
+
</js:Form>
</js:View>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html b/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html
index 9eaf780..a2ce192 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html
@@ -20,6 +20,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Custom Template for injecting custom style CSS">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="${application}.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as b/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
index c0ea571..7a8d043 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
@@ -19,19 +19,19 @@
package
{
-/**
- * @private
- * This class is used to link additional classes into mdl.swc
- * beyond those that are found by dependecy analysis starting
- * from the classes specified in manifest.xml.
- */
-internal class MDLClasses
-{
- COMPILE::SWF
- {
- //import org.apache.flex.mdl.beads.TextPromptBead; TextPromptBead;
+ /**
+ * @private
+ * This class is used to link additional classes into mdl.swc
+ * beyond those that are found by dependecy analysis starting
+ * from the classes specified in manifest.xml.
+ */
+ internal class MDLClasses
+ {
+ COMPILE::SWF
+ {
+ //import org.apache.flex.mdl.beads.TextPromptBead; TextPromptBead;
+ }
}
-}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/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
new file mode 100644
index 0000000..2587227
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Slider.as
@@ -0,0 +1,261 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IRangeModel;
+ import org.apache.flex.core.UIBase;
+
+ COMPILE::JS
+ {
+ import org.apache.flex.html.beads.SliderTrackView;
+ import org.apache.flex.html.beads.SliderThumbView;
+ import org.apache.flex.html.beads.controllers.SliderMouseController;
+ import org.apache.flex.core.WrappedHTMLElement;
+ }
+
+ [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:
+ *
+ * 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
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class Slider extends UIBase
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function Slider()
+ {
+ super();
+
+ //className = "Slider";
+
+ IRangeModel(model).value = 0;
+ IRangeModel(model).minimum = 0;
+ IRangeModel(model).maximum = 100;
+ IRangeModel(model).stepSize = 1;
+ IRangeModel(model).snapInterval = 1;
+ }
+
+ /**
+ * The current value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get value():Number
+ {
+ return IRangeModel(model).value;
+ }
+ public function set value(newValue:Number):void
+ {
+ IRangeModel(model).value = newValue;
+
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).value = "" + value;
+ }
+ }
+
+ /**
+ * The minimum value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get minimum():Number
+ {
+ return IRangeModel(model).minimum;
+ }
+ public function set minimum(value:Number):void
+ {
+ IRangeModel(model).minimum = value;
+
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).min = "" + value;
+ }
+ }
+
+ /**
+ * The maximum value of the Slider.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get maximum():Number
+ {
+ return IRangeModel(model).maximum;
+ }
+ public function set maximum(value:Number):void
+ {
+ IRangeModel(model).maximum = value;
+
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).max = "" + value;
+ }
+
+ }
+
+ /**
+ * The modulus of the Slider value. The thumb will be positioned
+ * at the nearest multiple of this value.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get snapInterval():Number
+ {
+ return IRangeModel(model).snapInterval;
+ }
+ public function set snapInterval(value:Number):void
+ {
+ IRangeModel(model).snapInterval = value;
+ }
+
+ /**
+ * The amount to move the thumb when the track is selected. This value is
+ * adjusted to fit the nearest snapInterval.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get stepSize():Number
+ {
+ return IRangeModel(model).stepSize;
+ }
+ public function set stepSize(value:Number):void
+ {
+ IRangeModel(model).stepSize = value;
+ }
+
+ COMPILE::JS
+ private var track:SliderTrackView;
+
+ COMPILE::JS
+ private var thumb:SliderThumbView;
+
+ COMPILE::JS
+ private var controller:SliderMouseController;
+
+ COMPILE::JS
+ private var input:HTMLInputElement;
+
+ /**
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ * @flexjsignorecoercion HTMLInputElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = "range";
+ //input.min = "0";
+ //input.max = "100";
+ //input.value = "0";
+
+
+ //input.style.width = '200px';
+ //input.style.height = '30px';
+
+ element = input as WrappedHTMLElement;
+
+ //track = new SliderTrackView();
+ //addBead(track);
+
+ //thumb = new SliderThumbView();
+ //addBead(thumb);
+
+ //controller = new SliderMouseController();
+ //addBead(controller);
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ element.flexjs_wrapper = this;
+
+ className = typeNames = 'mdl-slider mdl-js-slider';
+
+ return element;
+ }
+
+ /**
+ */
+ COMPILE::JS
+ public function snap(value:Number):Number
+ {
+ var si:Number = snapInterval;
+ var n:Number = Math.round((value - minimum) / si) *
+ si + minimum;
+ if (value > 0)
+ {
+ if (value - n < n + si - value)
+ return n;
+ return n + si;
+ }
+ if (value - n > n + si - value)
+ return n + si;
+ return n;
+ }
+
+
+ /**
+ * @param {number} value The value used to calculate new position of the thumb.
+ * @return {void} Moves the thumb to the corresponding position.
+ */
+ COMPILE::JS
+ public function setThumbFromValue(value:Number):void
+ {
+ var min:Number = model.minimum;
+ var max:Number = model.maximum;
+ var p:Number = (value - min) / (max - min);
+ var xloc:Number = p * (parseInt(track.element.style.width, 10) -
+ parseInt(thumb.element.style.width, 10));
+
+ thumb.element.style.left = "" + xloc + 'px';
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
index 8e538a1..1d2ef51 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -18,13 +18,16 @@
*/
-@namespace "library://ns.apache.org/flexjs/basic";
-@namespace mdl "library://ns.apache.org/flexjs/mdl";
+@namespace "library://ns.apache.org/flexjs/mdl";
-mdl|CheckBox
+CheckBox
{
IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel");
}
+Slider
+{
+ IBeadModel: ClassReference("org.apache.flex.html.beads.models.RangeModel");
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c2ac3c7e/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 2d14e56..bf24f3b 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -30,5 +30,6 @@
<component id="ButtonEffect" class="org.apache.flex.mdl.beads.ButtonEffect"/>
<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"/>
</componentPackage>