Home Flex Flex combobox selecteditem
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Flex combobox selecteditem

Advertisement
In this tutorial page you will learn how to utilize the selectedItem property in flex, for getting the details associated to items inside the flex combo box control.

Flex combobox selecteditem

     

In this tutorial page you will learn how to utilize the selectedItem property in flex, for getting the details associated to items inside the flex combo box control. Below example contains a flex combo box control with id value combo. This flex control contains eleven items and with selectedItem property  details of each item is published inside the flex TextArea control under flex Panel control background. Property selectedItem returns the string value of the item, that means, name of the item is returned with which the item is included in the combo box item list. 

Syntax for using the property
ComboBox_id_value.selectedItem

Example in the tutorial page contains some links to well trusted web site pages, with which you can enrich your knowledge.

oksoo.mxml

<?xml version = '1.0' encoding = 'utf-8'?>
<mx:Application
  xmlns:mx = 'http://www.adobe.com/2006/mxml'
>

  
  <mx:Script>
  
  <!-- 
  function Item_detail is setting combo box 
  item information in to each item
  -->
  
  public function Item_detail(event:Event):void{
  
  if(combo.selectedItem == 'Roseindia'){
  txt.text = 'Software development company'
  link_0.visible = true;
  }
  if(combo.selectedItem == 'Ajax'){
  txt.text = 'Asynchronous JavaScript
 ' and XML is used to fetch
 ' the data from web server
 ' without refreshing the whole'
 ' page.';
  link_6.visible = true;
  }
  if(combo.selectedItem == 'Dojo'){
  txt.text = 'Another great
  ' framework for developing'
  ' ajax based applications.';
  link_7.visible = true;
  }
  if(combo.selectedItem == 'Spring'){
  txt.text = 'Spring Framework Install -
  ' a quick tutorial to install
  ' Spring Framework on your
  ' development environment.';
  link_8.visible = true;
  }
  if(combo.selectedItem == 'JSF'){
  txt.text = 'JSF tutorials we will
  ' describe you how to
  ' implement all theoretical'
  ' concepts of JSF in developing'
  ' robust  JSF web application.';
  link_9.visible = true;
  }
  if(combo.selectedItem == 'Combo Box'){
  txt.text = 'A Flex control'
  link_10.visible = true;
  }
  if(combo.selectedItem == 'Flex'){
  txt.text = 'Adobe technology to enhance the'
 ' users capability in building'
 ' rich internet applications.';
  link_1.visible = true;
  }
  if(combo.selectedItem == 'Ant'){
  txt.text = "Apache's Ant technology, which" 
 ' is a mean to build any'
 ' programming language projects.';
  link_2.visible = true;
  }
  if(combo.selectedItem == 'Core Java'){
  txt.text = 'Java is great programming language'
  +  ' for the development of enterprise'
  'grade applications.';
  link_3.visible = true;
  }
  if(combo.selectedItem == 'Mysql'){
  txt.text = 'MySQL tutorial is available at'
  ' free of cost and 365x24 days'
  ' for your help';
  link_4.visible = true;
  }
  if(combo.selectedItem == 'J2EE'){
  txt.text = 'Application server was developed'
  ' to support for developing the'
  ' enterprise applications for security'
  ' and state maintenance with the data'
  ' base and persistence.';
  link_5.visible = true;
  }
  }
  
  public function clearData():void{
  txt.text = '';
  }
  
  </mx:Script>

  
  
  <!-- functions created for providing item links --> 
  
  
<mx:Script>

  public function roseindia(event:Event):void{
  var url_0:URLRequest;
url_0 = new URLRequest('http://www.roseindia.net/');
  navigateToURL(url_0);
  }
  public function Flex(event:Event):void{
  var url_1:URLRequest;
url_1 = new URLRequest('http://www.roseindia.net/flex/');
  navigateToURL(url_1);
  }
  public function Ant(event:Event):void{
  var url_2:URLRequest;
url_2 = new URLRequest('http://www.roseindia.net/tutorials/ant/');
  navigateToURL(url_2);
  }
  public function Core_Java(event:Event):void{
  var url_3:URLRequest;
url_3 = new URLRequest('http://www.roseindia.net/java/');
  navigateToURL(url_3);
  }
  public function Mysql(event:Event):void{
  var url_4:URLRequest;
url_4 = new URLRequest('http://www.roseindia.net/mysql/');
  navigateToURL(url_4);
  }
  public function J2EE(event:Event):void{
  var url_5:URLRequest;
url_5 = new URLRequest('http://www.roseindia.net/ejb/');
  navigateToURL(url_5);
  }
  public function Ajax(event:Event):void{
  var url_6:URLRequest;
url_6 = new URLRequest('http://www.roseindia.net/ajax/');
  navigateToURL(url_6);
  }
  public function Dojo(event:Event):void{
  var url_7:URLRequest;
url_7 = new URLRequest('http://www.roseindia.net/dojo/');
  navigateToURL(url_7);
  }
  public function Spring(event:Event):void{
  var url_8:URLRequest;
url_8 = new URLRequest('http://www.roseindia.net/spring/');
  navigateToURL(url_8);
  }
  public function JSF(event:Event):void{
  var url_9:URLRequest;
url_9 = new URLRequest('http://www.roseindia.net/jsf/');
  navigateToURL(url_9);
  }
  public function Combo_Box(event:Event):void{
  var url_10:URLRequest;
url_10 = new URLRequest('http://www.livetechtalk.com/');
  navigateToURL(url_10);

  }
  public function Dating(event:Event):void{
  var url_11:URLRequest;
url_11 = new URLRequest('http://www.onedatingtips.com/');
  navigateToURL(url_11);
  }
  
