Dec 01 2008

Flex Developer’s Toolbox : Free Components, Themes and Tutorials

Advertisement

One important goal of flex components, is to help the community see how you can merge the best of what flex gives you (productivity, development process, consistent component model) with the best of what people have been doing in flash for years (rich, highly interactive, fluid, etc).

Adobe Flex is the tool of choice for many web developers when it comes to building Rich Internet Applications (RIAs). Developers are picking up Flex with great speed. One of the reasons for this is that Flex programming is relatively easy to learn if you’re already familiar with XHTML.

Flex applications can be developed to run on user’s desktop. Now you can develop and launch an application that runs in a web browser and as a desktop application. Deploying an application to a user’s desktop with Adobe AIR is easy, users just need to install the AIR runtime and your RIA on their machine.

In today’s post we provide you with some essential Flex resources – Flex components, Flex Skins & Themes, Online Flex Apps, Flex Frameworks and Flex Tutorials.

What is FLEX?

1. Tour de Flex

Adobe Flex Resources


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

Tour de Flex has three primary purposes:

  • Provide non-Flex developers with a good overview of what is possible in Flex in a “look and see” environment
  • Provide Flex developers with an illustrated reference tool
  • Provide commercial and non-commercial Flex developers a place to showcase their work
2. Flex

Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems.

FLEX Componenets

3. AlivePDF

Adobe Flex Resources


AlivePDF is an open-source ActionScript 3 (Flash, Flex, AIR) PDF generation library. It allows you to generate PDF’s on the client-side. You can use AlivePDF with Flash, Flex and Adobe AIR applications. Some sample codes can be found here.

  • You can download files here.
  • Check out the demos here.
  • You will find a nice tutorial here.
4. Deft-fully using Dojo and Flex

Adobe Flex Resources


Deft “focuses on ActionScript components created in support of the various projects within the Dojo Toolkit (mostly for DojoX). Deft source files are well organized based in part on the organization of other Dojo Toolkit projects, as well as the package structure required by the Flex compiler. Most Flex applications are based on the Flex AS3 Application class, which forces you to write at least one “controlling” MXML file in order compile your code. Instead of this, Deft components inherit primarily from the Sprite class — which allows you to write pure ActionScript code.”

  • You can download Dojo nightly build here.
  • Let’s look at one of the latest projects in Deft here.
5. Fisheye Component

Adobe Flex Resources


“The Fisheye component is based around the concept of itemRenderer factories, just like the flex list and charting components. The goal is to use composition to separate behavior from content, so you can reuse the basic fisheye effect across many different applications and uses.”

6. FlexBook

Adobe Flex Resources


FlexBook can act as a container, allowing the developer to flip through its children components, FlexBook can be driven by a list of data and an itemRenderer, like a List control or DataGrid, FlexBook Supports a wide variety of configuration options. Play with some of them here, FlexBook supports full transparency on its pages.

7. DisplayShelf Component

Adobe Flex Resources


“The DisplayShelf component demonstrates using a number of flex and flash concepts to provide a rich, templatable control to display a faux-3d view of a list of items. Its behavior is similar to the CoverFlow visualization added to iTunes in version 7.”

8. DualSlider

Adobe Flex Resources


Allows you to scroll two thumbs together on a Slidebar using a scrollbar between both thumbs.

9. 3D Chart in Flex

Adobe Flex Resources


“3D Charts allow display of multiple attributes of a given data in the same graph. 2D charts are already available in Flex. With same data, a 3D graph can be displayed. The graph can be rotated around in 360 degrees by dragging mouse on the screen. Its perspective can also be increased/decreased by using Mouse Wheel.”

10. Adobe AutoComplete Input

Adobe Flex Resources


“The AutoComplete control is an enhanced TextInput control which pops up a list of suggestions to the user based on the characters entered. These suggestions are to be provided by setting the dataProvider property of the control.”

11. Adobe Docking ToolBar

Adobe Flex Resources


