Wireless Coldfusion App

This is going to show you how to get a coldfusion app on your cellphone or pda’s micro-browser in literally minutes! It’s so easy… you’ll be surprised… I promise. Don’t forget to tell me in the comments how unbelievably easy that I have made this for you, okay?

Here we go:

First, the most important part is your first line… the CFCONTENT tag. Just copy and paste this… It will rarely change, but keep a check on the W3C website of the wapforum.org website. If you don’t have the appropriate CFCONTENT and DOCTYPE tags at the top of your cfm file, you’ll not see the page in the mobile browser. If you are using firefox, search for the micro-browser or wml browser extension, so that you can just test in firefox.

Very, VERY important to pay attention to adding your xml tag DIRECTLY after your CFCONTENT… same line and everything. Just like this:

<cfcontent TYPE=”text/vnd.wap.wml”><?xml version=”1.0″ encoding=”iso-8859-1″?><!DOCTYPE wml PUBLIC “-//WAPFORUM//DTD WML 1.1//EN”
“http://www.wapforum.org/DTD/wml_1.1.xml”>

Next, just add your typical CFML query, as normal. Let’s get all of the Jones’ family phone numbers to display.

<cfquery name=”qContacts” datasource=”#ds#”>
select firstname, lastname, phonenumber
from contacts
where family=”Jones”
</cfquery>

Easy enough so far, right? Now, let’s make this baby output some mobile data!

<wml>

<card title=”Contacts”>

<cfoutput query=”qContacts”>
#firstname# #lastname#: #phonenumber#
</cfoutput> </card>

<wml>

And that, my friends, is a crazy easy ColdFusion web application! Don’t believe me? Go try it yourself. It’s easy stuff… so, go now, and write a dozen little mobile apps for your coldfusion websites.

What I like to do is have “mobile” subdomains. So, for example I have “www.sound-hole.com” for the bands website. Now, for their mobile website… I just have it setup to show their fans their tour dates for that week. So if they (or you!) go to “http://mobile.sound-hole.com” on any mobile device, like your phone or pda, you can see any show that the band is playing in the next week. Pretty schnazzy, huh?

Enjoy!

 

Flash/ActionScript – Open Window

Even with the most basic flash webpage, you should at least know how to open a new window using ActionScript. If you are no ActionScript master, it’s okay, as long as you can fumble your way through Flash itself. Go to “Windows” and then show the “Actions” pane. You can use either Simple or Advanced mode. I would start out using Simple Mode so that you can easily drag and drop functions to the code panel and get a feel for ActionScript syntax.

If you are familiar with JavaScript or even C++ syntax, you’ll definitely see some similarities here with your basic “if” statements, “while loops” and such. Okay… let’s get onto the new window.

First, let’s start with our event. You can add any button for starters, or graphic, whichever you choose. Next, add an action (you can right click and go to Actions there). For your event, you’ll handle this much like an HTML “onmouseover” or “onmousedown” attribute. The syntax for ActionScript is somewhat different.

on (release) {

}

Easy enough, right? Next, onto our new window.

