Disable Spark List selection indicator
How do I get rid of the Spark List selection indicator entirely? I don't want the rectangular indicator when the mouse hovers over an item, and I don't want the color to change when the mouse is clicked.
You'll have to extend default item renderer (ItemRenderer for instance) and set autoDrawBackground to false. And then use your item renderer in a list.
See this document for more information on spark item renderers.
Similar Messages
-
I have a tile list layout with some thumbnails.
When one is selected it gets a default blueish background.
Could someone explain how i would go about putting a nice green tick over a thumbnail once its selected?Thank you both for your replies.
I'm already using a custom component that extends a spark List with layout property set to TileLayout. This is so i can mimick the user holding the CTRL key for multiple selection.
I also already have a custom item renderer that displays the thumbnail and fires off an event when clicked.
Really confused as where to put either of your code snippets.
this is my custom component
package
import flash.events.MouseEvent;
import mx.core.IVisualElement;
import spark.components.List;
public class CheckList extends List
public function CheckList()
super();
allowMultipleSelection = true;
* Override the mouseDown handler to act as though the Ctrl key is always down
override protected function item_mouseDownHandler(event:MouseEvent):void
var newIndex:Number = dataGroup.getElementIndex(event.currentTarget as IVisualElement);
// always assume the Ctrl key is pressed by setting the third parameter of
// calculateSelectedIndices() to true
selectedIndices = calculateSelectedIndices(newIndex, event.shiftKey, true);
and this is my item renderer
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="300" height="315" click="thumb_clickHandler(event)">
<mx:Image id="thumb" x="25" y="26" width="250" height="265" source="{data.thumburl}"/>
<fx:Script>
<![CDATA[
import flashx.textLayout.factory.TruncationOptions;
import mx.controls.Alert;
import mx.events.ItemClickEvent;
protected function thumb_clickHandler(event:MouseEvent):void
var ev:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
ev.item = data;
ev.index = itemIndex;
//Alert.show(ev.item.imageurl);
dispatchEvent(ev);
]]>
</fx:Script>
</s:ItemRenderer>
Any help you can give me would be great, the code is getting really messy, should i merge these into one class? -
How do i set spark list selected item's color??
hey guys... so got a little problem... i have a spark list which gets populated from a array collection that looks likda like this
[0] = "name1"
[1] = "name 2"
[2] = "name 3"
when i click on say "name 1" i need the color of "name 1" to change to say red...
and when i click on another item i need that color to stay... red on "name 1"...
oh and... i need to do the color change in actionscript rather than the mxml file...
any ideas???Hi,
I'm not sure if this is exactly what you are looking for. What I did was created an itemRender for the list and assigned it like so
<s:List dataProvider="{ listDataProvider}" itemRenderer="listItemRenderer"/>
And the listItemRenderer will look some
//Code Begins
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
focusEnabled="true" >
<fx:Script>
<![CDATA[
var clicked:Boolean=true;
protected function clickHandler(event:MouseEvent):void
clicked?labelRender.setStyle("color","0x00FF00"):labelRender.setStyle("color","0xFF0000") ;
clicked=!clicked;
]]>
</fx:Script>
<s:Label id="labelRender" text="{data}" color="0xFF0000" click="clickHandler(event)"/>
</s:ItemRenderer>
//Code Ends
In the above example the colour toggles on each click. So, you can apply anything. assume you have a property called color in your array collection, you can access it as data.color and then set the text to that color when it is clicked. I hope this helps. Do write back if you have any issues.
Nishad -
Hi!
Is there any way to disable the default "bounce effect" when at the end of the list?
Thanks for help!You'll have to extend default item renderer (ItemRenderer for instance) and set autoDrawBackground to false. And then use your item renderer in a list.
See this document for more information on spark item renderers. -
How to access spark list selected items
selected items is some sort of vector? I can't access the items in it, can anyone shed some light on how to acess them? Maybe print them to the screen?
I too am dragging through the documentation with a fine toothed comb and am at a loss of how to get something as simple (and intiutive) as myList.items.
Maybe I'm overthinking it, but if I have a custom item renderer with a checkbox in it and when the user clicks the checkbox and it's selected state changes, I'd like to let the List that contains the List Item know of it... not that the item was messed with, but more to the point, that the checkbox was messed with and which item it was a member of...
Right now I can't even figure out how to do something as rediculously simple as creating a creationComplete handler that iterates through the list items and calls a function in them to set a reference to itself that the list item can reference. -
Can you disable the spark list component?
i need to disable the spark list in my application when the user clicks on new story... is that possible?
Set the Boolean enabled property to false.
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:controlBarContent>
<s:CheckBox id="ch" label="enabled" selected="true" />
</s:controlBarContent>
<s:List id="lst" enabled="{ch.selected}" horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight]" />
</s:dataProvider>
</s:List>
</s:Application>
Peter -
How to handle multiple selection in the Spark List control with checkbox as itemrenderer?
Hi All,
I am using checkbox as an ItemRenderer in spark list.
I have a query.
how to handle multiple selection in the Spark List control with checkbox as itemrenderer?
how to retrieve the selected item label?
Thank you in advance.Hi there, I'll tweak your code a little bit to something like this:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.CheckBox;
[Bindable]
private var mySelectedIndexes:ArrayCollection=new ArrayCollection();
private function onChange(e:ListEvent):void
if(CheckBox(e.itemRenderer).selected){
mySelectedIndexes.addItem(e.rowIndex);
}else{
mySelectedIndexes.removeItemAt(mySelectedIndexes.getItemIndex(e.rowIndex));
chkList.selectedIndices=mySelectedIndexes.toArray();
]]>
</mx:Script>
<mx:ArrayCollection id="collection">
<mx:Object label="Test A"/>
<mx:Object label="Test B"/>
<mx:Object label="Test C"/>
<mx:Object label="Test D"/>
<mx:Object label="Test E"/>
<mx:Object label="Test F"/>
<mx:Object label="Test G"/>
</mx:ArrayCollection>
<mx:List id="chkList" dataProvider="{collection}" itemRenderer="mx.controls.CheckBox" itemClick="onChange(event);" allowMultipleSelection="true"/>
</mx:Application> -
Spark.List Control: right order in selectedItems
Hi there,
How can I get the right order from the selectedItemsArray?
The docs say:
"These Vectors contain a list of the selected indices and selected data items in the reverse order in which they were selected. That means the first element in each Vector corresponds to the last item selected."
But this is not correct. If you have a look in the example "Handling multiple selection in the Spark List control" at the end of
http://help.adobe.com/en_US/flex/using/WSc2368ca491e3ff923c946c5112135c8ee9e-7fff.html
you will see, that the order is switching around at every click you make to select an Item in the list.
Indeed the last selected item is the first item in the array, but the order of the other items is not forseeable...
My Problem:
I'm using a list control as an itemeditor in a datagrid. (BTW: Is there a way to use dropshadow on the control?)
The selectedItems are written to Database as a string in form of "firstselection : secondSelection : thirdSelection".
I also already tried to push the last selectedItem in an array on every change event and join this to a string at focusOut.
But that seems to be to late, because the datagridColums editorDataFiled doesn't take the the new values.
Maybe there are other events , which would be better to use?
Besides how to handle the prevoiuos selectedItems, which comes already from the db. The best would be, if they are already in the right order at the beginning of that array respectivelythe string. "prevSelectedItem1 : prevSelectedItem2 : newSelectedItem1 ..."
Another solution would be to have at least the first selectedItem to be the first Item in the string to be written to the db whether is already selected at the editbeginnig or complete new selections are made.
I hope its understandable, because I'm from Germany
Every help is welcome!
Thanks, Kalle!
<mx:DataGridColumn headerText="Fliesenart" dataField="prd_art" resizable="false" width="300" editorDataField="artLiSelected" >
<mx:itemEditor >
<fx:Component>
<s:MXDataGridItemRenderer height="22" >
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
[Bindable]
public var artLiSelected:String;
[Bindable]
public var artTempArr:Array = new Array();
public var artNewTempArr:Array = new Array();
protected function artLi_creationCompleteHandler(artStr:String):void
artLiSelected = artStr;
artTempArr = artStr.split(" : ");
var artTempVec:Vector.<Object> = new Vector.<Object>();
for each (var art:Object in artTempArr) {
artTempVec.push(art);
artLi.selectedItems = artTempVec;
protected function dataCollector():void {
artNewTempArr.push(artLi.selectedItems[0]);
//artLiSelected = artLi.selectedItems.join(" : ");
trace ("change");
protected function dataSubmitter ():void {
artLiSelected = artNewTempArr.join(" : ");
trace ("focusOut");
]]></fx:Script>
<s:List id="artLi" height="300" top="5" left="5" right="5"
dataProvider="{outerDocument.artNamesArr}"
change="dataCollector()"
focusOut="dataSubmitter()"
requireSelection="true"
creationComplete="artLi_creationCompleteHandler(data.prd_art)"
allowMultipleSelection="true"
/>
</s:MXDataGridItemRenderer>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>Create your own list which must extend from spark.List and then override the function calculateSelectedIndices.
Then you can do 2 things depending on how you want the order in the selectedItems:
1. Change all the interval.splice to interval.push (now you have the normal order)
2. Change the "for (i = 0; i < selectedIndices.length; i++)" to "for (i = selectedIndices.length -1; i > -1; i--)" (then you have a reversed order) -
Need help with navigation within a spark list...
hey guys, so in my application when you click on a list item, it opens up an image, and along with the image a few buttons are created dynamically...
the image and the url/labels for the dynamic buttons is provided through an xml/xmlListCollection.
what i need help with is the url or more specifically when you click on one of these dynamic buttons it needs to navigate me to another part of an list or display a certain set of images that is not in my spark list...
please let me know if this makes no sence
the code i have is
<code>
[Bindable] private var menuXml:XML;
[Bindable] private var imgList:XMLListCollection = new XMLListCollection();
[Bindable] private var navControl:XMLListCollection = new XMLListCollection();
[Bindable] private var fullList:XMLListCollection = new XMLListCollection();
private var returnedXml:XMLListCollection = new XMLListCollection();
private var myXmlSource:XML = new XML();
//[Bindable] private var xmlReturn:Object;
private var currImage:int = 0;
//public var userOpProv:XMLListCollection = new XMLListCollection();
//private var troubleShootProvider:XMLListCollection = new XMLListCollection();
private function myXml_resultHandeler(event:ResultEvent):void{
userOptionProvider.source = event.result.apx32.userOptions.children();
troubleShootProvider.source = event.result.apx32.troubleShooting.children();
fullList.source = event.result.apx32.children();
returnedXml.source = event.result[0].children();
myXmlSource = event.result[0];
private function myXml_faultHandler(event:FaultEvent):void{
Alert.show("Error loading XML");
Alert.show(event.fault.message);
private function app_creationComplete(event:FlexEvent):void{
userOptions.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml.send();
//trouble.scroller.setStyle("horizontalScrollPolicy", ScrollPolicy.OFF);
myXml = new HTTPService();
myXml.url = "modules/apx32/apx32TroubleshootingXml.xml";
myXml.resultFormat = "e4x";
myXml.addEventListener(ResultEvent.RESULT, myXml_resultHandeler);
myXml.addEventListener(FaultEvent.FAULT, myXml_faultHandler);
myXml.send();
private function troubleShootChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = troubleShootProvider[event.newIndex].children();
currImage = 0;
imgList.source = troubleShootProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
//var isMultiPage:String = navControl[2]["multiPages"];
//trace(isMultiPage);
// if(isMultiPage){
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function customButtonPressed(event:Event):void{
if(imgList[currImage].button.@changeTo != ""){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
private function nextClickHandler(event:MouseEvent):void{
currImage += 1;
dynamicButtons.removeAllElements();
if(currImage >= imgList.length-1){
currImage = imgList.length - 1;
//next.visible = false;
next.label = "YOU'RE DONE";
else
next.label = navControl[2]["next"];
back.visible = true;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
private function backClickHandler(event:MouseEvent):void{
currImage -= 1;
dynamicButtons.removeAllElements();
if(currImage == 0){
back.visible = false;
next.visible = true;
next.label = navControl[2]["next"];
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:LinkButton = new LinkButton();
newButton.label = item.@name;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
dynamicButtons.addElement(newButton);
definition.source = imgList[currImage].@url;
</code>
i have attached a copy of the xml that i have right now to this post for reference...
any help will be greatly appretiated!!! i've been stuck on this problem for the last week and my project is due soon
again thank you in advance...hey david... just nevermind my previous post... I was able to subclass a link button, so i now have two variables that get assigned to a link button,
one is "tabId" <-- contains the information on which tab to swtich to, and the second is, "changeTo"... this contans the label name which it needs to switch to
I'm just stuck on how to change my selected item in my tabNavigator/list
the code i have right now is
private function customButtonPressed(event:Event):void{
if(event.currentTarget.tabId == "troubleShooting"){
for each(var item:Object in troubleShootProvider){
if(item.@label == event.currentTarget.changeTo){
private function userOptionsChange(event:IndexChangeEvent):void{
dynamicButtons.removeAllElements();
navControl.source = userOptionProvider[event.newIndex].children();
currImage = 0;
imgList.source = userOptionProvider[event.newIndex].images.children();
definition.source = imgList[currImage].@url;
if(imgList[currImage].@details == "true"){
if(imgList[currImage].buttons.@hasButtons == "true"){
for each(var item:XML in imgList[currImage].buttons.children()){
var newButton:customLinkButton = new customLinkButton();
newButton.label = item.@name;
newButton.tabId = item.@tab;
newButton.changeTo = item.@changeTo;
newButton.x = item.@posX;
newButton.y = item.@posY;
newButton.setStyle("skin", null);
newButton.styleName = "dynamicButtonStyle";
newButton.addEventListener(MouseEvent.MOUSE_DOWN, customButtonPressed);
dynamicButtons.addElement(newButton);
var isMultiPage:String = navControl[2]["multiPages"];
var videoPresent:String = navControl[1]["videoPresent"];
if(videoPresent == "true"){
if(isMultiPage != "true"){
navContainer.x = 825;
if(isMultiPage == "true"){
if(navControl[2]["next"] == "NEXT STEP"){
navContainer.x = 630;
else{
navContainer.x = 640;
next.label = navControl[2]["next"];
back.label = navControl[2]["back"];
if(currImage >= imgList.length - 1){
next.visible = false;
back.visible = false;
else{
back.visible = false;
next.visible = true;
as you know, my xml gets divided into two saperate xmllistcollections one is the userOptionProvider, and the troubleshootingProvider
as is in the following xml
<mx:TabNavigator id="tabNav" width="275" tabStyleName="tabStyle" fontWeight="bold" height="400" paddingTop="0"
tabWidth="137.5" creationPolicy="all" borderVisible="false">
<mx:VBox label="USER OPTIONS" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<s:List id="userOptions" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderVisible="false" contentBackgroundColor="#e9e9e9"
change="userOptionsChange(event)">
<s:dataProvider>
<s:XMLListCollection id="userOptionProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
<mx:VBox label="TROUBLESHOOTING">
<s:List id="trouble" width="100%" height="100%" itemRenderer="modules.apx32.myComponents.listRenderer"
borderAlpha="0" borderVisible="false" contentBackgroundColor="#e9e9e9"
change="troubleShootChange(event)">
<s:dataProvider>
<s:XMLListCollection id="troubleShootProvider" />
</s:dataProvider>
</s:List>
</mx:VBox>
</mx:TabNavigator>
Im having some trouble updating my list... basically change to the troubleshooting tab, and then select the one that i need...
hopefully that makes sence... -
Return data from spark list itemrenderer
Does anybody no how to return data from the itemrender for a spark list. say i had a checkbx in my itemrenderer how can I get that info back to my main component if its selected or not. I looked at datagrid and itemeditor but I really rather use a spark list. Thanks
thanks I also found another way to doing it. A click handler on my list when that fires I can check if checkbx has been selected by doing event.target.document.mycheckBx.selected this will not work if using currentTarget cause it take the info from the itemRenderer. Now I understand the difference between currentTarget and target.
not sure if this is a better way to access the data I think I might still just dispatch a event and do it your way.
Its weird that mx:list has a editItemRenderer and s:list does not
thanks again TK -
Wrap long lines in a Spark List component?
I have a Spark List.
The text for each entry is on one line, and is too long to fit.
Can I get it to break to as many lines as needed without a custom item renderer?If you define an explicit width on the SimpleText in the DefaultItemRenderer you can get this behavior.
Here is an example of this using an inline ItemRenderer:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:List width="50" height="200">
<s:ArrayList>
<fx:String>a</fx:String>
<fx:String>b</fx:String>
<fx:String>c c c c c c c c c c c c</fx:String>
<fx:String>d</fx:String>
<fx:String>e</fx:String>
</s:ArrayList>
<!-- here we define a custom item renderer inline (copied and modified from DefaultItemRenderer.mxml) -->
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer focusEnabled="false">
<fx:Script>
<![CDATA[
override public function set label(value:String):void
super.label = value;
labelDisplay.text = label;
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="normalAndShowsCaret"/>
<s:State name="hoveredAndShowsCaret"/>
<s:State name="selectedAndShowsCaret"/>
</s:states>
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke.normalAndShowsCaret>
<s:SolidColorStroke
color="{selectionColor}"
weight="1"/>
</s:stroke.normalAndShowsCaret>
<s:stroke.hoveredAndShowsCaret>
<s:SolidColorStroke
color="{selectionColor}"
weight="1"/>
</s:stroke.hoveredAndShowsCaret>
<s:stroke.selectedAndShowsCaret>
<s:SolidColorStroke
color="{selectionColor}"
weight="1"/>
</s:stroke.selectedAndShowsCaret>
<s:fill>
<s:SolidColor
color.normal="{contentBackgroundColor}"
color.normalAndShowsCaret="{contentBackgroundColor}"
color.hovered="{rollOverColor}"
color.hoveredAndShowsCaret="{rollOverColor}"
color.selected="{selectionColor}"
color.selectedAndShowsCaret="{selectionColor}"
/>
</s:fill>
</s:Rect>
<!-- the only real change is to set a specific size on the SimpleText slightly smaller
than the width of the List to account for the border -->
<s:SimpleText id="labelDisplay" verticalCenter="0" width="48" top="6" bottom="4"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application> -
Replace horizontal scroll in a spark list?
I've gotten myself confused...
1. I create a new component based on Spark List, "MyList.mxml"
2. I open it, and in design view I say "create copy of skin"
3. I open ListSkin1.mxml.
I want to replace the scroll bar with a custom skinned one. I am not sure where to do this...
1. I create a new component based on HScrollBar "MyScrollbar.mxml"
Now what? Where so I specify in the List component -- or its skin -- do I specify the new scroll bar?OK, this is a little crude, but seems to work (and was a lot less complex than I initially thought). My main app looks like this:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
s|List s|Scroller {
horizontalScrollPolicy: on;
verticalScrollPolicy: on;
s|List s|HScrollBar {
skinClass: ClassReference("TrackThumbOnlyHSBSkin");
</fx:Style>
<s:List id="list" width="100" height="100" horizontalCenter="0" verticalCenter="0">
<s:dataProvider>
<s:ArrayList>
<fx:Object label="The quick brown fox jumps over the lazy dog" />
<fx:Object label="One" />
<fx:Object label="Two" />
<fx:Object label="Three" />
<fx:Object label="Four" />
<fx:Object label="Five" />
<fx:Object label="Six" />
<fx:Object label="Seven" />
<fx:Object label="Eight" />
<fx:Object label="Nine" />
</s:ArrayList>
</s:dataProvider>
</s:List>
</s:Application>
And my custom HScrollBar skin, TrackThumbOnlyHSBSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
minWidth="35" minHeight="15"
alpha.disabled="0.5" alpha.inactive="0.5">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
<fx:Metadata>
<![CDATA[
[HostComponent("spark.components.HScrollBar")]
]]>
</fx:Metadata>
<fx:Script fb:purpose="styling">
<![CDATA[
/* Define the skin elements that should not be colorized.
For scroll bar, the skin itself is colorized but the individual parts are not. */
static private const exclusions:Array = ["track", "thumb"];
override public function get colorizeExclusions():Array {
return exclusions;
override protected function initializationComplete():void {
useBaseColor = true;
super.initializationComplete();
]]>
</fx:Script>
<!--- Defines the skin class for the HScrollBarSkin's track. The default skin class is HScrollBarTrackSkin. -->
<s:Button id="track" left="0" right="0" width="54"
focusEnabled="false"
skinClass="spark.skins.spark.HScrollBarTrackSkin"
baseColor="haloGreen"/>
<!--- Defines the skin class for the HScrollBarSkin's thumb. The default skin class is HScrollBarThumbSkin. -->
<s:Button id="thumb"
focusEnabled="false" visible.inactive="false"
skinClass="spark.skins.spark.HScrollBarThumbSkin"
baseColor="haloBlue"/>
</s:SparkSkin>
So I was wrong. I didnt need a custom List skin, or Scroller skin... just the one custom HScrollBar skin (and presumably a custom VScrollBar skin -- and possibly more skins depending on how custom you want the scrollbar left/right top/bottom buttons and/or thumb/track skins).
Peter -
I have a spark list with custom itemRenderers and I have a filter on the list. I run the filter, but at random times the filter doesn't work. I threw in some trace statements and its passing the filter but the screen doesn't show the filters results. It only shows the results of the last filter. I think it has to do with the spark lists itemRenderer resuse.
Is this a known bug?The bug is in TileLayout.
If I remove the the TileLayout the list functions as aspected. Here is a simple example. Make sure when running the app to follow these instructions.
1. Run the app (notice the list shows all the items in it)
2. Click "K"
3. Click "All"
4. Look at the Bottom list to see if only two items show even when "ALL" is selected.
5.Repeat steps 2-4 until you see the bug.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/12/scrolling-to-a-specific-index-in-a-spark-list-cont rol-in-flex-4/ -->
<s:Application name="Spark_List_ensureIndexIsVisible_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var array:Array = ['one', 'otwo', 'othree', 'ofour', 'ofive', 'osix', 'oseven', 'oeight', 'nine', 'nten'];
private var myAC:ArrayCollection = new ArrayCollection( array );
private function setAlphaFilter() : void {
if( myAC ) {
myAC.filterFunction = alphaFilter;
myAC.refresh();
private function alphaFilter( item:Object ) : Boolean {
var tempStr:String;
if( String(alphaList.selectedItem.firstName).toLowerCase() == 'all' ) {
return true;
if( item.toLowerCase().charAt(0) == String(alphaList.selectedItem.firstName).toLowerCase() ) { // if something a letter is selected.
return true;
return false;
]]>
</fx:Script>
<s:List id="alphaList" changing="setAlphaFilter()"
width="100%" top="2" bottom="2" left="2" right="2" borderColor="#7F7F7F" >
<s:layout>
<s:HorizontalLayout columnWidth="20" paddingLeft="1" />
</s:layout>
<!-- itemRenderer is inline in this sample -->
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Group top="1">
<s:Label id="blah" text="{data.firstName}" fontSize="13" bottom="1" top="1" right="1" left="1" />
</s:Group>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
<s:dataProvider>
<s:ArrayList>
<fx:Object firstName="All" />
<fx:Object firstName="A" />
<fx:Object firstName="B" />
<fx:Object firstName="C" />
<fx:Object firstName="D" />
<fx:Object firstName="E" />
<fx:Object firstName="F" />
<fx:Object firstName="G" />
<fx:Object firstName="H" />
<fx:Object firstName="I" />
<fx:Object firstName="J" />
<fx:Object firstName="K" />
<fx:Object firstName="L" />
<fx:Object firstName="M" />
<fx:Object firstName="N" />
<fx:Object firstName="O" />
<fx:Object firstName="P" />
<fx:Object firstName="Q" />
<fx:Object firstName="R" />
<fx:Object firstName="S" />
<fx:Object firstName="T" />
<fx:Object firstName="U" />
<fx:Object firstName="V" />
<fx:Object firstName="W" />
<fx:Object firstName="X" />
<fx:Object firstName="Y" />
<fx:Object firstName="Z" />
<fx:Object firstName="1" />
<fx:Object firstName="2" />
<fx:Object firstName="3" />
<fx:Object firstName="4" />
<fx:Object firstName="5" />
<fx:Object firstName="6" />
<fx:Object firstName="7" />
<fx:Object firstName="8" />
<fx:Object firstName="9" />
</s:ArrayList>
</s:dataProvider>
</s:List>
<s:List id="list" width="630" height="100"
horizontalCenter="0" verticalCenter="0" dataProvider="{myAC}" useVirtualLayout="true" allowMultipleSelection="true">
<s:layout>
<s:TileLayout columnWidth="300" rowHeight="50" verticalGap="1" horizontalGap="1"
requestedColumnCount="2" />
</s:layout>
</s:List>
</s:Application> -
Custom dragIndicator on Spark List Control
I have a Spark List Control that is displaying a tilelayout of dynamically imported Images. Basically, a bunch of thumbnail Images that are displayed in a tile layout. I have drag drop enabled so that I can reorder these thumbnails and everything is working great except for one thing, the dragIndicator. In my itemrenderer, I have the Image included in the "dragging" state, but the image is not showing in the dragIndicator. I am basically just getting a semi-transparent square as my dragIndicator, but I want to be able to actually drag my thumbnail. Any ideas how to do this?
Here is my List:
<s:List id="ImageList1" x="77" y="95" width="858" height="412" dataProvider="{imageAC}"
itemRenderer="renderers.ImageACSmallItemRenderer" contentBackgroundColor="0x000000"
borderVisible="false" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"
allowMultipleSelection="true" skinClass="skins.General.ListSkin" focusAlpha="0" mouseMove="getImageProxy(event)">
<s:layout>
<s:TileLayout columnWidth="76" rowHeight="76" horizontalAlign="center" verticalAlign="middle"
horizontalGap="8" verticalGap="8"/>
</s:layout>
</s:List>
Here is my Itemrenderer:
<fx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
[Bindable]
public var dataProxy:ObjectProxy;
private function init():void {
dataProxy = new ObjectProxy(data);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging" />
</s:states>
<mx:Image source="{dataProxy.pathSmall}" horizontalCenter="0" verticalCenter="0" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Thanks for any insight!Hi Evtim,
Earlier this summer, you helped me to create an itemRenderer that would allow me to drag photos in a list with a grid layout so that I could re-order them, and the dragIndicator would remain the photo instead of a empty box. We accomplished this by using the contentCache feature with the Spark BitmapImage. Now when I drag my photos, they remain photos even while being dragged. Your very elegant solution ended up looking like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="76" height="76" focusEnabled="false">
<fx:Script>
<![CDATA[
import spark.core.ContentCache;
static private const contentCache:ContentCache = new ContentCache();
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging" />
</s:states>
<s:BitmapImage source="{data.pathSmall}" width="70" height="70" contentLoader="{contentCache}"
horizontalCenter="0" verticalCenter="0" alpha.dragging="2" includeIn="normal, hovered, selected, dragging"/>
</s:ItemRenderer>
Now I have another little interesting challenge with this itemRenderer. I don't want to bore you with details, but the situation is that I will no longer be loading thumbnails that are 70x70 pixels in size, but I will be loading photos with various dimensions that have to be displayed as a 70x70 pixel thumbnail. So I am going to create a Group that is 70x70 pixels, turn on the clipAndEnableScrolling for the Group, and then place the photos within the Group so that they essentially get cropped. The images that I import will have to be resized to either 70 pixels wide or 70 pixels high depending on what is the larger dimension of the of the image, and then placed inside the Group so that I get a perfect center-crop of the images.
So to summarize, I need to load the photos using a loader. Then I can figure out with the height and width of the photos is. Then I can scale the photo so that the smaller dimension is 70 pixels, and then I can place it in the Group. But to do all of this, I can no longer do it in MXML but have to do it in ActionScript... and thus my dilema. I can't figure out how to use the contentCache properly in ActionScript so that the images stay images when dragged. Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="76" height="76" focusEnabled="false" dataChange="init(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import spark.core.ContentCache;
private var contentCache:ContentCache = new ContentCache();
private var imageLoader:Loader = new Loader();
private var bitmapImg:BitmapImage = new BitmapImage();
private var widthHolder:int;
private var heightHolder:int;
protected function init(event:FlexEvent):void {
var request:URLRequest = new URLRequest(FlexGlobals.topLevelApplication.imageAC[this.itemIndex].pathSmall);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, createVisuals);
imageLoader.load(request);
private function createVisuals(event:Event):void{
bitmapImg.source = Bitmap(imageLoader.content);
bitmapImg.horizontalCenter = 0;
bitmapImg.verticalCenter = 0;
bitmapImg.smooth = true;
bitmapImg.smoothingQuality = "high";
widthHolder = imageLoader.width;
heightHolder = imageLoader.height;
if (widthHolder > heightHolder) {
bitmapImg.width = int(Math.round(70*widthHolder/heightHolder));
bitmapImg.height = 70;
else {
bitmapImg.width = 70;
bitmapImg.height = int(Math.round(70*heightHolder/widthHolder));
imageGroup.addElement(bitmapImg);
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
<s:State name="dragging"/>
</s:states>
<s:Group id="imageGroup" width="70" height="70" horizontalCenter="0" verticalCenter="0" clipAndEnableScrolling="true"/>
</s:ItemRenderer>
So when there is a dataChange in my List, the init() function gets called to load the image. When the load is complete, the createVisuals() method resizes the image and places it in the Group. Everything is working as expected. The images get resized, centered and cropped within the group, and smoothed out so that they look nice. But now when I drag them, I get an empty box while dragging. I am unsure of how to tie in the contentCache with my bitmapImage object so that it will stay an image while being dragged using actionScript. I don't know if it is as simple as setting the contentLoader property for the bitmapImage object, or if it is more complicated and I need to set the image source for the "dragging" state. Could you possibly give me some insight as to how to make this happen in ActionScript?
Thanks for any insight!
Bill -
Spark list: how to unselect multiple items programmatically?
Hi, I have a spark list with multiple selection allowed. I want to add a button next to the list with which to deselect all selected items. How do I go about that? I tried to set myList.selectedItems = null, and myList.selectedItems = new Vector.<Object>, but to no avail. Help would be very much appreciated!
Hi Sam,
According to your description, my understanding is that you want to update multiple items in another list when updated a list item.
In the event receiver, you can update the multiple item using Client Object Model.
Here is a code snippet for your reference:
public override void ItemUpdated(SPItemEventProperties properties)
string siteUrl = "http://sp2013sps/sites/test/";
ClientContext clientContext = new ClientContext(siteUrl);
List oList = clientContext.Web.Lists.GetByTitle("another list name");
ListItem oListItem = oList.GetItemById(1);
oListItem["Title"] = "Hello World Updated！";
oListItem.Update();
clientContext.ExecuteQuery();
Best regards,<o:p></o:p>
Zhengyu Guo
Zhengyu Guo
TechNet Community Support
Maybe you are looking for
-
Is it possible to Display BW Bex report iviews in Tabbed Interface?
Hi, Is their a way to display BW BEx Report Iviews in Tabbed Interface? My requirement is to show four BEx Reports using 4 tabs on a page. Can we achieve this functionality in portal? If yes can some one guide me how to proceed? Regards Sai Krish
-
Time Machine Craziness: Way too much data getting backed up
Hello. I'm on a retina MBP running Mountain Lion. Each time that Time Machine does a backup, it's backing up way more data than corresponds to any changes I have made. I'm aware of issues with virtualization software (I'm not using any) and I'm also
-
Error Message "the system cannot find the specified file"
Hi, I built my website with iWeb, but when I want to publish it on my own domain (not .mac) I've always this error message (the system cannot find the specified file) with many files. I've tryed many ftp host but I still have the same problem. I ask
-
How to store music in Macbook?
Hey guys, I am running version 10.6.3 and would like to store my mp3's in the mac, in windows I would simply go into the C drive and create a folder named my music or mp3's and load my music folders in there and navigate from my music software to the
-
I can buy music in itunes, but I can't get my ipod to update
I am connected to the internet. I download music all the time but I need to update my ipod and when I try to update my ipod it tells me that I am not connected to the internet? What do I do?