</mx:Script>
  
  
  
  
<mx:Script>
  
  <!-- 
  function clickEventListener is a 
  handler function function inside which 
  mouse click event is added into 
  the Link Buttons
  -->
  public function clickEventListener():void{
  
  link_0.addEventListener(MouseEvent.CLICK, roseindia);
  link_1.addEventListener(MouseEvent.CLICK, Flex);
  link_2.addEventListener(MouseEvent.CLICK, Ant);
  link_3.addEventListener(MouseEvent.CLICK, Core_Java);
  link_4.addEventListener(MouseEvent.CLICK, Mysql);
  link_5.addEventListener(MouseEvent.CLICK, J2EE);
  link_6.addEventListener(MouseEvent.CLICK, Ajax);
  link_7.addEventListener(MouseEvent.CLICK, Dojo);
  link_8.addEventListener(MouseEvent.CLICK, Spring);
  link_9.addEventListener(MouseEvent.CLICK, JSF);
  link_10.addEventListener(MouseEvent.CLICK, Combo_Box);
  
  }

<!-- void function vanish vanishes all the link buttons 
  on the application background
-->
  public function vanish():void{
  link_0.visible = false;
  link_1.visible = false;
  link_2.visible = false;
  link_3.visible = false;
  link_4.visible = false;
  link_5.visible = false;
  link_6.visible = false;
  link_7.visible = false;
  link_8.visible = false;
  link_9.visible = false;
  link_10.visible = false;
  }


</mx:Script>

  
  
<!-- 
  <mx:Style>, a cascading style sheet component 
  used for setting styles of flex components 
-->  
  
<mx:Style>
  .baadshah {color : #3399FF}
 Text {font-size : 12pt}
 Text {fontStyle : bold}
 TextArea {color : #330099}
 TextArea {font-size : 12pt}
 LinkButton {color : #660066}
</mx:Style>
  

<!-- flex panel control -->  
<mx:Panel 
  title = 'Roseindia panel background
  width = '100%' height = '100%'
  color = '#660000'
>
  
  <!-- flexx combo box control -->
  <mx:ComboBox 
  mouseOver = 'clickEventListener()'  
  valueCommit= 'clearData()
  id = 'combo
  
  change = 'Item_detail(event)'>
  <mx:String>Combo Box</mx:String>
  <mx:String></mx:String>
  <mx:String>Roseindia</mx:String>
  <mx:String>Flex</mx:String>
  <mx:String>Ant</mx:String>
  <mx:String>Core Java</mx:String>
  <mx:String>Mysql</mx:String>
  <mx:String>J2EE</mx:String>
  <mx:String>Ajax</mx:String>
  <mx:String>Dojo</mx:String>
  <mx:String>Spring</mx:String>
  <mx:String>JSF</mx:String>
  
  
  </mx:ComboBox>
  
  
  <mx:ControlBar horizontalAlign = 'center'>
  <mx:Text text = '{combo.selectedItem}' /
  </mx:ControlBar>
  
  <mx:TextArea
  id = 'txt
  styleName = 'baadshah'
  width = '60%' height = '40%'
  color = '#330000'  
  />
  
  
<mx:HBox styleName = 'baadshah' >
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_0
  label = 'Roseindia' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_1
  label = 'Flex' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_2
  label = 'Ant' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_3
  label = 'Core Java' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_4
  label = 'Mysql' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_5
  label = 'J2EE' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_6
  label = 'Ajax' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_7
  label = 'Dojo' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_8
  label = 'Spring' visible = 'false'/> 
  <mx:LinkButton 
  id = 'link_9
  label = 'JSF' visible = 'false'/> 
  </mx:VBox>
  <mx:VBox>
  <mx:LinkButton 
  id = 'link_10
  label = 'Combo Box
  visible = 'false'
  mouseOver = 'Dating(event)'
  /> 
  </mx:VBox>
</mx:HBox>
  <mx:ControlBar horizontalAlign = 'center'>
  <mx:Button 
  label = 'vanish
  click = 'vanish()'
  color = '#FF00FF'  
  />
  </mx:ControlBar>
  
</mx:Panel>
</mx:Application>

 

oksoo.swf



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Download the code

 

 

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: May 23, 2009

Ask Questions?    Discuss: Flex combobox selecteditem  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com