“The docking toolbar component collectively helps managing toolbars in an application. The toolbars can be docked to the top or bottom edges or kept floating within application area. The contents within a toolbar use a flow based layout approach.”

12. Social Graph Browser with Favicons

Adobe Flex Resources


A nice looking Flex application that visualizes the Social Graph API. This is a graph front end to the Google Social Graph API

Themes for skinning Flex Applications

13. BluePlastic Theme

Adobe Flex Resources


14. Dark Nite

Adobe Flex Resources


15. Flekscribble

Adobe Flex Resources


Flex Frameworks & Toolkits

16. ASTRA: ActionScript Toolkit for Rich Applications

Adobe Flex Resources


Yahoo! offers the ASTRA Flex components for use in your Adobe Flex 3 applications. These Flex components are designed to work like any other components for Flex with familiar properties, styles, and events. They’re fully documented, and each component comes with multiple examples that demonstrate its various uses. Components include: AutoCompleteManager, ColorPlaneAndSliderPicker, ColorSliderPicker, DropDownColorPicker, IPv4AddressInput, TimeInput and TimeStepper.

17. Degrafa

Adobe Flex Resources


Degrafa is currently developed to work in Flex 2 and 3. Degrafa is being used for a wide variety of purposes, ranging from rich user interfaces to intense graphics editing. Degrafa allows you to use MXML markup to draw shapes, make complex graphics, create skins and also includes advanced CSS support. Use Degrafa for:
Rich User Interfaces, Data Visualization, Mapping and Graphics Editing

18. Flexlib

“The FlexLib project is a community effort to create open source user interface components for Adobe Flex 2 and 3.”

Current components: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

Online Flex Applications

19. Adobe Photoshop Express

Adobe Flex Resources


Adobe released a Web-based version of Photoshop for editing pictures called Photoshop Express. It is in public beta and anyone can sign up.

20. Sprout

Adobe Flex Resources


Sprout is the quick and easy way for anyone to build, publish, and manage widgets, mini-sites, mashups, banners and more. Any size, any number of pages. Include video, audio, images and newsfeeds and choose from dozens of pre-built components and web services.

21. Acrobat.com

Adobe Flex Resources


Use Acrobat.com to create and share documents. “So people can now create documents with embedded Flash movies from YouTube, or developers can design entire new skins for electronic documents using Adobe’s Flex framework the same programming tool they use to create Web applications.”

Flex Tutorials

Like Flash, Flex creates SWF files that are rendered by Flash Player. However, Flex is primarily a developer’s tool and the way you develop Flex applications is entirely different than the way you develop Flash RIAs. All Flex development is based upon a framework that provides you with reusable and extendable UI components, data retrieval services, event handling functionality and much more.

22. An Absolute Beginner’s Tutorial On Flex 3

Adobe Flex Resources


“This article barely skimmed the surface of the Flex framework, although we did cover the basics of what the framework provides, and how MXML and ActionScript 3.0 work together. While this was a very gentle introduction to the concepts behind Flex, it should give you enough grounding in the concepts to go forth and experiment on your own.”

23. Getting Started

Adobe Flex Resources


A great resource of tutorials on how to get started with Flex.

24. Simple Flex Tutorial

Adobe Flex Resources


A simple blog reader in 23 lines of MXML code to use as a tutorial.

25. Customizing Flex Builder for Flash

A nice tutorial on how to make some modifications to Flex Builder to make it into a lean, mean, ActionScript machine. How to add a great snippets panel to Flex Builder and make it optimized for Flash.

Flex Resources

- Adobe Flex Developer Center
- Doug McCune
- Flex.org
- Alex Harui
- Flex Livedocs
- FlexCoders
About the Author

The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Homepage

