Coldfusion temperature conversion web service

admin — Sat, 26 Sep 2009 16:38:49 +0000

Time for a little example of Coldfusion web services! You heard me right, we are going to delve into a short and sweet example of how to create, and invoke a web service using Coldfusion!

It’s a very simple example of converting a temperature value from Farenheit to Celsius or vice versa. This will all be done by creating a form to accept user input, and a web service containing the logic to perform the conversion operations. Let’s hit it!

Our example will consist of three files. convTempForm which is the web form to accept user input, convTemp to process the input, call the web service, and display the results, and finally the web service Coldfusion component itself. Easy cheesy!

First let’s take a look at our user form:





Temperature Conversion Web Service


 


    Provide a temperature:
    	
    Choose a Conversion:

Nothing out of the ordinary here. We have a basic form that accepts a text value named temperature, and a conversion selection of either F to C, or C to F. Then a submit button posts the input to the action page.

Here is our action page:

<cfif #form.conversionType# is "CtoF">
	<cfscript>
		convertTemp = CreateObject("webservice", "http://localhost:8500/tempConversion/convComponent.cfc?wsdl");
		newTemp = convertTemp.ctof("#form.temperature#");
		inxml = getSOAPRequest(convertTemp);
		outxml = getSOAPResponse(convertTemp);
	cfscript>
    <cfoutput>
    	#form.temperature# °C is #Round(newTemp)# °F.
	cfoutput>
<cfelseif #form.conversionType# is "FtoC">
	<cfscript>
		convertTemp = CreateObject("webservice", "http://localhost:8500/tempConversion/convComponent.cfc?wsdl");
		newTemp = convertTemp.ftoc("#form.temperature#");
		inxml = getSOAPRequest(convertTemp);
		outxml = getSOAPResponse(convertTemp);
	cfscript>
	<cfoutput>
        #form.temperature# °F is #Round(newTemp)# °C.
    cfoutput>
cfif>

This is our coldfusion form processing page that receives the posted data, and calls the web service component to perform the calculations. The way it gathers the data from the form is by using the variable scope ‘form’.

#form.conversionType#

There are two scenarios presented here. One is if the user chose CtoF from the select form element, and another if the user chose FtoC. Both scenarios call the same web service component, but separate methods. We use a coldfusion if/else statement to determine which method to target.

If the user wants to convert from Celsius to Farenheit, the if part of our if/else statement will trigger, and we create a web service object and target the ‘ctof’ method. If the user wants to convert from Farenheit to Celsius then the else part of our if/else statement is triggered and we create a web service object and target the ‘ftoc’ method.

Let’s get granular on this puppy. If our user provides a temperature of 45 degrees, and chooses to convert it from celsius to farhenheit, that data is posted to the action page of our form and is used to determine the if/else statement. In this case the if statement is triggered because the #form.conversionType# is ‘CtoF’. So our the first part of our if statement is true

<cfif #form.conversionType# is "CtoF">

Because it is true the logic included in the if statement will no run

	<cfscript>
		convertTemp = CreateObject("webservice", "http://localhost:8500/tempConversion/convComponent.cfc?wsdl");
		newTemp = convertTemp.ctof("#form.temperature#");
	cfscript>

What we have here is a cfscript tag with several variable declarations. First we create an instance of our web service…

convertTemp = CreateObject("webservice", "http://localhost:8500/tempConversion/convComponent.cfc?wsdl");

This instance of the web service is stored in the variable convertTemp. The CreateObject function is one that creates an object of the assigned type (in this case ‘web service’), and the absolute URL to the WSDL that describes the web service.

Next we assign a variable to hold the result of the targeted web service function…

newTemp = convertTemp.ctof("#form.temperature#");

Using dot syntax we scope the method that exists within the instance of the web service object, and we pass to it the value that our user supplied in the form. Before we look at the result of the method logic, let’s look at the actual web service component that will perform the logic.

<cfcomponent>    
    <cffunction name="ctof" access="remote" returntype="numeric" output="no">
    
        <cfargument name="temp" required="yes" type="numeric">
        <cfreturn ((temp*9)/5)+32>
    cffunction>
 
    <cffunction name="ftoc" access="remote" returntype="numeric" output="no">
    
        <cfargument name="temp" required="yes" type="numeric">
        <cfreturn ((temp-32)*5/9)>
    cffunction>
cfcomponent>

