CAF.Dialog Class
A composite application can simulate the core JavaScript alert(), confirm(), and prompt() popup dialogs with a DHTML popup window. The main functional difference, other than the ability to display HTML-formatted messages is that the core JavaScript versions block program flow until the user closes the dialog, whereas the CAF.Dialog versions do not. If you want to perform some action as a result of the user input, you have to pass a callback method. For example, the following code prompts a user for a zodiac sign, and then responds to a click on the prompt's OK button by displaying a second (alert) dialog:
CAF.Dialog.prompt("What's your sign?", "Capricorn", function(value) {
CAF.Dialog.alert("I'm a " + value + " too!");
});
You can also apply validation to a prompt() dialog such as with the following example that does not let the user click OK without first entering a number between one and ten:
CAF.Dialog.prompt(
'On a scale of 1-10, rate this prompt:',
'10',
function(value) {
CAF.Dialog.alert('You entered ' + value + '.');
},
function(value) {
CAF.Dialog.alert('You canceled!');
},
{
buttons: {
ok: {
validate: function(form) {
var n = parseInt(form.prompt);
if (n < 1 || n > 10)
return 'Please enter a number between 1 and 10.';
return '';
}
}
}
}
);
The CAF.Dialog.show() method can create more sophisticated dialogs with custom content. The following example displays an account creation dialog, with Username, Password, and Confirm Password fields, as well as a custom "?" button.
CAF.Dialog.show({
title: "Create an Account",
content: "Username: <input name='username' class='input10'>"
+ "<br>"
+ "Password: <input name='password' type='password' class='input10'>"
+ "<br>"
+ "Confirm Password: <input name='password2' type='password'
class='input10'>",
buttons: {
ok: {
label: "Create",
"class": "button6",
defaultCommand: true,
fn: function(form) {
CAF.Dialog.alert("Created new user " + form.username);
},
validate: function(form) {
var errors;
if (form.username.length < 8) {
if (!errors) errors = {};
errors.username =
"Username must be at least 8 characters long.";
}
if (form.password.length < 8) {
if (!errors) errors = {};
errors.password =
"Password must be at least 8 characters long.";
}
if (form.password != form.password2) {
if (!errors) errors = {};
errors.password2 =
"Confirm Password must match original Password.";
}
return errors;
}
},
cancel: {
label: "Cancel",
"class": "button6"
},
popup: {
label: " ? ",
validate: function(form) {
CAF.Dialog.alert("I dunno either");
return {}; // prevent dialog from closing
}
}
}
});