I have a ComboBox in Flex which is listing like this:
A-B-C-D-E-F
A-B-C-D-E-F-*
A-B-C-D-E-F-G-*
A-B-C-D-E-F-*
I want to make the * appear red. Could anyone help me regarding this?
Hopefully self-explaining:
<s:ComboBox itemRendererFunction="getItemRenderer"
dataProvider="{new ArrayList(['A-B-C-D-E-F', 'A-B-C-D-E-F-', 'A-B-C-D-E-F-G-', 'A-B-C-D-E-F-'])}"/>
<fx:Declarations>
<fx:Component className="RedItemRenderer">
<s:ItemRenderer>
<s:HGroup verticalAlign="middle">
<s:Label text="{data}" color="red" paddingLeft="3" paddingRight="3" paddingTop="5" paddingBottom="5"/>
<s:Image source="#Embed(source='warning.png')"/>
</s:HGroup>
</s:ItemRenderer>
</fx:Component>
</fx:Declarations>
<fx:Script><![CDATA[
import mx.collections.ArrayList;
import spark.skins.spark.DefaultItemRenderer;
private function getItemRenderer(item:Object):IFactory
{
var s:String = item as String;
if (s.charAt(s.length-1) == '-')
return new ClassFactory(RedItemRenderer);
else
return new ClassFactory(DefaultItemRenderer);
}
]]></fx:Script>
This is how it looks like:
Related
I have a Spark List and I want to show a tool tip when over a row. In the previous List I think there was a dataTipField property but I don't see that on the Spark List.
If the label displayed in the list is different than the toolTip you want to show then you can use toolTip property of the Label in Sumit's answer as below:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var myDataProvider:ArrayCollection = new ArrayCollection([
{data:1, label:"One", desc:"Here is a toolTip description of the item One"},
{data:2, label:"Two", desc:"Here is a toolTip description of the item Two"},
{data:3, label:"Three", desc:"Here is a toolTip description of the item Three"},
{data:4, label:"Four", desc:"Here is a toolTip description of the item Four"},
{data:5, label:"Five", desc:"Here is a toolTip description of the item Five"}
]);
]]></fx:Script>
<s:List dataProvider="{myDataProvider}">
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<fx:Script><![CDATA[
override public function set data(value:Object):void
{
super.data = value;
}
[Bindable]
private function getToolTip():String
{
return data.desc;
}
]]></fx:Script>
<s:Label text="{data.label}" toolTip="{getToolTip()}" width="100%"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</s:Application>
If you want to show the tooltip when the data width is more than the List width then you can use inline itemrenderer for it.
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer>
<s:Label text="{data.Expense}"
width="100"
maxDisplayedLines="1"
showTruncationTip="true" />
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
I want to use datatips in my charts in Flex 4. I know how to use them, but the standard DataTip only shows text. I would like to show text + a button. How would I go on about this?
I thought about extending DataTip in a custom DataTip class and add the button there somewhere like this
public class MyDataTip extends DataTip {
// Override some methods to add the button here?
}
Is this possible / the correct idea? Or do I have to do it differently?
Any code examples for this?
You can use a DataTipRenderer to achieve this. Here is a example of it.
<?xml version="1.0"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
implements="mx.core.IFlexDisplayObject, mx.core.IDataRenderer"
width="120">
<fx:Metadata>
[Event(name="DataSelect", type="flash.events.Event")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.elements.TextFlow;
import mx.charts.HitData;
import mx.charts.series.items.ColumnSeriesItem;
private var _data:HitData;
[Bindable]
private var _xValue:String;
[Bindable]
private var _yValue:String;
[Bindable]
private var _displayText:TextFlow;
public function get data():Object
{
// TODO Auto Generated method stub
return null;
}
public function set data(value:Object):void
{
// HitData data from chart
_data = value as HitData;
// The display text used in datatip which comes in HTML format
_displayText = TextConverter.importToFlow(_data.displayText, TextConverter.TEXT_FIELD_HTML_FORMAT);
// HitData contains a reference to the ChartItem
var item:ColumnSeriesItem = _data.chartItem as ColumnSeriesItem;
// ChartItem xValue and yValue
_xValue = String(item.xValue);
_yValue = String(item.yValue);
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:Rect right="0" left="0" bottom="0" top="0">
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" alpha="0.22" distance="5" angle="90" knockout="false" />
</s:filters>
<s:fill>
<s:SolidColor color="0xFFFFEE"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x1a1a19" weight="1" alpha=".2" />
</s:stroke>
</s:Rect>
<s:VGroup width="100%" height="100%" paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10">
<s:RichEditableText textFlow="{_displayText}" width="100%" textAlign="center" selectable="false" editable="false"/>
<s:Button label="Click me !"/>
</s:VGroup>
</s:Group>
And in your Chart mxml tag just add following
<mx:ColumnChart id="myChart" showDataTips="true" dataTipRenderer="com.CustomDataTipRenderer">
I have this ItemRenderer
<?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="false">
<s:HGroup verticalAlign="middle">
<s:Button label="{data.Nome} ({data.Rating})" width="150" height="35"/>
<s:Button label="{data.Estado}" width="150" height="30"/>
</s:HGroup>
</s:ItemRenderer>
I'd like to see the properties of data object when typing . since its a custom object. How can I see them?
data is suppose to be a User class object.
Try this
<fx:Script>
<![CDATA[
import yourPackage.User;
[Bindable]
private var user:User;
override public function set data(value:Object):void{
super.data = value;
user = data as User;
}
]]>
</fx:Script>
<s:HGroup verticalAlign="middle">
<s:Button label="{user.Nome} ({user.Rating})" width="150" height="35"/>
<s:Button label="{user.Estado}" width="150" height="30"/>
</s:HGroup>
Either as Юрий Борыс said or you could also cast data as User:
<s:Button label="{User(data).Nome} ({User(data).Rating})" width="150" height="35"/>
HIH
I have an arrayCollection with 3 columns as such:
Col1 Col2 Col3
a 1 X
b 2 Y
c 3 Z
d 4 W
I want to tranpose this set of data and display it in Flex DataGrid.
I have got till here with my function below, the grid is showing (a,b,c,d etc) as columns but the rows are not filled. For example the first column should show "a" as header and "1" in the 1st row and "X" in the 2nd row.
Can someone help me with this.
This is my function.
public function createColumns(myArrayColl:ArrayCollection):void{
var advancedDataGridColumn:AdvancedDataGridColumn;
var i:int;
var columnsArray:Array = new Array();
for(i=0;i< myArrayColl.length;i++){
advancedDataGridColumn=new AdvancedDataGridColumn();
advancedDataGridColumn.headerText= getFormattedPeriod(myArrayColl[i].Col1.toString());
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col2.toString();
advancedDataGridColumn.dataField=myArrayColl[i].Col3.toString();
columnsArray.push(advancedDataGridColumn);
}
adg1.columns = columnsArray;
adg1.invalidateDisplayList();
}
I had the same problem and solved using Spark DataGroup with a Horizontal Layout:
<?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">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] private var array : ArrayCollection = new ArrayCollection([
{Col1:"a",Col2:"1",Col3:"X"},
{Col1:"b",Col2:"2",Col3:"Y"},
{Col1:"c",Col2:"3",Col3:"Z"},
{Col1:"d",Col2:"4",Col3:"W"},
]);
]]>
</fx:Script>
<s:HGroup x="225" y="49">
<!--the VGroup below it's a kind of a 'vertical header'. If you, like use it.-->
<s:VGroup width="50" id="vHeader">
<s:Label text="Col 1" fontWeight="bold"/>
<s:Label text="Col 2"/>
<s:Label text="Col 3"/>
</s:VGroup>
<!--the DataGroup with Horizontal layout and a itemRenderer using a VGroup-->
<s:DataGroup id="dataGroup" clipAndEnableScrolling="true"
dataProvider="{array}" width="100">
<s:layout>
<s:HorizontalLayout gap="1" useVirtualLayout="true"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="49">
<fx:Script>
<![CDATA[
]]>
</fx:Script>
<s:VGroup>
<s:Label text="{data.Col1}" fontWeight="bold"/>
<s:Label text="{data.Col2}"/>
<s:Label text="{data.Col3}"/>
</s:VGroup>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:DataGroup>
</s:HGroup>
<!--the HSCrollBar positioned above the dataGroup-->
<s:HScrollBar x="276" y="27" width="100" pageSize="50" stepSize="50"
viewport="{dataGroup}"/>
</s:Application>
Is there any way to detect whether a list is scrolling or not,likelist.isScrolling
So, #Khaled showed a way to do it with the MX component. If you are using the Spark component, that event doesn't work. Instead, you can listen to changes on myList.scroller.viewport.verticalScrollPosition or horizontalScrollPosition.
<fx:Declarations>
<fx:int id="scrollingCount" />
</fx:Declarations>
<s:initialize>
BindingUtils.bindSetter(function(x:*):void { scrollingCount++; }, myList.scroller.viewport, "verticalScrollPosition");
</s:initialize>
<s:VGroup>
<s:Label text="Scrolling: {scrollingCount}" />
<s:List id="myList" height="200" dataProvider="{myData}" />
</s:VGroup>
In neither of these cases do you get to know when the list stops getting scrolled (I'm not sure if you want it or not). You might have to set a timer and any time the timer goes off without any scrolling events, you are no longer scrolling?
Unfortunately, you haven't explained what you are trying to accomplish, wo we can't adequately answer your question.
Or you can do somme thing like this in a list itemrenderer :
import spark.components.List;
[Bindable]
private var calcWidth:Number=195;
private var listVerticalScroll:Boolean;
private var listHorizontalScroll:Boolean;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
var ownerVerticalScroll:Boolean=List(owner).scroller.verticalScrollBar.visible;
var ownerHorizontalScroll:Boolean=List(owner).scroller.horizontalScrollBar.visible;
if(ownerVerticalScroll!=listVerticalScroll){
listVerticalScroll=ownerVerticalScroll;
scrollBarChange()
}
super.updateDisplayList(unscaledWidth,unscaledHeight);
}
private function scrollBarChange():void {
if(listVerticalScroll){
var newWidth:Number=195-(listVerticalScroll?15:0);
calcWidth=newWidth;
}
}
you can use the ScrollEvent.SCROLL :
import mx.events.ScrollEvent
myList.addEventListener(ScrollEvent.SCROLL, scrollHandler);
function scrollHandler(e:ScrollEvent):void
{
//myList is scrolling
}
Or you can do it like this for spark component!
http://blog.flexexamples.com/2009/05/31/detecting-when-the-vertical-scroll-bar-is-scrolled-on-a-spark-list-control-in-flex-4/ -->
<fx:Script>
<![CDATA[
import spark.components.VScrollBar;
private function init():void {
list.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
}
private function list_verticalScrollBar_change(evt:Event):void {
var vsb:VScrollBar = evt.currentTarget as VScrollBar;
var obj:Object = {};
obj.type = evt.type;
obj.val = vsb.value;
obj.max = vsb.maximum;
arrColl.addItem(obj);
callLater(dgScroll);
}
private function dgScroll():void {
dataGrid.verticalScrollPosition = dataGrid.maxVerticalScrollPosition;
}
]]>
</fx:Script>
<fx:Declarations>
<mx:ArrayCollection id="arrColl" />
</fx:Declarations>
<s:HGroup horizontalCenter="0" verticalCenter="0">
<s:List id="list"
creationComplete="init();">
<s:layout>
<s:VerticalLayout gap="0"
horizontalAlign="contentJustify"
requestedRowCount="4" />
</s:layout>
<s:dataProvider>
<s:ArrayList>
<fx:String>The</fx:String>
<fx:String>Quick</fx:String>
<fx:String>Brown</fx:String>
<fx:String>Fox</fx:String>
<fx:String>Jumps</fx:String>
<fx:String>Over</fx:String>
<fx:String>The</fx:String>
<fx:String>Lazy</fx:String>
<fx:String>Dog</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:List>
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
width="200"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="type" />
<mx:DataGridColumn dataField="val" />
<mx:DataGridColumn dataField="max" />
</mx:columns>
</mx:DataGrid>
</s:HGroup>
</s:Application>