Here we see the coldfusion component that performs the logical operations on our users input. Depending on their choice (’CtoF’ or ‘FtoC’ ) the associated method with the same name will run. The arguments you see in the component are required for the method to run, and the name of the argument, ‘temp’ is a variable that is passed the value provided by the user in the form ( #form.temperature# ). The type of data the argument will accept is set to numeric, so it must be a number.

<cfargument name="temp" required="yes" type="numeric">

Once the argument is passed the value, it can now be used in the calculation to be returned to the user.

<cfreturn ((temp*9)/5)+32>

The cfreturn tag will perform the calculation ( passed value multiplied by 9, then divided by 5, then summed with 32 ), and then return the result to the logic that created and called the web service.

Remember this line from our action page?

newTemp = convertTemp.ctof("#form.temperature#");

The variable ‘newTemp’ holds the result of the web service operation, and can now be displayed on our page.

<cfoutput>
#form.temperature# °C is #Round(newTemp)# °F.
cfoutput>

The original form scoped temperature provided by our user is included in a string that includes the rounded return value of the function

Some key points:

ColdFusion scripting

<cfscript>cfscript>

allows you to write portions of your templates with script-based syntax, which is often more concise and straightforward than ColdFusion’s traditional tag-based syntax.

The Round() function rounds a number to the closest integer that is larger than the input parameter, and returns an integer.

Happy scripting!!

The Mack Daddy of Contact Forms!

admin — Sun, 20 Sep 2009 18:45:06 +0000

This is it folks; the beast! This is the contact form to rule them all!

What we have here is a contact form structured with a nice marriage of XHTML and CSS, validated via jQuery, a dynamically generated captcha image for security, and PHP logic to handle the transfer of data. Not enough for you? Too bad.

Let’s do this…

We start out with a basic XHTML form structured with your run of the mill form elements:




Name
Please tell us your name

You must provide your name!
Email
Please provide your email

Please provide a valid email!
Message
Please provide a detailed message

What, no message?
 


Security Code
Enter code from image

Please provide the code from the image!
Wrong Code! Please try again!

The structure is styled via external CSS:

#style label.error{ 
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size:10px;
	color:#FF0000;
	text-align:left;
	width:200px;
	height:15px; 
	padding-left:20px;
}
 
label#name_error{background: transparent url(/images/exclamation.png) no-repeat scroll left;}
 
label#email_error{background: transparent url(/images/exclamation.png) no-repeat scroll left;}
 
label#message_error{background: transparent url(/images/exclamation.png) no-repeat scroll left;}
 
label#code_error{background: transparent url(/images/exclamation.png) no-repeat scroll left;}
 
label#wrong_code{background: transparent url(/images/exclamation.png) no-repeat scroll left;}
 
#response{height:400px;}
#response p{ color:#0066CC;font-weight:bold;margin:6px 0px; }
#response p.reply{ color:#666666; font-size:115%; }
 
#checkmark{ position:relative;top:0px;left:0px; }
 
#style{
padding:20px;
border:1px solid #666;
}
#style label{
display:block;
font-weight:bold;
text-align:left;
width:180px;
color:#000;
}
#style input{
font-size:12px;
width:250px;
margin-bottom: 10px;
}
#style .button{
margin-top:10px;
width:80px;
height:30px;
text-align:center;
line-height:31px;
color:#000;
font-size:11px;
font-weight:bold;
border:1px solid #666;
}
#style .small{
color:#000;
display:block;
font-size:12px;
font-weight:normal;
text-align:left;
width:180px;
}

When the contact form loads in the browser we have several things that take place. First and foremost we are using jQuery’s

$(document).ready(function() { "your magic here" });

to perform several DOM manipulations. We use the aforementioned event to govern when the logic is performed, and in this case it all takes place when the DOM is finished loading, NOT the entire page; JUST the DOM.

Basically this little chunk of jQuery makes sure that the logic waits only until the document structure is fully parsed before it performs its rich behaviors. Traditionally one would use the old

window.onload = function(){ "Your magic here" };

which executes the statements after the entire page has loaded in the browser, including all external resources such as images. The jQuery method is simply faster.

We have an external validate.js javascript file that is linked to the page in the header. Here is what takes place as soon as the DOM is fully parsed…

$(document) .ready(function() {
  $('.error').hide();
 
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
 
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#bfddf7"});
  });
 
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
 
  $('textarea.text-input').css({backgroundColor:"#FFFFFF"});
 
  $('textarea.text-input').focus(function(){
    $(this).css({backgroundColor:"#bfddf7"});
  });
 
  $('textarea.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
 
  $("input#name").select().focus();
});

First jquery targets all elements with a class of “error” and hides them from the browser.

$('.error').hide();

These will pop up later only if the end user does not supply the necessary data. Next all text-type form input elements are given a CSS style of a white background color.

$('input.text-input').css({backgroundColor:"#FFFFFF"});

