flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Piotr Zarzycki <piotrzarzyck...@gmail.com>
Subject Re: git commit: [flex-asjs] [refs/heads/develop] - MDL Table component and example initial implementation
Date Fri, 13 Jan 2017 19:43:13 GMT
Love this commit :)

On Fri, Jan 13, 2017, 20:34 <carlosrovira@apache.org> wrote:

> Repository: flex-asjs
> Updated Branches:
>   refs/heads/develop 2e52060f3 -> b0b41aefe
>
>
> MDL Table component and example initial 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/b0b41aef
> Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/b0b41aef
> Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/b0b41aef
>
> Branch: refs/heads/develop
> Commit: b0b41aefe2a419d310c010299430ba56bf87d974
> Parents: 2e52060
> Author: Carlos Rovira <carlosrovira@apache.org>
> Authored: Fri Jan 13 20:34:17 2017 +0100
> Committer: Carlos Rovira <carlosrovira@apache.org>
> Committed: Fri Jan 13 20:34:17 2017 +0100
>
> ----------------------------------------------------------------------
>  .../src/main/flex/MainNavigation.mxml           |   1 +
>  .../flexjs/MDLExample/src/main/flex/Tables.mxml |  41 ++++++
>  .../src/main/flex/models/MainNavigationModel.as |   1 +
>  .../src/main/flex/models/TablesModel.as         |  41 ++++++
>  .../MDLExample/src/main/flex/vos/MaterialVO.as  |  35 +++++
>  .../main/flex/org/apache/flex/mdl/Navigation.as |   2 +-
>  .../src/main/flex/org/apache/flex/mdl/Table.as  |  30 ++--
>  .../flex/mdl/itemRenderers/TableItemRenderer.as | 145 +++++++++++++++++++
>  .../src/main/resources/defaults.css             |  10 ++
>  .../src/main/resources/mdl-manifest.xml         |   2 +
>  10 files changed, 293 insertions(+), 15 deletions(-)
> ----------------------------------------------------------------------
>
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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 f056f18..a2414b8 100644
> --- a/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
> +++ b/examples/flexjs/MDLExample/src/main/flex/MainNavigation.mxml
> @@ -74,6 +74,7 @@ limitations under the License.
>          <local:Toggles id="toggles_panel"/>
>          <local:Snackbar id="snackbar_panel"/>
>          <local:Lists id="lists_panel"/>
> +        <local:Tables id="tables_panel"/>
>          <local:Loading id="loading_panel"/>
>          <local:Menus id="menus_panel"/>
>          <local:Badges id="badges_panel"/>
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
> ----------------------------------------------------------------------
> diff --git a/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
> b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
> new file mode 100644
> index 0000000..a5591d7
> --- /dev/null
> +++ b/examples/flexjs/MDLExample/src/main/flex/Tables.mxml
> @@ -0,0 +1,41 @@
> +<?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.
> +
> +-->
> +<mdl:TabBarPanel xmlns:fx="http://ns.adobe.com/mxml/2009"
> +                 xmlns:js="library://ns.apache.org/flexjs/basic"
> +                 xmlns:mdl="library://ns.apache.org/flexjs/mdl"
> +                 xmlns="http://www.w3.org/1999/xhtml"
> +                 xmlns:models="models.*">
> +
> +    <mdl:model>
> +        <models:TablesModel/>
> +       </mdl:model>
> +
> +    <mdl:Grid>
> +        <mdl:Table labelField="materialName" shadow="2">
> +            <mdl:beads>
> +                <js:ConstantBinding
> +                    sourceID="model"
> +                    sourcePropertyName="materials"
> +                    destinationPropertyName="dataProvider" />
> +            </mdl:beads>
> +        </mdl:Table>
> +    </mdl:Grid>
> +
> +</mdl:TabBarPanel>
> \ No newline at end of file
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
> ----------------------------------------------------------------------
> diff --git
> a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
> b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
> index 5330ae4..12fbbf3 100644
> ---
> a/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
> +++
> b/examples/flexjs/MDLExample/src/main/flex/models/MainNavigationModel.as
> @@ -63,6 +63,7 @@ package models
>              new NavigationLinkVO("Snackbar", "snackbar_panel"),
>              new NavigationLinkVO("Toggles", "toggles_panel"),
>              new NavigationLinkVO("Lists", "lists_panel"),
> +            new NavigationLinkVO("Tables", "tables_panel"),
>              new NavigationLinkVO("Loading", "loading_panel"),
>              new NavigationLinkVO("Menu", "menus_panel"),
>              new NavigationLinkVO("Badges", "badges_panel"),
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
> ----------------------------------------------------------------------
> diff --git
> a/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
> b/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
> new file mode 100644
> index 0000000..19e355e
> --- /dev/null
> +++ b/examples/flexjs/MDLExample/src/main/flex/models/TablesModel.as
> @@ -0,0 +1,41 @@
>
> +////////////////////////////////////////////////////////////////////////////////
> +//
> +//  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 models
> +{
> +       import org.apache.flex.events.EventDispatcher;
> +       import vos.*;
> +
> +       public class TablesModel extends EventDispatcher
> +       {
> +               /**
> +                * Used in the Tables example.
> +                */
> +               private var _materials:Array = [
> +                       new MaterialVO("Acrylic (Transparent)", "25",
> "$2.90"),
> +                       new MaterialVO("Plywood (Birch)", "50", "$1.25"),
> +                       new MaterialVO("Laminate (Gold on Blue)", "10",
> "$2.35")
> +               ];
> +
> +               public function get materials():Array
> +               {
> +                       return _materials;
> +               }
> +
> +       }
> +}
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
> ----------------------------------------------------------------------
> diff --git a/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
> b/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
> new file mode 100644
> index 0000000..b7dc69e
> --- /dev/null
> +++ b/examples/flexjs/MDLExample/src/main/flex/vos/MaterialVO.as
> @@ -0,0 +1,35 @@
>
> +////////////////////////////////////////////////////////////////////////////////
> +//
> +//  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 vos
> +{
> +    [Bindable]
> +       public class MaterialVO
> +       {
> +               public function MaterialVO(materialName:String = null,
> quantity:String = null, unitPrice:String = null)
> +               {
> +                       this.materialName = materialName;
> +                       this.quantity = quantity;
> +                       this.unitPrice = unitPrice;
> +               }
> +
> +               public var materialName:String = "";
> +               public var quantity:String = "";
> +               public var unitPrice:String = "";
> +       }
> +}
> \ No newline at end of file
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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
> index a638d1e..708983d 100644
> ---
> 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
> @@ -64,7 +64,7 @@ package org.apache.flex.mdl
>                         positioner = element;
>              element.flexjs_wrapper = this;
>
> -            return positioner;
> +            return element;
>          }
>         }
>  }
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
> b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
> index 0ac0377..b23b834 100644
> ---
> a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
> +++
> b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/Table.as
> @@ -18,7 +18,7 @@
>
>  ////////////////////////////////////////////////////////////////////////////////
>  package org.apache.flex.mdl
>  {
> -       import org.apache.flex.core.ContainerBase;
> +       import org.apache.flex.mdl.List;
>
>      COMPILE::JS
>      {
> @@ -41,7 +41,7 @@ package org.apache.flex.mdl
>          *  @playerversion AIR 2.6
>          *  @productversion FlexJS 0.0
>          */
> -       public class Table extends ContainerBase
> +       public class Table extends List
>         {
>                 /**
>                  *  constructor.
> @@ -67,14 +67,8 @@ package org.apache.flex.mdl
>                         typeNames = "mdl-data-table mdl-js-data-table";
>
>              element = document.createElement('table') 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;
> @@ -96,15 +90,20 @@ package org.apache.flex.mdl
>          }
>          public function set shadow(value:Number):void
>          {
> -                       if(value == 0 || value == 2 || value == 3 || value
> == 4 || value == 6 || value == 8 || value == 16)
> +                       COMPILE::JS
>                         {
> -                               _shadow = value;
> +                               element.classList.remove("mdl-shadow--" +
> _shadow + "dp");
> +
> +                               if(value == 2 || value == 3 || value == 4
> || value == 6 || value == 8 || value == 16)
> +                               {
> +                                       _shadow = value;
>
> -                               className += (_shadow != 0 ? "
> mdl-shadow--" + _shadow + "dp" : "");
> -                       }
> +
>  element.classList.add("mdl-shadow--" + _shadow + "dp");
> +                               }
> +                       }
>          }
>
> -               protected var _selectable:Boolean;
> +               protected var _selectable:Boolean = false;
>          /**
>                  *  A boolean flag to activate
> "mdl-data-table--selectable" effect selector.
>                  *  Applies all/individual selectable behavior (checkboxes)
> @@ -123,7 +122,10 @@ package org.apache.flex.mdl
>          {
>                         _selectable = value;
>
> -
>  element.classList.toggle("mdl-data-table--selectable", _selectable);
> +                       COMPILE::JS
> +            {
> +
>  element.classList.toggle("mdl-data-table--selectable", _selectable);
> +                       }
>          }
>         }
>  }
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
> ----------------------------------------------------------------------
> diff --git
> a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
> b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
> new file mode 100644
> index 0000000..c5ae510
> --- /dev/null
> +++
> b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/itemRenderers/TableItemRenderer.as
> @@ -0,0 +1,145 @@
>
> +////////////////////////////////////////////////////////////////////////////////
> +//
> +//  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.itemRenderers
> +{
> +    COMPILE::JS
> +    {
> +        import org.apache.flex.core.WrappedHTMLElement;
> +    }
> +
> +       import org.apache.flex.html.supportClasses.MXMLItemRenderer;
> +
> +       /**
> +        *  The TableItemRenderer defines the basic Item Renderer for a
> MDL Table Component.
> +        *
> +        *  @langversion 3.0
> +        *  @playerversion Flash 10.2
> +        *  @playerversion AIR 2.6
> +        *  @productversion FlexJS 0.0
> +        */
> +       public class TableItemRenderer extends MXMLItemRenderer
> +       {
> +               /**
> +                *  constructor.
> +                *
> +                *  @langversion 3.0
> +                *  @playerversion Flash 10.2
> +                *  @playerversion AIR 2.6
> +                *  @productversion FlexJS 0.0
> +                */
> +               public function TableItemRenderer()
> +               {
> +                       super();
> +
> +            className = ""; //set to empty string avoid 'undefined'
> output when no class selector is assigned by user;
> +               }
> +
> +               private var _text:String = "";
> +
> +        /**
> +         *  The text of the heading
> +         *
> +         *  @langversion 3.0
> +         *  @playerversion Flash 10.2
> +         *  @playerversion AIR 2.6
> +         *  @productversion FlexJS 0.0
> +         */
> +               public function get text():String
> +               {
> +            return _text;
> +               }
> +
> +               public function set text(value:String):void
> +               {
> +             _text = value;
> +               }
> +
> +               COMPILE::JS
> +        private var textNode:Text;
> +
> +               /**
> +                *  Sets the data value and uses the String version of the
> data for display.
> +                *
> +                *  @param Object data The object being displayed by the
> itemRenderer instance.
> +                *
> +                *  @langversion 3.0
> +                *  @playerversion Flash 10.2
> +                *  @playerversion AIR 2.6
> +                *  @productversion FlexJS 0.0
> +                */
> +               override public function set data(value:Object):void
> +               {
> +                       super.data = value;
> +
> +            var text:String;
> +                       if (labelField || dataField) {
> +                text = String(value[labelField]);
> +            } else {
> +                text = String(value);
> +            }
> +
> +                       COMPILE::JS
> +                       {
> +                               if(textNode != null)
> +                               {
> +                                       textNode.nodeValue = text;
> +                               }
> +                       }
> +               }
> +
> +        /**
> +         * @flexjsignorecoercion org.apache.flex.core.WrappedHTMLElement
> +         */
> +        COMPILE::JS
> +        override protected function createElement():WrappedHTMLElement
> +        {
> +            element = document.createElement('td') as WrappedHTMLElement;
> +
> +                       if(MXMLDescriptor == null)
> +                       {
> +                               textNode = document.createTextNode('') as
> Text;
> +                               element.appendChild(textNode);
> +                       }
> +
> +            positioner = element;
> +            element.flexjs_wrapper = this;
> +
> +            return element;
> +        }
> +
> +               private var _nonNumeric:Boolean;
> +        /**
> +         * Activate "mdl-data-table__cell--non-numeric" class selector,
> for use in table td item.
> +                * Optional
> +         */
> +        public function get nonNumeric():Boolean
> +        {
> +            return _nonNumeric;
> +        }
> +        public function set nonNumeric(value:Boolean):void
> +        {
> +            _nonNumeric = value;
> +
> +            COMPILE::JS
> +            {
> +
> element.classList.toggle("mdl-data-table__cell--non-numeric", _nonNumeric);
> +            }
> +        }
> +       }
> +}
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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 9f2dbd6..566875e 100644
> ---
> a/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
> +++
> b/frameworks/projects/MaterialDesignLite/src/main/resources/defaults.css
> @@ -56,6 +56,16 @@ List
>      IItemRenderer:
> ClassReference("org.apache.flex.mdl.itemRenderers.ListItemRenderer");
>  }
>
> +Table
> +{
> +    IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView");
> +    IBeadModel:
> ClassReference("org.apache.flex.html.beads.models.ArraySelectionModel");
> +    IBeadLayout: ClassReference(null);
> /*"org.apache.flex.html.beads.layouts.VerticalLayout"*/
> +    IDataProviderItemRendererMapper:
> ClassReference("org.apache.flex.html.beads.DataItemRendererFactoryForArrayData");
> +    IItemRendererClassFactory:
> ClassReference("org.apache.flex.core.ItemRendererClassFactory");
> +    IItemRenderer:
> ClassReference("org.apache.flex.mdl.itemRenderers.TableItemRenderer");
> +}
> +
>  Navigation
>  {
>      IBeadView: ClassReference("org.apache.flex.mdl.beads.views.ListView");
>
>
> http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/b0b41aef/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 1b8b2a0..b4d2c9a 100644
> ---
> a/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
> +++
> b/frameworks/projects/MaterialDesignLite/src/main/resources/mdl-manifest.xml
> @@ -56,6 +56,8 @@
>      <component id="ListItemSubTitle"
> class="org.apache.flex.mdl.beads.ListItemSubTitle"/>
>      <component id="ListItemSecondaryInfo"
> class="org.apache.flex.mdl.beads.ListItemSecondaryInfo"/>
>      <component id="ListItemTextBody"
> class="org.apache.flex.mdl.beads.ListItemTextBody"/>
> +    <component id="Table" class="org.apache.flex.mdl.Table"/>
> +    <component id="TableItemRenderer"
> class="org.apache.flex.mdl.itemRenderers.TableItemRenderer"/>
>      <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"/>
>
>

Mime
View raw message