Welcome to the Adobe Flex® 4 SDK beta release on Adobe Labs (previously code named Gumbo). This release marks an expanded role for the Flex framework, now supporting both developers creating Flex applications and designers using Adobe® Flash® Catalyst™ to create interaction design.
You can build great Flex applications using only the Flex 4 SDK and an editor of your choice, or you can use the beta version of Adobe Flash Builder™ 4 (previously named Flex Builder) which includes everything in the Flex 4 SDK within it. This beta release aligns with the public beta releases of both Flash Builder and Flash Catalyst.
There are 3 main themes for this release:
- Design in Mind: providing a framework for continuous collaboration between designer and developer
- Developer Productivity: improving compiler performance and adding productivity enhancements to language features
- Framework Evolution: taking advantage of new Flash Player capabilities and adding features required by common use-cases Continue reading ‘Adobe Flex 4 SDK’
When developing applications with the DataGrid component, you may want to use a custom font so the data grid fits with your overall design. YOu change fonts by setting a custom text format using a TextFormat object, and the setStyle() or setRendererStyle() methods. If you want to set the text format for a DataGrid component’s header, use the setStyle() method along with the headerTextFormat style. If you want to set the text format for each row in the DataGrid component, use the setRendererStyle() method along with the textFormat style.
Example
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
var comicTextFormat:TextFormat = new TextFormat();
comicTextFormat.font = "Comic Sans MS";
var comicBoldTextFormat:TextFormat = new TextFormat(comicTextFormat.font);
comicBoldTextFormat.bold = true;
var dp:DataProvider = new DataProvider();
dp.addItem({columnA:"Row 1A", columnB:"Row 1B"});
dp.addItem({columnA:"Row 2A", columnB:"Row 2B"});
dp.addItem({columnA:"Row 3A", columnB:"Row 3B"});
var colA:DataGridColumn = new DataGridColumn("columnA");
colA.headerText = "Column A:";
var colB:DataGridColumn = new DataGridColumn("columnB");
colB.headerText = "Column B:";
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.setStyle("headerTextFormat", comicBoldTextFormat);
myDataGrid.setRendererStyle("textFormat", comicTextFormat);
myDataGrid.addColumn(colA);
myDataGrid.addColumn(colB);
myDataGrid.dataProvider = dp;
myDataGrid.width = 200;
myDataGrid.rowCount = myDataGrid.length;
myDataGrid.move(10, 10);
addChild(myDataGrid);
Result
To download the source files for this example, click here.
The following quick start demonstrates how to customize data grid columns, sort data grid columns numerically, format numbers in data grid columns using a custom label function, and how to specify a custom text format for both data grid headers and data grid rows.
CREATING DATA GRID COLUMNS USING THE DATAGRIDCOLUMN OBJECT
There are two main ways to add columns to a DataGrid instance:
- Pass a string to the data grid’s
addColumn() or addColumnAt() method.
- Pass a DataGridColumn object (fl.controls.dataGridClasses.DataGridColumn) to the data grid’s
addColumn() or addColumnAt() method.
By using the DataGridColumn object, you can control additional attributes of the data grid column, such as the following: Continue reading ‘Customizing and sorting the DataGrid component’
The following example shows how you can set the corner radius on a Halo MenuBar control in Flex 4 by creating a custom skin and setting the radiusX and radiusY properties.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Halo_MenuBar_cornerRadius_test"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<mx:ApplicationControlBar width="100%" cornerRadius="0">
<mx:Form styleName="plain">
<mx:FormItem labal="cornerRadius:">
<s:HSlider id="slider"
minimum="0"
maximum="{menuBar.height/2}"
value="2" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar> Continue reading 'corner radius on a Halo MenuBar control in Flex 4'
