Some changes to get the same output as MDL web site samples thanks to latest 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/1266625d Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/1266625d Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/1266625d Branch: refs/heads/feature/fontawesome Commit: 1266625d704fd302addd609fdedbeeba4dc61604 Parents: a73aec3 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Wed Dec 28 19:48:13 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Wed Dec 28 19:48:13 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/Grids.mxml | 59 ++++++++++---------- .../MDLExample/src/main/flex/Sliders.mxml | 58 ++++++++++--------- .../src/main/resources/mdl-styles.css | 9 +++ .../src/main/flex/org/apache/flex/html/Div.as | 51 +++++++---------- .../src/main/flex/org/apache/flex/html/Span.as | 2 +- 5 files changed, 92 insertions(+), 87 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1266625d/examples/flexjs/MDLExample/src/main/flex/Grids.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml index b22b813..226b994 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Grids.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Grids.mxml @@ -22,33 +22,36 @@ limitations under the License. xmlns:mdl="library://ns.apache.org/flexjs/mdl" xmlns="http://www.w3.org/1999/xhtml";> - <mdl:Grid className="demo-grid"> + <js:Div className="demo-grid"> + + <mdl:Grid> + + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="1"><mdl:beads><js:InnerHTML text="1"/></mdl:beads></mdl:GridCell> + + <mdl:GridCell column="4"><mdl:beads><js:InnerHTML text="4"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="4"><mdl:beads><js:InnerHTML text="4"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="4"><mdl:beads><js:InnerHTML text="4"/></mdl:beads></mdl:GridCell> + + <mdl:GridCell column="6"><mdl:beads><js:InnerHTML text="6"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="4"><mdl:beads><js:InnerHTML text="4"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="2"><mdl:beads><js:InnerHTML text="2"/></mdl:beads></mdl:GridCell> + + <mdl:GridCell column="6" columnTablet="8"><mdl:beads><js:InnerHTML text="6 (8 Tablet)"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="4" columnTablet="6"><mdl:beads><js:InnerHTML text="4 (6 Tablet)"/></mdl:beads></mdl:GridCell> + <mdl:GridCell column="2" columnPhone="4"><mdl:beads><js:InnerHTML text="2 (4 Phone)"/></mdl:beads></mdl:GridCell> + + </mdl:Grid> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - <mdl:GridCell column="1"><js:Label text="1"/></mdl:GridCell> - - <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> - <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> - <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> - - <mdl:GridCell column="6"><js:Label text="6"/></mdl:GridCell> - <mdl:GridCell column="4"><js:Label text="4"/></mdl:GridCell> - <mdl:GridCell column="2"><js:Label text="2"/></mdl:GridCell> - - <mdl:GridCell column="6" columnTablet="8"><js:Label text="6 (8 Tablet)"/></mdl:GridCell> - <mdl:GridCell column="4" columnTablet="6"><js:Label text="4 (6 Tablet)"/></mdl:GridCell> - <mdl:GridCell column="2" columnPhone="4"><js:Label text="2 (4 Phone)"/></mdl:GridCell> - - </mdl:Grid> - + </js:Div> </mdl:TabBarPanel> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1266625d/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml index 025bca8..bc8fead 100644 --- a/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/Sliders.mxml @@ -47,36 +47,42 @@ limitations under the License. ]]> </fx:Script> - <mdl:Grid> - <mdl:GridCell> - <mdl:Slider id="slider1" className="mdlsl_example" valueChange="onValueChange1(event)"/> - <!--<mdl:Slider id="slider1" minimum="0" maximum="16" value="2" stepSize="1" width="200" + <!--<mdl:Slider id="slider1" minimum="0" maximum="16" value="2" stepSize="1" width="200" valueChange="onValueChange(event)"/>--> - </mdl:GridCell> - <mdl:GridCell> - <mdl:Slider id="slider2" minimum="0" maximum="10" value="2" stepSize="2" width="200" - valueChange="onValueChange2(event)"/> - </mdl:GridCell> - - <mdl:GridCell> - <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"> - <mdl:beads> - <mdl:Disabled/> - </mdl:beads> - </mdl:Slider> - </mdl:GridCell> - <mdl:GridCell> - <js:Span id="slider1_txt"/> - </mdl:GridCell> + <mdl:Grid> + + <mdl:Card className="demo-card-slider" shadow="2"> + <mdl:CardTitle> + <mdl:CardTitleText id="slider1_txt"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <mdl:Slider id="slider1" className="mdlsl_example" valueChange="onValueChange1(event)"/> + </mdl:CardSupportingText> + </mdl:Card> - <mdl:GridCell> - <js:Span id="slider2_txt"/> - </mdl:GridCell> + <mdl:Card className="demo-card-slider" shadow="2"> + <mdl:CardTitle> + <mdl:CardTitleText id="slider2_txt"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <mdl:Slider id="slider2" minimum="0" maximum="10" value="2" stepSize="2" width="200" valueChange="onValueChange2(event)"/> + </mdl:CardSupportingText> + </mdl:Card> - <mdl:GridCell> - <js:Span id="slider3_txt"/> - </mdl:GridCell> + <mdl:Card className="demo-card-slider" shadow="2"> + <mdl:CardTitle> + <mdl:CardTitleText id="slider3_txt"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"> + <mdl:beads> + <mdl:Disabled/> + </mdl:beads> + </mdl:Slider> + </mdl:CardSupportingText> + </mdl:Card> + </mdl:Grid> </mdl:TabBarPanel> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1266625d/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 169b01d..176b565 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -136,7 +136,16 @@ js|Image color: #fff; } +/* sliders demo */ +.demo-card-slider.mdl-card { + width: 250px; + height: 50px; + background: #fff; + color: #000; + margin: 4px; +} +/* Grids Example */ .demo-grid .mdl-cell { box-sizing: border-box; background-color: #BDBDBD; http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1266625d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Div.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Div.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Div.as index 8fd692f..5c95172 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Div.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Div.as @@ -18,7 +18,7 @@ //////////////////////////////////////////////////////////////////////////////// package org.apache.flex.html { - import org.apache.flex.core.UIBase; + import org.apache.flex.core.ContainerBase; COMPILE::JS { @@ -35,7 +35,7 @@ package org.apache.flex.html * @playerversion AIR 2.6 * @productversion FlexJS 0.0 */ - public class Div extends UIBase + public class Div extends ContainerBase { /** * constructor. @@ -53,7 +53,7 @@ package org.apache.flex.html private var _text:String = ""; /** - * The text of the heading + * The text of the div * * @langversion 3.0 * @playerversion Flash 10.2 @@ -62,51 +62,38 @@ package org.apache.flex.html */ public function get text():String { - COMPILE::SWF - { - return _text; - } - COMPILE::JS - { - return textNode.nodeValue; - } + return _text; } - public function set text(value:String):void { - COMPILE::SWF - { - _text = value; - } - COMPILE::JS - { - textNode.nodeValue = value; - } + _text = value; + + COMPILE::JS + { + if(textNode == null) + { + textNode = document.createTextNode('') as Text; + element.appendChild(textNode); + } + + textNode.nodeValue = value; + } } COMPILE::JS - private var textNode:Text; + protected var textNode:Text; /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement - * @flexjsignorecoercion HTMLDivElement */ COMPILE::JS override protected function createElement():WrappedHTMLElement { - var div:HTMLElement = document.createElement('div') as HTMLDivElement; - - textNode = document.createTextNode('') as Text; - div.appendChild(textNode); + element = document.createElement('div') as WrappedHTMLElement; - element = div as WrappedHTMLElement; - positioner = element; - positioner.style.position = 'relative'; - element.flexjs_wrapper = this; + element.flexjs_wrapper = this; - //className = typeNames = 'Div'; - return element; } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/1266625d/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as index 606906c..0bc8e3e 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/Span.as @@ -53,7 +53,7 @@ package org.apache.flex.html private var _text:String = ""; /** - * The text of the heading + * The text of the span * * @langversion 3.0 * @playerversion Flash 10.2
