Stretch Media
home services Solutions news about us Blog contact us

A Persistent/Interactive Tooltip in Flex

I came across a requirement at work a few weeks back which involved an "interactive" tooltip... We needed to provide a summary of information in the tooltip, but then provide a link button to a more detailed document.

I came up with the following example by creating some functionality around the DataGrid mouse movements to display a "tooltip" (in reality a Menu instance) at the mouse position. Rather than digging into the framework to try and extend the ToolTip class to make it "stick" when moused over, I realized we've got popup menu functionality like that already. Slap a custom menu item renderer in there, skin it, and you've got a mousable, interactive tooltip instance.

I could have gone the extra mile and created a custom DataGrid instance using this new functionality, but I'm lazy so I'm just going to post the instance I implemented and let you figure out how to implement it for yourself :-) The idea being that it could be just as easily implemented on any List based control, and even with a bit of work any component in the Flex framework. Just modify the renderer to fit the content you need!

Example Here

Source Here

MDI (windowing) Interface with Flex

I'm a bit behind the ball with this post after relocating to Austin Texas this past week, but better late than never.

I met Brian Holmes and Ben Clinkinbeard at the 360 Flex conference in Seattle back in August. After a lot of discussion over many beers at the Elephant and Castle at the hotel, we came up with the idea of collaborating together on a MDI interface for Flex. We'd all seen examples of the functionality but felt there was a real void in a robust (free) solution on that topic. So here we are a month later, and after many frustrating IM sessions in 3 different time zones we've released the first iteration of an open source solution.

I couldn't be happier with the way things have turned out, and am very much looking forward to expanding on this project, as well as starting others with these two guys. I'll leave the description of the project to Ben's post on the matter.

http://www.returnundefined.com/2007/09/announcing-flexmdi-robust-extensible-mdi-framework-for-adobe-flex/

Google Finance with Flex from Silvafug last night

So I gave a presentation at the Silvafug meeting at Adobe in San Jose last night on Flex Charting. I struggled on what to give the talk on up until about a week ago. I finally decided to continue with the basic range selection example I'd done a few months ago, and create a "Google Finance" app in Flex, with all (or almost all) the functionality that the Google app offers.

While the presentation was exciting and fun to do, I think my last minute prep, and the fact I haven't spoken in public for many many many years resulted in a less than stellar walk-through of the functionality involved. However, the experience and feedback gained from last night was HUGE. I realized how I can improve the presentation 1000% percent, and plan on doing so before I give my talk in Seattle at 360Flex on August 13th (at least that's the tentative date.

Today I'm posting the app for everyone to play around, but am holding off on posting the code until Seattle (I don't want to steal my own thunder). However, I fully intend to release both the code-base, and an associated swc file for everyone to use, and integrate their own data into this type of interface. Hopefully this might entice the fence-sitters to attend 360 in August if you're interested in this kind of stuff.

I will say that it's not complicated stuff... and everyone and anyone should be able to insert their own data, or adapt the UI to fit their own project needs.

So here's the app... (click the image to view)

Flex Chart Annotations... Source and Example

I've finally posted my Flex Charting Annotation sample and source code over on my personal blog... http://www.visualconcepts.ca/blog/

Chart Range Selector - Take Two

After the great feedback I've gotten from the previous post, I decided to add a tad bit more functionality... namely the ability to drag the upper and lower selected chart areas. Same link as before... just click and drag...

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

Flex Chart Range Selector - Google Finance'ish

So I noticed some posts re: this type of component on flexcoders the other day, and being that I was bored at work on this sunny Friday afternoon, decided to give it a whirl. Right click to view source inside app...

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



After I finished putting this together (in all of 45 minutes) I was as giddy as a little kid because it's just so damn COOL... Yeah, it doesn't have all the bell's and whistles that the graphing on Google Finance has, but still, can you imagine how long this effect would have taken to do in Flash?

Three words... "I love Flex"...

Have to give credit to Ely Greenfield (for his data generation function, and let's face it, for being The Man) as well as Doug McCune for his Dual Slider component (which is better than the one I did, which is why I used it here).

Flex TimeEntry Component

SM_TimeEntry is a custom Flex controls that allows a user to quickly and easily enter a valid time into your applications. It supports multiple styling options, text sizing, 12 and 24 hour format, and keyboard interaction too.

View Here

Chart Offset Calculator

I got sick of doing the calculations to determine the offset values for my ColumCharts so I put together this little app to do it for me. Thought others might find it useful as well.

View Calculator >>

Thanks to Ely Greenfield (www.quietlyscheming.com) for the inspiration and calculations, and to Ben Lucyk (www.esria.com) for the suggestions on improvement (sample chart and code).

Export to Excel with Flex 2.0 and ColdFusion

Hi,

I didn't really find a suitable solution for exporting to Excel after a bit of searching through forums and blogs, so I came up with the following. I wanted to achieve seamless "click to generate a report" from Flex and have the file option dialog popup in the browser allowing me to open or save. Here's what I came up with. While I don't see any issues with the solution, I realize it's a bit of a hack, and would appreciate any CF wizards letting me know if this is going to create problems.

From Flex, I'm calling a CFC function with my data being passed back as an array. The CFC takes the data and stores it to an application variable in CF. I then send a trivial result back to Flex. On the CFC result inside Flex, I make a call to a template CFM file which uses the cfcontent tag to generate the excel file from an html table structure I build with the saved application variable data.

CFC

<cffunction name="exportToExcel" access="remote" returntype="any" output="true">
<cfargument name="data" type="array" required="yes" default="" />
<cfset session.exportData = #ArrayNew(1)#>
<cfreturn 'true'>
</cffunction>


Flex

if(event.result == 'true')
{
var request:URLRequest = new URLRequest(URLToCFTemplate);
flash.net.navigateToURL(request, "_self");
}


Brendan

Updated: Download the source files here - Download

Dual Slider Component

*****
NOTE

Have updated the link below to a newer version of the DualSlider. Fixed some buggy activity when going crazy with the slider, or mousing off the screen... Thanks to Michael Schmalle and Rostislav Siryk for their suggestions on making this component better. *****


This was something that started as a feature request, and ended up being a component I thought I'd share with the rest of you.



Not much expanation needed once you run the demo here:

View Demo - Right click in demo to view source

Adds a "scrollbar" below the span between a dual-thumb slider which is draggable. When the drag action takes place, both

BlogCFC was created by Raymond Camden. This blog is running version 5.5.1.