You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ca...@apache.org on 2016/12/10 17:04:46 UTC
git commit: [flex-asjs] [refs/heads/develop] - New List example with
secondary actions
Repository: flex-asjs
Updated Branches:
refs/heads/develop aec80ceb8 -> f8aa55e89
New List example with secondary actions
Project: http://git-wip-us.apache.org/repos/asf/flex-asjs/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-asjs/commit/f8aa55e8
Tree: http://git-wip-us.apache.org/repos/asf/flex-asjs/tree/f8aa55e8
Diff: http://git-wip-us.apache.org/repos/asf/flex-asjs/diff/f8aa55e8
Branch: refs/heads/develop
Commit: f8aa55e8908ef7a1b64d0a1e02a49e33bcf8718a
Parents: aec80ce
Author: Carlos Rovira <ca...@apache.org>
Authored: Sat Dec 10 18:04:41 2016 +0100
Committer: Carlos Rovira <ca...@apache.org>
Committed: Sat Dec 10 18:04:41 2016 +0100
----------------------------------------------------------------------
.../flexjs/MDLExample/src/main/flex/Lists.mxml | 10 ++++
.../AvatarAndActionListItemRenderer.mxml | 56 ++++++++++++++++++++
.../src/main/resources/mdl-styles.css | 5 ++
.../flex/mdl/supportClasses/MaterialIconBase.as | 19 +++++++
4 files changed, 90 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
index 38ef48d..36a8bcf 100644
--- a/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
+++ b/examples/flexjs/MDLExample/src/main/flex/Lists.mxml
@@ -55,6 +55,16 @@ limitations under the License.
</mdl:beads>
</mdl:List>
+ <mdl:List labelField="actorName" className="avatarAndActionListItemRenderer">
+ <mdl:beads>
+ <js:ConstantBinding
+ sourceID="model"
+ sourcePropertyName="actors"
+ destinationPropertyName="dataProvider" />
+ </mdl:beads>
+ </mdl:List>
+
+
</mdl:Grid>
<!--
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml
new file mode 100644
index 0000000..40b8163
--- /dev/null
+++ b/examples/flexjs/MDLExample/src/main/flex/itemRenderers/AvatarAndActionListItemRenderer.mxml
@@ -0,0 +1,56 @@
+<?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:ListItemRenderer 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">
+
+ <fx:Script>
+ <![CDATA[
+ import vos.ActorVO;
+
+ [Bindable("dataChange")]
+ public function get actor():ActorVO
+ {
+ return data as ActorVO;
+ }
+ ]]>
+ </fx:Script>
+
+ <js:beads>
+ <js:ItemRendererDataBinding />
+ </js:beads>
+
+ <js:Span text="{actor.actorName}">
+ <mdl:beads>
+ <mdl:ListItemPrimaryContent/>
+ <mdl:MaterialIconPerson listItemAvatar="true"/>
+ </mdl:beads>
+ </js:Span>
+ <js:A href="#">
+ <mdl:beads>
+ <mdl:ListItemSecondaryAction/>
+ <mdl:MaterialIconStar/>
+ </mdl:beads>
+ </js:A>
+
+
+</mdl:ListItemRenderer>
+
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/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 6730c58..67716a0 100644
--- a/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
+++ b/examples/flexjs/MDLExample/src/main/resources/mdl-styles.css
@@ -51,6 +51,11 @@ js|Image
IItemRenderer: ClassReference("itemRenderers.ActorNameAndIconListItemRenderer");
}
+.avatarAndActionListItemRenderer
+{
+ IItemRenderer: ClassReference("itemRenderers.AvatarAndActionListItemRenderer");
+}
+
/*.customListItemRenderer
{
IItemRenderer: ClassReference("itemRenderers.CustomListItemRenderer");
http://git-wip-us.apache.org/repos/asf/flex-asjs/blob/f8aa55e8/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
index bfb218c..fd80bcf 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/flex/org/apache/flex/mdl/supportClasses/MaterialIconBase.as
@@ -94,5 +94,24 @@ package org.apache.flex.mdl.supportClasses
element.classList.toggle("mdl-list__item-icon", _listItemIcon);
}
}
+
+ private var _listItemAvatar:Boolean;
+ /**
+ * Activate "mdl-list__item-avatar" class selector, for use in list item
+ */
+ public function get listItemAvatar():Boolean
+ {
+ return _listItemAvatar;
+ }
+ public function set listItemAvatar(value:Boolean):void
+ {
+ _listItemAvatar = value;
+
+ COMPILE::JS
+ {
+ element.classList.toggle("mdl-list__item-avatar", _listItemAvatar);
+ }
+ }
+
}
}