Some Day I’ll Complain

But not today. Just too nice today to be in a foul mood over slow paying customers.

Simply a magnificent day outside.

Mobile post sent by davidjhinson using Utterz.  Replies.  mp3

Custom FBML Dialogs in Facebook Apps

There are several examples around on doing custom Facebook dialogs, some which are satisfactory and some which are not. Here is some code that I use to create custom FB dialogs that I can position, color, style at will.

First, let’s look at the FBJS function to invoke a custom dialog. In this case, I have created a dialog that accepts Yes / No answers. By convention, I assume that I will define a dialog somewhere on my page named “question_dialog1″.

// Custom yes / no dialog that we can position
function showYesNoDialog(id, title, content, confirm, cancel) {
document.getElementById(id).setStyle(”display”, “inline”);
if (confirm) {
document.getElementById(’yes_button1′).removeEventListener(’click’, confirm, false);
document.getElementById(’yes_button1′).addEventListener(’click’, confirm, false);
}
if (cancel) {
document.getElementById(’no_button1′).removeEventListener(’click’, cancel, false);
document.getElementById(’no_button1′).addEventListener(’click’, cancel, false);
}
document.getElementById(”question_title1″).setTextValue(title);
document.getElementById(”question_content1″).setTextValue(content);
}


The first thing I do is display my question dialog, which is initially styled {display: none;}.

Next, I attach a couple of click events - if present - to two buttons, yes and no, for confirmation and cancel (by convention, I use yes_button1 and no_button1, but you can certainly parameterize this or better yet encapsulate in a class).

Finally, I set Title Text and Content Text using the setTextValue method.

A typical call to this dialog might look like the following (I use the built-in FBJS Ajax object):

var yes = function() {
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
document.getElementById(”delete_dialog1″).setStyle(”display”, “none”);
document.setLocation(”http://apps.facebook.com/SomeApp/ThisPage.php”);
}
ajax.onerror = function() {document.getElementById(”delete_dialog1″).setStyle(”display”, “none”);}
newShowDialog(”delete_dialog1″);
ajax.post(’http://apps.facebook.com/SomeApp/performDelete.php?fbid=’ + <? echo $user; ?>;
}

showYesNoDialog("question_dialog1", "Delete Record?", "Delete \"" + argRecordDescription + "\"?", yes);

The actual FBML for the question_dialog1 looks something like the code below. You can style this anyway you want; I usually try to get my dialogs to look like the styling of the application to which the dialog belongs, but do whatever floats your boat here.

<div id="question_dialog1" style='display: none; position: absolute; top: 300px; left: 150px;'>
<table>
<tr>

<!-- Transparent border around dialog, like FB built in dialogs-->

<td style="background-image:url('http://app.facebook.com/SomeApp/Images/pop_dialog_border.png');">

<div style='border: 2px solid #8ec73c; background: white; font-size: 18pt; margin: 10px;'>
<div id=’question_title1′ style=’background: white; padding: 2px; color: white; background: #8ec73c; font-weight: bold; font-size: small;’>Title Here…</div>
<div id=’question_content1′ style=’font-weight: bold; font-size: 12pt; padding: 10px 30px 10px 30px; border-bottom: 1px solid #8ec73c;’>Dialog content will go here…</div>

<div style='background: white; text-align: right; padding: 10px; font-size: small; height: 20px;'>

<input id='yes_button1' type='button' value='Yes' onclick='document.getElementById("question_dialog1").setStyle("display", "none");' style='background: #8ec73c; color: white; width: 40px;' />

<input id='no_button1' type='button' value='No' onclick='document.getElementById("question_dialog1").setStyle("display", "none");' style='background: #8ec73c; color: white; width: 30px;' /></diV>
</div>

</td></tr>
</table>
</div>

Finally, a note to code nit-pickers: This example is meant to be illustrative and not a comprehensive way on how best to do Facebook dialogs or write FBJS.

Observations on Utterz

Observations on Utterz and sound quality.

Mobile post sent by davidjhinson using Utterz.  Replies.  mp3

Go Preds!

Go Preds! Congrats on the 5-3 win at the Sommet Center last night!

Series now 2-1 in favor of the Detroit Red Wings.

Mobile post sent by davidjhinson using Utterz.  Replies.  mp3