Ed's Blog

Hi all,

I’ve recently been programming a way of Flex talking to a regular web-page using FAB – Flex Ajax Bridge. I basically had a TileList of images and wanted to be able to drag an image from the Flex app onto a text-box and the text box would become populated with the url of the image. Sounds tricky? Well it was.

First the main thing I had to do was to get the correct Javascript files included at the top of the HTML page….

Those files can be got from the Adobe FAB page I got the other by Googling for it.

To get Flex working with FAB you need to reference the bridge directory that must also be available to the swf so below the tags I put in this:

So thats all thats needed for Flex to talk to Javascript! Well almost, more will come on that…..

Firstly the code to perform dragging within Flex.

	
        	import mx.containers.Canvas;
        	import model.AssetModel;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
			import control.AssetController;

			import com.adobe.cairngorm.control.CairngormEventDispatcher;
			import com.adobe.cairngorm.control.CairngormEvent;

            private var myModel:AssetModel = model.AssetModel.getInstance()			

			private function onClick():void{
				this.dispatchClickEvent();
			}  

            private function dragAsset(event:MouseEvent, img1:Image,
                format:String):void {
                var dragInitiator:Image=Image(event.currentTarget);
                var ds:DragSource = new DragSource();
                ds.addData(img1, format);               

                var imageProxy:Image = new Image();
                imageProxy.source = data.url;
                imageProxy.height= this.height;
                imageProxy.width= this.width;

                DragManager.doDrag(dragInitiator, ds, event,
                    imageProxy, 0, 0, 0.75);
                myModel.dragging = true;
            }                 

            private function dispatchClickEvent():void
            {	var assetEvt : CairngormEvent = new CairngormEvent(AssetController.SELECT_QUESTION_ASSET_EVENT);
				assetEvt.data = data;
				CairngormEventDispatcher.getInstance().dispatchEvent(assetEvt);
            }

             private function quitDrag():void
            {
            	myModel.dragging = false;
            }
    

So this image is an itemRenderer within a TileList using a dataProvider so each ‘item’ has a url associated with it from the dataProvider. myModel is a central Cairngorm location for storing objects that are used often or accessed in many places in the flex application. So I have a dragging variable that is true if the image is being dragged, false if the dragging is completed.

Within my main MXML I had a function:

public function getDraggedImageURL():String
{	var draggedItem:String = "";
	if(myModel.selectedAsset.url != null && myModel.dragging == true)
	{
		draggedItem = "" + myModel.selectedAsset.url;
	}

        return draggedItem;
}

So when this is called we check if there is currently dragging taking place(dragging var) and then make sure we’ve actually an asset selected in the TileList(another var in the model that is set when you click on the image,see earlier image definition)

So not within the HTML file I created a textarea with a javascript function called when the mouseup event is called(i.e. when you let go of the mouse button and are over the text area, this is triggered when dragging from a flex app to the text-area)

So the doSomething function is quite simple:

function doSomething()
{
	flexApp = FABridge.flash.root();
	var selectedImage = flexApp.getDraggedImageURL();
	if (selectedImage != "") {
		var text1 = document.getElementById("text1");
		text1.value += selectedImage;
	}

}

The first line creates a bridge or connection with the flex app. Next we execute the getDraggedImageURL that is defined above. If the string returned isn’t empty then we know we have an image url and it appends this onto the existing text in the textarea. This also stops insertion occuring when the user clicks on the text area without dragging from the flex app.

Note: It appears from testing that FAB doesn’t work with Safari 3.0, I can’t test it with any of the earlier Safari versions as they won’t work on Leopard!

I’ve used Javascript to detect the current position of the cursor in a text area. This is used to insert the image url when you’re editing a text-box. Here is the code

function storeCursorPosition(text1)
{
	if (document.selection)
	{

		sel = document.selection.createRange();

		cursorPos = sel.select();
	}

       //MOZILLA/NETSCAPE support
	else if (text1.selectionStart || text1.selectionStart == '0')
	{
		var startPos = text1.selectionStart;

		cursorPos = startPos;

	}

	//Anyone else.
	else
	{
		cursorPos = text1.value.length;
	}
}

CursorPos stores the cursor position globally and then is used to break up the text-areas value into two, insert the new string in the middle and put the two broken pieces of the string back and setting the text-areas value again.

Here is the html code to store the cursor position.

I’ve tested this in Firefox and Safari and it works A-OK!

Not tried either in IE yet either….

Was playing with XMLParse with ColdFusion, its really cool was sick of getting external XML parsers for other languages like PHP but its v v easy with ColdFusion. Yippee

Hi there,
Today I worked on a little bit of ColdFusion that takes in a file url and generates a hex MD5 hash code from it. I used the code posted by Mark Lynch previously here.

The hex code is contained in the checksumhex variable.

I’ve been doing some recursion in ColdFusion in a CFC lately its not pretty but finally got it working.

       

       
            
                  
                            <#key#>
                   
                   
                    
                            
                   
            
                    
                           #testExample[key]#
                   
            
       

The problem I was having was that the second key(i.e. the one in the second cfoutput, ) was having weird output, it was outputing values from a function that should previously have been entered and left again. The issue was that after going through the inner function the key value would stay from the other function. So the answer was to actually declare a key at the top of the function and use that within the cfloop. This gave me correct values at the end of the recursion.

       
        

       
              
              
                  
                            <#newItem#>
                   
                   
                    
                            
                   
            
                    
                           #testExample[newItem]#
                   
            
       

This works, hurray!