ListItemRenderer background color - actionscript-3

Using flex4, I have a list with an item renderer:
<mx:List id="queueView" dataProvider="{presenter.queue.items}">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<mx:Label text="{data.name}"/>
<mx:Label text="{data.artist.name}"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
I have alternating colors on the list:
#queueView
{
alternating-item-colors: red, yellow;
}
but the list items always render with a white background (it renders the colors correctly if I get rid of the renderer).
If I set contentBackgroundColor="red" on the itemRenderer every item is red. The compiler won't accept transparent.
How can I make the itemRenderer respect the alternating colors of the list?

This seems to work fine for me. Here is my code:
<?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" xmlns:components="components.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var items:ArrayCollection = new ArrayCollection([{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"},
{name:"foo",value:"bar"}]);
]]>
</fx:Script>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/halo";
#namespace components "components.*";
#queueView
{
alternating-item-colors: red, yellow;
}
</fx:Style>
<mx:List id="queueView" dataProvider="{items}" width="200">
<mx:itemRenderer>
<fx:Component>
<mx:VBox>
<mx:Label text="{data.name}"/>
<mx:Label text="{data.value}"/>
</mx:VBox>
</fx:Component>
</mx:itemRenderer>
</mx:List>
</s:Application>
And here is the result:
What build are you running? I am running the latest beta that came out in the last few weeks. Build 4.0.0.253292 to be exact. You can try upgrading to the latest build if you haven't already and you can also try to clean your project. Also make sure your browser isn't caching the swf, which sometimes happens when the file size doesn't change dramatically.
Please let me know if I have missed something. But your code seems to work fine.

Related

How to update dataprovider data?

I have a datagrid with editable option set to true. If i change data in the grid view the same changes should apply to dataprovider.I am new to flex can any one help me to solve this.
My idea is we need to use ArrayCollection properties or itemUpdate method.
Have a look at my code.
I have one field in the data provider. In the data grid a have added this field twice to let you see the effect of editing. If you edit values in the second column and press Enter, you can see the result in the first one.
So your data provider is always up to date.
Here is the working example.
Let me know if you meant something else.
<?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/mx"
minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]private var myDP:ArrayCollection = new ArrayCollection([
{myfield:"Hello"},
{myfield:"World"}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="30" y="30" height="120" dataProvider="{myDP}" editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="myfield" headerText="My Field" width="120"/>
<s:GridColumn dataField="myfield" headerText="My Field Edit" editable="true" rendererIsEditable="true" width="120">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<fx:Script>
<![CDATA[
import spark.events.TextOperationEvent;
protected function textinput_changeHandler(event:TextOperationEvent):void
{
var value:String = (event.currentTarget as TextInput).text
data[column.dataField] = value;
}
]]>
</fx:Script>
<s:TextInput text="{data['myfield']}" change="textinput_changeHandler(event)"/>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns >
</s:DataGrid>
</s:Application>

Need Help in Dropdownlist to set specific contentcolor but not Contantbackground color

Can anyone provide me solution for this facing problem: I am using dropdownlist in flash 4.6 , where I have applied custom skin. custom skin contained on button , label, Datagroup. So, I want to change the color of specific item from list, as given option is only to change background rollOverColor,selectionColor but not contant color. Help me please If anyone have its solution.
custom Skin code is following:
<s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.utils.ObjectUtil;
protected function dataGroup_creationCompleteHandler(event:FlexEvent):void
{
dataGroup.setStyle('rollOverColor','black');
dataGroup.setStyle('selectionColor','black');
}
]]>
</fx:Script>
<s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer"
creationComplete="dataGroup_creationCompleteHandler(event)" mouseDown="mosuedownEvt(event)">
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="contentJustify" />
</s:layout>
</s:DataGroup>
</s:Scroller>
In your DefaultItemRenderer override the
set data
method and change to color depending if it the "default"-value or the specific one you are looking for.

Disable alternatingItemColor property for AdvancedDataGrid if the rows are empty

