JaiswalTraining

Get the online training        


Get Best Tutorial on all major programing language


Corejava Servlet Jsp  Php  Hibernate  Ajax Web Service   Ejb2.1 Ejb3.0 Struts Struts2  JPA Spring Ibatis   JSF    JSF2.0  CoreJavaDesignPattern    Jquery  Flex J2EE-Design-Patterns  Jboss7  Maven  Contact Me                                                                                                                                                                        
            IGNOU SMU PTU Project                                           Training                                                                                                                              
              

Contact Us  0091- 9210721663         jaiswaltraining@gmail.com




Corejava
Servlet
Jsp
Php
Hibernate
Ajax
Web Service
Ejb2.1
Ejb3.0
Struts  
Struts2
JPA
Spring
Ibatis
JSF
JSF2.0
CoreJavaDesignPattern
Jquery
Flex
J2EE-Design-Patterns
Jboss7
Maven







Working With List-Based Controls

 List-based Controls
  • List-based components are a powerful part of your RIA arsenal,
  • Lists handle the bulk of the work involved with receiving and displaying data
  • A list might be a vertical, scrollable list of text labels
    from which the user can select.
Type of List
  • Horizontal lists
    • Horizontal lists are identical to standard lists except that they scroll horizontally
      rather than vertically.
    •  Horizontal lists are typically useful for scrolling icons and/or
      images (thumbnails), though you could also use a horizontal list for simple text.
  • Combo boxes
    • Combo boxes are lists that collapse to a single line when not activated.
    •  These types of controls are often referred to by users as drop-down menus,
    • They allow the user to select from a vertically scrolling list of options when in an
      expanded state.
    •  Once a value has been selected, the control returns to the collapsed state.
  • Tile lists
    • These are scrollable lists in which the contents are arranged in a grid.
    •  These are useful when you want to display contents in a grid, but you need the grid to scroll.
  • Data grids
    • Data grids are vertically scrolling, multicolumn lists.
    •  Data grids are good for displaying data that consists of records of multiple values
      that a user might need to see at the same time.
  • Tree
    • Tree controls are hierarchical types of lists.
    •  They are very similar to standard lists because they vertically scroll.
Data Models
  • Flex controls use model-view-controller,
  • All list-based controls utilize data models. 
  • The data models are called data providers.
  • These are  independent objects which you can associate with a control. 
  • The control then uses that object’s data to render its view
  • Data providers always implement the mx.collections.ICollectonView interface.
Creating a Collection Object
  • There are two basic ways to create collections:
    • Using ActionScript
      • The ActionScript solution involves creating a new collection type,
        typically with the constructor.
      •  The following ActionScript example creates a new ArrayCollection
        object that wraps an array
var collection:ICollectionView = new ArrayCollection(["Ram""Shyam""Mohan""Rohan"]);

    • Using MXML.
      • We can create the same collections using MXML
      • The following example creates an ArrayCollection object using MXML:


        <mx:ArrayCollection>
            <mx:Array>
                <mx:String>Ram</mx:String>
                <mx:String>Shyam</mx:String>
                <mx:String>Mohan</mx:String>
                <mx:String>Rohan</mx:String>
            </mx:Array>
        </mx:ArrayCollection>

Setting the Data Provider
  • You can use any sort of collection (as long as it implements ICollectionView) with
    any sort of list-based control, allowing for versatile data structures. 
  • All you have to do is set the dataProvider property of the list-based control to be
    equal to the collection. 
  • For example, the following uses an ArrayCollection to populate a list:
var collection:ICollectionView = new ArrayCollection(["Ram""Shyam""Mohan""Rohan"]);
list.dataProvider = collection;

List
  • The List is a lightweight component for displaying a listing of information.
  •  It is a single-column approach to presenting information.
Example:-A List component used to display names
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:List id="country">
    <mx:String>India</mx:String>
    <mx:String>USA</mx:String>
    <mx:String>UAE</mx:String>
  </mx:List>
</mx:Application>


Output:-


Download code

Example:-Uses binding to link dataProvider to ArrayCollection

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

  <mx:ArrayCollection id="countryname">  
    <mx:Object label="India"/>
    <mx:Object label="USA"/>
    <mx:Object label="UAE"/>
  </mx:ArrayCollection>
  <mx:List id="country" dataProvider="{countryname}"/>  
