I’ve recently been tasked with figuring this out so I thought I’d share my results with everyone.

The Problem:

Create a Flash/Flex horizontal menu that will overlap the content below it. We don’t know how big the menu might get or what kind of content might end up below it. We do know that layering HTML and Flash does not always work as expected based on which browser you use. Sure, you can use the wmode=”transparent” and put the flash on top of the HTML, but it doesn’t allow you to hover over or click items under the flash.

The Solution:

Use Flex to interface with Javascript to change the SWF Object as needed based on events being listened to inside that same SWF Object. See http://reynacho.com/2008/08/12/flex-calls-to-javascript/ for a tutorial on how to get Flex to call javascript functions.

Read on for the code and example…

continue reading "Flex Menu Expanding Over HTML content"

Modifying your default build template is quite simple. There is a template file that is used when building your project. It should reside in the html-template directory at the root of your project in Flex Builder. In Flex Builder 3, the template is named “index.template.html”.

Let’s say you want to modify default parameters in the flash object (one I use is wmode=”transparent” for flex widgets). You would add this to the AC_FL_RunContent() function call (around line 80) and to the noscript block (around line 101). 95% of people hitting the page will hit the AC_FL_RunContent() call so here’s an example of how to modify that:

continue reading "Flex – Modify your default build template"

Flex is great! Javascript can be great! What if two great things got together?

This is a simple code hint which shows how to call javascript functions from Flex and pass data back and forth:

MXML Button:

<mx:Button
id = "button"
label = "Click Me!"
click = "handleButtonClick(event:MouseEvent)
/>

Flex Function:

private function handleButtonClick(event:MouseEvent):void
{
var functionName:String = "handleButtonClick";
var returnData:String = ExternalInterface.call(f, "You clicked the button!");
}

Javascript Function:

function handleButtonClick(message)
{
alert(message);
}

That’s really all there is to it. the ExternalInterface.call() handles everything for you.

By the way, if you wanted to actually return data from the javascript function, you’d just do a standard return and it’d be available in the returnData variable in Flex:

function handleButtonClick(message)
{
alert(message);
return "success";
}

I have been doing some work with AIR and SQLite recently and came across and issue that had to be solved. The issue was that most everything is a VARCHAR in SQLite and I was not able to insert apostrophes (‘) into any string field because that is the string delimiter.

A quick Google search revealed that escaping an apostrophe is as simple as putting two of them together (i.e. “Jake’s Blog” becomes “Jake”s Blog”). Quotation marks remain the same.

Now that I knew what the solution was, I had to implement it. I had about 10 custom VO objects, all with different numbers and kinds of properties. I needed a way to dig into each of them and do a quick string replace on String properties only.

continue reading "Custom Object Parsing Function"

I ran into a situation recently which required me to parse a string into a Date object in Flex. After some searching I found that there’s a wonderful little method in the DateFormatter class called parseDateString. Unfortunately, that method is protected and I couldn’t gain access to it. Luckily, I came accross a blog post that provided a wonderful solution: http://flex2colombia.wordpress.com/2007/02/18/dateformatter-parsedatestring-replacement/

The basis is that the Date class has a static method for parsing dates (parse()) which accepts a single String as a parameter. Here is an example:

var dateString:String = "Tue Jul 29 13:40:56 GMT-0500 2008";
var d:Date = new Date(Date.parse(dateString));

Just like that, you have a Date object to work with in Flex.

The following string formats are acceptable (all of which are recognized by Flex as a Date)

• MM/DD/YYYY HH:MM:SS TZD
• HH:MM:SS TZD Day Mon/DD/YYYY
• Mon DD YYYY HH:MM:SS TZD
• Day Mon DD HH:MM:SS TZD YYYY
• Day DD Mon HH:MM:SS TZD YYYY
• Mon/DD/YYYY HH:MM:SS TZD
• YYYY/MM/DD HH:MM:SS TZD

I gave a presentation about Cascading Style Sheets and why they are important last night at the local Nebraska ColdFusion Users Group last night. Thanks to those who attended and brought questions.

For anyone interested, the presentation materials, including examples are available online at http://jake.cfwebtools.com/css_pres/css.zip.

As always, questions are welcome via my blog, via email or in person

How I’ve gone as far as I have without looking into this sooner is beyond me. Creating Custom Types is basically how I spend 80% of my time and I had hit a wall until now. Custom Types deserve custom config options so their behavior can be configured by the users. Here’s how…

I have a very simply type which is a way to track registrations. The fields are unimportant, it’s simply a way to track what’s entered on registration forms. The client came back and wanted to be able to send the completed forms to someone via email but that person might change. So, rather than me having to change the code manually any time the email had to change, I set up a custom config for this type.

1. Create a .cfm file in /farcry/ /system/dmConfig/ with the name you want to show up (i.e. myCustomConfig.cfm will show up as myCustomConfig in the config files list)
2. Inside the file create a structure containing the config options with defaults:

3. <cfscript>
   	stConfig = StructNew();
   	stConfig.EmailFrom = "info@bryanlgh.org";
   	stConfig.EmailTo = "55PLUS@bryanlgh.org";
   	stConfig.EmailSubject = "55PLUS Application";
   </cfscript>

4. Log into farcry and navigate to Admin -> Custom Config
5. Deploy your config
6. navigate to Admin -> Config Files
7. Update as necessary

Doing this will essentially create a new key in the structure “application.config” with the same name as the filename you created and placed in dmConfig. Farcry automatically handles updating the custom config files.

There is additional information at the Farcry Wiki

I’ve been helping out with a flex project at work and have been learning some really cool things about it. Coming from a java background a lot of this is familiar but Flex has some really neat features built in.

One that I found recently is the Sort class in the collections package. Pretty much all UI components (Lists, Datagrids, etc) take some kind of collection as their data provider. The question came up, “How do you sort a datagrid manually?” We all know you can click the labels and the grid will sort itself but how do you do that in code. Here’s how:

// Create a new Sort Object
mySort = new Sort();

// Create a SortField Object
// The paramater is the field in the Array Collection to sort on
sortByLabel = new SortField("labelField");

// add Fields to your Sort Object.
// This is standard array notation so multiple sorts would be [sort1,sort2,sort3]
mySort.fields=[sortByLabel];

// set the sort object as the Array Collections sort
myArrayCollection.sort=mySort;

// refresh the Array Collection
myArrayCollection.refresh();

Now, assuming you have bound your data provider in your datagrid (i.e. dataProvider=”{myArrayCollection}”) the datagrid will sort as soon as the Array Collection is refreshed.

A big thanks to Bruce Phillips’ post for pointing me in the right direction.

CF Webtools works on plenty of e-commerce sites. Some generate only a trivial amount of revenue and others generate millions every year. The most common implementations we see and deal with are authorize.net and paypal. Both have very standard APIs and a feature list that is continuously expanding. Recently I was given a project which required implementing Virtual Merchant into Site Director and Farcry. It also required the ability to use multiple merchants through the same implementation in Farcry. Here’s what I did…

continue reading "ColdFusion Implementation of Virtual Merchant"

I’ve struggled with popups for some time now. I’ve never really found a good way to handle popping up a new window when clicking a link. Sure, there is the target=”_blank” method but I’ve heard that in XHTML1.0 that is not actually valid. That tells me that browsers can still handle this but might not sometime in the future (or it might end up being included in some kind of quirks rendering mode in the future). A standard Javascript popup is another option but is too easily disabled.

This method will actually do both by creating an event handler.

continue reading "Javascript Popup with graceful fallback"