on (release) {
getURL(“http://www.ezmofo.info”,”EZMOFO”);
}

Easy, easy stuff here. Try it out, kids, and as always… enjoy!

 

Javascript – Hiding/showing items

This is a javascript function that you will see in several different forms, yet all accomplish the same task. It is true what they say about “skinning a cat”… I wonder though… just how many ways are there really to skin a cat. I mean isn’t there really just 1 way… unless you consider all of the different tools you could use. Okay… I regress. Back to javascript:

function toggleMe(who) {
var elm=document.getElementById(who);
elm.style.display=(elm.style.display==’block’)?’none’:'block’;
}

Your html portion of this would be:

<div id=”foo” style=”display:none;”>

You can, of course, use this with span, div, td… pretty much anything. You can also use visibility which will utilize the space of the element, even if it is hidden. By using the display attribute, the space is actually collapsed when hidden. Play around with it and you’ll see the difference. To use the visibility attribute, you’ll use the following javascript dom breakdown (no… not breakdance… that’s optional):

elm.style.visibility=’visible’

OR

elm.style.visibility=’none’

That’s it… pretty back stuff. All we are doing is looking for the existing display value of our elements style. If it is currently shown, then we hide it. And vice versa… if it is currently hidden, then we show it.

You’ll see this about 100 different ways, but I’ve been doing it this way to save space. For those of you who aren’t familiar with using inline if statements in javascript, it’s really easy… take a look:

// this means set elm.style.display=(if display=’block’)?then set display to ‘none’:else set display to ‘block’
elm.style.display=(elm.style.display==’block’)?’none’:'block’;

// long version would be as follows
if (elm.style.display==’block’) {
elm.style.display=’none’;
}
else {
elm.style.display=’block’;
}

Well, that’s all for now. Hope this has helped you somehow… I know that I sure use it a lot. Let me know if you have any other techniques that you use together with this that you would like to share. And for now… goodbye!!

 

Center Popup Image JavaScript

This is a very quick and easy javascript function to use on images that you want to “pop-up” in the center of your page. Of course, you can also use this for popping open any new window in javascript, but I needed something specifically for opening images. Turns out it was alot easier to accomplish than I had imagined.

function launchSlides(h,w,url,title) {
var left = (screen.width – w) / 2;
var top = (screen.height – h) / 2;
var attributes = ‘height=’+h+’,width=’+w+’,top=’+top+’,left=’+left+’resizable=0′
window.open(url, title, attributes)
}

Keep in mind, you can add many other attributes… some of which are scrollbars=yes|no or resizeable=yes|no. I’m sure you can just google or koder (koders.com) something like “javascript window.open attributes” to find the basic window properties that you can adjust.

Well, that’s all for now..

 

JavaScript – Form Validation Numbers Part 1

This tutorial will be an ongoing look at form validation using JavaScript. Ideally, you should have a basic understanding of HTML and JavaScript before attempting this tutorial.

Part 1 – Basic Integer Validation
Part 2 – Routing Number Validation (Checks)
Part 3 – Credit Card Number Validation (Visa, MasterCard, American Express, Discover)

Let’s dive right into our JavaScript function. I have this in a JS file, formValidate.js, that I include in my HTML file that has my form. In on <form> tag’s ‘onsubmit’ attribute, I use ‘onsubmit=”return formValidate(‘myFormName’)”‘. A beginner’s mistake is to forget the “return ” portion in the onsubmit attribute. Forgetting to add the “return” portion in your “onsubmit” or in your function will result in the form continuing to process regardless of how great your JavaScript validation is.

On to the function.

function formValidate(myForm) {

// loop through all form elements
for (var i =0; myForm.legnth; i++) {

// get current form element
var elm = myForm.elements[i];

// basic integer validation
if (isNaN(elm)) {
alert(‘The form field ‘+myForm.elements[i].name+’only allows numbers.’);
return false;
}

return true;
}

}

Easy peasy, right? Just loop over all elements and then start adding in your validation for each type of validating that you want to run. Next, I’ll show you the javascript function that I wrote for handling checking account routing numbers. Stay tuned.

 

Aggregates

Hey Christie, first let me say thanks for the invite. I will do my best to help contribute as much as I can. First let me say thanks for the tutorial on the isohunt code. I remeber when you first wrote it. I would like to contribute what knowledge I have regarding databases and the back end part of web development, as I am not much of a front end guy. Hopefully this is ok.

In database programming one mantra I always try to live by, is “Give the front end guys what they ask for. No more, No Less, and give it to them in a way they don’t have to loop over it more than once, or do anything ither than display it.”

This is often hard to achieve, especially when there is say one table that causes many rows to be returned for what logically should be one row.

Lets take the following example:Two tables, one called customers the other called accounts. The tables are joined by a customer_id, and each customer can have many accounts. This is a basic one to many relationship. Now assume that a web developer wants to display a list of customers and all their account numbers. A traditional way to do this is to perform a basic query such as:

SELECT * FROM customers INNER JOIN accounts ON customers.customer_id = accounts.customer_id;

This will return a set where all the info in customers is duplicated for every account that they have. If the set were returned to the web developer in such a manner they are now responsible for filtering through that data just to see where the rows change customer_id to get the different acct_ids. Don’t they have enough to do? It would be much easier on them if all they got back was one row per customer with all the account_ids squished into one column. Lets look at how to do this.

First we have to talk about platforms. My area of expertise lies with the PostgreSQL database server and I am slanted towards it. However this can be accomplished with nearly any enterprise level database, SQL Server, and Oracle included. Wherever possible I will try to show examples in those two platforms as well.

SQL server 2000 has no array data type. So to accomplish the above you have to use T-SQL a UDF (User Defined Function) that takes a set and compresses it to a delimited string. I will have to find some old SQL Server code and post it later for an example.

PostgreSQL server makes the same type of thing very easy. Arrays are a built in data type and it lets you define custom aggregate functions. Example:

CREATE AGGREGATE set_2_array(
BASETYPE=anyelement,
SFUNC=array_append,
STYPE=anyarray,
INITCOND=’{}’
);

CREATE AGGREGATE is pg’s command for making the aggregate function. set_2_array is an arbitrary name i picked. To
define a new aggregate function, one selects a data type for the state value(STYPE & BASETYPE), an initial value for the state(INITCOND), and a state transition function(SFUNC). The state transition function is just an ordinary function that could also be used outside the context of the aggregate. Lets make that easy: I am making a function that is taking many rows and stuffing them into an array that will come out in one column. I choose a base type, I want it to be anything so I chose anyelement, I choose a function that is called for every row that is processed, I chose array_append, which simply appends elements onto the end of an array.

Now armed with the new aggregate function I can re-write our example query as such:

SELECT customers.*, set_2_array(accounts.acct_id) as acct_ids FROM customers INNER JOIN accounts ON customers.customer_id = accounts.customer_id;

This will give me all the columns from the customers table and all the acct_ids associated with that customer in a single column called acct_ids. Easy processing for the front end guy.

I hope this was useful for someone!

 

About EZmofo

EZmofo (Easy Motha‘ Fuggin‘) tutorials decided up camp in the back of my mind years ago. It wasn’t called EZmofo at the time and it wasn’t in the form of a blogspot domain, but I knew that I wanted an online presence that I would use to share “tips and tricks” that I have ran across or developed on my own.

EZmofo was a domain name that was originally coined by my colleague, Steven Childs, but we had intended on using it for a cell phone photo gallery web/mobile web application that I was building at the time. Then, EZmofo was blurted out of Steve’s mouth as a play on the words “Easy Mobile Phone Gallery… EASY MObile PHOne gallery… get it.

So, anyhow, sometime later after discovering and falling in love with flickr.com, I canned my Easy Mobile Phone Gallery project, but knew that EZmofo was just too good of a name to let fade away. That brings us to this blog, EZmofo.blogspot.com, which I wanted to be used for the tutorials website that I always wanted to build. I wanted a place for myself and a few of my trusted friends and colleagues to post tutorials… good tutorials with no broken links, no misspellings and absolutely no black backgrounds with purple fonts and hideous CSS decisions. Too many times I have found a website whose author was promising to teach me a technique for web application development and they didn’t bother to make a good website to house their tutelage.

I hope that this helps me to help other users. I love teaching others and I have found that explaining something helps me become even better at what I do. The more I explain and discuss JavaScript, AJAX, XML, CSS and so on, I feel as though my skills get a little stronger.

I have often read that the best way to become a master at anything is to write a book. I can definitely get used to being called “Master” and EZmofo will be mine book… well, our book. I’ll be recruiting the help of fellow collegues, friends and acquaintances to help me along the way. I hope that everyone enjoys the site and learns what they came here to learn. Please feel free to comment on our entries if you have any issues or ideas regarding our code snippets. And if you have any additions or better ideas, please let us know… There is definitely no one road that leads to any end result in web and software application development.

Welcome and enjoy… I sincerely hope that we can blossom into a well written, well liked and accomplished tutorial location. If you would like to help us in our journey, please let us know. We’re looking forward to meeting other developers and designers who keep their eye on quality work. We don’t believe in 80% here. From an ad in PC Magazine recently: “80% of applications are delivered incomplete. 100% of customers really hate that.”

 

Expanding Div’s or Iframes

This javascript is used on isohunt.com and is a great way to make use of limitted real estate. The script is rather easy to use and today after explaining how to use it to a fellow collegue, I thought it would make a great first entry for EZmofo. Please feel free to comment with additions or to note any mistakes I’ve made!
Enjoy -cj.

Basically how this works is that you call the function once to expand from your current height of 0px by the step height (stepH) value that you pass. Once you call the function, it will continue calling itself passing the current height (curH) and the target height (targetH). Whenever it reaches it’s final target height (determined by the diff var, which is target height minus current height), then it knows to stop.

Remember, since this function loops over itself to arive at the final height, you must have your step height be divisible by the target height… if not, it will start flashing and never look right. Also, the stepH will help determine how smoothly and/or quick it expands… the function will call itself after 10 milliseconds. So, if your current height is 0, your step height is 10, and your target height is 300… the function will run 30 times (making it rather smooth). But if you change your step height to 50, then it only runs 6 times. Play around with the numbers and you’ll see what I mean.

So, you should have a div similar to this:

<div id=”myDiv” style=”height:0px;width:300px;display:none;”>

You can have a link like this:

<a onclick=”smoothHeight(‘myDiv’,0,300,10)”>Expand my div</a>

<!– so, myDiv starts at 0px, expands to 300px, stepping 10px every 10 milliseconds (10px passed here, 10 milliseconds hardcorded in function –>

So, as you can see there, if you want it to shrink back up once it has already been expanded, just reverse the start height and target height… like this:

<a onclick=”smoothHeight(‘myDiv’,300,0,10)”>Close my div</a>

And here’s the javascript:

 

var smooth_timer;

// id: id attribute on div that you want to expand

// stepH: (step height) that you pass much be divisible by the targetH (target height) or this function will not work!!

// curH: (current height) should start at 0 (don’t use px)

// targetH: (target height) this example uses 300 (we want to expand from 0px to 300px)

// mode: can only be set to “o” (lower case o)… mode just lets the function know if it should keep going

function smoothHeight(id, curH, targetH, stepH, mode) {
diff = targetH – curH;
if (diff != 0) {

//set the new height… this will be the current height +/- the number of pixels you pass as “stepH”
newH = (diff > 0) ? curH + stepH : curH – stepH;

//add the new height to your current height
((document.getElementById) ? document.getElementById(id) : eval(“document.all['" + id + "']“)).style.height = newH + “px”;
if (smooth_timer) window.clearTimeout(smooth_timer);

//run smoothHeight() again after 10 milliseconds, passing our new height as the current height
smooth_timer = window.setTimeout( “smoothHeight(‘” + id + “‘,” + newH + “,” + targetH + “,” + stepH + “,’” + mode + “‘)”, 10 );
}
else if (mode != “o”) ((document.getElementById) ? document.getElementById(mode) : eval(“document.all['" + mode + "']“)).style.display=”none”;
}