</mx:Application>

Output:-

Download Code

Example:-Populating list using ActionScript
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var ac:ArrayCollection  = new ArrayCollection([
                                     {label:"Mohan"},
                                     {label:"Sohan"},
                                     {label:"Rahul"
                                     ] ) ;
  ]]>
  </mx:Script>
  <mx:List id="student" dataProvider="{ac}"/>
</mx:Application>

Output:-

Download code

HorizontalList
  • The default layout orientation for a List component is vertical 
  • The HorizontalList  is identical to the List, except it presents a horizontal layout.
Example:- Switching from List to HorizontalList
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
  <![CDATA[
  import mx.collections.ArrayCollection;
  [Bindable]
  public var ac:ArrayCollection  = new ArrayCollection([
                                     {label:"Mohan"},
                                     {label:"Sohan"},
                                     {label:"Rahul"
                                     ] ) ;
  ]]>
  </mx:Script>
  <mx:HorizontalList id="student" dataProvider="{ac}"/>
</mx:Application>
Output:-


Download code

DataGrid
  • When you need to display tabular information such as the results of a database query.
  • The DataGrid component is often referred to as DG.
  • DataGrid offers features such as sortable  columns and user-interchangeable columns
  • The user can arrange the order of columns. 
  • It is simiar to the List component but includes multiple-column formatting and column headers
Example:- Creating a simple Data Grid

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:DataGrid id="dg" width="500" height="200" >
    <mx:Object name="mohan chaudhary" email="mohan@domain.com"/>
    <mx:Object name="sohan jaiswal" email="sohan@domain.com"/>    
    <mx:Object name="rohan awasthi" email="rohan@domain.com"/>    
  </mx:DataGrid>
</mx:Application>

Output:-

Download code

SPECIFYING COLUMN TITLES WITH DATAGRIDCOLUMN
  • Flex provides a tag called the DataGridColumn that works in conjunction with DataGrid.
  • You can use the DataGridColumn tag to control attributes such as these:
    • Column width
    • Column header or title
    • Word-wrapping within a column
    • Enabling inline editing
    • Instructions for handling mouse clicks in a column.
Example:-Using the DataGridColumn, each column  now has a specified title and width.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  public var myAC:ArrayCollection  = new ArrayCollection([
  {name:"mohan sinha", email:"mohan@domain.com"},
  {name:"sohan awasthi", email:"sohan@domain.com"},
  {name:"rohan dinkar",  email:"rohan@domain.com"
  ]);
 ]]>
</mx:Script>
<mx:DataGrid id="dg" width="500" height="150" dataProvider="{myAC}" >
  <mx:columns>
      <mx:DataGridColumn dataField="name" headerText="Contact Name" width="300" />
      <mx:DataGridColumn dataField="email" headerText="E-Mail" width="200"/>   
  </mx:columns>  
</mx:DataGrid>
</mx:Application>

Output:-
  • DataGrid reveals a sortable header row and resizable columns.
  • Click the column titles to sort a column.
  • Cclick and hold the divider line between the columns and move it left and right to
    resize them; finally, try clicking and holding a column title and dragging to change its position.


Download Code

List events
  •  Events that can be used to handle interaction with List-based components


Example:-DataGrid with event

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  import mx.events.ListEvent;
  import mx.controls.Alert;
  
  public var myAC:ArrayCollection  = new ArrayCollection([
  {name:"sohan sinha", email:"sohan@domain.com"},
  {name:"rohan jaiswal",  email:"rohan@domain.com"}]);
  
  public function handleClick(evt:ListEvent):void
  {
    Alert.show("You clicked on row:" + evt.rowIndex + " and col:" 
                evt.columnIndex + "." +
                "Which is for " + evt.currentTarget.selectedItem.name);
  }  
 ]]>
</mx:Script>

<mx:DataGrid id="dg" width="500" height="150" dataProvider="{myAC}"
 
itemClick="handleClick(event)">
  <mx:columns>
      <mx:DataGridColumn dataField="name" headerText="Contact Name" width="300" />
      <mx:DataGridColumn dataField="email" headerText="E-Mail" width="200"/>   
  </mx:columns>  
