Repository: flex-asjs Updated Branches: refs/heads/develop c007085b3 -> 8fdea9083
NavigatorLayout subcomponents Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/8fdea908 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/8fdea908 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/8fdea908 Branch: refs/heads/develop Commit: 8fdea9083d2acf40f86ad37471dd3e2af73ced61 Parents: c007085 Author: Carlos Rovira <[email protected]> Authored: Tue Nov 22 01:54:50 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Tue Nov 22 01:54:50 2016 +0100 ---------------------------------------------------------------------- .../flexjs/MDLExample/src/main/flex/App.mxml | 352 ++++++++++--------- .../src/main/resources/mdl-styles.css | 24 +- .../src/main/flex/org/apache/flex/html/A.as | 2 +- .../src/main/flex/org/apache/flex/html/Span.as | 2 +- .../src/main/flex/org/apache/flex/mdl/Drawer.as | 76 ++++ .../flex/org/apache/flex/mdl/LayoutTitle.as | 75 ++++ .../main/flex/org/apache/flex/mdl/Navigation.as | 76 ++++ .../apache/flex/mdl/NavigationLayoutContent.as | 76 ++++ .../flex/org/apache/flex/mdl/NavigationLink.as | 76 ++++ .../src/main/resources/mdl-manifest.xml | 7 + 10 files changed, 605 insertions(+), 161 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 1d607b5..32248cc 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -32,167 +32,203 @@ limitations under the License. <js:initialView> <js:View> - <js:Form action="#"> - - <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> - <js:HContainer> - <mdl:Button className="mdlbtn"/> - - <!-- Fab button --> - <mdl:Button fab="true" colored="true"> - <i class="material-icons">add</i> - </mdl:Button> - - <!-- Fab with Ripple --> - <mdl:Button fab="true" ripple="true"> - <i class="material-icons md-48">face</i> - </mdl:Button> - - <!-- Raised button --> - <mdl:Button text="COLORED" raised="true" colored="true"/> - - <!-- Raised button with ripple --> - <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> - - <!-- Raised disabled button--> - <mdl:Button text="DISABLED" raised="true"> - <js:beads> - <mdl:Disabled/> - </js:beads> - </mdl:Button> - </js:HContainer> - - <mdl:NavigationLayout> - <mdl:Header> - <mdl:HeaderRow> - <js:Span text="Title" className="mdl-layout-title"/> - </mdl:HeaderRow> - </mdl:Header> - - <mdl:Button fab="true" colored="true"> - <i class="material-icons">add</i> - </mdl:Button> - </mdl:NavigationLayout> - - <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> - <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example"> - <js:beads> - <mdl:TextPrompt prompt="Normal Text Field..."/> - </js:beads> - </mdl:TextField> - <mdl:TextField floatingLabel= "true"> - <js:beads> - <mdl:TextPrompt prompt="Floating Label"/> - </js:beads> - </mdl:TextField> - - <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> - <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/> - <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> - - <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/> - <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/> - <mdl:RadioButton groupName="g1" text="Red"/> - <mdl:Switch text="Switch" ripple="true" selected="true"/> - <js:VContainer> - <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);"> - <js:beads> - <mdl:Badge dataBadge="1" overlap="true"/> - </js:beads> - </js:Div> - - <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);"> - <js:beads> - <mdl:Badge dataBadge="4"/> - </js:beads> - </js:Span> - - <js:A text="Badge No Bg" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="5" noBackground="true"/> - </js:beads> - </js:A> - - <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="1"/> - </js:beads> - </js:A> - - </js:VContainer> - - <!--<mdl:List id="list" width="130" labelField="label"> - <js:dataProvider> - <fx:Array> - <fx:Object label="Install SIM Card"/> - <fx:Object label="Install SIM Card 1"/> - <fx:Object label="Install SIM Card 2"/> - </fx:Array> - </js:dataProvider> - </mdl:List>--> - - - <js:HContainer> - <mdl:Card width="512" shadow="2" style="margin:10;"> - <mdl:CardTitle className="cardTitle"> - <js:H2 text="Welcome" className="mdl-card__title-text"/> - </mdl:CardTitle> - <mdl:CardSupportingText> - <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> - </mdl:CardSupportingText> - <mdl:CardActions border="true"> - <mdl:Button text="Get Started" ripple="true" colored="true"/> - </mdl:CardActions> - <mdl:CardMenu> - <mdl:Button icon="true" ripple="true" style="color: #fff;"> - <i class="material-icons">share</i> + <mdl:Card width="320" height="320" shadow="2" style="margin:10;"> + <mdl:CardTitle className="dogTitle" expand="true"> + <js:H2 text="Update" className="mdl-card__title-text"/> + </mdl:CardTitle> + <!--<mdl:CardMedia> + <js:Image url="assets/Unknown.jpg" height="176"/> + </mdl:CardMedia>--> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button colored="true" ripple="true" text="View Updates"/> + </mdl:CardActions> + </mdl:Card> + <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover"> + <mdl:CardTitle expand="true"/> + <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);"> + <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> + </mdl:CardActions> + </mdl:Card> + + <!--<mdl:NavigationLayout className="layoutTransparent" width="100%" height="400" style="position:relative"> + <mdl:Header transparent="true"> + <mdl:HeaderRow> + <mdl:LayoutTitle text="Title"/> + <mdl:Spacer/> + <mdl:Navigation> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + </mdl:Navigation> + </mdl:HeaderRow> + <mdl:Drawer> + <mdl:LayoutTitle text="Title"/> + <mdl:Navigation> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + <mdl:NavigationLink text="link"/> + </mdl:Navigation> + </mdl:Drawer> + </mdl:Header> + </mdl:NavigationLayout> + --> + <mdl:NavigationLayout style="position:relative"> + <mdl:Header> + <mdl:HeaderRow> + <mdl:LayoutTitle text="Material Design Layout"/> + <mdl:Spacer/> + <mdl:Navigation> + <mdl:NavigationLink text="link 1"/> + <mdl:NavigationLink text="link 2"/> + <mdl:NavigationLink text="link 3"/> + </mdl:Navigation> + </mdl:HeaderRow> + <mdl:Drawer> + <mdl:LayoutTitle text="Material Design Layout"/> + <mdl:Navigation> + <mdl:NavigationLink text="link 1"/> + <mdl:NavigationLink text="link 2"/> + <mdl:NavigationLink text="link 3"/> + </mdl:Navigation> + </mdl:Drawer> + </mdl:Header> + <mdl:NavigationLayoutContent> + <js:Container className="page-content"> + + <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> + <js:HContainer> + <mdl:Button className="mdlbtn"/> + + <!-- Fab button --> + <mdl:Button fab="true" colored="true"> + <i class="material-icons">add</i> + </mdl:Button> + + <!-- Fab with Ripple --> + <mdl:Button fab="true" ripple="true"> + <i class="material-icons md-48">face</i> + </mdl:Button> + + <!-- Raised button --> + <mdl:Button text="COLORED" raised="true" colored="true"/> + + <!-- Raised button with ripple --> + <mdl:Button text="ACCENT" raised="true" ripple="true" accent="true"/> + + <!-- Raised disabled button--> + <mdl:Button text="DISABLED" raised="true"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:Button> + </js:HContainer> + + <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> + <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example"> + <js:beads> + <mdl:TextPrompt prompt="Normal Text Field..."/> + </js:beads> + </mdl:TextField> + <mdl:TextField floatingLabel= "true"> + <js:beads> + <mdl:TextPrompt prompt="Floating Label"/> + </js:beads> + </mdl:TextField> + + <!-- Toggles :: https://getmdl.io/components/index.html#toggles-section --> + <mdl:CheckBox id="mdlchk" text="Disabled at start" className="mdlchk_example"/> + <mdl:CheckBox id="mdlchk1" text="Selected and with Ripple" selected="true" ripple="true"/> + + <mdl:RadioButton groupName="g1" text="Black" className="mdlrb_example"/> + <mdl:RadioButton groupName="g1" text="Ripple" ripple="true"/> + <mdl:RadioButton groupName="g1" text="Red"/> + <mdl:Switch text="Switch" ripple="true" selected="true"/> + + <js:VContainer> + <js:Div text="account_box" className="material-icons" style="color: rgba(0, 0, 0, 0.24);"> + <js:beads> + <mdl:Badge dataBadge="1" overlap="true"/> + </js:beads> + </js:Div> + + <js:Span text="Inbox" className="mdl-badge" style="color: rgba(0, 0, 0, 0.24);"> + <js:beads> + <mdl:Badge dataBadge="4"/> + </js:beads> + </js:Span> + + <js:A text="Badge No Bg" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="5" noBackground="true"/> + </js:beads> + </js:A> + + <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="1"/> + </js:beads> + </js:A> + + </js:VContainer> + + <mdl:Card width="512" shadow="2" style="margin:10;"> + <mdl:CardTitle className="cardTitle"> + <js:H2 text="Welcome" className="mdl-card__title-text"/> + </mdl:CardTitle> + <mdl:CardSupportingText> + <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia..."/> + </mdl:CardSupportingText> + <mdl:CardActions border="true"> + <mdl:Button text="Get Started" ripple="true" colored="true"/> + </mdl:CardActions> + <mdl:CardMenu> + <mdl:Button icon="true" ripple="true" style="color: #fff;"> + <i class="material-icons">share</i> + </mdl:Button> + </mdl:CardMenu> + </mdl:Card> + + <mdl:Button id="menu_btn" icon="true"> + <i class="material-icons">more_vert</i> </mdl:Button> - </mdl:CardMenu> - </mdl:Card> - - <mdl:Spacer/> - - <mdl:Button id="menu_btn" icon="true"> - <i class="material-icons">more_vert</i> - </mdl:Button> - <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> - <mdl:MenuItem text="Some Action"/> - <mdl:MenuItem text="Another Action"/> - <mdl:MenuItem text="Action Disabled"> - <js:beads> - <mdl:Disabled/> - </js:beads> - </mdl:MenuItem> - <mdl:MenuItem text="More Action" divider="true"/> - <mdl:MenuItem text="Separated Action"/> - </mdl:Menu> + <mdl:Menu dataMdlFor="menu_btn" ripple="true" bottom="true" left="false"> + <mdl:MenuItem text="Some Action"/> + <mdl:MenuItem text="Another Action"/> + <mdl:MenuItem text="Action Disabled"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:MenuItem> + <mdl:MenuItem text="More Action" divider="true"/> + <mdl:MenuItem text="Separated Action"/> + </mdl:Menu> + + <mdl:Slider className="mdlsl_example"/> + <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> + + + </js:Container> + </mdl:NavigationLayoutContent> - <mdl:Slider className="mdlsl_example"/> - <mdl:Slider minimum="0" maximum="10" value="2" stepSize="2" width="200"/> - - <mdl:Card width="320" height="320" shadow="2" style="margin:10;"> - <mdl:CardTitle className="dogTitle" expand="true"> - <js:H2 text="Update" className="mdl-card__title-text"/> - </mdl:CardTitle> - <!--<mdl:CardMedia> - <js:Image url="assets/Unknown.jpg" height="176"/> - </mdl:CardMedia>--> - <mdl:CardSupportingText> - <js:MultilineLabel text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."/> - </mdl:CardSupportingText> - <mdl:CardActions border="true"> - <mdl:Button colored="true" ripple="true" text="View Updates"/> - </mdl:CardActions> - </mdl:Card> - - <mdl:Card width="256" height="256" shadow="2" style="margin:10;background: url('assets/image_card.jpg') center / cover"> - <mdl:CardTitle expand="true"/> - <mdl:CardActions style="height: 52px; padding: 16px; background: rgba(0, 0, 0, 0.2);"> - <js:Span text="Image.jpg" style="color: #fff; font-size: 14px; font-weight: 500;"/> - </mdl:CardActions> - </mdl:Card> - </js:HContainer> + </mdl:NavigationLayout> + <!--<mdl:List id="list" width="130" labelField="label"> + <js:dataProvider> + <fx:Array> + <fx:Object label="Install SIM Card"/> + <fx:Object label="Install SIM Card 1"/> + <fx:Object label="Install SIM Card 2"/> + </fx:Array> + </js:dataProvider> + </mdl:List>--> + + + <js:Form action="#"> </js:Form> </js:View> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 af58dd8..52b47d3 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -20,6 +20,7 @@ */ @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; @@ -27,7 +28,7 @@ box-sizing: border-box; } -Application +.page-content { padding: 10px; margin: 10px; @@ -40,6 +41,22 @@ Image IBeadView: ClassReference("org.apache.flex.html.beads.ImageView"); } +mdl|List +{ + IBeadModel: ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel"); + IBeadView: ClassReference("org.apache.flex.html.beads.ListView"); + IBeadController: ClassReference("org.apache.flex.html.beads.controllers.ListSingleSelectionMouseController"); + IBeadLayout: ClassReference("org.apache.flex.html.beads.layouts.VerticalLayout"); + IContentView: ClassReference("org.apache.flex.html.supportClasses.DataGroup"); + IDataProviderItemRendererMapper: ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData"); + IItemRendererClassFactory: ClassReference("org.apache.flex.core.ItemRendererClassFactory"); + IItemRenderer: ClassReference("org.apache.flex.html.supportClasses.StringItemRenderer"); + IViewport: ClassReference("org.apache.flex.html.supportClasses.ScrollingViewport"); + IViewportModel: ClassReference("org.apache.flex.html.beads.models.ViewportModel"); + border-style: solid; + border-color: #222222; +} + .cardTitle { color: #fff; @@ -52,4 +69,9 @@ Image color: #fff; height: 176px; background: url('assets/dog.png') bottom right 15% no-repeat #46B6AC; +} + +.layoutTransparent { + background: url('assets/transparent.jpg') center / cover; + color: white; } \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as index ca7ce1f..a4f5619 100644 --- a/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as +++ b/frameworks/projects/HTML/src/main/flex/org/apache/flex/html/A.as @@ -109,7 +109,7 @@ package org.apache.flex.html } COMPILE::JS - private var textNode:Text; + protected var textNode:Text; /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 91b94f7..5f978c5 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 @@ -84,7 +84,7 @@ package org.apache.flex.html } COMPILE::JS - private var textNode:Text; + protected var textNode:Text; /** * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as new file mode 100644 index 0000000..f6c0253 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Drawer.as @@ -0,0 +1,76 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The Drawer class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class Drawer extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Drawer() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-layout__drawer"; + + element = document.createElement('div') as WrappedHTMLElement; + element.className = typeNames; + + positioner = element; + + // absolute positioned children need a non-null + // position value in the parent. It might + // get set to 'absolute' if the container is + // also absolutely positioned + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as new file mode 100644 index 0000000..bc94f19 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/LayoutTitle.as @@ -0,0 +1,75 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.Span; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The LayoutTitle class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class LayoutTitle extends Span + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function LayoutTitle() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-layout-title"; + + var span:HTMLElement = document.createElement('span') as HTMLSpanElement; + + textNode = document.createTextNode('') as Text; + span.appendChild(textNode); + + element = span as WrappedHTMLElement; + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as new file mode 100644 index 0000000..e170f93 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Navigation.as @@ -0,0 +1,76 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The Navigation class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class Navigation extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Navigation() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-navigation"; + + element = document.createElement('nav') as WrappedHTMLElement; + element.className = typeNames; + + positioner = element; + + // absolute positioned children need a non-null + // position value in the parent. It might + // get set to 'absolute' if the container is + // also absolutely positioned + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as new file mode 100644 index 0000000..a0444ba --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLayoutContent.as @@ -0,0 +1,76 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The NavigationLayoutContent class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class NavigationLayoutContent extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function NavigationLayoutContent() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-layout__content"; + + element = document.createElement('div') as WrappedHTMLElement; + element.className = typeNames; + + positioner = element; + + // absolute positioned children need a non-null + // position value in the parent. It might + // get set to 'absolute' if the container is + // also absolutely positioned + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as new file mode 100644 index 0000000..b468be9 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/NavigationLink.as @@ -0,0 +1,76 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.A; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The NavigationLink class is a Container component capable of parenting other + * components + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class NavigationLink extends A + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function NavigationLink() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-navigation__link"; + + var a:HTMLElement = document.createElement('a') as HTMLElement; + a.setAttribute('href', href); + + textNode = document.createTextNode('') as Text; + a.appendChild(textNode); + + element = a as WrappedHTMLElement; + + positioner = element; + element.flexjs_wrapper = this; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/8fdea908/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 ac711e2..94443ce 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -42,7 +42,14 @@ <component id="Spacer" class="org.apache.flex.mdl.Spacer"/> <component id="List" class="org.apache.flex.mdl.List"/> <component id="NavigationLayout" class="org.apache.flex.mdl.NavigationLayout"/> + <component id="LayoutTitle" class="org.apache.flex.mdl.LayoutTitle"/> + <component id="Navigation" class="org.apache.flex.mdl.Navigation"/> + <component id="NavigationLink" class="org.apache.flex.mdl.NavigationLink"/> <component id="Header" class="org.apache.flex.mdl.Header"/> <component id="HeaderRow" class="org.apache.flex.mdl.HeaderRow"/> + <component id="Navigation" class="org.apache.flex.mdl.Navigation"/> + <component id="Drawer" class="org.apache.flex.mdl.Drawer"/> + <component id="NavigationLayoutContent" class="org.apache.flex.mdl.NavigationLayoutContent"/> + </componentPackage>
