Why Should You Attend CFUnited 2009?

Posted By : todd sharp Posted At : April 6, 2009 1:08 PM Posted In: AIR, Networking, CFUnited, Flex, ActionScript, SlideSix

1

I put together the following presentation with the blessing of Liz and Nafisa to combine a lot of their hard work into a single resource that answers the question:
Why should I attend CFUnited 2009?

Maintain Session State With Flex Upload To CF

Posted By : todd sharp Posted At : December 1, 2008 9:05 AM Posted In: Flex, ActionScript

6

I've started to dabble a bit in Flex/ActionScript lately, so I'm starting to pay attention to some more Flex/AS related posts via the aggregators. This morning a post to the Flex cookbook titled Why is session info (cookies) not sent when uploading files in Firefox caught my eye since I struggled with this issue a bit recently. The article explains why session state is not maintained when using FileReference.upload(), but it doesn't explain how to workaround the issue.

To workaround the issue when uploading to a ColdFusion server, the tactic that I have come up with is to pass the jsessionid into my Flex application (via Flash vars) and then pass the jsessionid along with my file upload by appending it to the target url. I'm not 100% sure this is the best solution (feel free to comment with other ideas or suggestions), but it serves the purpose of maintaining session state which allows me to do things like ensure that a valid, logged in user is performing the upload.

Create A CF Style UUID In Flex

Posted By : todd sharp Posted At : November 19, 2008 4:52 PM Posted In: Flex, ActionScript

1

Wow, it feels kinda weird to actually blog something technical here. While working on a little Flex project recently I found myself with the need to create a CF style UUID (xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxx) within Flex . Flex UID's follow the 8-4-4-4-12 pattern (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx). Quite a simple task really when you think about it, but here is what I came up with:

private function createUUID():String{
var uuid:String = UIDUtil.createUID();
var uReturn:String;
uReturn = uuid.substr(0,23);
uReturn += uuid.substr(24,uuid.length);
return uReturn;
}

I could have gotten fancy and done it with a regular expression, but I'm sure the cost of manipulating the string in ActionScript isn't all too much to worry about.

ActionScript URL Encoding/Decoding

Posted By : todd sharp Posted At : January 11, 2007 8:37 AM Posted In: ActionScript, ColdFusion

6

I just had an issue on one of my work sites where a flash form was passing a dynamic data element via the url from a grid to a new page which pulled a report. The problem was that one of the dynamic values contained a "&" which obviously presents a problem. If this was pure CF I could simply use urlEncodedFormat() and urlDecode() to handle this, but since the variable in question is coming from a flash form I wasn't quite sure how to handle this one (Flash gurus can look away now).

A quick Google later, I found that ActionScript has a very similar set of functions called escape() and unescape(). I only needed to use escape() in my case, since the var was being handled by CF on the target page. I did employ the good old urlDecode() on the target page and everything worked out perfectly. Don't you love it when the solution is so simple? It's almost like the folks that make these languages know what they're doing.

Flex Rich Text Editor For Use In An HTML Form

Posted By : todd sharp Posted At : October 4, 2006 4:07 PM Posted In: Flex, ActionScript, ColdFusion

11

There are lots of WYSIWYG text editors out there like FCKEditor and SPAW just to name a few. I've tried some of them, but they all seem somewhat bloated in my opinion. I want something lightweight and simple, but powerful enough to do some basic text formatting. I did a little Googling and found the Rich Text Editor with Disclosable Controls for Flex 2 (created by Peter Baird). This is a pretty sweet little Rich Text Editor! So my next thought was, how can I hook this into being used as a WYSIWYG editor in a simple html form? I did a little more research and learned about the Flex ExternalInterface class. The Livedocs describe the ExternalInterface as follows:

The ExternalInterface class is the External API, an application programming interface that enables straightforward communication between ActionScript and the Flash Player container; for example, an HTML page with JavaScript, or a desktop application with Flash Player embedded. Use of ExternalInterface is recommended for all JavaScript-ActionScript communication.

