How easy is it to skin a Flex application? As an experiment, Eylon Stroh[On Reflexion] tried to create something that looks like the Napkin L&F for a simple Flex app.

The application is a slightly modified version of the DataGrid sample from the Flex 2 Component Explorer. Here are the “before” and “after” screenshots (click on the screenshot to see the app):

Before:

After:

So, was it easy? He has break it down into three separate stages. The first stage involves adding CSS styles and graphical skins to the app; the second stage involves using programmatic skins; the third stage deals with subclassing Flex framework classes in order to achieve fine-grained control of the look-and-feel.

Great Work!!!

[Read More | Demo]

There are many different ways to validate forms in Flex. Which can make it hard to know what is the best method to use. Thru trial and error, this is the best and simplest solution for validating forms in most all situations.

[ Read More |  Demo ]

Check out a quickly-developed Flex application that manages multiple file uploads and processes them through a PHP file (right-click in the application to view the source). Or, you can check out an explanation and strategy we used for the PHP.

[ Read More | Demo ]

I spend a lot of time on flexcoders helping people learn how to write custom extensions to the flex charting components. And while most of the time people are able to reach their goal, there is a steep learning curve they have to ascend first. So last week, in the middle of writing a typical reponse to a charting question, I had a thought on how we might make simple charting extensions easier in the next release.

Interested? Read about it, and see some examples, over here.

One of the biggeset pain points of FLEX/Flash (as i see it) is its inability to render HTML in its totality. FLEX supports a few HTML Tags, but not all.

The trick is very simple. Its just a clever use of the External API interface that lets the Actionscript inside a Flash movie, talk to the Javascript inside the html (in which it is embedded). In this case, the approach is to let the javascript position an IFrame on top of a specific area of your Flex application to provide a container for the HTML content which will then appear embedded in the application.

The IFrame component extends Canvas and is used like any other Flex container. Behind the scenes, it acts as a proxy for the actual HTML IFrame. For example, when the IFrame component is resized or moved it automatically asks the HTML document to resize/move the actual IFrame. You can easily find the ExternalInterface calls in IFrame.mxml and the corresponding JavaScript functions in iFrameDemo.html (renamed to iFrameDemohtml.mxml for reading purposes).

But what kind of surprised me was the amazing perfomance of the History Managemet API. While still within the FLEX Application, you can use the browser back button to navigate to earlier pages… really NEAT !!!

[ Read More | Demo ]

SpringGraph is a Adobe Flex 2.0 component that displays a set of items that are linked to each other. The component calculates the layout for the items using an organic-looking annealing algorithm based on the size and links of each item, and draws lines to represent the links. The component allows the user to drag and/or interact with individual items. Data can be provided in XML or as Actionscript objects. The Roamer component is an extension to SpringGraph for browsing large graphs of 10,000 items.

Here are some sample applications that use SpringGraph.

 Spring Graph Component Tester

Molecular Viewer 

Amazon Roamer

 [Read More | Download Source Sode ]

It’s a good example of how to use the flash display object and graphics API to build rich content in flex, as well as how to take advantage of some of the core architectural concepts of the framwork and MXML to build more advanced components.

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.

The sample is broken into two pieces. The first, the TiltingPane component, takes any content and wraps it in a faux ‘3d’ effect, allowing you to tilt it from side to side. The second, the DisplayShelf component, uses the TiltingPane component to render a list of items along a virtual shelf, with the selected item pulled out for display.

This sample was the centerpiece from my MAX 2006 presentation, “Flex under the hood: A tour through the Flex architecture.”

Check out the demo.Its really Cool …

[ Read More  |  Demo ]

Here is an example of how you can use an item renderer in a mx:DataGrid to create a basic Gantt Chart. Source Code available for this example.

[ Read More | Demo ]

Cynergy Systems have been developing RIA solutions for some of today’s most progressive companies. One of their best product is Online Mortgage Broker Information Management System(MortgEdge). MortgEdge was a model and design engagement to build a suite of software products that would dynamically synergize a mortage, it branches, loan officers, employees, borrowers and referrals to dramatically increase its clients service .End users enjoy this application with dramatically improved performance and a rich user interface using traditional rich controls such as treeviews, data grids, tab controls, etc.

This is reaalllllly a cool stuff.

[Demo]

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.

[ Demo by Nihit | Download the Extension ]