Repository: flex-asjs Updated Branches: refs/heads/develop 20488b4d7 -> f6d133023
TabBar, TabBar subcomponents, more component navigation attributes and rebuild the example with tabs (first iteration) Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f6d13302 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f6d13302 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f6d13302 Branch: refs/heads/develop Commit: f6d1330239ff102a66234dfd4df048652a1ed933 Parents: 20488b4 Author: Carlos Rovira <[email protected]> Authored: Wed Nov 23 01:00:31 2016 +0100 Committer: Carlos Rovira <[email protected]> Committed: Wed Nov 23 01:00:31 2016 +0100 ---------------------------------------------------------------------- .../src/main/flex/MainNavigation.mxml | 200 ++++++++++--------- .../src/main/flex/org/apache/flex/mdl/Header.as | 42 ++++ .../src/main/flex/org/apache/flex/mdl/TabBar.as | 97 +++++++++ .../flex/org/apache/flex/mdl/TabBarButton.as | 101 ++++++++++ .../flex/org/apache/flex/mdl/TabBarPanel.as | 104 ++++++++++ .../src/main/resources/mdl-manifest.xml | 4 +- 6 files changed, 452 insertions(+), 96 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f6d13302/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml index a77078e..d7d9ed7 100644 --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml @@ -28,55 +28,60 @@ limitations under the License. <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:NavigationLink text="link 4"/> + <mdl:NavigationLink text="link 1" href="#"/> + <mdl:NavigationLink text="link 2" href="#"/> + <mdl:NavigationLink text="link 3" href="#"/> + <mdl:NavigationLink text="link 4" href="#"/> </mdl:Navigation> </mdl:HeaderRow> + <mdl:TabBar ripple="true"> + <mdl:TabBarButton text="Cards" href="#cards_panel" isActive="true"/> + <mdl:TabBarButton text="Buttons" href="#buttons_panel" /> + <mdl:TabBarButton text="TextFields" href="#textfield_panel"/> + <mdl:TabBarButton text="Others" href="#others_panel"/> + </mdl:TabBar> </mdl:Header> <mdl:Drawer> <mdl:LayoutTitle text="Drawer"/> <mdl:Navigation> - <mdl:NavigationLink text="link 1"/> - <mdl:NavigationLink text="link 2"/> - <mdl:NavigationLink text="link 3"/> - <mdl:NavigationLink text="link 4"/> + <mdl:NavigationLink text="link 1" href="#"/> + <mdl:NavigationLink text="link 2" href="#"/> + <mdl:NavigationLink text="link 3" href="#"/> + <mdl:NavigationLink text="link 4" href="#"/> </mdl:Navigation> </mdl:Drawer> <mdl:NavigationLayoutContent> - <js:Container className="page-content"> - + <mdl:TabBarPanel id="buttons_panel"> <!-- Buttons https://getmdl.io/components/index.html#buttons-section --> - <js:HContainer> - <mdl:Button className="mdlbtn"/> + <mdl:Button className="mdlbtn"/> - <!-- Fab button --> - <mdl:Button fab="true" colored="true"> - <i class="material-icons">add</i> - </mdl:Button> + <!-- 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> + <!-- 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 --> + <mdl:Button text="COLORED" raised="true" colored="true"/> - <!-- Raised button with ripple --> - <mdl:Button text="ACCENT" raised="true" ripple="true" accent="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> - + <!-- Raised disabled button--> + <mdl:Button text="DISABLED" raised="true"> + <js:beads> + <mdl:Disabled/> + </js:beads> + </mdl:Button> + </mdl:TabBarPanel> + + <mdl:TabBarPanel id="textfield_panel"> <!-- Text Fields :: https://getmdl.io/components/index.html#textfields-section --> <mdl:TextField id="mdlti" change="mdlchk.text = mdlti.text" className="mdlti_example"> <js:beads> @@ -88,7 +93,51 @@ limitations under the License. <mdl:TextPrompt prompt="Floating Label"/> </js:beads> </mdl:TextField> + </mdl:TabBarPanel> + <mdl:TabBarPanel id="cards_panel" isActive="true"> + <mdl:Card width="512" shadow="2" style="margin:10;"> + <mdl:CardTitle className="welcomeCard__title"> + <mdl:CardTitleText text="Welcome"/> + </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:Card width="320" height="320" shadow="2" style="margin:10;"> + <mdl:CardTitle className="dogTitle" expand="true"> + <mdl:CardTitleText text="Update"/> + </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:TabBarPanel> + + <mdl:TabBarPanel id="others_panel"> + <mdl:List labelField="label"> <js:dataProvider> <fx:Array> @@ -108,49 +157,29 @@ limitations under the License. <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: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:A text="Badge No Bg" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="5" noBackground="true"/> - </js:beads> - </js:A> + <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 id="badge1" text="Badge Normal" href="http://flex.apache.org";> - <js:beads> - <mdl:Badge dataBadge="1"/> - </js:beads> - </js:A> - - </js:VContainer> + <js:A text="Badge No Bg" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="5" noBackground="true"/> + </js:beads> + </js:A> - <mdl:Card width="512" shadow="2" style="margin:10;"> - <mdl:CardTitle className="welcomeCard__title"> - <mdl:CardTitleText text="Welcome"/> - </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> + <js:A id="badge1" text="Badge Normal" href="http://flex.apache.org";> + <js:beads> + <mdl:Badge dataBadge="1"/> + </js:beads> + </js:A> <mdl:Button id="menu_btn" icon="true"> <i class="material-icons">more_vert</i> @@ -169,29 +198,10 @@ limitations under the License. <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"> - <mdl:CardTitleText text="Update"/> - </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:TabBarPanel> + + <js:Container className="page-content"> + <!--<js:Form action="#"> </js:Form>--> </js:Container> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f6d13302/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Header.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Header.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Header.as index 989921f..eeecffe 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Header.as +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Header.as @@ -93,5 +93,47 @@ package org.apache.flex.mdl className += (_transparent ? " mdl-layout__header--transparent" : ""); } + + protected var _scrollable:Boolean; + /** + * A boolean flag to activate "mdl-layout__header--scroll" effect selector. + * Optional. Makes the header scroll with the content + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get scrollable():Boolean + { + return _scrollable; + } + public function set scrollable(value:Boolean):void + { + _scrollable = value; + + className += (_scrollable ? " mdl-layout__header--scroll" : ""); + } + + protected var _waterfall:Boolean; + /** + * A boolean flag to activate "mdl-layout__header--waterfall" effect selector. + * Optional. Allows a "waterfall" effect with multiple header lines + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get waterfall():Boolean + { + return _waterfall; + } + public function set waterfall(value:Boolean):void + { + _waterfall = value; + + className += (_waterfall ? " mdl-layout__header--waterfall" : ""); + } } } http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f6d13302/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.as new file mode 100644 index 0000000..c793a92 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBar.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The TabBar 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 TabBar extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function TabBar() + { + 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__tab-bar"; + + 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; + } + + protected var _ripple:Boolean = false; + /** + * A boolean flag to activate "mdl-js-ripple-effect" effect selector. + * Applies ripple click effect. May be used in combination with any other classes + * + * @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 + { + _ripple = value; + + className += (_ripple ? " mdl-js-ripple-effect" : ""); + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f6d13302/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as new file mode 100644 index 0000000..15a3e9f --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarButton.as @@ -0,0 +1,101 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 TabBarButton 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 TabBarButton extends A + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function TabBarButton() + { + super(); + + className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user; + } + + private var _isActive:Boolean; + + /** + * Marks this Button as the active one in the TabBar + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get isActive():Boolean + { + return _isActive; + } + + public function set isActive(value:Boolean):void + { + _isActive = value; + + COMPILE::JS + { + className += (_isActive ? " is-active" : ""); + } + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + typeNames = "mdl-layout__tab"; + + 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/f6d13302/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as new file mode 100644 index 0000000..5d43d9f --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/TabBarPanel.as @@ -0,0 +1,104 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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 TabBarPanel class is a Container component capable of parenting other + * four components + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class TabBarPanel extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function TabBarPanel() + { + 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__tab-panel"; + + element = document.createElement('section') 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; + } + + private var _isActive:Boolean; + + /** + * Marks this Button as the active one in the TabBar + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function get isActive():Boolean + { + return _isActive; + } + + public function set isActive(value:Boolean):void + { + _isActive = value; + + COMPILE::JS + { + className += (_isActive ? " is-active" : ""); + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f6d13302/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 7786a7c..ef18971 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -52,6 +52,8 @@ <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"/> - + <component id="TabBar" class="org.apache.flex.mdl.TabBar"/> + <component id="TabBarButton" class="org.apache.flex.mdl.TabBarButton"/> + <component id="TabBarPanel" class="org.apache.flex.mdl.TabBarPanel"/> </componentPackage>