Jumping ahead the text area form element is also given a CSS style of a white background color.

$('textarea.text-input').css({backgroundColor:"#FFFFFF"});

Finally the input form element with an id=”name” is selected, therefore gaining focus which triggers the input.text-input.focus function and gives it a new background color via CSS.

$("input#name").select().focus();

$('input.text-input').focus(function(){
$(this).css({backgroundColor:"#bfddf7"});
});

Sweet huh? You will notice that there are two functions waiting to be triggered in the jQuery .ready function. .focus() and .blur().

Basically these two function are triggered everytime a form field gains focus or loses focus. When a form field gains focus the .focus() function will trigger and change its background color from white to a nice blue. When a form field loses focus the .blur() function triggers and changes its background color back to white. Got it? Good, moving on.

Once the form is loaded and everything is in place it’s time for the end user to start interacting with the form. In the form you will notice the onsubmit attribute which targets a function called checkform, which exists in our external validate.js file.

function checkform(){
 
		$('.error').hide();
 
		var name = $("input#name").val();
 
		if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }
		var email = $("input#email").val();
 
		if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
		var message = $("textarea#message").val();
 
		if (message == "") {
      $("label#message_error").show();
      $("textarea#message").focus();
      return false;
    }
		var code = $("input#code").val();
 
		if (code == "") {
      $("label#code_error").show();
      $("input#code").focus();
      return false;
    }
	checkcode(code);
          return false;
}
 
function textCounter(limitField, limitCount, limitNum){
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0,limitNum);
	}else{
		limitCount.value = limitNum - limitField.value.length;
	}
}
 
function inputCounter(limitField, limitCount, limitNum){
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0,limitNum);
	}else{
		limitCount.value = limitNum - limitField.value.length;
	}
}

So, once again any element with a class or “error” is hidden via jQuery. Then we cascade down through a series of variable declarations and value validations. We start with the name field by gathering the value that is provided by the end user.

var name = $("input#name").val();

Then the logic uses that value to run an if statement, checking to see if there is anything there at all.

if (name == "") {
      $("label#name_error").show();
      $("input#name").focus();
      return false;
    }

This little snippet performs a comparison (==) and checks if name is equal to null, or an empty string. If it is, then obviously our end user has forgotten to provide this required data, and the label element with the id “name_error” is revealed using the .show function. The name field is then given focus via the .focus function which helps to aid the end user. return false stop execution of the script and keeps us on the same page. If the value of name is not empty, then our end user has supplied some data, and the script continues on to the next bit of logic.

This exact bit of logic is repeated for the email, message, and security code form elements.

Jumping down a bit we see a bit of logic that serves to limit the characters in our input fields. This is to prevent malicious code from being injected into the system from all the bad apples out there. I will not get into detail about this bit of logic. Look for it in a separate post, because it is cool!

IDs and Class Names

admin — Mon, 16 Mar 2009 20:58:08 +0000

There are quite a few meaningful elements to hang your styles on in a typical (x)HTML document. Take a look at a few…

h1, h2, h3, etc.
p, a, ol, li, ul
td, tr, thead, tbody, tfoot
blockquote, fieldset, legend

The list goes on and provides a very good foundation for applying your style rules. Sometimes though you just want a little more control over your pages. There are no dedicated elements to many of the areas of your documents that you would like to have control over. There is a way however to take existing elements and extend their meaning to your advantage by using css id’s and class names.

Think about the way you currently target an element. Let’s take a paragraph as an example. In a typical style rule that targets a paragraph you have your selector, attribute and value.

p {color: red;}

This will affect every p element that your style rule is connected to. This is not always desireable. If you only want to feature a single paragraph in red font, how can you do it without affecting them all? You can assign the paragraph an attribute value pair that sets it apart from the other p elements in your document. There are two ways to do this…

Class

You can assign desired elements a class which is typically used in situation where the affected elements share a common trait or similarity, like a date stamp or a heading style. If you have a number of elements on a page that you would like to feature with a unique style rule, assign them all to the same class and this one class in your style sheet will affect all of them as a group (or a class, like students in a classroom).

Anything you assign an ID to must be unique. They are best at identifying a single unique element on a page, such as the navigation section, or a particular form element. You basically do not want anything other than this one element to receive the stylistic markup from the css, so it must be an id name that is used only once. Of course you could use the same id name on another element, but then they would share the style rule from the css, and now you have yourself a class. You’ll figure it out.

Let’s take a look at some examples…


Home
Contact
Profile

Services
Location
Site Map

#navOne{background-color: blue;}
#navTwo{background-color: yellow;}
.anchors{text-decoration: underline;}

