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/03 19:16:21 UTC
[01/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - browser
Event.target is not writable. We should be using org.apache.flex.events.Event
anyway [Forced Update!]
Repository: flex-asjs
Updated Branches:
refs/heads/feature/mdl 3dd15248c -> 5b11176ae (forced update)
browser Event.target is not writable. We should be using org.apache.flex.events.Event anyway
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/019d1d21
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/019d1d21
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/019d1d21
Branch: refs/heads/feature/mdl
Commit: 019d1d2140487078a727beeb9276ed25063125a1
Parents: e6a4493
Author: Alex Harui <ah...@apache.org>
Authored: Thu Nov 3 09:05:55 2016 -0700
Committer: Alex Harui <ah...@apache.org>
Committed: Thu Nov 3 09:05:55 2016 -0700
----------------------------------------------------------------------
.../src/main/flex/org/apache/flex/createjs/graphics/Circle.as | 1 +
1 file changed, 1 insertion(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/019d1d21/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/graphics/Circle.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/graphics/Circle.as b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/graphics/Circle.as
index a461425..d16918b 100644
--- a/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/graphics/Circle.as
+++ b/frameworks/projects/CreateJS/src/main/flex/org/apache/flex/createjs/graphics/Circle.as
@@ -32,6 +32,7 @@ package org.apache.flex.createjs.graphics
import org.apache.flex.core.WrappedHTMLElement;
}
+ import org.apache.flex.events.Event;
import org.apache.flex.graphics.IFill;
import org.apache.flex.graphics.SolidColor;
import org.apache.flex.graphics.SolidColorStroke;
[09/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Use
changes in falcon to inline HTML
Posted by ca...@apache.org.
Use changes in falcon to inline HTML
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/34bad479
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/34bad479
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/34bad479
Branch: refs/heads/feature/mdl
Commit: 34bad47990010968a4a4a6168aa49f61c62dec79
Parents: 49521d3
Author: Carlos Rovira <ca...@apache.org>
Authored: Sun Oct 16 11:05:38 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/src/main/flex/App.mxml | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/34bad479/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 4ad2a62..b19b9b4 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -20,7 +20,8 @@ limitations under the License.
<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:js="library://ns.apache.org/flexjs/basic"
xmlns:local="*"
- xmlns:mdl="library://ns.apache.org/flexjs/mdl">
+ xmlns:mdl="library://ns.apache.org/flexjs/mdl"
+ xmlns="http://www.w3.org/1999/xhtml">
<js:valuesImpl>
<js:SimpleCSSValuesImpl />
@@ -29,9 +30,9 @@ limitations under the License.
<js:initialView>
<js:View>
- <js:Button className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
-
- </js:Button>
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </js:TextButton>
<mdl:Button/>
</js:View>
[03/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL Slider
Posted by ca...@apache.org.
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/64bea059
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/64bea059
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/64bea059
Branch: refs/heads/feature/mdl
Commit: 64bea059fa7e8c396675c2e7cfc1917382071524
Parents: 36caa0a
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Nov 2 23:39:59 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 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/64bea059/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/64bea059/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/64bea059/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/64bea059/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/64bea059/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/64bea059/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/64bea059/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>
[16/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Some text
input and example changes
Posted by ca...@apache.org.
Some text input and example changes
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/d91459b4
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/d91459b4
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/d91459b4
Branch: refs/heads/feature/mdl
Commit: d91459b492fa77b2f06a6171f41886772c157239
Parents: 837e60a
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 16:16:59 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 57 ++++++++++----------
.../main/flex/org/apache/flex/mdl/TextInput.as | 9 ++--
2 files changed, 34 insertions(+), 32 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d91459b4/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 937d8d2..242df22 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -30,39 +30,42 @@ limitations under the License.
<js:initialView>
<js:View>
- <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
- <js:Container>
- <js:beads>
- <js:HorizontalLayout />
- </js:beads>
-
- <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
- <i class="material-icons">add</i>
- </js:TextButton>
+ <js:Form action="http://www.google.com">
- <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
- <i class="material-icons">add</i>
- </js:TextButton>
+ <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
+ <js:Container>
+ <js:beads>
+ <js:HorizontalLayout />
+ </js:beads>
+
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </js:TextButton>
- <!-- Raised button -->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
- <!-- Raised button with ripple -->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" text="BUTTON"/>
- <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+ <i class="material-icons">mood</i>
+ </js:TextButton>
- <mdl:Button/>
+ <!-- Raised button -->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
+ <!-- Raised button with ripple -->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" text="BUTTON"/>
+ <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
- <mdl:TextInput/>
+ <mdl:Button>
+ <i class="material-icons">add</i>
+ </mdl:Button>
- </js:Container>
-
- <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <js:Form action="http://www.google.com">
- <js:Container className="mdl-textfield mdl-js-textfield">
- <js:TextInput className="mdl-textfield__input" id="sample1"/>
- <js:Label className="mdl-textfield__label" text="Text..."/>
+ <mdl:Button text="BUTTON"/>
</js:Container>
+
+ <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+ <mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/>
+
+ <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+ <mdl:CheckBox id="mdlchk" text="Hello" selected="true"/>
+
</js:Form>
</js:View>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/d91459b4/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index dace484..4617678 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -59,8 +59,7 @@ package org.apache.flex.mdl
var input:HTMLInputElement;
var label:HTMLLabelElement;
var textNode:Text;
- //element = document.createElement('input') as WrappedHTMLElement;
-
+
div = document.createElement('div') as HTMLDivElement;
div.className = "mdl-textfield mdl-js-textfield";
@@ -71,15 +70,15 @@ package org.apache.flex.mdl
label = document.createElement('label') as HTMLLabelElement;
label.className = "mdl-textfield__label";
- textNode = document.createTextNode('Text...') as Text;
+ textNode = document.createTextNode('') as Text;
label.appendChild(textNode);
- //element.className = 'TextInput';
- //typeNames = 'TextInput';
div.appendChild(input);
div.appendChild(label);
element = div as WrappedHTMLElement;
+ //element.className = 'TextInput';
+ typeNames = 'TextInput';
//attach input handler to dispatch flexjs change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
[22/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Changes in
TextInput
Posted by ca...@apache.org.
Changes in TextInput
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/a593dd99
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/a593dd99
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/a593dd99
Branch: refs/heads/feature/mdl
Commit: a593dd999ab71010192f6f1a4ab0d3e93febfc3e
Parents: e9dd895
Author: Carlos Rovira <ca...@apache.org>
Authored: Tue Oct 25 19:02:37 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 13 +++--
.../main/flex/org/apache/flex/mdl/TextInput.as | 55 ++++++--------------
2 files changed, 21 insertions(+), 47 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/a593dd99/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 a50dbeb..3924dba 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -55,16 +55,15 @@ limitations under the License.
</js:HContainer>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/>
-
- <mdl:TextInput mdlEffect="mdl-textfield--floating-label" text="Floating Label"/>
+ <mdl:TextInput id="mdlti" text="Normal Text Field..." change="mdlchk.text = mdlti.text"/>
+ <mdl:TextInput text="Floating Label" mdlEffect="mdl-textfield--floating-label" />
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
- <mdl:CheckBox id="mdlchk" text="This Checks" selected="true" mdlEffect="mdl-js-ripple-effect"/>
- <mdl:CheckBox id="mdlchk1" text="This is disabled at start" />
+ <mdl:CheckBox id="mdlchk" text="Disabled at start" />
+ <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" mdlEffect="mdl-js-ripple-effect"/>
- <mdl:RadioButton groupName="g1" text="Black" mdlEffect="mdl-js-ripple-effect"/>
- <mdl:RadioButton groupName="g1" text="White"/>
+ <mdl:RadioButton groupName="g1" text="Black"/>
+ <mdl:RadioButton groupName="g1" text="Ripple" mdlEffect="mdl-js-ripple-effect"/>
<mdl:RadioButton groupName="g1" text="Red"/>
</js:Form>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/a593dd99/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index b387b81..87f9c5a 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -64,41 +64,34 @@ package org.apache.flex.mdl
COMPILE::JS
override protected function createElement():WrappedHTMLElement
{
- var div:HTMLDivElement;
- var input:HTMLInputElement;
- var label:HTMLLabelElement;
- var textNode:Text;
-
- div = document.createElement('div') as HTMLDivElement;
+ var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+ div.className = "mdl-textfield mdl-js-textfield";
- input = document.createElement('input') as HTMLInputElement;
+ var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
input.setAttribute('type', 'text');
input.className = 'mdl-textfield__input';
-
- label = document.createElement('label') as HTMLLabelElement;
- label.className = "mdl-textfield__label";
- _textNode = textNode = document.createTextNode('') as Text;
+ //attach input handler to dispatch flexjs change event when user write in textinput
+ //goog.events.listen(element, 'change', killChangeHandler);
+ goog.events.listen(input, 'input', textChangeHandler);
+
+ var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
+ label.className = "mdl-textfield__label";
+
+ var textNode:Text = document.createTextNode('') as Text;
label.appendChild(textNode);
div.appendChild(input);
div.appendChild(label);
- element = div as WrappedHTMLElement;
-
- //attach input handler to dispatch flexjs change event when user write in textinput
- //goog.events.listen(element, 'change', killChangeHandler);
- goog.events.listen(input, 'input', textChangeHandler);
-
- positioner = element;
+ element = input as WrappedHTMLElement;
+
+ positioner = div as WrappedHTMLElement;
positioner.style.position = 'relative';
- (div as WrappedHTMLElement).flexjs_wrapper = this;
(input as WrappedHTMLElement).flexjs_wrapper = this;
(label as WrappedHTMLElement).flexjs_wrapper = this;
element.flexjs_wrapper = this;
- className = typeNames = "mdl-textfield mdl-js-textfield";
-
return element;
}
@@ -114,26 +107,8 @@ package org.apache.flex.mdl
_mdlEffect = value;
COMPILE::JS
{
- className = _mdlEffect;
+ positioner.className = positioner.className + " " + _mdlEffect;
}
}
-
- /**
- * @private
- */
- override public function set text(value:String):void
- {
- //COMPILE::SWF
- //{
- //inSetter = true;
- //ITextModel(model).text = value;
- //inSetter = false;
- //}
- COMPILE::JS
- {
- _textNode.nodeValue = value;
- dispatchEvent(new Event('textChange'));
- }
- }
}
}
[28/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL Slider
fixes
Posted by ca...@apache.org.
MDL Slider fixes
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c73de483
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c73de483
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c73de483
Branch: refs/heads/feature/mdl
Commit: c73de483936e6b7170aff41b2bea00aedabe6951
Parents: 64bea05
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 3 11:00:15 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 4 ++-
.../src/main/flex/org/apache/flex/mdl/Slider.as | 37 +++++++++++---------
2 files changed, 24 insertions(+), 17 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c73de483/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 dca2da1..8487f5b 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -102,7 +102,9 @@ limitations under the License.
</mdl:RadioButton>
<mdl:RadioButton groupName="g1" text="Red"/>
- <mdl:Slider minimum="0" maximum="100" value="0"/>
+ <mdl:Slider/>
+
+ <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/>
</js:Form>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c73de483/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 2587227..31267ad 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
@@ -87,7 +87,7 @@ package org.apache.flex.mdl
COMPILE::JS
{
- (element as HTMLInputElement).value = "" + value;
+ (element as HTMLInputElement).value = IRangeModel(model).value.toString();
}
}
@@ -109,7 +109,7 @@ package org.apache.flex.mdl
COMPILE::JS
{
- (element as HTMLInputElement).min = "" + value;
+ (element as HTMLInputElement).min = IRangeModel(model).minimum.toString();
}
}
@@ -131,7 +131,7 @@ package org.apache.flex.mdl
COMPILE::JS
{
- (element as HTMLInputElement).max = "" + value;
+ (element as HTMLInputElement).max = IRangeModel(model).maximum.toString();
}
}
@@ -170,6 +170,11 @@ package org.apache.flex.mdl
public function set stepSize(value:Number):void
{
IRangeModel(model).stepSize = value;
+
+ COMPILE::JS
+ {
+ (element as HTMLInputElement).step = IRangeModel(model).stepSize.toString();
+ }
}
COMPILE::JS
@@ -191,33 +196,33 @@ package org.apache.flex.mdl
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";
+ var p:HTMLElement = document.createElement('p') as HTMLElement;
+ p.style.width = '300px';
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = "range";
+ 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';
- //input.style.width = '200px';
- //input.style.height = '30px';
+ p.appendChild(input);
element = input as WrappedHTMLElement;
//track = new SliderTrackView();
- //addBead(track);
-
+ //addBead(track);
//thumb = new SliderThumbView();
//addBead(thumb);
-
//controller = new SliderMouseController();
//addBead(controller);
- positioner = element;
+ positioner = p as WrappedHTMLElement;
positioner.style.position = 'relative';
+ (input as WrappedHTMLElement).flexjs_wrapper = this;
element.flexjs_wrapper = this;
- className = typeNames = 'mdl-slider mdl-js-slider';
-
return element;
}
[06/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - First MDL
commit. This is a Material Design Google SWC project to create components
with Google MDL look and feel
Posted by ca...@apache.org.
First MDL commit. This is a Material Design Google SWC project to create components with Google MDL look and feel
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/029b581b
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/029b581b
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/029b581b
Branch: refs/heads/feature/mdl
Commit: 029b581bfa6bdb7503a2c1207283c8ca3f8c3eeb
Parents: 019d1d2
Author: Carlos Rovira <ca...@apache.org>
Authored: Fri Oct 14 20:51:28 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../projects/MaterialDesignLite/build.xml | 116 ++++++++++++++++++
frameworks/projects/MaterialDesignLite/pom.xml | 117 +++++++++++++++++++
.../src/main/config/compile-as-config.xml | 87 ++++++++++++++
.../src/main/flex/MDLClasses.as | 37 ++++++
.../src/main/flex/org/apache/flex/mdl/Button.as | 81 +++++++++++++
.../src/main/resources/defaults.css | 25 ++++
.../src/main/resources/mdl-as-manifest.xml | 26 +++++
.../src/main/resources/mdl-manifest.xml | 27 +++++
8 files changed, 516 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/frameworks/projects/MaterialDesignLite/build.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/build.xml b/frameworks/projects/MaterialDesignLite/build.xml
new file mode 100644
index 0000000..b61453d
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/build.xml
@@ -0,0 +1,116 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<project name="MaterialDesignLite" default="main" basedir=".">
+ <property name="FLEXJS_HOME" location="../../.."/>
+
+ <property file="${FLEXJS_HOME}/env.properties"/>
+ <property environment="env"/>
+ <property file="${FLEXJS_HOME}/build.properties"/>
+ <property name="FLEX_HOME" value="${FLEXJS_HOME}"/>
+
+ <property name="target.name" value="${ant.project.name}.swc" />
+
+ <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+ </target>
+
+ <target name="compile-js">
+ <ant dir="${FLEXJS_HOME}/frameworks/js/FlexJS/projects/${ant.project.name}JS/" inheritAll="false" />
+ </target>
+
+ <target name="copy-swc">
+ <copy file="${basedir}/target/${target.name}" tofile="${FLEXJS_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-for-tests" >
+ <condition property="skip-tests" >
+ <not>
+ <available file="${basedir}/src/test/flex/build.xml" />
+ </not>
+ </condition>
+ </target>
+
+ <target name="test" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/flex" />
+ </target>
+
+ <target name="clean">
+ <delete failonerror="false">
+ <fileset dir="${FLEXJS_HOME}/frameworks/libs">
+ <include name="${target.name}"/>
+ </fileset>
+ </delete>
+ <delete failonerror="false" includeemptydirs="true">
+ <fileset dir="${basedir}/target">
+ <include name="**/**"/>
+ </fileset>
+ </delete>
+ <antcall target="clean-tests" />
+ </target>
+
+ <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+ <ant dir="src/test/flex" target="clean"/>
+ </target>
+
+ <target name="compile" description="Compiles .as files into .swc">
+ <echo message="Compiling libs/${ant.project.name}.swc"/>
+ <echo message="FLEX_HOME: ${FLEX_HOME}"/>
+ <echo message="FALCON_HOME: ${FALCON_HOME}"/>
+
+ <compc fork="true"
+ output="${basedir}/target/${target.name}">
+ <jvmarg line="${compc.jvm.args}"/>
+ <load-config filename="${basedir}/src/main/config/compile-as-config.xml" />
+ <arg value="+playerglobal.version=${playerglobal.version}" />
+ <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+ <arg value="-define=COMPILE::SWF,true" />
+ <arg value="-define=COMPILE::JS,false" />
+ </compc>
+ <copy file="${basedir}/target/${target.name}" tofile="${FLEXJS_HOME}/frameworks/libs/${target.name}" />
+ </target>
+
+ <target name="check-compiler" depends="check-falcon-home">
+ <path id="lib.path">
+ <fileset dir="${FALCON_HOME}/lib" includes="falcon-flexTasks.jar"/>
+ </path>
+ <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+ </target>
+
+ <target name="check-falcon-home" unless="FALCON_HOME"
+ description="Check FALCON_HOME is a directory.">
+
+ <echo message="FALCON_HOME is ${env.FALCON_HOME}"/>
+
+ <available file="${env.FALCON_HOME}/lib/falcon-mxmlc.jar"
+ type="file"
+ property="FALCON_HOME"
+ value="${env.FALCON_HOME}"/>
+
+ <available file="${FLEXJS_HOME}/../flex-falcon/compiler/lib/falcon-mxmlc.jar"
+ type="file"
+ property="FALCON_HOME"
+ value="${FLEXJS_HOME}/../flex-falcon/compiler"/>
+
+ <fail message="FALCON_HOME must be set to a folder with a lib sub-folder containing falcon-mxmlc.jar such as the compiler folder in flex-falcon repo or a FlexJS SDK folder"
+ unless="FALCON_HOME"/>
+ </target>
+
+</project>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/frameworks/projects/MaterialDesignLite/pom.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/pom.xml b/frameworks/projects/MaterialDesignLite/pom.xml
new file mode 100644
index 0000000..d5fde11
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/pom.xml
@@ -0,0 +1,117 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>projects</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>MaterialDesignLite</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <packaging>swc</packaging>
+
+ <name>Apache Flex - FlexJS: Framework: Libs: Material Design Lite</name>
+
+ <build>
+ <sourceDirectory>src/main/flex</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.flex.flexjs.compiler</groupId>
+ <artifactId>flexjs-maven-plugin</artifactId>
+ <version>${flexjs.compiler.version}</version>
+ <extensions>true</extensions>
+ <configuration>
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/flexjs/mdl</uri>
+ <manifest>${project.basedir}/src/main/resources/mdl-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <type>as</type>
+ <uri>library://ns.apache.org/flexjs/mdl</uri>
+ <manifest>${project.basedir}/src/main/resources/mdl-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+ <includeClasses>
+ <includeClass>MDLClasses</includeClass>
+ </includeClasses>
+ <includeFiles>
+ <include-file>
+ <name>defaults.css</name>
+ <path>../src/main/resources/defaults.css</path>
+ </include-file>
+ </includeFiles>
+ <includeLookupOnly>true</includeLookupOnly>
+ </configuration>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>typedefs</classifier>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Binding</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Graphics</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Collections</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ <classifier>typedefs</classifier>
+ </dependency>
+ </dependencies>
+
+</project>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/frameworks/projects/MaterialDesignLite/src/main/config/compile-as-config.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/config/compile-as-config.xml b/frameworks/projects/MaterialDesignLite/src/main/config/compile-as-config.xml
new file mode 100644
index 0000000..9f81189
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/config/compile-as-config.xml
@@ -0,0 +1,87 @@
+<!--
+
+ 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.
+
+-->
+<flex-config>
+
+ <compiler>
+ <accessible>false</accessible>
+
+ <external-library-path>
+ <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+ <path-element>../../../../../libs/Binding.swc</path-element>
+ <path-element>../../../../../libs/Core.swc</path-element>
+ <path-element>../../../../../libs/Graphics.swc</path-element>
+ <path-element>../../../../../libs/HTML.swc</path-element>
+ </external-library-path>
+
+ <mxml>
+ <children-as-data>true</children-as-data>
+ </mxml>
+ <binding-value-change-event>org.apache.flex.events.ValueChangeEvent</binding-value-change-event>
+ <binding-value-change-event-kind>org.apache.flex.events.ValueChangeEvent</binding-value-change-event-kind>
+ <binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+ <keep-as3-metadata>
+ <name>Bindable</name>
+ <name>Managed</name>
+ <name>ChangeEvent</name>
+ <name>NonCommittingChangeEvent</name>
+ <name>Transient</name>
+ </keep-as3-metadata>
+
+ <locale/>
+
+ <library-path/>
+
+ <namespaces>
+ <namespace>
+ <uri>library://ns.apache.org/flexjs/mdl</uri>
+ <manifest>../resources/mdl-manifest.xml</manifest>
+ </namespace>
+ <namespace>
+ <uri>library://ns.apache.org/flexjs/mdl</uri>
+ <manifest>../resources/mdl-as-manifest.xml</manifest>
+ </namespace>
+ </namespaces>
+
+ <source-path>
+ <path-element>../flex</path-element>
+ </source-path>
+
+ <warn-no-constructor>false</warn-no-constructor>
+ </compiler>
+
+ <include-file>
+ <name>defaults.css</name>
+ <path>../resources/defaults.css</path>
+ </include-file>
+
+ <include-lookup-only>true</include-lookup-only>
+
+ <include-classes>
+ <class>MDLClasses</class>
+ </include-classes>
+
+ <include-namespaces>
+ <uri>library://ns.apache.org/flexjs/mdl</uri>
+ </include-namespaces>
+
+ <target-player>${playerglobal.version}</target-player>
+
+
+</flex-config>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/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
new file mode 100644
index 0000000..733728e
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
@@ -0,0 +1,37 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+
+/**
+ * @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.flat.beads.CSSScrollBarView; CSSScrollBarView;
+ }
+}
+
+}
+
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
new file mode 100644
index 0000000..11f218c
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
@@ -0,0 +1,81 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import org.apache.flex.html.Button;
+ }
+ COMPILE::JS
+ {
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The Button class provides a Material Design Library UI-like appearance for
+ * a Button.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ COMPILE::SWF
+ public class Button extends org.apache.flex.html.Button
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function Button()
+ {
+ super();
+ }
+ }
+
+ COMPILE::JS
+ public class Button extends UIBase
+ {
+ private var button:HTMLButtonElement;
+
+ /**
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ * @flexjsignorecoercion HTMLButtonElement
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+ var button:HTMLButtonElement;
+
+ element = button = document.createElement('button') as HTMLButtonElement;
+ button.className = 'mdl-button mdl-js-button mdl-button--fab mdl-button--colored';
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ (button as WrappedHTMLElement).flexjs_wrapper = this;
+ element.flexjs_wrapper = this;
+
+ return element;
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/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
new file mode 100644
index 0000000..f795472
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -0,0 +1,25 @@
+/*
+ *
+ * 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.
+ *
+ */
+
+@namespace "library://ns.apache.org/flexjs/mdl";
+
+
+
+
+
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-as-manifest.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-as-manifest.xml b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-as-manifest.xml
new file mode 100644
index 0000000..2e1e719
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-as-manifest.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<componentPackage>
+
+ <!--<component id="DropDownListList" class="org.apache.flex.mdl.supportClasses.DropDownListList" />-->
+
+</componentPackage>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/029b581b/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
new file mode 100644
index 0000000..68dffad
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!--
+
+ 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.
+
+-->
+
+
+<componentPackage>
+
+ <component id="Button" class="org.apache.flex.html.Button" lookupOnly="true" />
+ <component id="TextInput" class="org.apache.flex.html.TextInput" lookupOnly="true" />
+
+</componentPackage>
[21/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Fixed
radio button
Posted by ca...@apache.org.
Fixed radio button
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/e9dd895f
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/e9dd895f
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/e9dd895f
Branch: refs/heads/feature/mdl
Commit: e9dd895f8d6bef61fea4ac1a894dd114f5349b7f
Parents: 73557fa
Author: Carlos Rovira <ca...@apache.org>
Authored: Tue Oct 25 00:06:03 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flex/org/apache/flex/mdl/RadioButton.as | 84 ++++++++------------
1 file changed, 33 insertions(+), 51 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e9dd895f/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
index d19ce78..ee79872 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -26,6 +26,7 @@ package org.apache.flex.mdl
{
import org.apache.flex.core.UIBase;
import org.apache.flex.core.WrappedHTMLElement;
+ import org.apache.flex.html.supportClasses.RadioButtonIcon;
}
/**
@@ -74,8 +75,8 @@ package org.apache.flex.mdl
*/
public static var radioCounter:int = 0;
- private var input:HTMLInputElement;
private var radio:HTMLSpanElement;
+ private var icon:RadioButtonIcon;
private var label:HTMLLabelElement;
private var textNode:Text;
@@ -88,22 +89,19 @@ package org.apache.flex.mdl
*/
override protected function createElement():WrappedHTMLElement
{
- // hide this eleement
- input = document.createElement('input') as HTMLInputElement;
- input.type = 'radio';
- input.className = 'mdl-radio__button';
- input.id = '_radio_' + radioCounter++;
- input.addEventListener('change', selectionChangeHandler, false);
+ icon = new RadioButtonIcon();
+ icon.className = 'mdl-radio__button';
+ icon.id = '_radio_' + RadioButton.radioCounter++;
+
+ textNode = document.createTextNode('') as Text;
radio = document.createElement('span') as HTMLSpanElement;
radio.className = 'mdl-radio__label';
radio.addEventListener('mouseover', mouseOverHandler, false);
radio.addEventListener('mouseout', mouseOutHandler, false);
- textNode = document.createTextNode('') as Text;
-
label = document.createElement('label') as HTMLLabelElement;
- label.appendChild(input);
+ label.appendChild(icon.element);
label.appendChild(radio);
radio.appendChild(textNode);
label.style.position = 'relative';
@@ -112,10 +110,10 @@ package org.apache.flex.mdl
positioner = element;
positioner.style.position = 'relative';
- (input as WrappedHTMLElement).flexjs_wrapper = this;
- (radio as WrappedHTMLElement).flexjs_wrapper = this;
- element.flexjs_wrapper = this;
+ (element as WrappedHTMLElement).flexjs_wrapper = this;
(textNode as WrappedHTMLElement).flexjs_wrapper = this;
+ (icon.element as WrappedHTMLElement).flexjs_wrapper = this;
+ (radio as WrappedHTMLElement).flexjs_wrapper = this;
className = typeNames = 'mdl-radio mdl-js-radio';
@@ -158,20 +156,16 @@ package org.apache.flex.mdl
{
super.id = value;
label.id = value;
- input.id = value;
+ icon.element.id = value;
}
- /**
- * @flexjsignorecoercion String
- */
public function get groupName():String
{
- return input.name as String;
+ return (icon.element as HTMLInputElement).name as String;
}
-
public function set groupName(value:String):void
{
- input.name = value;
+ (icon.element as HTMLInputElement).name = value;
}
public function get text():String
@@ -184,74 +178,62 @@ package org.apache.flex.mdl
textNode.nodeValue = value;
}
+ /** @export */
public function get selected():Boolean
{
- return input.checked;
+ return (icon.element as HTMLInputElement).checked;
}
-
public function set selected(value:Boolean):void
{
- input.checked = value;
- /*if (input.checked)
- radio.className = 'radio-icon-checked';
- else
- radio.className = 'radio-icon';*/
+ (icon.element as HTMLInputElement).checked = value;
}
- public function get value():String
+ public function get value():Object
{
- return input.value;
+ return (icon.element as HTMLInputElement).value;
}
-
- public function set value(value:String):void
+ public function set value(v:Object):void
{
- input.value = value;
+ (icon.element as HTMLInputElement).value = v as String;
}
- /**
- * @flexjsignorecoercion Array
- * @flexjsignorecoercion String
- */
public function get selectedValue():Object
{
- var buttons:Array;
+ var buttons:NodeList;
var groupName:String;
var i:int;
var n:int;
-
- groupName = input.name as String;
- buttons = document.getElementsByName(groupName) as Array;
+
+ groupName = (icon.element as HTMLInputElement).name as String;
+ buttons = document.getElementsByName(groupName);
n = buttons.length;
-
+
for (i = 0; i < n; i++) {
if (buttons[i].checked) {
return buttons[i].value;
}
}
- return null;
+ return null;
}
-
+
/**
* @flexjsignorecoercion Array
- * @flexjsignorecoercion String
*/
public function set selectedValue(value:Object):void
{
- var buttons:Array;
+ var buttons:NodeList;
var groupName:String;
var i:int;
var n:int;
-
- groupName = input.name as String;
- buttons = document.getElementsByName(groupName) as Array;
+
+ groupName = (icon.element as HTMLInputElement).name as String;
+ buttons = document.getElementsByName(groupName);
n = buttons.length;
for (i = 0; i < n; i++) {
if (buttons[i].value === value) {
buttons[i].checked = true;
- buttons[i].flexjs_wrapper.selected = true;
+ break;
}
- else
- buttons[i].flexjs_wrapper.selected = false;
}
}
[24/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
EffectBead in place (for now using a string,
maybe better change to boolean flags)
Posted by ca...@apache.org.
MDL EffectBead in place (for now using a string, maybe better change to boolean flags)
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8296baae
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8296baae
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8296baae
Branch: refs/heads/feature/mdl
Commit: 8296baae3e3724b39586cc41f58ab01304719504
Parents: 3da7064
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 26 12:57:18 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 45 ++++++--
.../src/main/flex/org/apache/flex/mdl/Button.as | 25 -----
.../main/flex/org/apache/flex/mdl/CheckBox.as | 16 ---
.../flex/org/apache/flex/mdl/RadioButton.as | 17 ---
.../main/flex/org/apache/flex/mdl/TextInput.as | 20 +---
.../org/apache/flex/mdl/beads/EffectBead.as | 107 +++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 1 +
7 files changed, 145 insertions(+), 86 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/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 9f1be78..82126a4 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -37,21 +37,40 @@ limitations under the License.
<mdl:Button/>
<!-- Fab button -->
- <mdl:Button mdlEffect="mdl-button--fab mdl-button--colored">
+ <mdl:Button>
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-button--fab mdl-button--colored"/>
+ </js:beads>
<i class="material-icons">add</i>
</mdl:Button>
<!-- Fab with Ripple -->
- <mdl:Button mdlEffect="mdl-button--fab mdl-js-ripple-effect">
+ <mdl:Button>
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-button--fab mdl-js-ripple-effect"/>
+ </js:beads>
<i class="material-icons md-48">face</i>
</mdl:Button>
<!-- Raised button -->
- <mdl:Button mdlEffect="mdl-button--raised mdl-button--colored" text="BUTTON"/>
+ <mdl:Button text="BUTTON">
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-button--raised mdl-button--colored"/>
+ </js:beads>
+ </mdl:Button>
+
<!-- Raised button with ripple -->
- <mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/>
+ <mdl:Button text="BUTTON">
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent"/>
+ </js:beads>
+ </mdl:Button>
<!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
- <mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/>
+ <mdl:Button text="BUTTON">
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-button--raised"/>
+ </js:beads>
+ </mdl:Button>
</js:HContainer>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
@@ -60,18 +79,26 @@ limitations under the License.
<mdl:TextPromptBead prompt="Normal Text Field..."/>
</js:beads>
</mdl:TextInput>
- <mdl:TextInput mdlEffect="mdl-textfield--floating-label">
+ <mdl:TextInput>
<js:beads>
+ <mdl:EffectBead mdlEffect="mdl-textfield--floating-label"/>
<mdl:TextPromptBead prompt="Floating Label"/>
</js:beads>
</mdl:TextInput>
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
<mdl:CheckBox id="mdlchk" text="Disabled at start" />
- <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" mdlEffect="mdl-js-ripple-effect"/>
-
+ <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true">
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/>
+ </js:beads>
+ </mdl:CheckBox>
<mdl:RadioButton groupName="g1" text="Black"/>
- <mdl:RadioButton groupName="g1" text="Ripple" mdlEffect="mdl-js-ripple-effect"/>
+ <mdl:RadioButton groupName="g1" text="Ripple">
+ <js:beads>
+ <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/>
+ </js:beads>
+ </mdl:RadioButton>
<mdl:RadioButton groupName="g1" text="Red"/>
</js:Form>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
index 7c17757..27116c4 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
@@ -67,30 +67,5 @@ package org.apache.flex.mdl
return element;
}
-
- /*public static const RAISED_EFFECT:String = "mdl-button--raised";
- public static const FAB_EFFECT:String = "mdl-button--fab";
- public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab";
- public static const ICON_EFFECT:String = "mdl-button--icon";
- public static const COLORED_EFFECT:String = "mdl-button--colored";
- public static const PRIMARY_EFFECT:String = "mdl-button--primary";
- public static const ACCENT_EFFECT:String = "mdl-button--accent";
- public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";*/
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- COMPILE::JS
- {
- className = _mdlEffect;
- }
- }
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
index 60db161..58d3ba2 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -167,22 +167,6 @@ package org.apache.flex.mdl
else
checkbox.className = 'checkbox-icon';*/
}
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- COMPILE::JS
- {
- className = _mdlEffect;
- }
- }
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
index ee79872..0f8237d 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -236,23 +236,6 @@ package org.apache.flex.mdl
}
}
}
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- COMPILE::JS
- {
- className = _mdlEffect;
- }
- }
-
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index c8244a4..a53f31e 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -105,24 +105,6 @@ package org.apache.flex.mdl
element.flexjs_wrapper = this;
return element;
- }
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- COMPILE::JS
- {
- positioner.className = positioner.className + " " + _mdlEffect;
- }
- }
-
-
+ }
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
new file mode 100644
index 0000000..b01538d
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.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.flex.mdl.beads
+{
+ import org.apache.flex.core.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+
+ import org.apache.flex.mdl.TextInput;
+
+ /**
+ * The EffectBead class is a specialty bead that can be used with
+ * any MDL control to apply some MDL complementary effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class EffectBead implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function EffectBead()
+ {
+ }
+
+ /*public static const RAISED_EFFECT:String = "mdl-button--raised";
+ public static const FAB_EFFECT:String = "mdl-button--fab";
+ public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab";
+ public static const ICON_EFFECT:String = "mdl-button--icon";
+ public static const COLORED_EFFECT:String = "mdl-button--colored";
+ public static const PRIMARY_EFFECT:String = "mdl-button--primary";
+ public static const ACCENT_EFFECT:String = "mdl-button--accent";
+ public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";*/
+
+ private var _mdlEffect:String = "";
+
+ /**
+ * The string to use as the MDL effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ if (value is TextInput) {
+ var mdTi:TextInput = value as TextInput;
+ mdTi.positioner.className = mdTi.positioner.className + " " + mdlEffect;
+ } else {
+ var host:UIBase = value as UIBase;
+ host.className = mdlEffect;
+ }
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8296baae/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 9f47fea..aca9380 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -26,5 +26,6 @@
<component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
<component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
<component id="TextPromptBead" class="org.apache.flex.mdl.beads.TextPromptBead"/>
+ <component id="EffectBead" class="org.apache.flex.mdl.beads.EffectBead"/>
</componentPackage>
[13/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
TextInput
Posted by ca...@apache.org.
MDL TextInput
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/2ab005bd
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/2ab005bd
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/2ab005bd
Branch: refs/heads/feature/mdl
Commit: 2ab005bd9ea8c69576a002bcf5d07d585e5a4bb6
Parents: f5064ba
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 13:40:29 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../main/flex/org/apache/flex/mdl/TextInput.as | 99 ++++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 2 +-
2 files changed, 100 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2ab005bd/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
new file mode 100644
index 0000000..dace484
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -0,0 +1,99 @@
+//
+// 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.html.TextInput;
+
+ COMPILE::JS
+ {
+ import goog.events;
+ import org.apache.flex.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The TextInput class provides a Material Design Library UI-like appearance for
+ * a TextInput.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class TextInput extends org.apache.flex.html.TextInput
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function TextInput()
+ {
+ super();
+ }
+
+ /**
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ var div:HTMLDivElement;
+ var input:HTMLInputElement;
+ var label:HTMLLabelElement;
+ var textNode:Text;
+ //element = document.createElement('input') as WrappedHTMLElement;
+
+ div = document.createElement('div') as HTMLDivElement;
+ div.className = "mdl-textfield mdl-js-textfield";
+
+ input = document.createElement('input') as HTMLInputElement;
+ input.setAttribute('type', 'text');
+ input.className = 'mdl-textfield__input';
+
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = "mdl-textfield__label";
+
+ textNode = document.createTextNode('Text...') as Text;
+ label.appendChild(textNode);
+ //element.className = 'TextInput';
+ //typeNames = 'TextInput';
+
+ div.appendChild(input);
+ div.appendChild(label);
+
+ element = div as WrappedHTMLElement;
+
+ //attach input handler to dispatch flexjs change event when user write in textinput
+ //goog.events.listen(element, 'change', killChangeHandler);
+ goog.events.listen(input, 'input', textChangeHandler);
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ (div as WrappedHTMLElement).flexjs_wrapper = this;
+ (input as WrappedHTMLElement).flexjs_wrapper = this;
+ (label as WrappedHTMLElement).flexjs_wrapper = this;
+ element.flexjs_wrapper = this;
+
+ return element;
+ }
+
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/2ab005bd/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 897aab5..eb65435 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -22,6 +22,6 @@
<componentPackage>
<component id="Button" class="org.apache.flex.mdl.Button"/>
- <component id="TextInput" class="org.apache.flex.html.TextInput" lookupOnly="true" />
+ <component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
</componentPackage>
[08/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
Example project
Posted by ca...@apache.org.
MDL Example project
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/49521d30
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/49521d30
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/49521d30
Branch: refs/heads/feature/mdl
Commit: 49521d30b932fd2f8c7c4cfea56db2e457179093
Parents: ed67c7a
Author: Carlos Rovira <ca...@apache.org>
Authored: Fri Oct 14 23:05:39 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/.vscode/launch.json | 21 ++++
examples/flexjs/MDLExample/.vscode/tasks.json | 11 ++
examples/flexjs/MDLExample/asconfig.json | 14 +++
examples/flexjs/MDLExample/pom.xml | 112 +++++++++++++++++++
.../flexjs/MDLExample/src/main/flex/App.mxml | 39 +++++++
.../MDLExample/src/main/resources/Unknown.jpeg | Bin 0 -> 50531 bytes
.../main/resources/mdl-js-index-template.html | 32 ++++++
.../src/main/resources/mdl-styles.css | 32 ++++++
examples/flexjs/pom.xml | 1 +
9 files changed, 262 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/.vscode/launch.json
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/.vscode/launch.json b/examples/flexjs/MDLExample/.vscode/launch.json
new file mode 100644
index 0000000..4fec2c2
--- /dev/null
+++ b/examples/flexjs/MDLExample/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Launch Chrome against debug.html, with sourcemaps",
+ "type": "chrome",
+ "request": "launch",
+ "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+ "sourceMaps": true,
+ "preLaunchTask": ""
+ },
+ {
+ "name": "Launch Firefox against debug.html, with sourcemaps",
+ "type": "firefox",
+ "request": "launch",
+ "file": "${workspaceRoot}/debug.html",
+ "sourceMaps": true,
+ "preLaunchTask": "asconfigc"
+ }
+ ]
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/.vscode/tasks.json
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/.vscode/tasks.json b/examples/flexjs/MDLExample/.vscode/tasks.json
new file mode 100644
index 0000000..ac2c02d
--- /dev/null
+++ b/examples/flexjs/MDLExample/.vscode/tasks.json
@@ -0,0 +1,11 @@
+{
+ // See https://go.microsoft.com/fwlink/?LinkId=733558
+ // for the documentation about the tasks.json format
+ "version": "0.1.0",
+ "command": "asconfigc",
+ "isShellCommand": true,
+ "args": [
+ "--flexHome=/Users/carlosrovira/Dev/Flex/sdks/flexjs-0.8.0"
+ ],
+ "showOutput": "always"
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/asconfig.json
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/asconfig.json b/examples/flexjs/MDLExample/asconfig.json
new file mode 100644
index 0000000..d15de04
--- /dev/null
+++ b/examples/flexjs/MDLExample/asconfig.json
@@ -0,0 +1,14 @@
+{
+ "config": "flex",
+ "compilerOptions": {
+ "debug": true,
+ "source-map": true,
+ "js-output-type": "flexjs",
+ "output": "./target/javascript"
+ },
+ "additionalOptions": "-html-template=src/main/resources/mdl-js-index-template.html",
+ "files":
+ [
+ "src/main/flex/App.mxml"
+ ]
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml
new file mode 100644
index 0000000..207dab5
--- /dev/null
+++ b/examples/flexjs/MDLExample/pom.xml
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+ 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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0"
+ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+ xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
+ <groupId>org.apache.flex.flexjs.examples</groupId>
+ <artifactId>examples-flexjs</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ </parent>
+
+ <artifactId>MDLExample</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <packaging>swf</packaging>
+
+ <name>Apache Flex - FlexJS: Examples: FlexJS: MDLExample</name>
+
+ <build>
+ <sourceDirectory>src/main/flex</sourceDirectory>
+ <plugins>
+ <plugin>
+ <groupId>org.apache.flex.flexjs.compiler</groupId>
+ <artifactId>flexjs-maven-plugin</artifactId>
+ <extensions>true</extensions>
+ <configuration>
+ <flashVersion>20.0</flashVersion>
+ <mainClass>App.mxml</mainClass>
+ </configuration>
+ <executions>
+ <!-- Add a second execution with output set to JavaScript (Flash is the default) -->
+ <execution>
+ <id>compile-javascript</id>
+ <phase>compile</phase>
+ <goals>
+ <goal>compile-app</goal>
+ </goals>
+ <configuration>
+ <outputJavaScript>true</outputJavaScript>
+ <htmlTemplate>${basedir}/src/main/resources/mdl-js-index-template.html</htmlTemplate>
+ </configuration>
+ </execution>
+ </executions>
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.compiler</groupId>
+ <artifactId>compiler-jx</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ </dependency>
+ </dependencies>
+ </plugin>
+ </plugins>
+ </build>
+
+ <dependencies>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Core</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>MaterialDesignLite</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+
+ <!-- Needed for Flash compilation -->
+ <dependency>
+ <groupId>com.adobe.flash.framework</groupId>
+ <artifactId>playerglobal</artifactId>
+ <version>20.0</version>
+ <type>swc</type>
+ <scope>provided</scope>
+ </dependency>
+
+ <!-- Needed for JavaScript compilation -->
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>HTML</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ <dependency>
+ <groupId>org.apache.flex.flexjs.framework</groupId>
+ <artifactId>Language</artifactId>
+ <version>0.8.0-SNAPSHOT</version>
+ <type>swc</type>
+ </dependency>
+ </dependencies>
+
+</project>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/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
new file mode 100644
index 0000000..4ad2a62
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+ xmlns:js="library://ns.apache.org/flexjs/basic"
+ xmlns:local="*"
+ xmlns:mdl="library://ns.apache.org/flexjs/mdl">
+
+ <js:valuesImpl>
+ <js:SimpleCSSValuesImpl />
+ </js:valuesImpl>
+
+ <js:initialView>
+ <js:View>
+
+ <js:Button className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+
+ </js:Button>
+
+ <mdl:Button/>
+ </js:View>
+ </js:initialView>
+</js:Application>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/src/main/resources/Unknown.jpeg
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/Unknown.jpeg b/examples/flexjs/MDLExample/src/main/resources/Unknown.jpeg
new file mode 100644
index 0000000..08fb201
Binary files /dev/null and b/examples/flexjs/MDLExample/src/main/resources/Unknown.jpeg differ
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/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
new file mode 100644
index 0000000..9eaf780
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-js-index-template.html
@@ -0,0 +1,32 @@
+<!--
+ 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.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+ <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">
+ <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">
+ <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
+${head}
+</head>
+<body>
+${body}
+</body>
+</html>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
new file mode 100644
index 0000000..6a07905
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -0,0 +1,32 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.
+//
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+.demo-card-wide.mdl-card {
+ width: 512px;
+}
+.demo-card-wide > .mdl-card__title {
+ color: #fff;
+ height: 176px;
+ background: url('welcome_card.jpg') center / cover;
+}
+.demo-card-wide > .mdl-card__menu {
+ color: #fff;
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/49521d30/examples/flexjs/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/pom.xml b/examples/flexjs/pom.xml
index cf65ec1..f603abd 100644
--- a/examples/flexjs/pom.xml
+++ b/examples/flexjs/pom.xml
@@ -48,6 +48,7 @@
<module>FlexWebsiteStatsViewer</module>
<module>HelloWorld</module>
<module>MapSearch</module>
+ <module>MDLExample</module>
<module>MobileMap</module>
<module>MobileStocks</module>
<module>MobileTrader</module>
[07/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Add MDL
module to pom
Posted by ca...@apache.org.
Add MDL module to pom
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/ed67c7ac
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/ed67c7ac
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/ed67c7ac
Branch: refs/heads/feature/mdl
Commit: ed67c7ace9bb20cc53b4f34eef6f0fe2086e7dd1
Parents: 029b581
Author: Carlos Rovira <ca...@apache.org>
Authored: Fri Oct 14 20:52:53 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
frameworks/projects/pom.xml | 1 +
1 file changed, 1 insertion(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/ed67c7ac/frameworks/projects/pom.xml
----------------------------------------------------------------------
diff --git a/frameworks/projects/pom.xml b/frameworks/projects/pom.xml
index 63d5252..653e34a 100644
--- a/frameworks/projects/pom.xml
+++ b/frameworks/projects/pom.xml
@@ -48,6 +48,7 @@
<module>HTML5</module>
<module>JQuery</module>
<module>Language</module>
+ <module>MaterialDesignLite</module>
<module>Mobile</module>
<module>Network</module>
<module>Reflection</module>
[05/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Text Input
with floating text
Posted by ca...@apache.org.
Text Input with floating text
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/50513e2d
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/50513e2d
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/50513e2d
Branch: refs/heads/feature/mdl
Commit: 50513e2d2839ef44b0a1789480e90f7302f71a0e
Parents: 8150e17
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 19 02:21:37 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 5 ++-
.../main/flex/org/apache/flex/mdl/TextInput.as | 45 +++++++++++++++++++-
2 files changed, 48 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/50513e2d/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 95dad1b..636b72b 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -57,7 +57,9 @@ limitations under the License.
</js:Container>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/>
+ <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/>
+
+ <mdl:TextInput mdlEffect="mdl-textfield--floating-label" text="Floating Label"/>
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
<mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/>
@@ -66,6 +68,7 @@ limitations under the License.
<mdl:RadioButton groupName="g1" text="Black"/>
<mdl:RadioButton groupName="g1" text="White"/>
<mdl:RadioButton groupName="g1" text="Red"/>
+
</js:Form>
</js:View>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/50513e2d/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index 4617678..48d71bf 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -49,8 +49,17 @@ package org.apache.flex.mdl
super();
}
+ COMPILE::JS
+ {
+ private var _textNode:Text;
+ }
+
/**
* @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ * @flexjsignorecoercion HTMLDivElement
+ * @flexjsignorecoercion HTMLInputElement
+ * @flexjsignorecoercion HTMLLabelElement
+ * @flexjsignorecoercion Text
*/
COMPILE::JS
override protected function createElement():WrappedHTMLElement
@@ -70,7 +79,7 @@ package org.apache.flex.mdl
label = document.createElement('label') as HTMLLabelElement;
label.className = "mdl-textfield__label";
- textNode = document.createTextNode('') as Text;
+ _textNode = textNode = document.createTextNode('') as Text;
label.appendChild(textNode);
div.appendChild(input);
@@ -94,5 +103,39 @@ package org.apache.flex.mdl
return element;
}
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ COMPILE::JS
+ {
+ element.className = 'mdl-textfield mdl-js-textfield ' + _mdlEffect;
+ }
+ }
+
+ /**
+ * @private
+ * @flexjsignorecoercion HTMLInputElement
+ */
+ override public function set text(value:String):void
+ {
+ COMPILE::SWF
+ {
+ //inSetter = true;
+ //ITextModel(model).text = value;
+ //inSetter = false;
+ }
+ COMPILE::JS
+ {
+ _textNode.text = value;
+ dispatchEvent(new Event('textChange'));
+ }
+ }
}
}
[11/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - fix MDL
swc to use the correct Button
Posted by ca...@apache.org.
fix MDL swc to use the correct Button
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/4f90ead5
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/4f90ead5
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/4f90ead5
Branch: refs/heads/feature/mdl
Commit: 4f90ead51a0c1454c3516365247b748b914bad8e
Parents: 5a2e5bc
Author: Alex Harui <ah...@apache.org>
Authored: Sun Oct 16 21:25:09 2016 -0700
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../src/main/flex/org/apache/flex/mdl/Button.as | 5 +++--
.../MaterialDesignLite/src/main/resources/mdl-manifest.xml | 2 +-
2 files changed, 4 insertions(+), 3 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4f90ead5/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
index 11f218c..7f836f6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
@@ -66,8 +66,9 @@ package org.apache.flex.mdl
override protected function createElement():WrappedHTMLElement
{
var button:HTMLButtonElement;
-
- element = button = document.createElement('button') as HTMLButtonElement;
+
+ button = document.createElement('button') as HTMLButtonElement;
+ element = button as WrappedHTMLElement;
button.className = 'mdl-button mdl-js-button mdl-button--fab mdl-button--colored';
positioner = element;
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/4f90ead5/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 68dffad..897aab5 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -21,7 +21,7 @@
<componentPackage>
- <component id="Button" class="org.apache.flex.html.Button" lookupOnly="true" />
+ <component id="Button" class="org.apache.flex.mdl.Button"/>
<component id="TextInput" class="org.apache.flex.html.TextInput" lookupOnly="true" />
</componentPackage>
[12/29] git commit: [flex-asjs] [refs/heads/feature/mdl] -
Introducing js:Form
Posted by ca...@apache.org.
Introducing js:Form
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f5064bae
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f5064bae
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f5064bae
Branch: refs/heads/feature/mdl
Commit: f5064bae447da6d291adbba801a480fb9c08b236
Parents: 4f90ead
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 11:54:29 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/src/main/flex/App.mxml | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f5064bae/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 37e9e6a..b94a0d7 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -56,11 +56,12 @@ limitations under the License.
</js:Container>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <js:Container className="mdl-textfield mdl-js-textfield">
- <js:TextInput className="mdl-textfield__input" id="sample1"/>
- <js:Label className="mdl-textfield__label" text="Text..."/>
- </js:Container>
-
+ <js:Form action="http://www.google.com">
+ <js:Container className="mdl-textfield mdl-js-textfield">
+ <js:TextInput className="mdl-textfield__input" id="sample1"/>
+ <js:Label className="mdl-textfield__label" text="Text..."/>
+ </js:Container>
+ </js:Form>
</js:View>
</js:initialView>
[17/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
RadioButton
Posted by ca...@apache.org.
MDL RadioButton
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/32945319
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/32945319
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/32945319
Branch: refs/heads/feature/mdl
Commit: 32945319baa6f1fc7a1178bddfc0143d6d650561
Parents: d91459b
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 17:58:42 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flex/org/apache/flex/mdl/RadioButton.as | 249 +++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 1 +
2 files changed, 250 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/32945319/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
new file mode 100644
index 0000000..d7e9b2f
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -0,0 +1,249 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import org.apache.flex.html.RadioButton;
+ }
+ COMPILE::JS
+ {
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.core.WrappedHTMLElement;
+ }
+
+ /**
+ * The RadioButton class provides a MDL UI-like appearance for
+ * a RadioButton.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ COMPILE::SWF
+ public class RadioButton extends org.apache.flex.html.RadioButton
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function RadioButton()
+ {
+ super();
+ }
+ }
+
+ COMPILE::JS
+ public class RadioButton extends UIBase
+ {
+ /**
+ * Provides unique name
+ */
+ public static var radioCounter:int = 0;
+
+ private var input:HTMLInputElement;
+ private var radio:HTMLSpanElement;
+ private var label:HTMLLabelElement;
+ private var textNode:Text;
+
+ /**
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ * @flexjsignorecoercion HTMLLabelElement
+ * @flexjsignorecoercion HTMLInputElement
+ * @flexjsignorecoercion HTMLSpanElement
+ * @flexjsignorecoercion Text
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+ // hide this eleement
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = 'radio';
+ input.className = 'mdl-radio__button';
+ input.id = '_radio_' + radioCounter++;
+ input.addEventListener('change', selectionChangeHandler, false);
+
+ radio = document.createElement('span') as HTMLSpanElement;
+ radio.className = 'mdl-radio__label';
+ radio.addEventListener('mouseover', mouseOverHandler, false);
+ radio.addEventListener('mouseout', mouseOutHandler, false);
+
+ textNode = document.createTextNode('') as Text;
+
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = "mdl-radio mdl-js-radio mdl-js-ripple-effect";
+ label.appendChild(input);
+ label.appendChild(radio);
+ radio.appendChild(textNode);
+ label.style.position = 'relative';
+
+ element = label as WrappedHTMLElement;
+ //element.className = 'RadioButton';
+ typeNames = 'RadioButton';
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ (input as WrappedHTMLElement).flexjs_wrapper = this;
+ (radio as WrappedHTMLElement).flexjs_wrapper = this;
+ element.flexjs_wrapper = this;
+ (textNode as WrappedHTMLElement).flexjs_wrapper = this;
+
+ return element;
+ };
+
+
+ /**
+ * @param e The event object.
+ */
+ private function mouseOverHandler(e:Event):void
+ {
+ //radio.className = 'radio-icon-hover';
+ }
+
+
+ /**
+ * @param e The event object.
+ */
+ private function mouseOutHandler(e:Event):void
+ {
+ /*if (input.checked)
+ radio.className = 'radio-icon-checked';
+ else
+ radio.className = 'radio-icon';*/
+ }
+
+
+ /**
+ * @param e The event object.
+ */
+ private function selectionChangeHandler(e:Event):void
+ {
+ // this should reset the icons in the non-selected radio
+ selectedValue = value;
+ }
+
+
+ override public function set id(value:String):void
+ {
+ super.id = value;
+ label.id = value;
+ input.id = value;
+ }
+
+ /**
+ * @flexjsignorecoercion String
+ */
+ public function get groupName():String
+ {
+ return input.name as String;
+ }
+
+ public function set groupName(value:String):void
+ {
+ input.name = value;
+ }
+
+ public function get text():String
+ {
+ return textNode.nodeValue;
+ }
+
+ public function set text(value:String):void
+ {
+ textNode.nodeValue = value;
+ }
+
+ public function get selected():Boolean
+ {
+ return input.checked;
+ }
+
+ public function set selected(value:Boolean):void
+ {
+ input.checked = value;
+ /*if (input.checked)
+ radio.className = 'radio-icon-checked';
+ else
+ radio.className = 'radio-icon';*/
+ }
+
+ public function get value():String
+ {
+ return input.value;
+ }
+
+ public function set value(value:String):void
+ {
+ input.value = value;
+ }
+
+ /**
+ * @flexjsignorecoercion Array
+ * @flexjsignorecoercion String
+ */
+ public function get selectedValue():Object
+ {
+ var buttons:Array;
+ var groupName:String;
+ var i:int;
+ var n:int;
+
+ groupName = input.name as String;
+ buttons = document.getElementsByName(groupName) as Array;
+ n = buttons.length;
+
+ for (i = 0; i < n; i++) {
+ if (buttons[i].checked) {
+ return buttons[i].value;
+ }
+ }
+ return null;
+ }
+
+ /**
+ * @flexjsignorecoercion Array
+ * @flexjsignorecoercion String
+ */
+ public function set selectedValue(value:Object):void
+ {
+ var buttons:Array;
+ var groupName:String;
+ var i:int;
+ var n:int;
+
+ groupName = input.name as String;
+ buttons = document.getElementsByName(groupName) as Array;
+ n = buttons.length;
+ for (i = 0; i < n; i++) {
+ if (buttons[i].value === value) {
+ buttons[i].checked = true;
+ buttons[i].flexjs_wrapper.selected = true;
+ }
+ else
+ buttons[i].flexjs_wrapper.selected = false;
+ }
+ }
+
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/32945319/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 ffbc9c0..6dcb073 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -24,5 +24,6 @@
<component id="Button" class="org.apache.flex.mdl.Button"/>
<component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
<component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
+ <component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
</componentPackage>
[25/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Disabled
bead
Posted by ca...@apache.org.
Disabled bead
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/6753b42a
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/6753b42a
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/6753b42a
Branch: refs/heads/feature/mdl
Commit: 6753b42a8201d9afed557b6d28626ab056fd17f1
Parents: c0cd0a5
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 26 23:19:29 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 3 +-
.../flex/org/apache/flex/mdl/beads/Disabled.as | 80 ++++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 1 +
3 files changed, 83 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6753b42a/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 0507f21..472f556 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -65,10 +65,11 @@ limitations under the License.
<mdl:ButtonEffect raised="true" ripple="true" accent="true"/>
</js:beads>
</mdl:Button>
- <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
+ <!-- Raised disabled button-->
<mdl:Button text="BUTTON">
<js:beads>
<mdl:ButtonEffect raised="true"/>
+ <mdl:Disabled/>
</js:beads>
</mdl:Button>
</js:HContainer>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6753b42a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
new file mode 100644
index 0000000..46067ff
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
@@ -0,0 +1,80 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.events.IEventDispatcher;
+
+ /**
+ * The Disabled bead class is a specialty bead that can be used to disable a MDL control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class Disabled implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function Disabled()
+ {
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ var host:UIBase = value as UIBase;
+ var input:HTMLInputElement;
+ //if (host.element is HTMLInputElement)
+ //{
+ input = host.element as HTMLInputElement;
+ input.disabled = "disabled";
+ //} else
+ //{
+ // throw new Error("Host element component in not type input");
+ //}
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6753b42a/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 8d30325..2d14e56 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -29,5 +29,6 @@
<component id="MDLEffect" class="org.apache.flex.mdl.beads.MDLEffect"/>
<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"/>
</componentPackage>
[04/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Changes to
Button and examples
Posted by ca...@apache.org.
Changes to Button and examples
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8150e17b
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8150e17b
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8150e17b
Branch: refs/heads/feature/mdl
Commit: 8150e17b8ed7a6b29193c8fe5b2a1f788dd02312
Parents: e3fc136
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 19 00:49:48 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 32 +++++----
.../src/main/flex/org/apache/flex/mdl/Button.as | 69 ++++++++++++--------
2 files changed, 57 insertions(+), 44 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8150e17b/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 209efae..95dad1b 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -30,44 +30,42 @@ limitations under the License.
<js:initialView>
<js:View>
- <js:Form action="http://www.google.com">
+ <js:Form action="#">
<!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
<js:Container>
<js:beads>
<js:HorizontalLayout />
</js:beads>
-
- <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+
+ <!-- Fab button -->
+ <mdl:Button mdlEffect="mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
- </js:TextButton>
+ </mdl:Button>
- <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
- <i class="material-icons">mood</i>
- </js:TextButton>
+ <!-- Fab with Ripple -->
+ <mdl:Button mdlEffect="mdl-button--fab mdl-js-ripple-effect">
+ <i class="material-icons md-48">face</i>
+ </mdl:Button>
<!-- Raised button -->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
+ <mdl:Button mdlEffect="mdl-button--raised mdl-button--colored" text="BUTTON"/>
<!-- Raised button with ripple -->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" text="BUTTON"/>
+ <mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/>
<!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
- <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
-
- <mdl:Button>
- <i class="material-icons">add</i>
- </mdl:Button>
-
- <mdl:Button text="BUTTON"/>
+ <mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/>
</js:Container>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
<mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/>
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
- <mdl:CheckBox id="mdlchk" text="Hello" selected="true"/>
+ <mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/>
+ <mdl:CheckBox id="mdlchk1" text="This is disabled at start" />
<mdl:RadioButton groupName="g1" text="Black"/>
<mdl:RadioButton groupName="g1" text="White"/>
+ <mdl:RadioButton groupName="g1" text="Red"/>
</js:Form>
</js:View>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8150e17b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
index 7f836f6..61bcc20 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
@@ -18,13 +18,10 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.flex.mdl
{
- COMPILE::SWF
- {
- import org.apache.flex.html.Button;
- }
+ import org.apache.flex.html.TextButton;
+
COMPILE::JS
{
- import org.apache.flex.core.UIBase;
import org.apache.flex.core.WrappedHTMLElement;
}
@@ -37,8 +34,7 @@ package org.apache.flex.mdl
* @playerversion AIR 2.6
* @productversion FlexJS 0.0
*/
- COMPILE::SWF
- public class Button extends org.apache.flex.html.Button
+ public class Button extends TextButton
{
/**
* Constructor.
@@ -52,31 +48,50 @@ package org.apache.flex.mdl
{
super();
}
- }
-
- COMPILE::JS
- public class Button extends UIBase
- {
- private var button:HTMLButtonElement;
/**
- * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
- * @flexjsignorecoercion HTMLButtonElement
- */
- override protected function createElement():WrappedHTMLElement
- {
- var button:HTMLButtonElement;
-
- button = document.createElement('button') as HTMLButtonElement;
- element = button as WrappedHTMLElement;
- button.className = 'mdl-button mdl-js-button mdl-button--fab mdl-button--colored';
+ * @private
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ */
+ COMPILE::JS
+ override protected function createElement():WrappedHTMLElement
+ {
+ element = document.createElement('button') as WrappedHTMLElement;
+ //element.setAttribute('type', 'button');
positioner = element;
positioner.style.position = 'relative';
- (button as WrappedHTMLElement).flexjs_wrapper = this;
element.flexjs_wrapper = this;
-
- return element;
+
+ element.className = 'mdl-button mdl-js-button';
+ className = "";
+ typeNames = "MDLButton";
+ return element;
+ }
+
+ public static const RAISED_EFFECT:String = "mdl-button--raised";
+ public static const FAB_EFFECT:String = "mdl-button--fab";
+ public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab";
+ public static const ICON_EFFECT:String = "mdl-button--icon";
+ public static const COLORED_EFFECT:String = "mdl-button--colored";
+ public static const PRIMARY_EFFECT:String = "mdl-button--primary";
+ public static const ACCENT_EFFECT:String = "mdl-button--accent";
+ public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";
+
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
}
- }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ COMPILE::JS
+ {
+ element.className = 'mdl-button mdl-js-button ' + _mdlEffect;
+ }
+ }
+ }
}
[15/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
CheckBox impl
Posted by ca...@apache.org.
MDL CheckBox impl
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/837e60a7
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/837e60a7
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/837e60a7
Branch: refs/heads/feature/mdl
Commit: 837e60a79ebe81ad4be5618934b419cdb62d58d9
Parents: c92cde2
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 16:16:22 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../main/flex/org/apache/flex/mdl/CheckBox.as | 162 +++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 1 +
2 files changed, 163 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/837e60a7/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
new file mode 100644
index 0000000..082b99f
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -0,0 +1,162 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import org.apache.flex.html.CheckBox;
+ }
+ COMPILE::JS
+ {
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.core.WrappedHTMLElement;
+ import org.apache.flex.events.Event;
+ }
+
+ /**
+ * The CheckBox class provides a MDL UI-like appearance for
+ * a CheckBox.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ COMPILE::SWF
+ public class CheckBox extends org.apache.flex.html.CheckBox
+ {
+ /**
+ * Constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function CheckBox()
+ {
+ super();
+ }
+ }
+
+ COMPILE::JS
+ public class CheckBox extends UIBase
+ {
+
+ private var input:HTMLInputElement;
+ private var checkbox:HTMLSpanElement;
+ private var label:HTMLLabelElement;
+ private var textNode:Text;
+
+ /**
+ * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
+ * @flexjsignorecoercion HTMLLabelElement
+ * @flexjsignorecoercion HTMLInputElement
+ * @flexjsignorecoercion HTMLSpanElement
+ * @flexjsignorecoercion Text
+ */
+ override protected function createElement():WrappedHTMLElement
+ {
+ label = document.createElement('label') as HTMLLabelElement;
+ label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
+ element = label as WrappedHTMLElement;
+
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = 'checkbox';
+ input.className = 'mdl-checkbox__input';
+ //input.addEventListener('change', selectionChangeHandler, false);
+ label.appendChild(input);
+
+ checkbox = document.createElement('span') as HTMLSpanElement;
+ checkbox.className = 'mdl-checkbox__label';
+ //checkbox.addEventListener('mouseover', mouseOverHandler, false);
+ //checkbox.addEventListener('mouseout', mouseOutHandler, false);
+ label.appendChild(checkbox);
+
+ textNode = document.createTextNode('') as Text;
+ checkbox.appendChild(textNode);
+ //label.className = 'CheckBox';
+ typeNames = 'CheckBox';
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ (input as WrappedHTMLElement).flexjs_wrapper = this;
+ (checkbox as WrappedHTMLElement).flexjs_wrapper = this;
+ element.flexjs_wrapper = this;
+
+ return element;
+ };
+
+
+ /**
+ */
+ private function mouseOverHandler(event:Event):void
+ {
+ //checkbox.className = 'checkbox-icon-hover';
+ }
+
+ /**
+ */
+ private function mouseOutHandler(event:Event):void
+ {
+ /*if (input.checked)
+ checkbox.className = 'checkbox-icon-checked';
+ else
+ checkbox.className = 'checkbox-icon';*/
+ }
+
+
+ /**
+ */
+ private function selectionChangeHandler(event:Event):void
+ {
+ /*if (input.checked)
+ checkbox.className = 'checkbox-icon-checked';
+ else
+ checkbox.className = 'checkbox-icon';*/
+ }
+
+
+ public function get text():String
+ {
+ return textNode.nodeValue;
+ }
+
+ public function set text(value:String):void
+ {
+ textNode.nodeValue = value;
+ }
+
+ public function get selected():Boolean
+ {
+ return input.checked;
+ }
+
+ public function set selected(value:Boolean):void
+ {
+ input.checked = value;
+ /*if (value)
+ checkbox.className = 'checkbox-icon-checked';
+ else
+ checkbox.className = 'checkbox-icon';*/
+ }
+
+ }
+
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/837e60a7/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 eb65435..ffbc9c0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -23,5 +23,6 @@
<component id="Button" class="org.apache.flex.mdl.Button"/>
<component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
+ <component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
</componentPackage>
[27/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Minor
changes
Posted by ca...@apache.org.
Minor changes
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/6970cd1b
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/6970cd1b
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/6970cd1b
Branch: refs/heads/feature/mdl
Commit: 6970cd1bd295a6406e1108624ae2bc86e5beaf28
Parents: 6753b42
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Oct 27 18:28:34 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/pom.xml | 6 ++
.../flexjs/MDLExample/src/main/flex/App.mxml | 6 +-
.../src/main/resources/mdl-styles.css | 20 ++---
.../main/flex/org/apache/flex/mdl/CheckBox.as | 85 ++++++--------------
.../flex/org/apache/flex/mdl/beads/Disabled.as | 20 ++++-
.../src/main/resources/defaults.css | 7 +-
6 files changed, 66 insertions(+), 78 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/examples/flexjs/MDLExample/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml
index 3a31b25..1503b57 100644
--- a/examples/flexjs/MDLExample/pom.xml
+++ b/examples/flexjs/MDLExample/pom.xml
@@ -44,6 +44,12 @@
<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) -->
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/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 472f556..9f76732 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -53,20 +53,20 @@ limitations under the License.
</mdl:Button>
<!-- Raised button -->
- <mdl:Button text="BUTTON">
+ <mdl:Button text="COLORED">
<js:beads>
<mdl:ButtonEffect raised="true" colored="true"/>
</js:beads>
</mdl:Button>
<!-- Raised button with ripple -->
- <mdl:Button text="BUTTON">
+ <mdl:Button text="ACCENT">
<js:beads>
<mdl:ButtonEffect raised="true" ripple="true" accent="true"/>
</js:beads>
</mdl:Button>
<!-- Raised disabled button-->
- <mdl:Button text="BUTTON">
+ <mdl:Button text="DISABLED">
<js:beads>
<mdl:ButtonEffect raised="true"/>
<mdl:Disabled/>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
index 6a07905..3da8515 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -19,14 +19,16 @@
////////////////////////////////////////////////////////////////////////////////
*/
-.demo-card-wide.mdl-card {
- width: 512px;
+@namespace "library://ns.apache.org/flexjs/basic";
+
+.flexjs *, . flexjs *:before, . flexjs *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
}
-.demo-card-wide > .mdl-card__title {
- color: #fff;
- height: 176px;
- background: url('welcome_card.jpg') center / cover;
+
+Application
+{
+ padding: 10px;
+ margin: 10px;
}
-.demo-card-wide > .mdl-card__menu {
- color: #fff;
-}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
index 4f2bf9e..a4d2a4c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -73,64 +73,31 @@ package org.apache.flex.mdl
*/
override protected function createElement():WrappedHTMLElement
{
- label = document.createElement('label') as HTMLLabelElement;
- element = label as WrappedHTMLElement;
-
- input = document.createElement('input') as HTMLInputElement;
- input.type = 'checkbox';
- input.className = 'mdl-checkbox__input';
- //input.addEventListener('change', selectionChangeHandler, false);
- label.appendChild(input);
-
- checkbox = document.createElement('span') as HTMLSpanElement;
- checkbox.className = 'mdl-checkbox__label';
- //checkbox.addEventListener('mouseover', mouseOverHandler, false);
- //checkbox.addEventListener('mouseout', mouseOutHandler, false);
- label.appendChild(checkbox);
-
- textNode = document.createTextNode('') as Text;
- checkbox.appendChild(textNode);
-
- positioner = element;
- positioner.style.position = 'relative';
- (input as WrappedHTMLElement).flexjs_wrapper = this;
- (checkbox as WrappedHTMLElement).flexjs_wrapper = this;
- element.flexjs_wrapper = this;
-
- className = typeNames = 'mdl-checkbox mdl-js-checkbox';
+ label = document.createElement('label') as HTMLLabelElement;
+ element = label as WrappedHTMLElement;
+
+ input = document.createElement('input') as HTMLInputElement;
+ input.type = 'checkbox';
+ input.className = 'mdl-checkbox__input';
+ label.appendChild(input);
+
+ checkbox = document.createElement('span') as HTMLSpanElement;
+ checkbox.className = 'mdl-checkbox__label';
+ label.appendChild(checkbox);
+
+ textNode = document.createTextNode('') as Text;
+ checkbox.appendChild(textNode);
+
+ positioner = element;
+ positioner.style.position = 'relative';
+ (input as WrappedHTMLElement).flexjs_wrapper = this;
+ (checkbox as WrappedHTMLElement).flexjs_wrapper = this;
+ element.flexjs_wrapper = this;
+
+ className = typeNames = 'mdl-checkbox mdl-js-checkbox';
- return element;
- };
-
-
- /**
- */
- private function mouseOverHandler(event:Event):void
- {
- //checkbox.className = 'checkbox-icon-hover';
- }
-
- /**
- */
- private function mouseOutHandler(event:Event):void
- {
- /*if (input.checked)
- checkbox.className = 'checkbox-icon-checked';
- else
- checkbox.className = 'checkbox-icon';*/
- }
-
-
- /**
- */
- private function selectionChangeHandler(event:Event):void
- {
- /*if (input.checked)
- checkbox.className = 'checkbox-icon-checked';
- else
- checkbox.className = 'checkbox-icon';*/
- }
-
+ return element;
+ };
public function get text():String
{
@@ -150,10 +117,6 @@ package org.apache.flex.mdl
public function set selected(value:Boolean):void
{
input.checked = value;
- /*if (value)
- checkbox.className = 'checkbox-icon-checked';
- else
- checkbox.className = 'checkbox-icon';*/
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
index 46067ff..fcec373 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/Disabled.as
@@ -46,6 +46,24 @@ package org.apache.flex.mdl.beads
{
}
+ private var _disabled:Boolean = true;
+ /**
+ * A boolean flag to enable or disable the host control.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get disabled():Boolean
+ {
+ return _disabled;
+ }
+ public function set disabled(value:Boolean):void
+ {
+ _disabled = value;
+ }
+
private var _strand:IStrand;
/**
@@ -69,7 +87,7 @@ package org.apache.flex.mdl.beads
//if (host.element is HTMLInputElement)
//{
input = host.element as HTMLInputElement;
- input.disabled = "disabled";
+ //input.disabled = _disabled ? "disabled" : "";
//} else
//{
// throw new Error("Host element component in not type input");
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/6970cd1b/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 ae61dc6..8e538a1 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -21,10 +21,9 @@
@namespace "library://ns.apache.org/flexjs/basic";
@namespace mdl "library://ns.apache.org/flexjs/mdl";
-.flexjs *, . flexjs *:before, . flexjs *:after {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
+mdl|CheckBox
+{
+ IBeadModel: ClassReference("org.apache.flex.html.beads.models.ToggleButtonModel");
}
[02/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Badge and
BadgeElement
Posted by ca...@apache.org.
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/5b11176a
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5b11176a
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5b11176a
Branch: refs/heads/feature/mdl
Commit: 5b11176ae20a14ec5e69133461a1107d4c271842
Parents: c73de48
Author: Carlos Rovira <ca...@apache.org>
Authored: Thu Nov 3 20:15:00 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 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/5b11176a/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/5b11176a/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/5b11176a/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/5b11176a/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/5b11176a/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>
[29/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Fix to
complain with the last refactor
Posted by ca...@apache.org.
Fix to complain with the last refactor
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/36caa0a4
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/36caa0a4
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/36caa0a4
Branch: refs/heads/feature/mdl
Commit: 36caa0a4b391d30dc76d52020a7ec22213e4fe83
Parents: 6970cd1
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Nov 2 19:27:22 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/36caa0a4/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
index e3142b2..b9d1a6b 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
@@ -138,11 +138,11 @@ package org.apache.flex.mdl.beads
var model:Object = UIBase(_strand).model;
if (model.text != null && model.text.length > 0 ) {
- if (promptAdded) UIBase(_strand).removeChild(promptField);
+ if (promptAdded) UIBase(_strand).$displayObjectContainer.removeChild(promptField);
promptAdded = false;
}
else {
- if (!promptAdded) UIBase(_strand).addChild(promptField);
+ if (!promptAdded) UIBase(_strand).$displayObjectContainer.addChild(promptField);
promptField.text = prompt;
promptAdded = true;
}
[14/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Use of
mdl:TextInput
Posted by ca...@apache.org.
Use of mdl:TextInput
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c92cde2e
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c92cde2e
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c92cde2e
Branch: refs/heads/feature/mdl
Commit: c92cde2ebc65ac0b01cfccd66553f7a79e1ddbaf
Parents: 2ab005b
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 13:40:57 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/src/main/flex/App.mxml | 2 ++
1 file changed, 2 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c92cde2e/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 b94a0d7..937d8d2 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -53,6 +53,8 @@ limitations under the License.
<mdl:Button/>
+ <mdl:TextInput/>
+
</js:Container>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
[10/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - More
Buttons, I think we need "disabled" html attribute implementation
Posted by ca...@apache.org.
More Buttons, I think we need "disabled" html attribute implementation
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/5a2e5bc2
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/5a2e5bc2
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/5a2e5bc2
Branch: refs/heads/feature/mdl
Commit: 5a2e5bc2e8b6a3ce8ca631c7843d432ce2b29895
Parents: 34bad47
Author: Carlos Rovira <ca...@apache.org>
Authored: Sun Oct 16 21:10:10 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 35 +++++++++++++++++---
1 file changed, 31 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/5a2e5bc2/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 b19b9b4..37e9e6a 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -30,11 +30,38 @@ limitations under the License.
<js:initialView>
<js:View>
- <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
- <i class="material-icons">add</i>
- </js:TextButton>
+ <!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
+ <js:Container>
+ <js:beads>
+ <js:HorizontalLayout />
+ </js:beads>
+
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
+ <i class="material-icons">add</i>
+ </js:TextButton>
- <mdl:Button/>
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
+ <i class="material-icons">add</i>
+ </js:TextButton>
+
+ <!-- Raised button -->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
+ <!-- Raised button with ripple -->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" text="BUTTON"/>
+ <!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
+ <js:TextButton className="mdl-button mdl-js-button mdl-button--raised" text="BUTTON"/>
+
+ <mdl:Button/>
+
+ </js:Container>
+
+ <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+ <js:Container className="mdl-textfield mdl-js-textfield">
+ <js:TextInput className="mdl-textfield__input" id="sample1"/>
+ <js:Label className="mdl-textfield__label" text="Text..."/>
+ </js:Container>
+
+
</js:View>
</js:initialView>
</js:Application>
[20/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Remove css
defaults fro HTML.swc and some update to actual components implementation
fixing styles and behaviors
Posted by ca...@apache.org.
Remove css defaults fro HTML.swc and some update to actual components implementation fixing styles and behaviors
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/73557fa0
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/73557fa0
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/73557fa0
Branch: refs/heads/feature/mdl
Commit: 73557fa00365d0c7e41454e232a6d04cce1d50e6
Parents: 50513e2
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 24 20:19:06 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/pom.xml | 1 +
.../flexjs/MDLExample/src/main/flex/App.mxml | 18 +++++------
.../src/main/flex/org/apache/flex/mdl/Button.as | 13 ++++----
.../main/flex/org/apache/flex/mdl/CheckBox.as | 32 +++++++++++++++++--
.../flex/org/apache/flex/mdl/RadioButton.as | 33 ++++++++++++++++++--
.../main/flex/org/apache/flex/mdl/TextInput.as | 18 +++++------
6 files changed, 82 insertions(+), 33 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/examples/flexjs/MDLExample/pom.xml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml
index 207dab5..3a31b25 100644
--- a/examples/flexjs/MDLExample/pom.xml
+++ b/examples/flexjs/MDLExample/pom.xml
@@ -56,6 +56,7 @@
<configuration>
<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>
</configuration>
</execution>
</executions>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/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 636b72b..a50dbeb 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -33,11 +33,9 @@ limitations under the License.
<js:Form action="#">
<!-- Buttons https://getmdl.io/components/index.html#buttons-section -->
- <js:Container>
- <js:beads>
- <js:HorizontalLayout />
- </js:beads>
-
+ <js:HContainer>
+ <mdl:Button/>
+
<!-- Fab button -->
<mdl:Button mdlEffect="mdl-button--fab mdl-button--colored">
<i class="material-icons">add</i>
@@ -54,23 +52,23 @@ limitations under the License.
<mdl:Button mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent" text="BUTTON"/>
<!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
<mdl:Button mdlEffect="mdl-button--raised" text="BUTTON"/>
- </js:Container>
+ </js:HContainer>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/>
+ <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text" text="Text..."/>
<mdl:TextInput mdlEffect="mdl-textfield--floating-label" text="Floating Label"/>
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
- <mdl:CheckBox id="mdlchk" text="This Checks" selected="true"/>
+ <mdl:CheckBox id="mdlchk" text="This Checks" selected="true" mdlEffect="mdl-js-ripple-effect"/>
<mdl:CheckBox id="mdlchk1" text="This is disabled at start" />
- <mdl:RadioButton groupName="g1" text="Black"/>
+ <mdl:RadioButton groupName="g1" text="Black" mdlEffect="mdl-js-ripple-effect"/>
<mdl:RadioButton groupName="g1" text="White"/>
<mdl:RadioButton groupName="g1" text="Red"/>
</js:Form>
-
+
</js:View>
</js:initialView>
</js:Application>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
index 61bcc20..7c17757 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Button.as
@@ -63,20 +63,19 @@ package org.apache.flex.mdl
positioner.style.position = 'relative';
element.flexjs_wrapper = this;
- element.className = 'mdl-button mdl-js-button';
- className = "";
- typeNames = "MDLButton";
- return element;
+ className = typeNames = "mdl-button mdl-js-button";
+
+ return element;
}
- public static const RAISED_EFFECT:String = "mdl-button--raised";
+ /*public static const RAISED_EFFECT:String = "mdl-button--raised";
public static const FAB_EFFECT:String = "mdl-button--fab";
public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab";
public static const ICON_EFFECT:String = "mdl-button--icon";
public static const COLORED_EFFECT:String = "mdl-button--colored";
public static const PRIMARY_EFFECT:String = "mdl-button--primary";
public static const ACCENT_EFFECT:String = "mdl-button--accent";
- public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";
+ public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";*/
private var _mdlEffect:String = "";
@@ -90,7 +89,7 @@ package org.apache.flex.mdl
_mdlEffect = value;
COMPILE::JS
{
- element.className = 'mdl-button mdl-js-button ' + _mdlEffect;
+ className = _mdlEffect;
}
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
index 082b99f..60db161 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -53,6 +53,18 @@ package org.apache.flex.mdl
{
super();
}
+
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ }
}
COMPILE::JS
@@ -74,7 +86,6 @@ package org.apache.flex.mdl
override protected function createElement():WrappedHTMLElement
{
label = document.createElement('label') as HTMLLabelElement;
- label.className = 'mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect';
element = label as WrappedHTMLElement;
input = document.createElement('input') as HTMLInputElement;
@@ -91,8 +102,6 @@ package org.apache.flex.mdl
textNode = document.createTextNode('') as Text;
checkbox.appendChild(textNode);
- //label.className = 'CheckBox';
- typeNames = 'CheckBox';
positioner = element;
positioner.style.position = 'relative';
@@ -100,6 +109,8 @@ package org.apache.flex.mdl
(checkbox as WrappedHTMLElement).flexjs_wrapper = this;
element.flexjs_wrapper = this;
+ className = typeNames = 'mdl-checkbox mdl-js-checkbox';
+
return element;
};
@@ -157,6 +168,21 @@ package org.apache.flex.mdl
checkbox.className = 'checkbox-icon';*/
}
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ COMPILE::JS
+ {
+ className = _mdlEffect;
+ }
+ }
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
index d7e9b2f..d19ce78 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -52,6 +52,18 @@ package org.apache.flex.mdl
{
super();
}
+
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ }
}
COMPILE::JS
@@ -91,15 +103,12 @@ package org.apache.flex.mdl
textNode = document.createTextNode('') as Text;
label = document.createElement('label') as HTMLLabelElement;
- label.className = "mdl-radio mdl-js-radio mdl-js-ripple-effect";
label.appendChild(input);
label.appendChild(radio);
radio.appendChild(textNode);
label.style.position = 'relative';
element = label as WrappedHTMLElement;
- //element.className = 'RadioButton';
- typeNames = 'RadioButton';
positioner = element;
positioner.style.position = 'relative';
@@ -108,6 +117,8 @@ package org.apache.flex.mdl
element.flexjs_wrapper = this;
(textNode as WrappedHTMLElement).flexjs_wrapper = this;
+ className = typeNames = 'mdl-radio mdl-js-radio';
+
return element;
};
@@ -244,6 +255,22 @@ package org.apache.flex.mdl
}
}
+ private var _mdlEffect:String = "";
+
+ public function get mdlEffect():String
+ {
+ return _mdlEffect;
+ }
+
+ public function set mdlEffect(value:String):void
+ {
+ _mdlEffect = value;
+ COMPILE::JS
+ {
+ className = _mdlEffect;
+ }
+ }
+
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/73557fa0/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index 48d71bf..b387b81 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -70,7 +70,6 @@ package org.apache.flex.mdl
var textNode:Text;
div = document.createElement('div') as HTMLDivElement;
- div.className = "mdl-textfield mdl-js-textfield";
input = document.createElement('input') as HTMLInputElement;
input.setAttribute('type', 'text');
@@ -86,9 +85,7 @@ package org.apache.flex.mdl
div.appendChild(label);
element = div as WrappedHTMLElement;
- //element.className = 'TextInput';
- typeNames = 'TextInput';
-
+
//attach input handler to dispatch flexjs change event when user write in textinput
//goog.events.listen(element, 'change', killChangeHandler);
goog.events.listen(input, 'input', textChangeHandler);
@@ -100,6 +97,8 @@ package org.apache.flex.mdl
(label as WrappedHTMLElement).flexjs_wrapper = this;
element.flexjs_wrapper = this;
+ className = typeNames = "mdl-textfield mdl-js-textfield";
+
return element;
}
@@ -115,25 +114,24 @@ package org.apache.flex.mdl
_mdlEffect = value;
COMPILE::JS
{
- element.className = 'mdl-textfield mdl-js-textfield ' + _mdlEffect;
+ className = _mdlEffect;
}
}
/**
* @private
- * @flexjsignorecoercion HTMLInputElement
*/
override public function set text(value:String):void
{
- COMPILE::SWF
- {
+ //COMPILE::SWF
+ //{
//inSetter = true;
//ITextModel(model).text = value;
//inSetter = false;
- }
+ //}
COMPILE::JS
{
- _textNode.text = value;
+ _textNode.nodeValue = value;
dispatchEvent(new Event('textChange'));
}
}
[26/29] git commit: [flex-asjs] [refs/heads/feature/mdl] -
ButtonEffectBead in place
Posted by ca...@apache.org.
ButtonEffectBead in place
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/84043e95
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/84043e95
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/84043e95
Branch: refs/heads/feature/mdl
Commit: 84043e9543305f70ec8c99bef0cd40b6929c12fc
Parents: 8296baa
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 26 20:03:10 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 10 +-
.../main/flex/org/apache/flex/mdl/CheckBox.as | 12 -
.../flex/org/apache/flex/mdl/RadioButton.as | 12 -
.../apache/flex/mdl/beads/ButtonEffectBead.as | 253 +++++++++++++++++++
.../org/apache/flex/mdl/beads/EffectBead.as | 9 -
.../src/main/resources/defaults.css | 8 +-
.../src/main/resources/mdl-manifest.xml | 1 +
7 files changed, 266 insertions(+), 39 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/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 82126a4..e618658 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -39,7 +39,7 @@ limitations under the License.
<!-- Fab button -->
<mdl:Button>
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-button--fab mdl-button--colored"/>
+ <mdl:ButtonEffectBead fab="true" colored="true"/>
</js:beads>
<i class="material-icons">add</i>
</mdl:Button>
@@ -47,7 +47,7 @@ limitations under the License.
<!-- Fab with Ripple -->
<mdl:Button>
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-button--fab mdl-js-ripple-effect"/>
+ <mdl:ButtonEffectBead fab="true" ripple="true"/>
</js:beads>
<i class="material-icons md-48">face</i>
</mdl:Button>
@@ -55,20 +55,20 @@ limitations under the License.
<!-- Raised button -->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-button--raised mdl-button--colored"/>
+ <mdl:ButtonEffectBead raised="true" colored="true"/>
</js:beads>
</mdl:Button>
<!-- Raised button with ripple -->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-button--raised mdl-js-ripple-effect mdl-button--accent"/>
+ <mdl:ButtonEffectBead raised="true" ripple="true" accent="true"/>
</js:beads>
</mdl:Button>
<!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-button--raised"/>
+ <mdl:ButtonEffectBead raised="true"/>
</js:beads>
</mdl:Button>
</js:HContainer>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
index 58d3ba2..4f2bf9e 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CheckBox.as
@@ -53,18 +53,6 @@ package org.apache.flex.mdl
{
super();
}
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- }
}
COMPILE::JS
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
index 0f8237d..e0933d2 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/RadioButton.as
@@ -53,18 +53,6 @@ package org.apache.flex.mdl
{
super();
}
-
- private var _mdlEffect:String = "";
-
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- }
}
COMPILE::JS
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
new file mode 100644
index 0000000..de999f9
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
@@ -0,0 +1,253 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+
+ import org.apache.flex.mdl.Button;
+
+ /**
+ * The ButtonEffectBead class is a specialty bead that can be used with
+ * an MDL button control to apply some MDL complementary effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class ButtonEffectBead implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function ButtonEffectBead()
+ {
+ }
+
+ private var _fab:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--fab" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get fab():Boolean
+ {
+ return _fab;
+ }
+ public function set fab(value:Boolean):void
+ {
+ if(value) {
+ _fab = " mdl-button--fab";
+ } else {
+ _fab = "";
+ }
+ }
+
+ private var _raised:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--raised" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get raised():Boolean
+ {
+ return _raised;
+ }
+ public function set raised(value:Boolean):void
+ {
+ if(value) {
+ _raised = " mdl-button--raised";
+ } else {
+ _raised = "";
+ }
+ }
+
+ private var _colored:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--colored" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get colored():Boolean
+ {
+ return _colored;
+ }
+ public function set colored(value:Boolean):void
+ {
+ if(value) {
+ _colored = " mdl-button--colored";
+ } else {
+ _colored = "";
+ }
+ }
+
+ private var _ripple:String = "";
+ /**
+ * A boolean flag to activate "mdl-js-ripple-effect" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get ripple():Boolean
+ {
+ return _ripple;
+ }
+ public function set ripple(value:Boolean):void
+ {
+ if(value) {
+ _ripple = " mdl-js-ripple-effect";
+ } else {
+ _ripple = "";
+ }
+ }
+
+ private var _accent:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--accent" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get accent():Boolean
+ {
+ return _accent;
+ }
+ public function set accent(value:Boolean):void
+ {
+ if(value) {
+ _accent = " mdl-button--accent";
+ } else {
+ _accent = "";
+ }
+ }
+
+ private var _primary:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--primary" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get primary():Boolean
+ {
+ return _primary;
+ }
+ public function set primary(value:Boolean):void
+ {
+ if(value) {
+ _primary = " mdl-button--primary";
+ } else {
+ _primary = "";
+ }
+ }
+
+ private var _minifab:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--mini-fab" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get minifab():Boolean
+ {
+ return _minifab;
+ }
+ public function set minifab(value:Boolean):void
+ {
+ if(value) {
+ _minifab = " mdl-button--mini-fab";
+ } else {
+ _minifab = "";
+ }
+ }
+
+ private var _icon:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--icon" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get icon():Boolean
+ {
+ return _icon;
+ }
+ public function set icon(value:Boolean):void
+ {
+ if(value) {
+ _icon = " mdl-button--icon";
+ } else {
+ _icon = "";
+ }
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ if (value is Button) {
+ var button:Button = value as Button;
+ button.className = _fab + _raised + _colored + _ripple + _accent + _primary + _minifab + _icon;
+ } else {
+ throw new Error("Host component must be an MDL Button.");
+ }
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
index b01538d..d7ddcc0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
@@ -46,15 +46,6 @@ package org.apache.flex.mdl.beads
public function EffectBead()
{
}
-
- /*public static const RAISED_EFFECT:String = "mdl-button--raised";
- public static const FAB_EFFECT:String = "mdl-button--fab";
- public static const MINI_FAB_EFFECT:String = "mdl-button--mini-fab";
- public static const ICON_EFFECT:String = "mdl-button--icon";
- public static const COLORED_EFFECT:String = "mdl-button--colored";
- public static const PRIMARY_EFFECT:String = "mdl-button--primary";
- public static const ACCENT_EFFECT:String = "mdl-button--accent";
- public static const RIPPLE_EFFECT:String = "mdl-js-ripple-effect";*/
private var _mdlEffect:String = "";
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/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 f795472..ae61dc6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
@@ -17,9 +17,15 @@
*
*/
-@namespace "library://ns.apache.org/flexjs/mdl";
+@namespace "library://ns.apache.org/flexjs/basic";
+@namespace mdl "library://ns.apache.org/flexjs/mdl";
+.flexjs *, . flexjs *:before, . flexjs *:after {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/84043e95/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 aca9380..a4d62f2 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -27,5 +27,6 @@
<component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
<component id="TextPromptBead" class="org.apache.flex.mdl.beads.TextPromptBead"/>
<component id="EffectBead" class="org.apache.flex.mdl.beads.EffectBead"/>
+ <component id="ButtonEffectBead" class="org.apache.flex.mdl.beads.ButtonEffectBead"/>
</componentPackage>
[19/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - CheckBox
and RadioButton examples
Posted by ca...@apache.org.
CheckBox and RadioButton examples
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/e3fc1367
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/e3fc1367
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/e3fc1367
Branch: refs/heads/feature/mdl
Commit: e3fc1367b04ca562e043eb0a05db506102c49c04
Parents: 3294531
Author: Carlos Rovira <ca...@apache.org>
Authored: Mon Oct 17 17:59:17 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
examples/flexjs/MDLExample/src/main/flex/App.mxml | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/e3fc1367/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 242df22..209efae 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -63,9 +63,11 @@ limitations under the License.
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
<mdl:TextInput id="mdlti" text="Something..." change="mdlchk.text = mdlti.text"/>
- <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
+ <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
<mdl:CheckBox id="mdlchk" text="Hello" selected="true"/>
+ <mdl:RadioButton groupName="g1" text="Black"/>
+ <mdl:RadioButton groupName="g1" text="White"/>
</js:Form>
</js:View>
[18/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - Effect
Bead classes for various components
Posted by ca...@apache.org.
Effect Bead classes for various components
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/c0cd0a56
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/c0cd0a56
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/c0cd0a56
Branch: refs/heads/feature/mdl
Commit: c0cd0a56115d3085f098bb6243e80eeff75fca80
Parents: 84043e9
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 26 20:57:57 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 20 +-
.../org/apache/flex/mdl/beads/ButtonEffect.as | 228 +++++++++++++++++
.../apache/flex/mdl/beads/ButtonEffectBead.as | 253 -------------------
.../org/apache/flex/mdl/beads/EffectBead.as | 98 -------
.../flex/org/apache/flex/mdl/beads/MDLEffect.as | 105 ++++++++
.../apache/flex/mdl/beads/TextInputEffect.as | 97 +++++++
.../org/apache/flex/mdl/beads/TextPrompt.as | 151 +++++++++++
.../org/apache/flex/mdl/beads/TextPromptBead.as | 151 -----------
.../src/main/resources/mdl-manifest.xml | 7 +-
9 files changed, 595 insertions(+), 515 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/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 e618658..0507f21 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -39,7 +39,7 @@ limitations under the License.
<!-- Fab button -->
<mdl:Button>
<js:beads>
- <mdl:ButtonEffectBead fab="true" colored="true"/>
+ <mdl:ButtonEffect fab="true" colored="true"/>
</js:beads>
<i class="material-icons">add</i>
</mdl:Button>
@@ -47,7 +47,7 @@ limitations under the License.
<!-- Fab with Ripple -->
<mdl:Button>
<js:beads>
- <mdl:ButtonEffectBead fab="true" ripple="true"/>
+ <mdl:ButtonEffect fab="true" ripple="true"/>
</js:beads>
<i class="material-icons md-48">face</i>
</mdl:Button>
@@ -55,20 +55,20 @@ limitations under the License.
<!-- Raised button -->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:ButtonEffectBead raised="true" colored="true"/>
+ <mdl:ButtonEffect raised="true" colored="true"/>
</js:beads>
</mdl:Button>
<!-- Raised button with ripple -->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:ButtonEffectBead raised="true" ripple="true" accent="true"/>
+ <mdl:ButtonEffect raised="true" ripple="true" accent="true"/>
</js:beads>
</mdl:Button>
<!-- Raised disabled button ... it seems we don't have "disabled" implemented yet-->
<mdl:Button text="BUTTON">
<js:beads>
- <mdl:ButtonEffectBead raised="true"/>
+ <mdl:ButtonEffect raised="true"/>
</js:beads>
</mdl:Button>
</js:HContainer>
@@ -76,13 +76,13 @@ limitations under the License.
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
<mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text">
<js:beads>
- <mdl:TextPromptBead prompt="Normal Text Field..."/>
+ <mdl:TextPrompt prompt="Normal Text Field..."/>
</js:beads>
</mdl:TextInput>
<mdl:TextInput>
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-textfield--floating-label"/>
- <mdl:TextPromptBead prompt="Floating Label"/>
+ <mdl:TextInputEffect floatingLabel= "true"/>
+ <mdl:TextPrompt prompt="Floating Label"/>
</js:beads>
</mdl:TextInput>
@@ -90,13 +90,13 @@ limitations under the License.
<mdl:CheckBox id="mdlchk" text="Disabled at start" />
<mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true">
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/>
+ <mdl:MDLEffect ripple="true"/>
</js:beads>
</mdl:CheckBox>
<mdl:RadioButton groupName="g1" text="Black"/>
<mdl:RadioButton groupName="g1" text="Ripple">
<js:beads>
- <mdl:EffectBead mdlEffect="mdl-js-ripple-effect"/>
+ <mdl:MDLEffect ripple="true"/>
</js:beads>
</mdl:RadioButton>
<mdl:RadioButton groupName="g1" text="Red"/>
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffect.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffect.as
new file mode 100644
index 0000000..e33d5ef
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffect.as
@@ -0,0 +1,228 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.mdl.beads.MDLEffect;
+ import org.apache.flex.mdl.Button;
+
+ /**
+ * The ButtonEffect class is a specialty bead that can be used with
+ * an MDL button control to apply some MDL complementary effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class ButtonEffect extends MDLEffect
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function ButtonEffect()
+ {
+ }
+
+ private var _fab:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--fab" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get fab():Boolean
+ {
+ return _fab;
+ }
+ public function set fab(value:Boolean):void
+ {
+ if(value) {
+ _fab = " mdl-button--fab";
+ } else {
+ _fab = "";
+ }
+ }
+
+ private var _raised:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--raised" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get raised():Boolean
+ {
+ return _raised;
+ }
+ public function set raised(value:Boolean):void
+ {
+ if(value) {
+ _raised = " mdl-button--raised";
+ } else {
+ _raised = "";
+ }
+ }
+
+ private var _colored:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--colored" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get colored():Boolean
+ {
+ return _colored;
+ }
+ public function set colored(value:Boolean):void
+ {
+ if(value) {
+ _colored = " mdl-button--colored";
+ } else {
+ _colored = "";
+ }
+ }
+
+ private var _accent:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--accent" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get accent():Boolean
+ {
+ return _accent;
+ }
+ public function set accent(value:Boolean):void
+ {
+ if(value) {
+ _accent = " mdl-button--accent";
+ } else {
+ _accent = "";
+ }
+ }
+
+ private var _primary:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--primary" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get primary():Boolean
+ {
+ return _primary;
+ }
+ public function set primary(value:Boolean):void
+ {
+ if(value) {
+ _primary = " mdl-button--primary";
+ } else {
+ _primary = "";
+ }
+ }
+
+ private var _minifab:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--mini-fab" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get minifab():Boolean
+ {
+ return _minifab;
+ }
+ public function set minifab(value:Boolean):void
+ {
+ if(value) {
+ _minifab = " mdl-button--mini-fab";
+ } else {
+ _minifab = "";
+ }
+ }
+
+ private var _icon:String = "";
+ /**
+ * A boolean flag to activate "mdl-button--icon" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get icon():Boolean
+ {
+ return _icon;
+ }
+ public function set icon(value:Boolean):void
+ {
+ if(value) {
+ _icon = " mdl-button--icon";
+ } else {
+ _icon = "";
+ }
+ }
+
+ 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.Button;
+ */
+ override public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ if (value is Button) {
+ var button:Button = value as Button;
+ button.className = _fab + _raised + _colored + _ripple + _accent + _primary + _minifab + _icon;
+ } else {
+ throw new Error("Host component must be an MDL Button.");
+ }
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
deleted file mode 100644
index de999f9..0000000
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/ButtonEffectBead.as
+++ /dev/null
@@ -1,253 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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.IBead;
- import org.apache.flex.core.IStrand;
- import org.apache.flex.core.UIBase;
-
- import org.apache.flex.mdl.Button;
-
- /**
- * The ButtonEffectBead class is a specialty bead that can be used with
- * an MDL button control to apply some MDL complementary effect.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public class ButtonEffectBead implements IBead
- {
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function ButtonEffectBead()
- {
- }
-
- private var _fab:String = "";
- /**
- * A boolean flag to activate "mdl-button--fab" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get fab():Boolean
- {
- return _fab;
- }
- public function set fab(value:Boolean):void
- {
- if(value) {
- _fab = " mdl-button--fab";
- } else {
- _fab = "";
- }
- }
-
- private var _raised:String = "";
- /**
- * A boolean flag to activate "mdl-button--raised" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get raised():Boolean
- {
- return _raised;
- }
- public function set raised(value:Boolean):void
- {
- if(value) {
- _raised = " mdl-button--raised";
- } else {
- _raised = "";
- }
- }
-
- private var _colored:String = "";
- /**
- * A boolean flag to activate "mdl-button--colored" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get colored():Boolean
- {
- return _colored;
- }
- public function set colored(value:Boolean):void
- {
- if(value) {
- _colored = " mdl-button--colored";
- } else {
- _colored = "";
- }
- }
-
- private var _ripple:String = "";
- /**
- * A boolean flag to activate "mdl-js-ripple-effect" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get ripple():Boolean
- {
- return _ripple;
- }
- public function set ripple(value:Boolean):void
- {
- if(value) {
- _ripple = " mdl-js-ripple-effect";
- } else {
- _ripple = "";
- }
- }
-
- private var _accent:String = "";
- /**
- * A boolean flag to activate "mdl-button--accent" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get accent():Boolean
- {
- return _accent;
- }
- public function set accent(value:Boolean):void
- {
- if(value) {
- _accent = " mdl-button--accent";
- } else {
- _accent = "";
- }
- }
-
- private var _primary:String = "";
- /**
- * A boolean flag to activate "mdl-button--primary" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get primary():Boolean
- {
- return _primary;
- }
- public function set primary(value:Boolean):void
- {
- if(value) {
- _primary = " mdl-button--primary";
- } else {
- _primary = "";
- }
- }
-
- private var _minifab:String = "";
- /**
- * A boolean flag to activate "mdl-button--mini-fab" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get minifab():Boolean
- {
- return _minifab;
- }
- public function set minifab(value:Boolean):void
- {
- if(value) {
- _minifab = " mdl-button--mini-fab";
- } else {
- _minifab = "";
- }
- }
-
- private var _icon:String = "";
- /**
- * A boolean flag to activate "mdl-button--icon" effect selector.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get icon():Boolean
- {
- return _icon;
- }
- public function set icon(value:Boolean):void
- {
- if(value) {
- _icon = " mdl-button--icon";
- } else {
- _icon = "";
- }
- }
-
- 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 HTMLInputElement
- * @flexjsignorecoercion org.apache.flex.core.UIBase;
- */
- public function set strand(value:IStrand):void
- {
- _strand = value;
-
- COMPILE::JS
- {
- if (value is Button) {
- var button:Button = value as Button;
- button.className = _fab + _raised + _colored + _ripple + _accent + _primary + _minifab + _icon;
- } else {
- throw new Error("Host component must be an MDL Button.");
- }
- }
- }
- }
-}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
deleted file mode 100644
index d7ddcc0..0000000
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/EffectBead.as
+++ /dev/null
@@ -1,98 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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.IBead;
- import org.apache.flex.core.IStrand;
- import org.apache.flex.core.UIBase;
-
- import org.apache.flex.mdl.TextInput;
-
- /**
- * The EffectBead class is a specialty bead that can be used with
- * any MDL control to apply some MDL complementary effect.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public class EffectBead implements IBead
- {
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function EffectBead()
- {
- }
-
- private var _mdlEffect:String = "";
-
- /**
- * The string to use as the MDL effect.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get mdlEffect():String
- {
- return _mdlEffect;
- }
-
- public function set mdlEffect(value:String):void
- {
- _mdlEffect = value;
- }
-
- 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 HTMLInputElement
- * @flexjsignorecoercion org.apache.flex.core.UIBase;
- */
- public function set strand(value:IStrand):void
- {
- _strand = value;
-
- COMPILE::JS
- {
- if (value is TextInput) {
- var mdTi:TextInput = value as TextInput;
- mdTi.positioner.className = mdTi.positioner.className + " " + mdlEffect;
- } else {
- var host:UIBase = value as UIBase;
- host.className = mdlEffect;
- }
- }
- }
- }
-}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MDLEffect.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MDLEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MDLEffect.as
new file mode 100644
index 0000000..4694507
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/MDLEffect.as
@@ -0,0 +1,105 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.mdl.Button;
+ import org.apache.flex.mdl.TextInput;
+
+ /**
+ * The EffectBead class is a specialty bead that can be used with
+ * any MDL control to apply some MDL complementary effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class MDLEffect implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function MDLEffect()
+ {
+ }
+
+ protected var _ripple:String = "";
+ /**
+ * A boolean flag to activate "mdl-js-ripple-effect" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get ripple():Boolean
+ {
+ return _ripple;
+ }
+ public function set ripple(value:Boolean):void
+ {
+ if(value) {
+ _ripple = " mdl-js-ripple-effect";
+ } else {
+ _ripple = "";
+ }
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ if (value is Button) {
+ var button:Button = value as Button;
+ button.className = _ripple;
+ } else if (value is TextInput) {
+ var mdTi:TextInput = value as TextInput;
+ mdTi.positioner.className = mdTi.positioner.className + _ripple;
+ } else if (value is UIBase) {
+ var host:UIBase = value as UIBase;
+ host.className = _ripple;
+ } else {
+ throw new Error("Host component must be an MDL control.");
+ }
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextInputEffect.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextInputEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextInputEffect.as
new file mode 100644
index 0000000..c66c49a
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextInputEffect.as
@@ -0,0 +1,97 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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.mdl.beads.MDLEffect;
+ import org.apache.flex.mdl.TextInput;
+
+
+ /**
+ * The TextInputEffect class is a specialty bead that can be used with
+ * a MDL TextInput control to apply some MDL complementary effect.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class TextInputEffect extends MDLEffect
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function TextInputEffect()
+ {
+ }
+
+ private var _floatingLabel:String = "";
+ /**
+ * A boolean flag to activate "mdl-textfield--floating-label" effect selector.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get floatingLabel():Boolean
+ {
+ return _floatingLabel;
+ }
+ public function set floatingLabel(value:Boolean):void
+ {
+ if(value) {
+ _floatingLabel = " mdl-textfield--floating-label";
+ } else {
+ _floatingLabel = "";
+ }
+ }
+
+ 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;
+ */
+ override public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::JS
+ {
+ if (value is TextInput) {
+ var textinput:TextInput = value as TextInput;
+ textinput.positioner.className = textinput.positioner.className + _floatingLabel;
+ } else {
+ throw new Error("Host component must be an MDL TextInput.");
+ }
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
new file mode 100644
index 0000000..e3142b2
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPrompt.as
@@ -0,0 +1,151 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldType;
+
+ import org.apache.flex.core.CSSTextField;
+ }
+
+ import org.apache.flex.core.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.events.IEventDispatcher;
+
+ import org.apache.flex.mdl.TextInput;
+
+ /**
+ * The TextPrompt class is a specialty bead that can be used with
+ * any TextInput control. The bead places a string into the input field
+ * when there is no value associated with the text property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class TextPrompt implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function TextPrompt()
+ {
+ }
+
+ private var _prompt:String;
+
+ /**
+ * The string to use as the placeholder prompt.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get prompt():String
+ {
+ return _prompt;
+ }
+ public function set prompt(value:String):void
+ {
+ _prompt = value;
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ // listen for changes in text to hide or show the prompt
+ var model:Object = UIBase(_strand).model;
+ if (!model.hasOwnProperty("text")) {
+ throw new Error("Model requires a text property when used with TextPromptBead");
+ }
+ IEventDispatcher(model).addEventListener("textChange", handleTextChange);
+
+ // create a TextField that displays the prompt - it shows
+ // and hides based on the model's content
+ promptField = new CSSTextField();
+ promptField.selectable = false;
+ promptField.type = TextFieldType.DYNAMIC;
+ promptField.mouseEnabled = false;
+ promptField.multiline = false;
+ promptField.wordWrap = false;
+ promptField.textColor = 0xBBBBBB;
+
+ // trigger the event handler to display if needed
+ handleTextChange(null);
+ }
+ COMPILE::JS
+ {
+ var mdlTi:TextInput = value as TextInput;
+ mdlTi.textNode.nodeValue = prompt;
+ //var e:HTMLInputElement = host.element as HTMLInputElement;
+ //e.placeholder = prompt;
+ }
+ }
+
+ COMPILE::SWF
+ private var promptField:CSSTextField;
+ private var promptAdded:Boolean;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function handleTextChange( event:Event ):void
+ {
+ // see what the model currently has to determine if the prompt should be
+ // displayed or not.
+ var model:Object = UIBase(_strand).model;
+
+ if (model.text != null && model.text.length > 0 ) {
+ if (promptAdded) UIBase(_strand).removeChild(promptField);
+ promptAdded = false;
+ }
+ else {
+ if (!promptAdded) UIBase(_strand).addChild(promptField);
+ promptField.text = prompt;
+ promptAdded = true;
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
deleted file mode 100644
index 1c1e8fb..0000000
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
+++ /dev/null
@@ -1,151 +0,0 @@
-////////////////////////////////////////////////////////////////////////////////
-//
-// 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
-{
- COMPILE::SWF
- {
- import flash.text.TextFieldType;
-
- import org.apache.flex.core.CSSTextField;
- }
-
- import org.apache.flex.core.IBead;
- import org.apache.flex.core.IStrand;
- import org.apache.flex.core.UIBase;
- import org.apache.flex.events.Event;
- import org.apache.flex.events.IEventDispatcher;
-
- import org.apache.flex.mdl.TextInput;
-
- /**
- * The TextPromptBead class is a specialty bead that can be used with
- * any TextInput control. The bead places a string into the input field
- * when there is no value associated with the text property.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public class TextPromptBead implements IBead
- {
- /**
- * constructor.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function TextPromptBead()
- {
- }
-
- private var _prompt:String;
-
- /**
- * The string to use as the placeholder prompt.
- *
- * @langversion 3.0
- * @playerversion Flash 10.2
- * @playerversion AIR 2.6
- * @productversion FlexJS 0.0
- */
- public function get prompt():String
- {
- return _prompt;
- }
- public function set prompt(value:String):void
- {
- _prompt = value;
- }
-
- 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 HTMLInputElement
- * @flexjsignorecoercion org.apache.flex.core.UIBase;
- */
- public function set strand(value:IStrand):void
- {
- _strand = value;
-
- COMPILE::SWF
- {
- // listen for changes in text to hide or show the prompt
- var model:Object = UIBase(_strand).model;
- if (!model.hasOwnProperty("text")) {
- throw new Error("Model requires a text property when used with TextPromptBead");
- }
- IEventDispatcher(model).addEventListener("textChange", handleTextChange);
-
- // create a TextField that displays the prompt - it shows
- // and hides based on the model's content
- promptField = new CSSTextField();
- promptField.selectable = false;
- promptField.type = TextFieldType.DYNAMIC;
- promptField.mouseEnabled = false;
- promptField.multiline = false;
- promptField.wordWrap = false;
- promptField.textColor = 0xBBBBBB;
-
- // trigger the event handler to display if needed
- handleTextChange(null);
- }
- COMPILE::JS
- {
- var mdlTi:TextInput = value as TextInput;
- mdlTi.textNode.nodeValue = prompt;
- //var e:HTMLInputElement = host.element as HTMLInputElement;
- //e.placeholder = prompt;
- }
- }
-
- COMPILE::SWF
- private var promptField:CSSTextField;
- private var promptAdded:Boolean;
-
- /**
- * @private
- */
- COMPILE::SWF
- private function handleTextChange( event:Event ):void
- {
- // see what the model currently has to determine if the prompt should be
- // displayed or not.
- var model:Object = UIBase(_strand).model;
-
- if (model.text != null && model.text.length > 0 ) {
- if (promptAdded) UIBase(_strand).removeChild(promptField);
- promptAdded = false;
- }
- else {
- if (!promptAdded) UIBase(_strand).addChild(promptField);
- promptField.text = prompt;
- promptAdded = true;
- }
- }
- }
-}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/c0cd0a56/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 a4d62f2..8d30325 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -25,8 +25,9 @@
<component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
<component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
<component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
- <component id="TextPromptBead" class="org.apache.flex.mdl.beads.TextPromptBead"/>
- <component id="EffectBead" class="org.apache.flex.mdl.beads.EffectBead"/>
- <component id="ButtonEffectBead" class="org.apache.flex.mdl.beads.ButtonEffectBead"/>
+ <component id="TextPrompt" class="org.apache.flex.mdl.beads.TextPrompt"/>
+ <component id="MDLEffect" class="org.apache.flex.mdl.beads.MDLEffect"/>
+ <component id="ButtonEffect" class="org.apache.flex.mdl.beads.ButtonEffect"/>
+ <component id="TextInputEffect" class="org.apache.flex.mdl.beads.TextInputEffect"/>
</componentPackage>
[23/29] git commit: [flex-asjs] [refs/heads/feature/mdl] - MDL
TextPromptBead in place
Posted by ca...@apache.org.
MDL TextPromptBead in place
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/3da70649
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/3da70649
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/3da70649
Branch: refs/heads/feature/mdl
Commit: 3da7064966e040846bfaf877b1bd525fdb2f902c
Parents: a593dd9
Author: Carlos Rovira <ca...@apache.org>
Authored: Wed Oct 26 12:29:26 2016 +0200
Committer: Carlos Rovira <ca...@apache.org>
Committed: Thu Nov 3 20:15:48 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/App.mxml | 12 +-
.../src/main/flex/MDLClasses.as | 2 +-
.../main/flex/org/apache/flex/mdl/TextInput.as | 16 +-
.../org/apache/flex/mdl/beads/TextPromptBead.as | 151 +++++++++++++++++++
.../src/main/resources/mdl-manifest.xml | 1 +
5 files changed, 178 insertions(+), 4 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3da70649/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 3924dba..9f1be78 100644
--- a/examples/flexjs/MDLExample/src/main/flex/App.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml
@@ -55,8 +55,16 @@ limitations under the License.
</js:HContainer>
<!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section -->
- <mdl:TextInput id="mdlti" text="Normal Text Field..." change="mdlchk.text = mdlti.text"/>
- <mdl:TextInput text="Floating Label" mdlEffect="mdl-textfield--floating-label" />
+ <mdl:TextInput id="mdlti" change="mdlchk.text = mdlti.text">
+ <js:beads>
+ <mdl:TextPromptBead prompt="Normal Text Field..."/>
+ </js:beads>
+ </mdl:TextInput>
+ <mdl:TextInput mdlEffect="mdl-textfield--floating-label">
+ <js:beads>
+ <mdl:TextPromptBead prompt="Floating Label"/>
+ </js:beads>
+ </mdl:TextInput>
<!-- Toggles :: https://getmdl.io/components/index.html#toggles-section -->
<mdl:CheckBox id="mdlchk" text="Disabled at start" />
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3da70649/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 733728e..c0ea571 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/MDLClasses.as
@@ -29,7 +29,7 @@ internal class MDLClasses
{
COMPILE::SWF
{
- //import org.apache.flex.flat.beads.CSSScrollBarView; CSSScrollBarView;
+ //import org.apache.flex.mdl.beads.TextPromptBead; TextPromptBead;
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3da70649/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
index 87f9c5a..c8244a4 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TextInput.as
@@ -17,6 +17,8 @@
////////////////////////////////////////////////////////////////////////////////
package org.apache.flex.mdl
{
+ import org.apache.flex.core.ITextModel;
+ import org.apache.flex.events.Event;
import org.apache.flex.html.TextInput;
COMPILE::JS
@@ -52,6 +54,16 @@ package org.apache.flex.mdl
COMPILE::JS
{
private var _textNode:Text;
+
+ public function get textNode():Text
+ {
+ return _textNode;
+ }
+
+ public function set textNode(value:Text):void
+ {
+ _textNode = value;
+ }
}
/**
@@ -78,7 +90,7 @@ package org.apache.flex.mdl
var label:HTMLLabelElement = document.createElement('label') as HTMLLabelElement;
label.className = "mdl-textfield__label";
- var textNode:Text = document.createTextNode('') as Text;
+ textNode = document.createTextNode('') as Text;
label.appendChild(textNode);
div.appendChild(input);
@@ -110,5 +122,7 @@ package org.apache.flex.mdl
positioner.className = positioner.className + " " + _mdlEffect;
}
}
+
+
}
}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3da70649/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
new file mode 100644
index 0000000..1c1e8fb
--- /dev/null
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/TextPromptBead.as
@@ -0,0 +1,151 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+// 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
+{
+ COMPILE::SWF
+ {
+ import flash.text.TextFieldType;
+
+ import org.apache.flex.core.CSSTextField;
+ }
+
+ import org.apache.flex.core.IBead;
+ import org.apache.flex.core.IStrand;
+ import org.apache.flex.core.UIBase;
+ import org.apache.flex.events.Event;
+ import org.apache.flex.events.IEventDispatcher;
+
+ import org.apache.flex.mdl.TextInput;
+
+ /**
+ * The TextPromptBead class is a specialty bead that can be used with
+ * any TextInput control. The bead places a string into the input field
+ * when there is no value associated with the text property.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public class TextPromptBead implements IBead
+ {
+ /**
+ * constructor.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function TextPromptBead()
+ {
+ }
+
+ private var _prompt:String;
+
+ /**
+ * The string to use as the placeholder prompt.
+ *
+ * @langversion 3.0
+ * @playerversion Flash 10.2
+ * @playerversion AIR 2.6
+ * @productversion FlexJS 0.0
+ */
+ public function get prompt():String
+ {
+ return _prompt;
+ }
+ public function set prompt(value:String):void
+ {
+ _prompt = value;
+ }
+
+ 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 HTMLInputElement
+ * @flexjsignorecoercion org.apache.flex.core.UIBase;
+ */
+ public function set strand(value:IStrand):void
+ {
+ _strand = value;
+
+ COMPILE::SWF
+ {
+ // listen for changes in text to hide or show the prompt
+ var model:Object = UIBase(_strand).model;
+ if (!model.hasOwnProperty("text")) {
+ throw new Error("Model requires a text property when used with TextPromptBead");
+ }
+ IEventDispatcher(model).addEventListener("textChange", handleTextChange);
+
+ // create a TextField that displays the prompt - it shows
+ // and hides based on the model's content
+ promptField = new CSSTextField();
+ promptField.selectable = false;
+ promptField.type = TextFieldType.DYNAMIC;
+ promptField.mouseEnabled = false;
+ promptField.multiline = false;
+ promptField.wordWrap = false;
+ promptField.textColor = 0xBBBBBB;
+
+ // trigger the event handler to display if needed
+ handleTextChange(null);
+ }
+ COMPILE::JS
+ {
+ var mdlTi:TextInput = value as TextInput;
+ mdlTi.textNode.nodeValue = prompt;
+ //var e:HTMLInputElement = host.element as HTMLInputElement;
+ //e.placeholder = prompt;
+ }
+ }
+
+ COMPILE::SWF
+ private var promptField:CSSTextField;
+ private var promptAdded:Boolean;
+
+ /**
+ * @private
+ */
+ COMPILE::SWF
+ private function handleTextChange( event:Event ):void
+ {
+ // see what the model currently has to determine if the prompt should be
+ // displayed or not.
+ var model:Object = UIBase(_strand).model;
+
+ if (model.text != null && model.text.length > 0 ) {
+ if (promptAdded) UIBase(_strand).removeChild(promptField);
+ promptAdded = false;
+ }
+ else {
+ if (!promptAdded) UIBase(_strand).addChild(promptField);
+ promptField.text = prompt;
+ promptAdded = true;
+ }
+ }
+ }
+}
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/3da70649/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 6dcb073..9f47fea 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
+++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
@@ -25,5 +25,6 @@
<component id="TextInput" class="org.apache.flex.mdl.TextInput"/>
<component id="CheckBox" class="org.apache.flex.mdl.CheckBox"/>
<component id="RadioButton" class="org.apache.flex.mdl.RadioButton"/>
+ <component id="TextPromptBead" class="org.apache.flex.mdl.beads.TextPromptBead"/>
</componentPackage>