I took Peter's editor and added some ActionScript and compiled the SWF. I then took the generated html wrapper and added the necessary JavaScript to facilitate the communication between the containers. I next saved the wrapper as a cfm so that I could take advantage of using cf variables in prepopulating the Text Editor (as you would with a query for example). The final result is pretty sweet. The RTE is prepopulated from a cf variable, all changes made in the RTE immediately update a textarea (which could easily be hidden) in the html form and the resulting html text is submitted with the html form (which could then be saved in the db). This is my first experience in building a Flex application, so I'm not going to release the code quite yet (it's a mess anyways!!) I'm not quite sure what step to take next. I suppose It's possible that this could be packaged and used as a cfinclude within any html form. Anyone have any other ideas?

Check It Out

Actionscript Common Function Library Survey

Posted By : todd sharp Posted At : August 16, 2006 10:47 AM Posted In: ActionScript

6

If you write Coldfusion, you've likely visited cflib.org at some point and used one or more of the excellent UDF's posted there. I've often wondered why there is no single repository for common Actionscript functions like cflib. There are tons of custom functions out there, but I've yet to find a single source that is structured in an easy to use format. Since I've been using Flash Forms so heavily, I often find myself searching for a custom function for string manipulation and other purposes and I realized that many of the ones that I find could be easily reused in different applications. Many are written for use in Flash or Flex, but can also be used in Flash Forms with little or no modification. With that in mind, here's a short survey:

  • Do you see a need for a single source for Actionscript common functions? These could be grouped by category (such as data manipulation, custom Math functions, etc) and easily searchable. They could also be rolled up into a single library that could easily be included in your application where needed.
  • Would you use a site like this to find functions (or would you continue to just use Google or whatever other source you may be using)?
  • Would you participate in a community based site like this (submit your own functions)?

If there is enough interest, I would like to get a site up and running. If anyone is interested in helping out with the design and/or administration, please let me know. Also, if someone would like to offer to host the site, I wouldn't turn them down ;) - or I'll host on my own.

CFGRID Date Display Issues

Posted By : todd sharp Posted At : August 11, 2006 9:16 AM Posted In: Flash Forms, ActionScript, ColdFusion

2

I got into a discussion today with someone on an old thread on Ray Camden's blog who was having issues with the way his dates were being displayed in a cfgrid. The problem he was having was that he would choose a date in a datefield, then submit the form and update the database with the date - For example:

Actionscript Business Day Add Function

Posted By : todd sharp Posted At : August 11, 2006 5:56 AM Posted In: Flash Forms, ActionScript, ColdFusion

2

One of my coworkers has been working on a project tracking tool and had a need to automatically calculate some dates based on the selected items and other dates (such as due date). I found this function over on Jeff Tapper's blog, but the function needed to add (and subtract) business days, not just calendar days. As a result I threw together another script to work in conjuction with Jeff's script to make it work for business days. There's nothing pretty about this code. I've been on conference calls for 6-7 hours a day for three weeks, so trust me - this one has little thought put into it. But it works - and with a little work it could be cleaned up.

View an Example

The source for the example is attached to this post if you'd like to download.

Enjoy & Happy Friday!

Creating MXML Popups from a Flash Form

Posted By : todd sharp Posted At : July 13, 2006 8:19 PM Posted In: Flash Forms, ActionScript, ColdFusion

1

Here's an example of creating a usable MXML popup form from within a flash form. Despite the some of the evil uses of popups, they can actually be helpful tools for capturing user data.

flash form popup

CFGRID ComboBox Cell Renderer - Dynamic Query

Posted By : todd sharp Posted At : June 30, 2006 5:42 AM Posted In: Flash Forms, ActionScript, ColdFusion

9

As a follow up to my original post, here's an example of creating a combobox cell renderer for a cfgrid which is populated with a query rather than a hardcoded dataprovider. The trick is to use flash remoting to get the query, set a global variable containing the results, then call the renderer and use the global variable to set the combobox dataprovider.

The example still looks the same, but obviously this method is much more dynamic. There is one change in the AS file for the renderer. Since we're using a query from remoting, we can't access combo.selectedItem.data. Instead, we reference the column name from the query - in this case it's combo.selectedItem.priority.

Update: Download the Code.

selectRendererWithQuery.cfm

<cfform format="flash" name="testForm" onload="getSelectData();">
<cfformitem type="script">

function getSelectData(){
    //create connection
    <cfoutput>
    var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://#cgi.HTTP_HOST#/flashservices/gateway/");
    </cfoutput>
    //declare service
    var myService:mx.remoting.NetServiceProxy;

    var responseHandler = {};
    var COMBOBOX_DATA_PROVIDER = COMBOBOX_DATA_PROVIDER;
    
    responseHandler.onResult = function( results: Object ):Void {
        //when results are back, populate the COMBOBOX_DATA_PROVIDER
        //then set the cellRenderer
        _global.COMBOBOX_DATA_PROVIDER = results;
        _root.testGrid.getColumnAt(2).cellRenderer = ComboBoxCellNew;
    }

    responseHandler.onStatus = function( stat: Object ):Void {
        //if there is any error, show an alert
        alert("Error while calling cfc:" + stat.description);
    }
    
    //get service
    myService = connection.getService("blog.tips.cellRendererSelect", responseHandler );
    //make call
    myService.getPriorities();        
    }
</cfformitem>
    <cfformgroup type="horizontal">
<cfgrid name="testGrid" width="260" selectmode="edit">
<cfgridcolumn name="dataCol" header="data col" width="100">
                <cfgridrow data="data,low">
                <cfgridrow data="data,medium">
                <cfgridrow data="data">
<cfgridcolumn name="check" header="check box" width="200">
</cfgrid>
         <cfinput type="button" name="testbtn" value="Show Value in Grid" onclick="alert(testGrid.selectedItem.check);">
    </cfformgroup>
</cfform>

cellRendererSelect.cfc

<cfcomponent name="cellRendererSelect" access="public" description="Gets Data for the cell Renderer Select">

<cffunction name="getPriorities" output="false" description="Returns a query" access="remote" returntype="query">
    
    <cfset qPriorities = queryNew("priority")>
    <cfset temp = queryAddRow(qPriorities, 4)>
    <cfset temp = querySetCell(qPriorities, "priority", "", 1)>
    <cfset temp = querySetCell(qPriorities, "priority", "low", 2)>
    <cfset temp = querySetCell(qPriorities, "priority", "medium", 3)>
    <cfset temp = querySetCell(qPriorities, "priority", "high", 4)>
    
    <cfreturn qPriorities />
</cffunction>

</cfcomponent>

ComboBoxCellNew.as

import mx.core.UIComponent
import mx.controls.ComboBox

class ComboBoxCellNew extends UIComponent
{
    var combo : MovieClip;
    var owner : MovieClip;                        // The row that contains the cell.
    var listOwner : MovieClip;                         // the reference we receive to the list
    var getCellIndex : Function;                         // the function we receive from the list
    var    getDataLabel : Function;                     // the function we receive from the list
    function ComboBoxCellRenderer()
    {
    }

    function createChildren(Void) : Void
    {        
        //Creates a ComboBox object and listen to changes
        combo = createObject("ComboBox", "Combo", 0, {styleName:this, owner:this});
        combo.addEventListener("change", this);
        combo.labelField = "priority";
        combo.dataProvider = _global.COMBOBOX_DATA_PROVIDER;
        size();
    }

    // note that setSize is implemented by UIComponent and calls size(), after setting
    // __width and __height
    function size(Void) : Void
    {
        
     var h = __height;
var w = __width;
combo.setSize(w - 2, Math.max(h, listOwner.rowHeight - 2));
        
    }

public function setValue(str:String, item:Object, sel:Boolean) : Void
    {
        /* Sets the ComboBox to the correspoinding cell data from the list owner's data provider if the cell data matches
        with any items available for the ComboBox. */

        
        var drawCombo:Boolean = true;
        if (item[getDataLabel()]!=undefined)
        {
            /* For each item's data in the ComboBox, verify if it matches
            the assigned data for the cell this ComboBox is in.
            Set the selectedIndex of the ComboBox to what matches. */

            for(var i:Number = 0; i < combo.length; i++)
            {
                if( combo.getItemAt(i).priority == item[getDataLabel()] )
                {
                    combo.selectedIndex = i;
                    break;
                }
                if ( i == combo.length - 1 )
                {
                    // There was no matching data, the ComboBox should not be shown.
                    //drawCombo = false;
                }
            }
        }
        else
        {
            // There was no data, set the combobox to blank
            combo.selectedIndex = 0;
        }
        
        combo._visible = drawCombo;
    }

    function getPreferredHeight(Void) : Number
    {
        return owner.__height;
    }

    function getPreferredWidth(Void) : Number
    {
        return owner.__width;
    }
    // This re-build the dataProvider, the selected item
    // as the first in the array
    function reorder(datos:Array, choice:String):Array {
        var index:Number = 0
        var newArray = new Array()
        for(var i=0; i<datos.length; i++){        
            if(datos[i].label!=choice){
                index++
                newArray[index] = datos[i]
            } else newArray[0] = datos[i]
        }    
        return newArray
    }


    
    public function change()
    {
        // Handler for the ComboBox change event.
        
        // Set the listOwner's data to the currently selected item's data of the combo box.
        listOwner.dataProvider.editField(getCellIndex().itemIndex, getDataLabel(), combo.selectedItem.priority);    
        listOwner.selectedIndex = getCellIndex().itemIndex;
    }

}