Adobe Flex 4.5 Combo and Dropdownlist

Differences between ComboBox and DropDownList


1)First difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control.
2) a user can edit the prompt area of the ComboBox control to enter a value that is not one of the predefined options; the values in the DropDownList cannot be edited.
3) However, because dataProvider is the DropDownList control’s default property, you do not have to specify a child tag of the tag, as the following example shows:
Code:

<s:application backgroundcolor="#528CDA" minheight="600" minwidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:verticallayout paddingleft="5" paddingtop="5">
</s:verticallayout></s:layout>

<fx:declarations>

</fx:declarations>

<s:label text="Spark ComboBox ">
<s:combobox id="mySparkCB" prompt="Select a Color" width="140">
<s:dataprovider>
<mx:arraylist>
<fx:string>Pink</fx:string>
<fx:string>Orange</fx:string>
<fx:string>Yellow</fx:string>
<fx:string>Red</fx:string>
<fx:string>Blue</fx:string>
<fx:string>Green</fx:string>
</mx:arraylist>
</s:dataprovider>
</s:combobox>
<s:label text="Spark DropDownList ">
<s:dropdownlist width="160">
<mx:arraycollection>
<fx:string>Atlanta</fx:string>
<fx:string>SpringFiled</fx:string>
<fx:string>Chicago</fx:string>
<fx:string>New York</fx:string>
<fx:string>California</fx:string>
</mx:arraycollection>
</s:dropdownlist>

</s:label></s:label></s:application>

Spark DataGrid Support for Copy selected cell

This article describes how to add support for copy  the Flex DataGrid component.  It enables one to copy the datagrid column from  applications, notably spreadsheet apps like Excel.

The implementation enables copying the selected cell value using Custom Itemrender. That itemrender is the label component.


Here is the code:


CopyDatgridCell.mxml

<?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 -->

<s:ArrayCollection id="userColl">

<fx:Object key="1000" name="Abrasive" price="100.11" call="false"/>

<s:DataItem key="1405" name="File" price="150.05" call="true"/>

<s:DataItem key="1606" name="Gouge" price="160.06" call="false"/>

<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>

<s:DataItem key="1708" name="Ink" price="180.08" call="false"/>

<s:DataItem key="1009" name="Jack" price="190.09" call="true"/> 

<s:DataItem key="1801" name="Brush" price="110.01" call="true"/>

<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>

<s:DataItem key="1303" name="Drill" price="130.03" call="true"/>

<s:DataItem key="1604" name="Epoxy" price="140.04" call="false"/>

</s:ArrayCollection>

</fx:Declarations>

<s:Label x="71" y="24" fontFamily="Verdana" fontSize="26"

text="Adobe Flex 4.5 Spark DataGrid single cell copy"/>

<s:DataGrid id="copyCellData" x="71" y="58" width="350" dataProvider="{userColl}"

selectionMode="singleCell"> 

<s:columns> 

<s:ArrayList>

<s:GridColumn dataField="key" headerText="KEY" itemRenderer="Renders.LabelRender" />

<s:GridColumn dataField="name" headerText="NAME" itemRenderer="Renders.LabelRender"/>

<s:GridColumn dataField="price" headerText="PRICE"/>

<s:GridColumn dataField="call" headerText="CALL"/>

</s:ArrayList>

</s:columns> 

</s:DataGrid> 

</s:Application>

Here is the code for  Itemrender:

LabelRender.mxml

<?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>

<mx:Label id="lblData" left="7" top="9"  selectable="true" />

</s:GridItemRenderer>

Spark Datagrid Itemrender

Here is the code for spark datagrid Itemrender


https://sites.google.com/site/adobeflex45/system/app/pages/admin/attachments/SparkDatagridItemrender.mxml
<?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 -->
<s:ArrayList id="tourdata">
<fx:Object sno="1" TourName="Atlanta to Nashville" price="237.50"></fx:Object>
<fx:Object sno="2" TourName="Miami to Tampa" price="197.87"></fx:Object>
<fx:Object sno="3" TourName="Chicago to california" price="637.87"></fx:Object>
<fx:Object sno="4" TourName="Las vegas to New york" price="777.54"></fx:Object>
</s:ArrayList>
</fx:Declarations>
<s:DataGrid x="45" y="52" width="451" height="161" dataProvider="{tourdata}"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="sno" headerText="S.No"></s:GridColumn>
<s:GridColumn dataField="TourName" headerText="Tour Name"></s:GridColumn>
<s:GridColumn dataField="price" headerText="Price" itemRenderer="Renders.PriceRender"></s:GridColumn>

</s:ArrayList>
</s:columns>


</s:DataGrid>
</s:Application>

Itemrender:

<?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">

<!--delete script section not required-->

<!--<fx:Script>

<![CDATA[

override public function prepare(hasBeenRecycled:Boolean):void {

lblData.text = data[column.dataField]

}

]]>

</fx:Script>-->

<fx:Declarations>

<s:CurrencyFormatter id="priceFormatter" useCurrencySymbol="true"/>

</fx:Declarations>

<s:layout>

<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingRight="7"/>

</s:layout>

<s:Label id="lblprice"  text="{priceFormatter.format(data.price)}"/>

</s:GridItemRenderer>
Spark Datagrid Itemrender

Spark Itemrender

Spark Label

Simple Hello World Program in Adobe Flex 4.5

HELLO FROM ADOBE FLEX 4.5

HERE IS THE CODE

<?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>

<s:Label fontFamily="Verdana" fontSize="50" horizontalCenter="0" top="25"

text="Hello from Adobe Flex 4.5 ! "/>

</s:Application>

Spark Datagrid

Adobe Flex 4.5 has some really exciting new things in it. Among them my favorite is the new Spark DataGrid component.

The Spark DataGrid control provides the following features:

• Interactive column width resizing
• Control of column visibility
• Cell and row selection
• Single item and multiple item selection modes
• Customizable column headers
• Cell editing
• Column sorting

  

  Adobe Flex 4.5 Spark Datagrid
  Here is the Code for Spark Datagrid
  

  
  

  <?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">

  <s:layout> 

  <s:VerticalLayout/> 

  </s:layout> 

  <fx:Declarations>

  <!-- Place non-visual elements (e.g., services, value objects) here -->

  <s:ArrayCollection id="userColl"> 

  <fx:Object  SNO="1" USERNAME="FLEX" EMAIL="flex@gmail.com"/> 

  <fx:Object  SNO="2" USERNAME="PHOTO SHOP" EMAIL="photoshop@gmail.com"/>

  <fx:Object  SNO="3" USERNAME="CSS" EMAIL="css@gmail.com"/>

  <fx:Object  SNO="4" USERNAME="JAVA" EMAIL="java@gmail.com"/>

  <fx:Object  SNO="5" USERNAME="PHP" EMAIL="php@gmail.com"/>

  <fx:Object  SNO="6" USERNAME="COLD FUSION" EMAIL="coldfusion@gmail.com"/>

  </s:ArrayCollection> 

  </fx:Declarations>

  <s:Label width="441" height="42" fontFamily="Verdana" fontSize="26"

  text="Adobe Flex 4.5 Spark DataGrid"/>

  <s:DataGrid id="mySparkDatagrid" width="350" dataProvider="{userColl}"> 

  <s:columns> 

  <s:ArrayList>

  <s:GridColumn  dataField="SNO" />

  <s:GridColumn dataField="USERNAME"/>

  <s:GridColumn dataField="EMAIL"/>

  </s:ArrayList>

  </s:columns> 

  </s:DataGrid> 

  </s:Application>