Card component and 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/fd759705 Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/fd759705 Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/fd759705 Branch: refs/heads/feature/mdl Commit: fd7597050041660a6f01b69bfd764efeb24d0a3b Parents: 36c9ff3 Author: Carlos Rovira <carlosrov...@apache.org> Authored: Thu Nov 3 23:20:52 2016 +0100 Committer: Carlos Rovira <carlosrov...@apache.org> Committed: Sun Nov 6 13:15:38 2016 +0100 ---------------------------------------------------------------------- examples/flexjs/MDLExample/pom.xml | 6 -- .../flexjs/MDLExample/src/main/flex/App.mxml | 36 +++++-- .../src/main/resources/mdl-styles.css | 7 ++ .../src/main/flex/org/apache/flex/mdl/Card.as | 81 ++++++++++++++++ .../flex/org/apache/flex/mdl/CardActions.as | 80 ++++++++++++++++ .../main/flex/org/apache/flex/mdl/CardMedia.as | 80 ++++++++++++++++ .../org/apache/flex/mdl/CardSupportingText.as | 80 ++++++++++++++++ .../main/flex/org/apache/flex/mdl/CardTitle.as | 80 ++++++++++++++++ .../org/apache/flex/mdl/beads/CardEffect.as | 98 ++++++++++++++++++++ .../src/main/resources/mdl-manifest.xml | 6 ++ 10 files changed, 539 insertions(+), 15 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/examples/flexjs/MDLExample/pom.xml ---------------------------------------------------------------------- diff --git a/examples/flexjs/MDLExample/pom.xml b/examples/flexjs/MDLExample/pom.xml index 17fc28d..3a31b25 100644 --- a/examples/flexjs/MDLExample/pom.xml +++ b/examples/flexjs/MDLExample/pom.xml @@ -57,12 +57,6 @@ <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/fd759705/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 8b3ebbc..dff092f 100644 --- a/examples/flexjs/MDLExample/src/main/flex/App.mxml +++ b/examples/flexjs/MDLExample/src/main/flex/App.mxml @@ -27,6 +27,8 @@ limitations under the License. <js:SimpleCSSValuesImpl /> </js:valuesImpl> + <fx:Style source="../../main/resources/mdl-styles.css"/> + <js:initialView> <js:View> @@ -122,17 +124,33 @@ limitations under the License. </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'"> + <mdl:Card> <js:beads> - <mdl:ButtonEffect raised="true" accent="true"/> + <mdl:CardEffect shadow4dp="true"/> </js:beads> - </mdl:Button> + <mdl:CardTitle> + <js:Label text="My Card Title"/> + </mdl:CardTitle> + <mdl:CardMedia> + <js:Image url="../../../../src/main/resources/Unknown.jpeg" height="140"/> + </mdl:CardMedia> + <mdl:CardSupportingText> + <js:Label text="This text might describe the photo and provide further information, such as where and when it was taken."/> + </mdl:CardSupportingText> + <mdl:CardActions> + <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> + </mdl:CardActions> + </mdl:Card> </js:Form> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/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 3da8515..42db67d 100644 --- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css +++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css @@ -32,3 +32,10 @@ Application padding: 10px; margin: 10px; } + +Image +{ + vertical-align: top; + IBeadModel: ClassReference("org.apache.flex.html.beads.models.ImageModel"); + IBeadView: ClassReference("org.apache.flex.html.beads.ImageView"); +} \ No newline at end of file http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.as new file mode 100644 index 0000000..c8c1dd2 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Card.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The Card class is a Container component capable of parenting other + * four components (CardTitle, CardMedia, CardSupportingText and CardActions. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class Card extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function Card() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.as new file mode 100644 index 0000000..5328dc8 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardActions.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The CardActions class is a Container component capable of parenting other. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardActions extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardActions() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card__actions"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.as new file mode 100644 index 0000000..dba03b9 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardMedia.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The CardMedia class is a Container component capable of parenting other. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardMedia extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardMedia() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card__media"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.as new file mode 100644 index 0000000..19b2259 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardSupportingText.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The CardSupportingText class is a Container component capable of parenting other. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardSupportingText extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardSupportingText() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card__supporting-text"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.as new file mode 100644 index 0000000..b948ce4 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/CardTitle.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 +{ + import org.apache.flex.core.ContainerBase; + + COMPILE::JS + { + import org.apache.flex.core.WrappedHTMLElement; + } + + /** + * The CardTitle class is a Container component capable of parenting other. + * The Panel uses the following bead types: + * + * org.apache.flex.core.IBeadModel: the data model for the Card. + * org.apache.flex.core.IBeadView: creates the parts of the Card. + * + * @see PanelWithControlBar + * @see ControlBar + * @see TitleBar + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardTitle extends ContainerBase + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardTitle() + { + super(); + } + + /** + * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement + */ + COMPILE::JS + override protected function createElement():WrappedHTMLElement + { + element = document.createElement('div') as WrappedHTMLElement; + + 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 + positioner.style.position = 'relative'; + element.flexjs_wrapper = this; + + className = typeNames = "mdl-card__title"; + + return element; + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as ---------------------------------------------------------------------- diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as new file mode 100644 index 0000000..9045d91 --- /dev/null +++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/beads/CardEffect.as @@ -0,0 +1,98 @@ +//////////////////////////////////////////////////////////////////////////////// +// +// 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.Card; + + + /** + * The CardEffect class is a specialty bead that can be used with + * a MDL Card control to apply some MDL complementary effect. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public class CardEffect implements IBead + { + /** + * constructor. + * + * @langversion 3.0 + * @playerversion Flash 10.2 + * @playerversion AIR 2.6 + * @productversion FlexJS 0.0 + */ + public function CardEffect() + { + } + + private var _shadow4dp:String = ""; + /** + * A boolean flag to activate "mdl-shadow--4dp" 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 shadow4dp():Boolean + { + return _shadow4dp; + } + public function set shadow4dp(value:Boolean):void + { + if(value) { + _shadow4dp = " mdl-shadow--4dp"; + } else { + _shadow4dp = ""; + } + } + + 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 Card) { + var card:Card = value as Card; + card.className = _shadow4dp; + } else { + throw new Error("Host component must be an MDL Card."); + } + } + } + } +} http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/fd759705/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 f60da64..de6554b 100644 --- a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml +++ b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml @@ -33,5 +33,11 @@ <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"/> + <component id="Card" class="org.apache.flex.mdl.Card"/> + <component id="CardTitle" class="org.apache.flex.mdl.CardTitle"/> + <component id="CardSupportingText" class="org.apache.flex.mdl.CardSupportingText"/> + <component id="CardMedia" class="org.apache.flex.mdl.CardMedia"/> + <component id="CardActions" class="org.apache.flex.mdl.CardActions"/> + <component id="CardEffect" class="org.apache.flex.mdl.beads.CardEffect"/> </componentPackage>