I have a custom AdvancedDataGrid and we use alternatingItemColors property which shows two different colors for rows of the AdvancedDataGrid. Now sometimes the datagrid has 15 rows but only 5 would have data and we want only first 5 rows to display alternating colors and rest of the rows should only display one color. Has anyone done this in past and if someone can please explain how to do this would be really appreciated.
Thanks in advance.
You have to override the Datagrid and override drawRowBackground method, if the rowInd is more than the number of rows then set the default color. See the code snippet mentioned given below -
public class CustomDataGrid extends AdvancedDataGrid
{
protected override function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void{
var XMLdata:XML=rowNumberToData(dataIndex) as XML;
if(XMLdata!=null){
if(XMLdata.attribute(Constants.col) != undefined && XMLdata.attribute(Constants.col) != ""){
color=XMLdata.attribute(Constants.col);
}else{
color=0xFFFFFF;
}
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
Either set rowCount to the actual row count when you have fewer rows than the height allows for, or override drawRowBackground.
Try by using Item renderer for your ADG: -
<?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/mx" minWidth="955" minHeight="600"
>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var dpHierarchy:ArrayCollection= new ArrayCollection([
{name:"A", region: "Arizona"},
{name:"B", region: "Arizona"},
{name:"C", region: "California"},
{name:"D", region: "California"}
]);
]]>
</fx:Script>
<mx:AdvancedDataGrid id="myADG"
width="500" height="500"
paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
dataProvider="{dpHierarchy}"
itemRenderer="DrawAlternateRowColor">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Name" />
<mx:AdvancedDataGridColumn dataField="region" headerText="Region" />
</mx:columns>
</mx:AdvancedDataGrid>
</s:Application>
//ItemRenderer name: - DrawAlternateRowColor -- you can use the same concept with you CADG.
<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer 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" alternatingItemColors="[#0000FF, #FF0000]"
width="100%" height="100%">
<s:Label id="lblData" verticalAlign="middle" text="{listData.label}" />
</s:MXAdvancedDataGridItemRenderer>

Why won't visual elements display inside custom component extended from another custom component

I created a custom MXML component, TurboContent, that extends the NavigatorContent class:
<s:NavigatorContent 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:Metadata>
[DefaultProperty("mxmlContentFactory")]
</Fx:Metadata>
<s:Group id="midWrapper">
<s:Button id="btnAdd" />
</s:Group>
<s:Group id="rightWrapper" >
<s:DataGrid id="dgdSelect" >
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="Yo"></s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>
<s:Button id="btnRemove" />
<s:Button id="btnClear" />
</s:Group>
</s:NavigatorContent>
I am trying to extend that custom component but when I add display elements to the second extended componet they elements are never seen. For instance: (The first custom component is in the comp package)
<comp:TurboContent xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comp="comp.*">
<s:Button id="myButton"/>
</comp:TurboContent>
In this case, the 'myButton' component never shows up, but all the elements of the base component do (3 buttons and a datagrid).
I'm curious to understand what you're trying to achieve?
From the pieces of code it seems you're trying to compose a new view which visually inherits the TurboContent-component and adds another button to it.
What happens really under the hood is that the NavigatorContent extends SkinnableContainer. SkinnableContainer has as a default property mxmlContentFactory, which once initialized can not be changed or substituted, or add stuff on top of it, unless you do that with ActionScript:
mxmlContentFactory = null; // or some IDeferredInstance
But then your approach of visual inheritance won't be visual inheritance, but content substitution.
The base class already has initialized it, so the subclasses can't do modifications to it.
From what I can tell, the pattern of defining a component directly in MXML (as you referenced was done in the FIAW series) disallows the ability to then visually insert children in the container's display list. One of the problems is that the mxmlContent (which normally a skin would control) is statically defined in the component and it doesn't seem like one can use contentGroup inside the MXML component directly.
For better control, and what I consider a more strict implementation of the MVC pattern (which Flex 4, as a framework, implements), try separating your visual layout out into an MXML skin, and defining the component in AS3.
From what little I see of your component, I can't really make a judgment as to what properties of the component you want to expose to the container that will instantiate it. I'll at least give an example here of how one can pass info from the component to the skin.
I apologize for the MX components, but I only have Flex 4.1, and I wanted to make sure the program compiled fine. It shouldn't be too hard for you to swap in the spark versions.
Example Component (TurboContentAS.as)
package components {
import mx.controls.DataGrid;
import spark.components.NavigatorContent;
public class TurboContentAS extends NavigatorContent {
public function TurboContentAS() {
super();
}
// Skin Parts that constitute the necessary parts of the component
[SkinPart(required="true")]
public var dgdSelect:DataGrid; //just an example
// property you want to expose to the instantiating object
[Bindable]
public var firstColumnHeader:String = "default header";
}
}
Example Skin (TurboContentSkin.mxml)
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
alpha.disabled="0.5" >
<fx:Metadata>[HostComponent("components.TurboContentAS")]</fx:Metadata>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!-- this is where the children that you add later go-->
<s:Group id="contentGroup" left="0" right="0" top="100" bottom="0" minWidth="0" minHeight="0">
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
<s:Group id="midWrapper">
<s:Button id="btnAdd" label="Add" />
</s:Group>
<s:Group id="rightWrapper" left="200">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:DataGrid id="dgdSelect">
<mx:columns>
<fx:Array>
<!-- This will bind to the publicly exposed property in the component definition -->
<mx:DataGridColumn headerText="{hostComponent.firstColumnHeader}"/>
</fx:Array>
</mx:columns>
</mx:DataGrid>
<s:Button id="btnRemove" label="Remove"/>
<s:Button id="btnClear" label="Clear"/>
</s:Group>
</s:Skin>
Example Instantiation
<components:TurboContentAS skinClass="skins.TurboContentSkin" firstColumnHeader="myHeader">
<s:Button label="myButton"/>
</components:TurboContentAS>

How to add items to a datagrid at runtime in flex4?

My UserInfromation form contains two input fields username,location(city) and one radio button as gender and two buttons add and reset.when I click on add button that data will be added in datagrid at runtime.
I am unable to reproduce how will i do this.
can anyone help me on this with example?
Here is a sample app (with code):
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private var ac:ArrayCollection = new ArrayCollection();
protected function addBtn_clickHandler(event:MouseEvent):void
{
var obj:Object = new Object();
obj.userName = userNameTI.text;
obj.location = locationTI.text;
ac.addItem(obj);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:Form width="100%">
<mx:FormItem label="UserName:">
<s:TextInput id="userNameTI"/>
</mx:FormItem>
<mx:FormItem label="Location:">
<s:TextInput id="locationTI"/>
</mx:FormItem>
</mx:Form>
<s:Button id="addBtn" label="Add" click="addBtn_clickHandler(event)"/>
<mx:DataGrid id="dg" width="100%" dataProvider="{ac}"/>
</s:WindowedApplication>
Couple of things are left for you as an exercise :)