This is my application:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.gridClasses.IGridItemRenderer;
public var modulesXMLList:XMLListCollection;
private function onGridInitialize(event:FlexEvent):void{
this.addEventListener('moduleItemChange', onModuleItemChange);
}
private function onModuleItemChange(event:Event):void{
var item:IGridItemRenderer = event.target as IGridItemRenderer;
if(!item || !item.data)
//item.data.access = !item.data.access;
Alert.show(item.data.sub_module);
}
protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void
{
modulesXMLList = new XMLListCollection(tempXML.module as XMLList);
modulesXMLList.refresh();
myDatagrid.dataProvider = modulesXMLList;
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="rbg1"/>
<fx:XML id="tempXML" source="assets/myXMl1.xml"/>
<!--<s:ArrayCollection id="moduleControlPanel_DP">
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
</s:ArrayCollection>
-->
</fx:Declarations>
<s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9"
x="20" y="20" width="184" height="176">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Default">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="#{data.default}" label="" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText="Access" dataField="#access">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
// not sure of the details on when or why, but sometimes this method is passed a null value
if(value != null)
{
//super.data = value;
// set itemRenderer's state based on data value
//chk.selected = value.access;
super.data = value;
validateNow();
}
}
protected function Check_clickHandler(even:MouseEvent):void
{
dispatchEvent(new Event('moduleItemChange', true));
}
]]>
</fx:Script>
<s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="#{data.access}" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText="Sub-Module" dataField="#sub_module" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
And this my C<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.components.gridClasses.IGridItemRenderer;
public var modulesXMLList:XMLListCollection;
private function onGridInitialize(event:FlexEvent):void{
this.addEventListener('moduleItemChange', onModuleItemChange);
}
private function onModuleItemChange(event:Event):void{
var item:IGridItemRenderer = event.target as IGridItemRenderer;
if(!item || !item.data)
//item.data.access = !item.data.access;
Alert.show(item.data.sub_module);
}
protected function controlPanel_Datagrid_creationCompleteHandler(event:FlexEvent):void
{
modulesXMLList = new XMLListCollection(tempXML.module as XMLList);
modulesXMLList.refresh();
myDatagrid.dataProvider = modulesXMLList;
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="rbg1"/>
<fx:XML id="tempXML" source="assets/myXMl1.xml"/>
<!--<s:ArrayCollection id="moduleControlPanel_DP">
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub1" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub2" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub3" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub4" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub5" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub6" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub7" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub8" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub9" default="false" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
<fx:Object habilitations_id ="1" module_id="4" sub_module="Sub11" default="true" access="true"/>
</s:ArrayCollection>
-->
</fx:Declarations>
<s:DataGrid id="myDatagrid" creationComplete="controlPanel_Datagrid_creationCompleteHandler(event)" rowHeight="35" fontSize="9"
x="20" y="20" width="184" height="176">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Default">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<s:RadioButton name="yoyo" group="{outerDocument.rbg1}" selected="#{data.default}" label="" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText="Access" dataField="#access">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
// not sure of the details on when or why, but sometimes this method is passed a null value
if(value != null)
{
//super.data = value;
// set itemRenderer's state based on data value
//chk.selected = value.access;
super.data = value;
validateNow();
}
}
protected function Check_clickHandler(even:MouseEvent):void
{
dispatchEvent(new Event('moduleItemChange', true));
}
]]>
</fx:Script>
<s:CheckBox id="chk" click="Check_clickHandler(event)" label="" selected="#{data.access}" horizontalCenter="0"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn headerText="Sub-Module" dataField="#sub_module" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
And this is my XML file:
<?xml version="1.0" encoding="UTF-8"?>
<modules>
<module habilitation_id="1" module_id="1" sub_module="Sub1" default="true" access="true" />
<module habilitation_id="1" module_id="2" sub_module="Sub2" default="true" access="true" />
<module habilitation_id="1" module_id="2" sub_module="Sub3" default="false" access="false" />
<module habilitation_id="1" module_id="2" sub_module="Sub4" default="false" access="true" />
<module habilitation_id="1" module_id="3" sub_module="Sub5" default="true" access="true" />
<module habilitation_id="1" module_id="3" sub_module="Sub6" default="false" access="true" />
<module habilitation_id="1" module_id="4" sub_module="Sub7" default="true" access="true" />
<module habilitation_id="1" module_id="4" sub_module="Sub8" default="false" access="true" />
</modules>
Anyone please throw some lights.
This is a fun one. I ran into it a while back. Your item renderer is destroyed and reused as it scrolls off screen. Therefore it appears unselected. If I remember right, try binding your controls to a method in the renderer that updates their values to those in the data object. e.g. <s:checkbox selected={myMethod(data.selected)} /> or look for an update event on the renderer and set your values.
Just saw this post and seems you have not accepted any answer yet:
Your item renderer:
override public function set data(value:Object):void
{
if(value != null)
{
super.data = value;
//chk.selected = value.access;
validateNow();
}
}
Uncomment the above line : //chk.selected = value.access;
Flex DataGrid recycles its itemRenderers for better memory performance. When you check a CheckBox on an itemRenderer and start scrolling, that itemRenderer with the checked box is getting reused to display other records with the selected="true" value still set.
So you have to explicitly set the check box value. For this example if value.access is boolean and it is for checkbox it will definitely work.
Thanks.
Related
I'm using Adobe Flex Builder 4.5, and I'd like to create a vertical, scrollable list of panels for an AIR application. How do I do that?
A little something like this:
<fx:Declarations>
<s:ArrayCollection id="dp">
<fx:Object title="Panel A" content="content AAAAA" />
<fx:Object title="Panel B" />
<fx:Object title="Panel C" />
<fx:Object title="Panel D" />
</s:ArrayCollection>
</fx:Declarations>
<s:List dataProvider="{dp}" height="100%">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Panel title="{data.title}">
<s:Label text="{data.content}" />
</s:Panel>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Doesn't matter whether you're in AIR or just Flex.
I am learning Adobe Air and want to get the current selected item in the spinner list I have created, however every time I use selectedItem I keep getting the same value over and over, no matter what option I select. I am trying to make an application for the Playbook and this this my SpinnerList code:
<s:SpinnerListContainer x="10" y="279" width="325" height="266">
<s:SpinnerList width="69" height="100%" enabled="true" labelField="data" selectedIndex="1" id="From">
<s:ArrayList>
<fx:Object data="Time"></fx:Object>
<fx:Object data="KM"></fx:Object>
<fx:Object data="Miles"></fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
No matter what, 'KM' is always shows as the selected item when it is not. This is what I have in the script tags:
var selected = From.selectedItem;
How can I fix this?
Thank you
Using 4.6 SDK this works for me:
<?xml version="1.0" encoding="utf-8"?>
<s:View title="HomeView"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function From_changeHandler(event : IndexChangeEvent) : void
{
somewhereToDisplaySelected.text = From.selectedItem.data;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:SpinnerListContainer height="266"
width="325"
x="10"
y="279">
<s:SpinnerList change="From_changeHandler(event)"
enabled="true"
height="100%"
id="From"
labelField="data"
selectedIndex="1"
width="69">
<s:ArrayList>
<fx:Object data="Time">
</fx:Object>
<fx:Object data="KM">
</fx:Object>
<fx:Object data="Miles">
</fx:Object>
</s:ArrayList>
</s:SpinnerList>
</s:SpinnerListContainer>
<s:TextInput id="somewhereToDisplaySelected"/>
</s:View>
I want to adjust the width of DropDownList control in flex 4. I could do it by editing the skinclass and setting the PopupAnchor's Property "popUpWidthMatchesAnchorWidth" to false, but in my application I have to do it using actionscript.
You could set the typicalItem property of the DropDownList to the currently selected item.
From Flex Examples:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/21/resizing-a-spark-dropdownlist-control-to-match-the-currently-selected-item-in-flex-4/ -->
<s:Application name="Spark_DropDownList_typicalItem_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">
<s:DropDownList id="cb"
labelField="name"
typicalItem="{cb.selectedItem}"
requireSelection="true"
left="20" top="20">
<s:dataProvider>
<s:ArrayList>
<fx:Object name="Baltimore Orioles" abbr="BAL" />
<fx:Object name="Boston Red Sox" abbr="BOS" />
<fx:Object name="Chicago White Sox" abbr="CWS" />
<fx:Object name="Cleveland Indians" abbr="CLE" />
<fx:Object name="Detroit Tigers" abbr="DET" />
<fx:Object name="Kansas City Royals" abbr="KC" />
<fx:Object name="Los Angeles Angels of Anaheim" abbr="LAA" />
<fx:Object name="Minnesota Twins" abbr="MIN" />
<fx:Object name="New York Yankees" abbr="NYY" />
<fx:Object name="Oakland Athletics" abbr="OAK" />
<fx:Object name="Seattle Mariners" abbr="SEA" />
<fx:Object name="Tampa Bay Devil Rays" abbr="TB" />
<fx:Object name="Texas Rangers" abbr="TEX" />
<fx:Object name="Toronto Blue Jays" abbr="TOR" />
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
</s:Application>
thanks a lot for all responders. here i give the code which is used to clip the width of the dropdown.
package
{
import spark.components.DropDownList;
import mx.controls.Alert;
import spark.components.PopUpAnchor;
import mx.collections.IList;
import spark.components.ComboBox;
public class customDDList extends DropDownList
{
[SkinPart(popUpWidthMatchesAnchorWidth)]
public var popUp:PopUpAnchor ;
public function customDDList():void
{
super();
}
override protected function partAdded(partName:String, instance:Object):void
{
super.partAdded(partName, instance);
if (partName == "popUp")
{
instance.popUpWidthMatchesAnchorWidth = false;
}
}
public override function set dataProvider(value:IList):void
{
super.dataProvider = value;
}
}
}
You might as well create another skin for the DropDownList component and set the popUpWidthMatchesAnchorWidth property to false on the PopUpAnchor skin part:
<s:PopUpAnchor id="popUp"
displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
left="0" right="0" top="0" bottom="0"
itemDestructionPolicy="auto"
popUpPosition="below"
popUpWidthMatchesAnchorWidth="false" >
I have a list that as an arraylist as a dataprovider.It has an inline item renderer thet has image control. The click event doesn't work for the image ctrl.The code looks like this
<s:ArrayList id="allActionsArrList">
<fx:Object click="showList('Portlet')" source="#Embed('images/bpc1.jpg')" />
<fx:Object click="showList('Pages')" source="#Embed('images/Tab.png')" />
<fx:Object click="smsClick()" source="#Embed('images/launchpad_tel.png')" />
<fx:Object click="logoutImg_clickHandler(event)" source="#Embed('images/logoutS.swf')" />
</s:ArrayList>
<s:List id="actionStripList" bottom="0" width="100%" borderColor="black"
borderVisible="true" contentBackgroundAlpha="0" dataProvider="{allActionsArrList}"
useVirtualLayout="false">
<s:layout>
<s:TileLayout/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="100%" height="40">
<mx:Image buttonMode="true" horizontalCenter="0"
width="40" height="40" source="{data.source}" click="{data.click}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
Any idea.Thanks in advance!
1.You may do something like this:
<fx:Object clickHandler="{showList}" clickParams="{['Portlet']}" source="#Embed('images/bpc1.jpg')" />
<fx:Object clickHandler="{showList}" clickParams="{['Pages']}" source="#Embed('images/Tab.png')" />
<fx:Object clickHandler="{smsClick}" clickParams="{[]}" source="#Embed('images/launchpad_tel.png')" />
<fx:Object clickHandler="{logoutImg_clickHandler}" clickParams="{[]}" source="#Embed('images/logoutS.swf')"/>
<mx:Image buttonMode="true" horizontalCenter="0" width="40" height="40" source="{data.source}" click="data.clickHandler.apply(this, data.clickParams)"/>
Here you possibly should take care of this object (info)
But I'd used the 2nd variant.
2.Another variant is to define some attribute (id for example) for your Object items. Then you can use switch statement in your inline itemRenderer and call different listeners depending on data.id.
I have a list item with buttons in it like so:
<mx:List contentBackgroundAlpha="0" baseColor="0x333333" leading="10" id="weekButtonList" width="260" borderVisible="false" dataProvider="{_data.mappoints.week.#number}" itemClick="onWeekClick(event);" >
<mx:itemRenderer >
<mx:Component>
<mx:Button buttonMode="true" width="260" height="50" label="Week {data}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
No matter what I do, these buttons have a vertical gap inbetween them. I have tried everything from setting the "vertical-gap" property to negative and positive numbers as well as changing the padding-bottom and padding-top on them. I want the buttons to be right up against eachother vertically. I have also tried "button-height" and padding on the List component...still nothing. How do I control this?
If you can build the project in flex4 rather than 3.x the following solution would apply:
in your application file:
<?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" minWidth="1024" minHeight="768">
<s:List contentBackgroundAlpha="0" baseColor="0x333333" id="weekButtonList" width="260" borderVisible="false" itemRenderer="ListButton">
<s:layout>
<s:VerticalLayout gap="0">
</s:VerticalLayout>
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:Array>
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="No Gap" />
<fx:Object label="Still No Gap" />
</fx:Array>
</s:ArrayList>
</s:dataProvider>
</s:List>
in ListButton.mxml
<?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/halo" width="100%" height="100%">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button label="{data.label}" />
If flex 4 is an option I highly recommend making the switch.
Try setting the button paddingTop and paddingBottom to 0
To add to greg's answer, some layouts use verticalGap and horizontalGap where applicable.
<s:List>
<s:layout>
<s:TileLayout verticalGap="-2" />
</s:layout>
</s:List>
I think the default is 0 (zero)