Comments and Discussions
  • Joey Mucha, 01 December 2008

    Thanks for mentioning sprout in this flex application list. Feel free to ping us if you have any questions or comments. Follow us on twitter as well: @sproutbuilder

  • Brandon, 01 December 2008

    Thanks so much for passing these along – I’ve been looking forward to digging into Flex and can’t wait to get started.

  • insicdesigns, 01 December 2008

    I was part of a team before developing a quite large application using flex. and its an awesome experience and yes i use some of the tools that are listed here. Nice article.

  • Vic Cekvenich, 02 December 2008

    Papervsion for 3D, and you can take an online class at proj.com.

  • John Ramis, 02 December 2008

    Thanks for the info!

  • Keith, 02 December 2008

    This is a nice list of FLEX toolboxes. Unfortunately, not many users are utilising the power of FLEX capabilities; somewhat it may seem complicated to use. Unless there is a growing trend to introduce FLEX later into websites, it will probably take quite some time for users to adapt to this feature.

  • kenny, 03 December 2008

    Wow dude those are some super cool themes! Thanks for the info!

  • Rahul, 03 December 2008

    Wow this is just cool. I was looking for flex tutorials and components. Now a days Flex and Adobe AIR are the most happening thing on the internet.

  • robin, 04 December 2008

    Wow dude those are some super cool themes!!!

  • Ravichandran J, 04 December 2008

    Hi,

    Thanks for your information. I am loking for books which provides information on Flex and 3d. Do any book covers on CoverFlow, Papervisio3d and other popular 3d gallery.

    Please let me know.

    Thanks and Regards,
    Ravichandran J

    • Sopna, 07 October 2010

      mustava

  • Steven Frechette, 05 December 2008

    Thanks for the info man!!

  • Chetan Sachdev, 05 December 2008

    Cool links :)

    Thanks

  • website design, 05 December 2008

    Impressive and useful… Thanks for share =)

  • Sanny Rizky Jatnika, 05 December 2008

    We’re Indonesian Designer love this stuff..nice job

  • Erik, 22 December 2008

    This report will be interesting. I’m signing up for the report…

  • Eduardo, 17 October 2009

    Thank’s for suggestions. I’m from Brazil. Great post.

  • umirbek, 28 October 2009

    Hi, thanks for you imformation.

  • soovay, 06 November 2009

    I am chinese! Your site is wealthy

  • Ashish Roy, 08 November 2009

    Thanks. That is a lot of good information about Flex.

  • Rajiv Totlani, 04 January 2010

    I think you missed out one very important website for Flex Components. They are growing fast and have a lot of nice stuff…http://www.flexdownloads.com

  • asep, 13 January 2010

    Nice article. I like it.thanks for your information,this is very usefull….

  • Rajiv Totlani, 04 March 2010

    Flex components website – Flexdownloads.com
    Has nice free components and also many others for under $5

  • Ayubi, 03 October 2010

    Nice post!

    I have question, when I download the source of FlexBook, I couldn’t find any library… Where I can get that library?

    Thanks!

  • carias patrick, 11 November 2010

    You can find a very powerful and very customizable FLEX calendar component here : http://www.flex-component.com
    You can also submit your own components there. Have a look !

  • Tahir Alvi, 26 November 2010

    Wonderful and great work.

    Thanks .

  • kong, 23 December 2010

    very usefull..thank you very much

  • John, 10 January 2011

    Our company is seeking socially motivated programmers and web designers to join our efforts. We are a small start-up committed to supporting the nonprofit sector by providing quality economical alternatives for data management.

  • praadnya, 20 January 2011

    Thanks for creting flex information.

  • Ashok gaur, 05 September 2011

    Hi all,

    I am loking for books which provides information on Flex developer and 3d.
    Please let me know.

    Thanks and Regards,
    Ashok Gaur

  • keyur, 29 March 2012

    hi all,
    i am looking for book and any kind of tutorials for flex design ..please give me information related to flex ..
    thnks

  • Gary Barnes, 31 July 2012

    Please help, I’m new to Flex and I can’t work out how to deploy the files for the DisplayShelf Component. I want to use it as a custom component in an application if possible.

  • james, 12 October 2012

    very nice article this is

  • Narsappa, 20 February 2013

    how to get css styles which has already developed for Flex Components

search form
 
image description image description