Adobe Flex: Using TabManager

Do you want to create multiple tabs that look like the image below? Using Adobe Flex’s IDE called Flex Editor, you can easily drag ui components to the application area (the area colored gray). When I tried to add a canvas though to represent as another tab by dragging it to the application area, I hard somewhat of a hard time.

So what I did was code manually the MXML file. Just place the mx:Canvas tags inside the mx:TabNavigator and they will automatically be considered as tabbed panes.

<mx:TabNavigator x="69" y="12" width="663" height="345">
        <mx:Canvas label="Column Chart" width="100%" height="100%">
                <!-- any other layout here -->
        </mx:Canvas>
       <mx:Canvas label="Line Chart" width="100%" height="100%">
                <!-- any other layout here -->
        </mx:Canvas>
       <mx:Canvas label="Area Chart" width="100%" height="100%">
                <!-- any other layout here -->
        </mx:Canvas>
</mx:TabNavigator>

Pretty easy. The labels that you assign in the Canvas component will be the text that will appear in the tab.

Like what you see? Buy me a cup of coffee. Or subscribe to my feeds.


(No Ratings Yet)
 Loading ...

Adobe Flex: Dates In Chart Not Displayed Correctly Using DateTimeAxis

Ever had that problem when using the DateTimeAxis along a horitonzalAxis or verticalAxis and when you hover over your mouse, the dates are not displayed correctly? That’s what happened to me when I first checked on using charts. The DateTimeAxis has a parseFunction property that lets you specify the function to use to convert, say, String dates to Date objects. The problem I encountered was that the dates displayed in the chart were subtracted a day. If your date is October 28, 2008, the date displayed in the chart would be October 27, 2008. There are two ways to solve this problem.

Adding displayLocalTime=”true” property in the DateTimeAxis

Or, using the code below to define your function to be used in the parseFunction to return a Date object

<mx:Script>
public function createDate(s:String):Date {
	var a:Array = s.split('/');
	newDate:Date = new Date(0);
	newDate.fullYear = a[2];
	newDate.month = a[0] - 1;	// minus 1 because months start from 0
	newDate.date = a[1];
	return newDate;
}
</mx:Script>
 
and from within the mx:horizontalAxis tag ...
 
<mx:horizontalAxis>
	<mx:DateTimeAxis dataUnits="days" parseFunction="createDate"/>
</mx:horizontalAxis>

Like what you see? Buy me a cup of coffee. Or subscribe to my feeds.


(No Ratings Yet)
 Loading ...

Adobe Flex: Set Selected Item In ComboBox

Oddly, Flex does not let you set an item to be selected in its ComboBox component. While the selectedIndex property can be used, you would have to make your own method to loop through the ComboBox’s dataProvider contents to get the index. Luckily, someone saved us the trouble of creating our own component extending ComboBox. Use the code below to be used as a substitute component for mx:ComboBox.

<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox>
   <mx:Script>
      <![CDATA[
         private var _selectedValue:String;
         private var bSelectedValueSet:Boolean = false;
         private var bDataProviderSet:Boolean = false;
 
         // Override committ, this may be called repeatedly 
         override protected function commitProperties():void {
            // invoke ComboBox version 
            super.commitProperties();
 
            // If value set and have dataProvider 
            if (bSelectedValueSet && bDataProviderSet) {
               // Set flag to false so code won't be called until selectedValue is set again 
               bSelectedValueSet=false;
               // Loop through dataProvider 
               for (var i:int=0; i<this.dataProvider.length; i++) {
                  // Get this item's data 
                  var item:String = this.dataProvider[i].data;
 
                  // Check if is selectedValue 
                  if(item == _selectedValue) {
                     // Yes, set selectedIndex 
                     this.selectedIndex = i;
                     break;
                  }
               }
            }
         }
 
         // Trap dataProvider being set 
         override public function set dataProvider(o:Object):void {
            // invoke ComboBox version 
            super.dataProvider = o;
 
            // This may get called before dataProvider is set, so make sure not null and has entries 
            if (o!=null && o.length) {
               // Got it, set flag 
               bDataProviderSet = true;
            }
         }
 
         // set for selectedValue 
         public function set selectedValue(s:String):void {
            // Set flag 
            bSelectedValueSet = true;
            // Save value 
            _selectedValue = s;
            // Invalidate to force commit 
            invalidateProperties();
         }
      ]]>
   </mx:Script>
 
</mx:ComboBox>

To use this custom made ComboBox, if your component file is under the folder com/ui/ then you have to specify it in the xml namespace. Setting the item in the ComboBox to be selected can be done by calling the selectedValue property (see code below).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fx="com.ui.*">
   <fx:ComboBox id="cbx_1″ selectedValue="STRING_VALUE" width="150″ dataProvider="{DATA_PROVIDER_ID_HERE}"/>
<mx:Application>

Like what you see? Buy me a cup of coffee. Or subscribe to my feeds.


(2 votes, average: 5.00 out of 5)
 Loading ...

Adobe Flex: Delete Row In DataGrid

Here’s the code to delete a row in a DataGrid or AdvancedDataGrid. ActionScript is needed for the delete function.

Assuming this is how your XML data looks like

<users>
	<user>
		<username>user1</username>
		<name>my name</name>
	</user>
	<user>
		<username>user2</username>
		<name>my name again</name>
	</user>
</users>

Using “mydataprovider” as dataprovider for the AdvancedDataGrid, the code would look like this.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="getList()">
    <mx:Script> 
    <![CDATA[
        import com.property.Default;
        import com.util.URLTool;
 
        private function getList():void { 
            list.send();
        }
    ]]> 
    </mx:Script> 
 
	<mx:AdvancedDataGrid y="0" id="table" sortableColumns="true" showHeaders="true" dataProvider="{mydataprovider.lastResult.user}" resizableColumns="true">
	    <mx:columns>
		<mx:AdvancedDataGridColumn id="username" headerText="username" dataField="username" width="100"/>
		<mx:AdvancedDataGridColumn headerText="name" dataField="name" width="130"/>
		<mx:AdvancedDataGridColumn width="140">
		    <mx:itemRenderer >
			<mx:Component>
				<mx:HBox>
					<mx:Script>
					    <![CDATA[
						import mx.controls.Alert;
						import mx.events.CloseEvent;
 
						private function deleteRow(username:String):void {
						    Alert.show("Are you sure you wish to delete user[" + username + "] ?","Confirm Delete", Alert.YES | Alert.NO, this, delRowHandler, null, Alert.NO);
						}
 
						private function delRowHandler(evt:CloseEvent):void {
						    if ((evt.detail == Alert.NO) || (evt.detail == Alert.CANCEL)) return;
 
						    outerDocument.table.dataProvider.removeItemAt(outerDocument.table.selectedIndex);
						}
					    ]]>
					</mx:Script>
					<mx:LinkButton label="delete" click="deleteRow(data.username)" rollOverColor="#fd9595"/>
				</mx:HBox>
			</mx:Component>  
		    </mx:itemRenderer>
		</mx:AdvancedDataGridColumn>            
	    </mx:columns>
 
 
	</mx:AdvancedDataGrid>
 
</mx:Application>

Every row has an extra column where the delete link is displayed for you to delete a row. The action takes place in the click property of the LinkButton component where we call the deleteRow() function to do the row deletion.

Like what you see? Buy me a cup of coffee. Or subscribe to my feeds.


(1 votes, average: 5.00 out of 5)
 Loading ...