Exploring Flex capabilities and resources

Flex Components and Classes, CSS Complete list

http://www.loscavio.com/downloads/blog/flex3_css_list/flex3_css_list.htm

Accordion, Alert, AlignStyles, AnchorStyles, Application, ApplicationControlBar, BarColorStyle, BorderStyles, Box, BoxDivider, Button, ButtonBar, CalendarLayout, ColorPicker, ComboBase, ComboBox, Container, CursorManager, DataGrid, DataGridColumn, DateChooser, DateField, DividedBox, DragManager, FillStyles, FocusStyles, Form, FormHeading, FormItem, GapStyles, Grid, GridRow, HRule, HScrollBar, HSlider, IconColorStyles, Label, LayoutContainer, LeadingStyle, LinkBar, LinkButton, ListBase, ListBaseContentHolder, ListItemRenderer, Menu, MenuBar, MenuItemRenderer, ModalTransparencyStyles, NumericStepper, PaddingStyles, Panel, PopUpButton, PopUpMenuButton, ProgressBar, SWFLoader, ScrollBar, ScrollControlBase, SelectedFillColorsStyle, SkinStyles, Slider, TabBar, TabNavigator, TextArea, TextInput, TextStyles, Tile, TileListItemRenderer, TitleWindow, ToggleButtonBar, ToolBar,Tree ,TreeItemRenderer, UIComponent, VRule, VScrollBar, VSlider, ViewStack, WatchPanel

How easy it is to skin a button in Flex.

While my example will work just as easy in Flex 2 as Flex 3, there is an easier way.  Flex Builder 3 gives us the ability to visually style and skin Flex components.  Flex Builder 3 includes a CSS editor with a design view which allows you to see your styles and skins as you edit them.Most object-oriented design patterns keep the design logic separate from behavioral functionality. Because Adobe ActionScript™ is an object-oriented language, it only makes sense to remain consistent with these object-oriented programming (OOP) conventions.

The benefits of doing so include flexibility, keeping maintenance of the application easy as it grows, code reuse, and better performance.

http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Flex 3 Component Explorer

If  you are new to Flex or if you are just curious about the capabilities of Flex, the Flex 3 Component Explorer is a great place to learn by example.   Click on a component in the list, see a working sample on the right with the code below it.

http://examples.adobe.com/flex3/componentexplorer/explorer.html

Tour de Flex is a desktop application for exploring Flex capabilities and resources, including the core Flex components, Adobe AIR, data integration, and a variety of third-party components, effects, skins, and more.

http://www.adobe.com/devnet/flex/tourdeflex/web/#

Flex Charting Explorer – Quietly Scheming

http://demo.quietlyscheming.com/ChartSampler/app.html

Scrolling Flex Charts

http://www.connectedpixel.com/blog/scrollingcharts

http://www.iwobanas.com/2009/07/scrolling-and-zooming-chart-with-chartscroller/

http://www.fusioncharts.com/gallery/Category.asp?Scroll

Charts, however, do not have scroll-bars. Charts with too much data mast have solution for scrolling and changing number of showing data

Flex Chart Range Selector – Google Finance’s

http://www.stretchmedia.ca/code_examples/chart_range_selection/main.html

Flex  Charts zoom / range selector

demo: http://shemesh.co.nr/Charts_Range_Selector_2/

source: http://shemesh.co.nr/Charts_Range_Selector_2/srcview/index.html

MultiScaleImage: Flex Deep Zoom Component

Official home page

Introducing the OpenZoom SDK This stuff is really old and is only kept around here for archival purposes. Get the latest news and the first public release of the OpenZoom SDK in the official announcement.

demo: http://gasi.ch/examples/2008/12/08/flex-multiscaleimage-component/transformers/

source: http://gasi.ch/examples/2008/12/08/flex-multiscaleimage-component/source/

Flex Effects explorer

demo: http://www.efflex.org/EfflexExplorer.html

source: http://code.google.com/p/efflex/

E4X

The ECMAScript for XML (E4X) specification defines a set of classes and functionality for working with XML data. E4X makes it easy to utilize XML structured data and reduce code complexity as well as create less coupling between code and external data.

http://www.jamesward.com/census/

Fxspy Firebugfor flex

Kind of what Firebug does for HTML/Ajax applications but for Flex 2.0/3.0 applications.

demo: http://www.mieuxcoder.com/data/2007/12/FlexSpy-1.2/dashboard.html

source: http://code.google.com/p/fxspy/

Follow these steps to setup Flex-Spy in your Flex 3.0 application:

- In Flex Builder, open the Properties window of your project (Project menu > Properties)
- On the left side of the Properties window, select Flex Library Build Path.
- On the right side of the Properties window, select the Library path tab.
- Click the Add SWC… button
- Select the flexspy.swc file that you downloaded (from the Downloads section) and click OK.
- Add a button somewhere in your Flex application to show the Flex-Spy window.FlexLib component list

This wiki page contains a list of all components contained in the current build of flexlib. After adding new components to FlexLib, you should edit this page and include a short summary of the component and the links to the ASDoc documentation and the sample SWF file, if available. Include the names of contributors for each component….

Component list: http://code.google.com/p/flexlib/wiki/ComponentList

My recommendation:

SuperTabNavigator

The SuperTabNavigator is an extension of the TabNavigator navigation container. It functions exactly like the TabNavigator, but adds some functionality. Added functionality includes: 1. Draggable, re-orderable tabs, 2. Closable tabs, 3. Scrolling tab bar if too many tabs are open, 4. Drop-down list of tabs

Documentation | Example | Contributor: Doug McCune

TreeGrid

A control that combines the functionality of the Tree component and the DataGrid component.

Documentation | Example | Contributor: Yaniv De Ridder

DockableFlex

DockableFlex is an open source component library based on Adobe Flex 3.
It provides basic dock support for the Panel Component.

Download The source code is available on Google Code
The swc library can also be found at the Download page.

Documents Click here to view the Class Reference of DockableFlex.

http://www.goozo.net/dockableflex.php

FlexWheel Component Page

Flexwheel is written in Adobe ActionScript 3.0 and available in flex 2.0.1 and 3.0 versions for download.

View sample here

License The flex wheel is Freeware. It is free for use in commercial and non commercial sites,
providing you meet the terms in the eula (Basically, watermark must appear).
Sources are not included and a small watermark appears in the bottom left corner of the component.
Documentation included in the form of asDocs and an online tutorial.
YOU MUST Read the whole EULA before downloading and using!