Dutch Rapley

When it comes to software development, there are only two rules that apply.

1. There is no wrong way, as long as it works.
2. There is ALWAYS a better way.

A really nice way to enhance user experience, when working with HTML forms, is to “highlight” the background color of the element that contains the form field that has focus. With jQuery, this can be achieved very easily using its event handlers and :input filter. What makes this approach very convenient is that you don’t have to modify any HTML to enable this functionality. Click the image below to see the example:

Javascript:

$(document).ready(function() {
$(':input:not([type="submit"])').each(function() {
$(this).focus(function() {
$(this).parent().addClass('formFieldFocus');
}).blur(function() {
$(this).parent().removeClass('formFieldFocus');});
});
});

HTML:

<div>
<label for="text_field">Text</label>
<input type="text" id="text_field" name="some_text" />
</div>

Michael Schultz asks:

Can I update a DataGrid based on data captured from within a Map’s InfoWindow?

The answer is yes and it’s surprisingly easy. Click the image to view the example. The source can be viewed by right clicking the flex application.

To accomplish this, you’ll have to think about what you need to make this happen:

• An ArrayCollection that will be the DataGrid’s dataProvider
• A custom component that will be used as the InfoWindow’s content
• A value object that will represent each person

When you click on the map to add a marker, the following objects are created:

//marker object
var marker:Marker = new Marker(e.latLng);
//value object that represents the person
var personInfo:PersonVO = new PersonVO();
//custom view component for the marker's info window
var nameInput:NameInput = new NameInput();

You then have to pass the personInfo object to nameInput, which is the custom component for the marker’s info window:

//pass a reference of the person object to the info window's custom component
nameInput.setPersonInfo(personInfo);

Then:

//append data to the array collection
acMarkers.addItem({label: label, marker: marker, personInfo:personInfo});
//add event listenter for when the marker is clicked
marker.addEventListener(MapMouseEvent.CLICK, function(e:Event):void {
//open info widow
marker.openInfoWindow(new InfoWindowOptions({customContent:nameInput, width:300, drawDefaultFrame:true}));
});
//add maker overlay to the map
map.addOverlay(marker);

When you update a name in the marker’s info window, it appears in the data grid. How does this happen?

When you set the data grid’s dataProvider attribute, you’re simply passing a reference to an already existing array collection. When the array collection is updated, the change is reflected in the data grid, but only because our array collection is bindable.

Each time a marker is created, a value object called personInfo is created from a bindable class called PersonVO. This object is then added to: 1) the array collection that populates the data grid and 2) the component (nameInput) that makes up the content of marker’s info window. Neither the array collection nor the component actually hold instances of personInfo; what they do is reference it - they only contain pointers to its location in memory. Since it’s bindable, when changes occur to this object, those changes are reflected everywhere it’s referenced. Thus, when you update a person’s name from the info window, the change occurs in the data grid because it references the same location in memory.

I’ve written a function, with MooTools, that will inject inline messages into a form. View the example.

function showErrorMessage(field, errorMessage) {
var    fieldGroup = $(field).getParent(); //form field's parent element
var errorElement = new Element('div');//error message element

if (!fieldGroup.getFirst().hasClass('errorMessage')) {

//add error message to error message element
errorElement.appendText(errorMessage);

//add class to error message element
errorElement.addClass('errorMessage');
// add class to the form field's parent element
fieldGroup.addClass('error');

//inject error message into form field's parent
errorElement.inject(fieldGroup, 'top');
}

}

This function, showErrorMessage(), can be used with either client-side or server-side validation.

If you’re using showErrorMessage() with client-side validation, there is a companion hideErrorMessage() function you can use for when validation passes.

function hideErrorMessage(field) {
var    fieldGroup = $(field).getParent(); //form field's parent element
var errorElement = '';

if (fieldGroup.getFirst().hasClass('errorMessage')) {
errorElement = fieldGroup.getFirst();//error message element
//destroy error message element
errorElement.destroy();
//remove class from form field's parent
fieldGroup.removeClass('error');
}
}

private function createButtonEventListeners():void
{
btnContinue.addEventListener(MouseEvent.CLICK, processForm);
btnCancel.addEventListener(MouseEvent.CLICK, cancelForm);
}

Have you ever looped through a large amount of records only to insert them into a dabase table? Something similar to this?

<cfloop query=“routing_numbers”>
<cfquery datasource=“routing_numbers”>
INSERT INTO routing_numbers (routing_number, customer_name)
VALUES (#routing_numbers.routing_number#, ‘#routing_numbers.customer_name#‘)
</cfquery>

</cfloop>

I use the above code as part of a nightly scheduled task. It parses 20,000 records from a text file and inserts them into a database. It is slow. If you’re doing something similar, there’s a good chance you can increase the performance by 500% or more by wrapping your INSERT loop inside a <CFTRANSACTION> block.

<cftransaction isolation=“serializable” action=“begin”>

<cftry>
<cfloop query=“routing_numbers”>

<cfquery datasource=“routing_numbers”>
INSERT INTO routing_numbers (routing_number, customer_name)
VALUES (#routing_numbers.routing_number#, ‘#routing_numbers.customer_name#‘)
</cfquery>
</cfloop>

<cfcatch type=“database”>
<cftransaction action=“rollback”/>
</cfcatch>

</cftry>

<cftransaction action=“commit” />
</cftransaction>

Please note that the <cftransaction action=”commit” /> on the end is optional, depending on your RDBMS. Some require it, some don’t, so please check your documentation.

What’s the difference?

In the first code example, an implicit transaction is performed with each insert. That’s a lot of transactions for a redundant task and takes a lot of time as the DB opens the data file, inserts a record, and then closes it.

In the second example, there is no longer an implicit transaction with each INSERT. All the INSERT statements are grouped together in a single transaction. Thus, the data file only has to be opened and closed once.

If you’re using a ComboBox, and want to make sure the user has selected an item in the list, you can peform a quick and dirty validation with Flex’s NumberValidator. This is under the assumption that you do not want to allow the first item in the list to be a legitimate selection.

<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>></code>

<mx:Array id=”colors”>
<mx:String>Select…</mx:String>
<mx:String>Blue</mx:String>
<mx:String>Red</mx:String>
<mx:String>Green</mx:String>
<mx:String>Orange</mx:String>
<mx:String>Black</mx:String>
</mx:Array>

<mx:NumberValidator
id=”vColor”
trigger=”{btnValidate}”
triggerEvent=”click”
minValue=”1";
lowerThanMinError=”Please select a color.”
source=”{color}”
property=”selectedIndex”
invalid=”Alert.show(vColor.lowerThanMinError)”
valid=”Alert.show(’Congratulations! You selected a color.’)”/>

<mx:VBox>
<mx:ComboBox id=”color” dataProvider=”{colors}”/>
<mx:Button id=”btnValidate” label=”Validate”/>
</mx:VBox>