We have two lists, and each one has a unique ID assigned to it which makes it easy to style each of the lists different from the other. Each anchor within the li tags has a class of “anchors” which puts them all at the mercy of the exact same style rule as it is presented in the css.

In this way the designer has control over each of the two lists as a whole to set them apart, but each of the anchors will look the same to offer some sort of consistency.

In the css portion above you can see that ID’s are indicated by a hash mark(#) and the name of the id value from the html. Anchors are indicated by a period(.) and the name of the class value from the html.
This is very subjective, and just for the purpose of presenting an example.

There are easier ways to target elements that will allow you to use less code and html markup. We will talk about that in another post. This is simply an intro to ID’s and classes.

Beat it!

CSS Selectors

admin — Sun, 08 Mar 2009 23:47:39 +0000

To successfully target a certain (x)HTML element it must first be well-formed. We use the selector portion of the css style rule to apply our styles to specific elements.

Common Selectors (element or simple selectors):

There are two common selectors called ‘type’ and ‘descendant’ selectors. Type selectors are used to target a specific type of element, hence the name. These elements can be paragraphs, anchors, headings, etc. You just specify the type of element you want to style. These are also called element selectors or simple selectors.

p {color: #000000;}
a {text-decoration: underline;}
h2 {font-weight: bold;}

Descendant selectors target elements that reside inside another elements opening and closing tags. In the following example, all anchors inside the li (list) will be affected but no others; the a is a descendant of li.

li a {text-decoration: none;}

ID and Class:

You can be more specific in targeting elements by assigning them an ID or making them part of a class. In this way you can target only a certain group of elements (all sharing the same class) or a single element (with a unique ID). These selectors target the elements with the corresponding ID or class name only and leave all other elements alone.

You first assign the class or ID name within the target elements opening tag…

Introduction Text
 
Mark Husband-Wood

Then use the class and ID values to target them for styling…

#intro {color: #000000;}
.author {text-decoration: underline;}

Universal selector:

This puppy is basically a wildcard, and it works by matching all available elements in the entire document. This will style every targeted element on the page, and it is denoted by an asterisk. The following css rule will set the margins and padding to 0 on every element. This is a powerful selector, so be careful!

*{margin: 0; padding: 0;}

Hyperlinks with icons via CSS

admin — Sun, 08 Mar 2009 03:23:59 +0000

We all know the traditional css styles for hyperlink manipulation. The anchor pseudo-classes are great for adding small embelishments here and there, but there are a few other pretty cool techniques that can be put to use to really spice up our links.

It is difficult to tell just where a link is going to take you, or if it is going to open a specific file, etc.

There is a way to inform your guests of the intentions of your links with CSS. You can easily add an icon near your link to give your guests an idea of its intentions.

You simply add a class to any external links and in the css you give it a background url to display an external links indicator icon of your choice. I’m assuming you know how to create an anchor element and give it a class? If you don’t then I don’t feel sorry for you.

.external {
background: url(images/externalicon.gif) no-repeat right top;
padding-right: 10px;
}

This conveniently places a little icon to the right of the link, indicating that this is going to take you to an external website. We make room for the icon by adding a 10px pad to the right of the anchor tag’s contents. Try it! You’ll dig it!

If you like that, check this shit out! Attribute selectors allow you to target an element based on the existence or value of an attribute. Pretty basic. But what about substring matching attribute selectors? What? You heard me!

These babies allow you to target an element by matching up the value of the attribute (or part of it!) with text that you supply. Not sure what I mean? Example…

a[href^="http:"] {
background: url(images/externalicon.gif) no-repeat right top;
padding-right: 10px;
}

This little snippet will place the icon just as it did in the previous example. The way this does it though it target every anchor element with and href that starts with “http:” thus designating it as an external link. Sweet! Of course if you use absolute urls to any pages in your site this will affect those as well. You’ll have to figure out how to deal with that little problem.

You can do the same thing for “mailto:” links using the following…

a[href^="mailto:"] {
background: url(images/email.gif) no-repeat right top;
padding-right: 10px;

You can do the same thing for “aim:” links using the following…

a[href^="aim:"] {
background: url(images/aim.gif) no-repeat right top;
padding-right: 10px;

How about giving your users a heads up that the link points to some sort of a downloadable document like a .pdf, .doc, or .xls file? This can be accomplished with the attribute selector [att$=val], which targets attributes that end in a particular value such as .pdf, .doc, or .xls.

a[href$=".pdf"] {
background: url(images/pdf.gif) no-repeat right top;
padding-right: 10px;
 
a[href$=".doc"] {
background: url(images/doc.gif) no-repeat right top;
padding-right: 10px;
 
a[href$=".xls"] {
background: url(images/xls.gif) no-repeat right top;
padding-right: 10px;

The only indicator as to what these links are is the little icon that is added via the css. This can be accomplished in a myriad of ways, but this is just a bit more cool. And it’s a neat little trick the way it targets the elements in a variety of ways.

Peace!

Enable form fields

admin — Sat, 07 Mar 2009 03:03:20 +0000

If you do not want the end user to input information into your form until they agree to a condition, waiver, agreement, etc., you can simply disable the form fields until the user checks a box stating that they agree with the terms and conditions. This event handler calls a javascript function that enables the input fields allowing the user to supply their info. Check it out!



<script language="javascript">
 
function enableField()
{
document.input.dob.disabled=false;
document.input.idnumber.disabled=false;
document.input.submit.disabled=false;
document.input.reset.disabled=false;
chkbox.disabled=true;
}
script>
 


 

    I agree to the TTECA Third Party Agreement

         
  Date of Birth: 
  
    (i.e. 03/10/1969 or 12/11/1970)
 
ID Number:

Each of our form fields above start out with an attribute/value pair of disabled=”true”. This means these form fields are disabled when the page is loaded; they are not active and therefore cannot accept any user interaction. There is a checkbox that has the purpose of allowing the user to agree to the terms and conditions (or whatever you may have in this sense) by checking the checkbox.

When the user checks the box, the checkbox has an event handler attached to it…

<input type="checkbox" name="chkbox" onclick="javascript:enableField();">

When clicked the event will trigger the javascript function “enableField()” and all the form field elements will become active; that is they will now have a attribute/value pair of disabled=”false”. The checkbox will also be changed to an attr/value pair of disabled=”true”, so that it cannot be checked again.

Yeah, no problem.

onClick=Hide/Show a Div

admin — Sat, 07 Mar 2009 02:06:00 +0000

Ahh, Javascript; you mysterious bitch. Here’s a cool one that uses a simple function paired with an event handler assigned to a radio button to hide or make visible a div tag and its contents. Note there are two sets of functions and two ways to target those sets.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Documenttitle>
 
<script>
//this is the first set of functions
function hidediv(boxid){
document.getElementById(boxid).style.visibility='hidden';
}
function showdiv(boxid){
document.getElementById(boxid).style.visibility='visible';
}
//this is the second set of functions
function hidediv2(){
//single or double quotes do not matter in javascript. I like to use single quotes for
//all things javascript and double quotes for all things html
document.getElementById('yo').style.visibility='hidden';
}
function showdiv2(){
document.getElementById('yo').style.visibility='visible';
}
script>
 
head>
 
<body onload="hidediv2()">
 
<form name="form" id="form" action="" method="POST">
 

Hide<input type="radio" name="sh" id="hide" value="1" onClick="hidediv('yo')" /><br/>
Show<input type="radio" name="sh" id="show" value="2" onClick="showdiv('yo')" /><p>
 

Hide<input type="radio" name="sh" id="hide" value="1" onClick="hidediv2()" /><br/>
Show<input type="radio" name="sh" id="show" value="2" onClick="showdiv2()" /><p>
 
<div id="yo">Now you see me, soon you won't!

Freakin’ sweet!

CSS: An Introduction

admin — Thu, 05 Mar 2009 02:51:28 +0000

So here we find ourselves in the world of CSS. This is one of my favorite technologies yet it is also one that I have yet to fully understand and ultimately master. So let’s get to it.

What is CSS? It’s a nifty little technology that basically dresses up a markup language such as (x)HTML. If you want to get really detailed it’s a style sheet language which is a computer language that describes the presentation of structured or “well formed” documents, again such as (x)HTML.

*
{
padding: 0px;
margin: 0px;
}
body
{
background: #F9F9F7 url('images/a1.gif') repeat-x;
font-size: 11px;
font-family: Georgia, ";Times New Roman";, Times, serif;
color: #666;
line-height: 18px;
}

So what the hell is all that? What you see above is HTML and CSS presented in the same document for brevity, but it must be understood that HTML should be nested in the tags of a valid (x)HTML document, and CSS should be placed in the tag of that document or properly mapped to if it is to be external to the document (more on that later).

HTML elements provide meaning both to the browser and to the CSS style rules that manipulate them. What are HTML elements? Paragraphs, headings, anchors, divs, lists, etc. All of the HTML elements tell the browser what to do with the content that they contain. CSS uses these elements as targets for it’s style rules, and the result allows the designer to separate the content from the presentation of the content. Otherwise it would most likely end up a big old mess.