Using Fiddler with Firefox

Once in a while I really should read documentation - the "hidden" features I might find on all the applications I use.

For some reason Fiddler stopped working with Internet Explorer, so I was actually reading the few doc and faqs that are on the Fiddler website (http://www.fiddlertool.com/).

If you don't know what Fiddler is, its an HTTP Debugging proxy. It logs all the traffic between your browser and the outside world. Its particularly useful when you're doing Flash remoting or remoting with AJAX.

Anyway... looking at the FAQs I noticed that it is possible to use Fiddler with any browser!! I decided to try it out with Firefox and it was really really easy to do.

  1. Install and Run Fiddler once. This will create some files, one of which you'll need.
  2. In "My Documents" you will now see that there is folder for Fiddler. Inside there you'll find a Scripts folder. Grab a copy of the full path to this Scripts folder. For me that would be : C:\Documents and Settings\Stephen\My Documents\Fiddler\Scripts
  3. Open up Firefox, go to Options under the Tools menu and then click on the Connection Setting button.
  4. Down the bottom of the connection settings is "Automatic proxy configuration URL:" Select this option and in the box put the file path to the Scripts folder followed by BrowserPAC.js which is a file in the Scripts folder. So my full path is : C:\Documents and Settings\Stephen\My Documents\Fiddler\Scripts\BrowserPAC.js
  5. Hit the Reload button, then OK, close the options window and you are set!
You will need Fiddler to be open in order to access the internet now, but its easy to switch between your normal settings and automatic proxy when you don't need Fiddler's assistance.

Replicating a spreadsheet application using CFForm.

While I'm waiting for System Mechanic to find all the bits of Fiddler and uninstall it, so that I can reinstall it, I though I would post an note on some CFForms stuff I've been doing recently.

The client wanted to allow users to be able to click on a cell in a grid, the value in that grid to be displayed in an edit box, in much the same way as it does in the likes of Excel, and the user be able to edit that cell either in the cell or in the edit box.

Sounds simple enough. The problem comes when you try to work out which column is currently selected. CFGrid will give you the currently selectedIndex of the row in the grid and all the columns in that row, but not the column of the cell that has been selected.

In order to find out what is in the currently selected cell I had to add an event listener to the grid when the form is loaded and wait for a cell to be selected. This is the cellFocusIn event.

I have a function called onFormLoad() {...} which I call via cfform's onload attribute. In this function I have 2 global variables, _global.currentCol and _global.currentRow. I default these to '' and 0 respectively.

I then create a DataGrid in my onLoadForum that point to my cfgrid :

view plain print about
1var datasheet:mx.controls.DataGrid = sheet; // sheet is the name of my cfgrid in the form.

I then create a listener object :

view plain print about
1var listener:Object = {};

And create a function for when I get a "cellFocusIn" event.

view plain print about
1listener.cellFocusIn = function(evt):Void {...}

This event has a number of attributes and functions, but I'm really only interested in the column related attributes and functions, specifically columnIndex and getColumnAt().

In my cellFocusIn function I get the row and column details and put them into my global variables and then use that information to file my "edit box".

view plain print about
1//current grid row +1 for display purposes
2var thisRow = evt.itemIndex+1;
3// shorthand for the whole cfform
4var thisForm = _root.chartsheet;
5// evt.ColumnIndex contains a number which when passed to the method getColumnAt() returns the text name of a column as one of its attributes.
6var thisCol = datasheet.getColumnAt(evt.columnIndex);
7// set the global variables to the selected row and the column name
8_global.currentRow = evt.itemIndex;
9_global.currentCol = thisCol.columnName;
10// change a text formitem to display the current row and column name
11thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
12// set my edit box to be the contents of the currently selected cell.
13if (datasheet.selectedItem[thisCol.columnName] != null)
14 thisForm.thisCell = datasheet.selectedItem[thisCol.columnName];

The last thing to do is to attach this listener to the grid. This is done using the method addEventListener()

view plain print about
1datasheet.addEventListener('cellFocusIn',listener);

So now when a user selects a cell, the column name and row number are stored in the global variables, a display of row and column is done and an edit box is filled with the content of the selected cell.

Here is the complete onload function:

view plain print about
1function onFormLoad() {
2 _global.currentCol = '';
3 _global.currentRow = 0;
4
5 var datasheet:mx.controls.DataGrid = sheet;
6 datasheet.hScrollPolicy = 'on';
7
8 // listener for the grid, so that I can tell which cell has been selected and I can populate the edit box.
9 var listener:Object = {};
10
11 listener.cellFocusIn = function(evt):Void {
12 var thisRow = evt.itemIndex+1;
13 var thisForm = _root.chartsheet;
14 var thisCol = datasheet.getColumnAt(evt.columnIndex);
15 _global.currentRow = evt.itemIndex;
16 _global.currentCol = thisCol.columnName;
17 thisForm.thisCellNo = thisCol.columnName+' '+thisRow;
18 if (datasheet.selectedItem[thisCol.columnName] != null)
19 thisForm.thisCell = datasheet.selectedItem[thisCol.columnName];
20 }
21 datasheet.addEventListener('cellFocusIn',listener);
22 }

and the form it belongs to :

Here's the dataUpdate function that is attached to the fieldeditor form item.

view plain print about
1function dataUpdate() {
2 // updates the grid when the user types into the edit box
3 var datasheet:mx.controls.DataGrid = sheet;
4 var newdata = _root.chartsheet.fieldeditor;
5 if (_global.currentCol != '') {
6 datasheet.editField(_global.currentRow,_global.currentCol,newdata);
7 }
8 }

I have to be honest, I have chopped some of the form content out in order to protect the innocent ;) and I haven't tested that the form displays correctly, but the onFormLoad() function is unchanged. I'll sort out a working example and a download of the source soon.