I have a Flex UI and want the numeric stepper to add a preceeding '0' to the displayed value if it's between 0 and 9, so that it's always 2 digits. How do I do this?
Use the valueFormatFunction of the NumericStepper:
<?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[
protected function formatNumber(value:Number):String
{
if (value < 10)
return '0' + value;
return value.toString();
}
]]>
</fx:Script>
<s:NumericStepper valueFormatFunction="formatNumber"
minimum="0"
maximum="100" />
</s:Application>
Related
I need the label to be indented. Setting de properties top, bottom, left don't work.
<?xml version="1.0" encoding="utf-8"?>
<s:DefaultGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" top="10" bottom="10"
left="{data != null ? left = (data.niveau-1) * 20 : ''}">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
override public function prepare(willBeRecycled:Boolean):void{
if(data != null){
label = data.tekst;
styleName= 'niveau'+data.niveau;
toolTip=data.hulptekst;
}
}
]]>
</fx:Script>
</s:DefaultGridItemRenderer>
I think the best way to take control over alignment is to integrate your components into a Group.
Here is an effect you can achieve:
Here is the code:
//App
<?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", niveau:3},
{myfield:"World", niveau:7},
{myfield:"!!!", niveau:5}
]);
]]>
</fx:Script>
<s:DataGrid id="myDG" x="20" y="20" height="120" dataProvider="{myDP}" editable="true">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="myfield" headerText="My Field" width="170" itemRenderer="renderers.CustomRenderer"/>
<s:GridColumn dataField="myfield" headerText="My Field" width="170"/>
</s:ArrayList>
</s:columns >
</s:DataGrid>
</s:Application>
//Renderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:Label id="lblData" top="9" left="{data != null ? (data.niveau - 1) * 20 : 0}"/>
</s:Group>
</s:GridItemRenderer>
I am trying bind an Object property value to a text field. (Well I have taken this as an example ... I have no.of form fields and to be bound by other values)
But when change its value on button click the text field is not getting updated?
Below is the example code,
<?xml version="1.0" encoding="utf-8"?>
<s:Application
minHeight="600"
minWidth="955"
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:Declarations>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
var currentFormItem:Object = new Object();
public function changeName():void
{
currentFormItem.name = "hello";
}
]]>
</fx:Script>
<s:HGroup>
<s:TextInput id="test"
text="{currentFormItem.name}"/>
<s:Button click="changeName()"/>
</s:HGroup>
Thanks
I got the solution for this. I can just wrap this object in ObjectProxy.
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>
I have a mx Tab navigator and added several childs...I can use selectedindex(int) to open/select the respective (int) tab but How do I know the value of a selected/open tab???
Any Ideas.
Please help
You mean the navigator content?
<?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.core.INavigatorContent;
import mx.events.IndexChangedEvent;
protected function tabNavigator_changeHandler(event:IndexChangedEvent):void
{
var obj:INavigatorContent = tabNavigator.selectedChild;
}
]]>
</fx:Script>
<mx:TabNavigator id="tabNavigator"
change="tabNavigator_changeHandler(event)" />
</s:Application>
You need selectedIndex property (it is readable/writable). Also see Event.CHANGED to catch tab change.
I have an editable datagrid with a dataprovider which is basically Numbers. Is it possible to delete a value? When I do it it puts a 0 in that cell but I really need an empty value, like a Null or a NaN whose are going to be cleaned later with a labelFunction. BTW I also need the cells to keep the 0 if needed to. Thank you in advance.
Assign NaN to the value, and create a custom item renderer for your DataGrid:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
{
if (isNaN(data[column.dataField]))
lblData.text = "";
else
lblData.text = Number(data[column.dataField]).toFixed(2);
}
]]>
</fx:Script>
<s:Label id="lblData"
top="9"
left="7" />
</s:GridItemRenderer>