</mx:DataGrid>

</mx:Application>  

Output:-
  • A function displaying details about the row on which a mouse click occurred


  • When we click on the record it shows the row and column number.
  • As shown below.

 Download code

Using Tree Controls
  • Like data grids, tree controls inherit from standard lists
  • In the case of trees, the specialized behavior is that trees can render hierarchical
    data providers.
  • Tree controls allow you to render elements that themselves have
    nested child elements.
  •  These sorts of data providers are called hierarchical data providers. 
INVOKING A TREE
  • Creating a Tree is simple once you have the data that drives it.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:XMLListCollection id="myXMLCollection">
    <mx:XMLList id="myXML">
      <friends label="Friends">            
        <friend label="Mohan"/>
        <friend label="Raju"/>
        <friend label="Geeta"/>
      </friends>
      <families label="Family">                          
        <family label="Wasim"/>
        <family label="Javed"/>
      </families>
    </mx:XMLList>
  </mx:XMLListCollection>
  <mx:Tree dataProvider="{myXMLCollection}" labelField="@label"  
       width="300" height="200"/>
</mx:Application>
Output:
  • Top-level nodes turn into top-level folders
  • <mx:Tree dataProvider="{myXMLCollection}" labelField="@label"  
           width="300" height="200"/>
    • This code tells Tree to look for XML attribute called label to use for display

Downlaod code

AdvancedDataGrid
  •  ADG combines the power of the DataGrid and a Tree.
Features
  • Multicolumn sorting
    • The DataGrid only allows single-column sorting. 
    • In the ADG, you can sort an unlimited number of columns.
  • Styling of rows and columns
    • In DataGrid, you can only style the component as a whole.
  • Column groups—This feature allows you to link multiple columns under a single header.
  • Expanded item renderer capabilities
    • With the ADG, item renderers can span an entire row (versus a single cell), and a single cell
    • can employ multiple item renderers (the DataGrid allows only one).
INVOKING AN ADVANCEDDATAGRID

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
 <![CDATA[
  import mx.collections.ArrayCollection;
  public var myAC:ArrayCollection  = new ArrayCollection([
  {category:"Fruits", food:"Apple"},
  {category:"Fruits", food:"Avocado"},
  {category:"Vegetables",  food:"Carrot"}]);
 ]]>
</mx:Script>
<mx:AdvancedDataGrid id="adg" width="500" dataProvider="{myAC}" >
 <mx:columns>
  <mx:AdvancedDataGridColumn dataField="category" headerText="Category" width="300" />
  <mx:AdvancedDataGridColumn dataField="food" headerText="Food" width="200"/>   
 </mx:columns>  
</mx:AdvancedDataGrid>
</mx:Application>

Output:-
  • AdvancedDataGrid looks similar to a DataGrid, with one noticeable difference:
    You can sort on multiple columns at the same time.

Download code

Displaying HIERARCHICAL DATA

  • Data is created in the form of an XMLList.
  • By default, the ADG doesn’t know that your data has structure to it—even when
    it is XML.
  •  You need to use a middleman, the HierarchicalData component, to
    convert the XMLList for you
  • You configure the HierarchicalData component to bind to the  XMLList and
    the AdvancedData Grid in turn to bind to the HierarchicalData.

Example:-
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:XMLList id="myXML">
  <friends name="Friends">
    <friend name="rohan kapur" email="rohan@domain.com"/>
    <friend name="Mohan sinha" email="mohan@domain.com"/>
    <friend name="sohan sinha" email="sohan@domain.com"/>
  </friends>
  <families name="Family">
    <family name="sita jaiswal" email="sita@domain.com"/>
    <family name="gita singh" email="gita@domain.com"/>
  </families>
</mx:XMLList>

<mx:HierarchicalData source="{myXML}" id="myHD"/>

<mx:AdvancedDataGrid dataProvider="{myHD}" width="300">
  <mx:columns>
      <mx:AdvancedDataGridColumn dataField="@name" headerText="Contacts"/>  
      <mx:AdvancedDataGridColumn dataField="@email" headerText="Email"/>  
  </mx:columns>  
</mx:AdvancedDataGrid>

</mx:Application>  
Output:-
  • AdvancedDataGrid being used to display tabular and hierarchical data

Download Code