Customizing the look of a cfform alert
As a follow up from the post Alert box for cfform, we would like to show how to change the appearance and size of an alert popup.
First, we will create the alert using a different technique that will give us a pointer to the created alert so that we can change the size. All the other style properties can be set globally and will apply to all alerts, no matter how they were created (either by Alert.show() or by alert()).
var myAlert = mx.controls.Alert.show("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, this, myClickHandler);
after that, we can change the size of the window by
myAlert.width = 300;
myAlert.height = 150;
Note that setting the width and height may create a scrollbar if the text is too long.
Or change a specific css property:
myAlert.setStyle("fontStyle", "italic");
We can also change other properties of all alerts before they are created:
//we can set any css value such as fontWeight or fontSize
_global.styles.Alert.setStyle("color", 0xFF0000);
//to change the labels of the buttons:
mx.controls.Alert.cancelLabel = "Don't!";
mx.controls.Alert.yesLabel = "Sure";
//to change the size of the buttons:
mx.controls.Alert.buttonWidth = 100;
//set the style of the title only with a named style declaration
mx.controls.Alert.titleStyleDeclaration = "windowStyles";
Donload the source for the complete code
Update: See follow up post
Steve Walker
Brian Sloan
Steve Walker
Here is my version of your code:
<cfsavecontent variable="showAlert">
//set the style of the title only with a named style declaration
mx.controls.Alert.titleStyleDeclaration = "windowStyles";
mx.controls.Alert.cancelLabel = " Close ";
var myAlert = mx.controls.Alert.show
(dc_grid.selectedItem.ecri_definition, dc_grid.selectedItem.dc_nomenclature, mx.controls.Alert.CANCEL);
//change this alert's style only
myAlert.width = 500;
myAlert.height = 350;
myAlert.setStyle("fontStyle", "italic");
myAlert.setStyle("cornerRadius","0");
myAlert.setStyle("fontSize", "11");
</cfsavecontent>
The Scarecrow
Great site with plenty of insperation.
Not sure if you know but I thought I would try the following and it worked. I downloaded the source and moved the as code to an as file to be included.
<cfsavecontent variable="showAlert">#include "showAlert.as"
</cfsavecontent>
Sven Delporte
sven
this doesn't work with me
i use this code.
<cfsavecontent variable="showAlert">
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
submitForm()
}
}
alert("Are you sure you want to remove all records?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
<cfform name="myform" height="200" width="400" format="Flash" action="test.cfm">
<cfformgroup type="hbox">
<cfinput type="Button" name="myBtn" onClick="#showAlert#" value="Show Alert" />
</cfformgroup>
</cfform>
but the form doesn't submit or doesn't generate an error
thx for the help
Todd
<cfform onsubmit="
var turd = something;
var furguson = somethingelse;
if (turd <> furguson) { alert(Turd must equal Furguson. Please Correct.', 'Warning', mx.controls.Alert.OK); return false;}">
That will prevent the form from submitting until turd = furguson.
Now onto my question - Laura - Can you help me figure out how to add a .wav file as a notifier when the alert box is triggered?
Todd
Laura
Your code is fine, just do
_root.submitForm();
instead of just submitForm();
sven
why didn't i came up with that
Steve Walker
Wayne
Thank you for all your great work. I have a question? Is it possible to import a full actionscript.as page into a cf flash page. So that you dont have to have cfsavecontent for each component. I would like some components to be disabled when the page loads etc.
Wraith-CF
Any ideas?
Laura
Try adding
myAlert.contentAlert.width = 290 (a number slightly less than the alert width)
Steve Walker
Thank you. Although it doen't completely solve my problem it is much better. Out curiosity, where did you find the contentWidth property. I have looked in Flex and AS documentation with no luck.
Steve
Laura
Yes, it is not in the docs and it took me a while to find. I went over all the properties to see if I could find the reason why the content wouldn't span the whole window.
But you know: undocumented = unsupported and subject to change.
:)
Mary
Raúl
Raúl
Neil Bailey
Has anyone managed to do this successfully? Or am I the only bonehead actually making the attempt?
Thanks!
Kiley
How can you differentiate which button was pressed?
Mike Kaminsky (ICF Consulting)
Yes there is ...
<cffunction name="ConfirmSubmit" returnType="string" output="true">
<cfargument name="myCanvas" type="string" required="yes" hint="Area to center alert message.">
<cfsavecontent variable="myScript" >
var myClickHandler = function ( event )
{
if (event.detail == mx.controls.Alert.OK)
{
_root.submitForm();
}
}
var myAlert = mx.controls.Alert.show( "Are you sure you are ready to submit this survey?", "WARNING",
mx.controls.Alert.OK | mx.controls.Alert.CANCEL, #ARGUMENTS.myCanvas#, myClickHandler, "" );
</cfsavecontent>
<cfreturn myScript>
</cffunction>
Where "myCanvas" is the object to center within. By default, the alert will center in the middle of the cfform object. But, as demonstrated in this function, if you pass the id of a specific component (such as the name of a particular grid or vbox or tabnavigator), it will center in that area instead.
jas48324
_global.styles.Alert.setStyle("color", 0x9C0000);
But how can I use the same procedure to control the validation popups that are generated when requiring fields and using onsubmit validation?
I've searched and searched and can't find the appropriate attribute name (ie Alert, ErrorTip, etc.)
Gerry Fontaine
import mx.controls.Alert;var msg:Alert;
msg=Alert.show("Message", "Title");
msg.move(285,100);
Rick
import mx.styles.CSSStyleDeclaration;
var titleStyles = new CSSStyleDeclaration();
titleStyles.setStyle("titleBackground", "0x0066cc");
However, it's obvious that you can't use "import" and you can't use "new". So, for those of us who may have missed it somewhere, could you explain how to create a style that can be used to skin an alert box title bar? Thanks! :-)
Rick
function loadCSSStyle():Void {
// Create a new Style Declaration
var styleObj = new mx.styles.CSSStyleDeclaration();
// Name the new style object
styleObj.styleName = "newStyle";
// Add the new style object to the list of global styles
_global.styles.newStyle = styleObj;
//Set the style attributes
styleObj.setStyle("fontWeight","bold");
}
Then I called the loadCSSStyle function from within my onFormLoad function, which IS included in the cfforms <cfformitem type="script"> block. Once the loadCSSStyle function is loaded in this method, the global styles that are assigned within it become available. Through trial and error I found that following way of declaring an alert box allowed me to apply the new global styles.
var myAlert = mx.controls.Alert;
myAlert.titleStyleDeclaration = "newStyle";
myAlert.show("Are you sure you want to add an action?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, _root.oActionPanel, confirm);
As a result I am now able to apply custom created styles to my alert boxes, and I'm sure just about anything else that you can assign a style declaration to.
Hopefully this will help anybody else who runs into this issue and in addition, hopefully Macromedia / Adobe won't remove this "exploit" in another revision as it'll break the solution. Then it'll boil down to having to run an external .swf hack to get this functionality. I honestly don't see why they have a problem with us being able to skin an alert box within cfform, I mean, you can pretty much skin everything else.
scot
<cfsavecontent variable="callingCFC">
var myID = id.text;
var myObj = {};
var myClickHandler = function (evt){
if (evt.detail == mx.controls.Alert.OK){
* HERE *
}
}
alert("Are you sure you want to remove this record?", "Warning", mx.controls.Alert.OK | mx.controls.Alert.CANCEL, myClickHandler);
</cfsavecontent>
Neil
Why on EARTH are you using cfSaveContent? Why not just write the function and pass in the value?
George
Thanks,
George
Michael White
<cfformitem type="script">
function validateUserLogin() {
var UserLogin = UserLogin;
var connection:mx.remoting.Connection = mx.remoting.NetServices.createGatewayConnection("http://affinity.cove.com/flashservices/gateway/");
var myService:mx.remoting.NetServiceProxy;
var myAlert = mx.controls.Alert.show('UserLogin ' + UserLogin.text + ' is already taken! Please select an alternate UserLogin.','Duplicate User Name Error');
var responseHandler = {};
responseHandler.onResult = function( results: Object ):Void {
if (results == 0) {
_root.tnav.selectedIndex=0;
UserLogin.setFocus();
alert(myAlert);
return;
}
_root.submitForm();
}
myAlert.setStyle("themeColor", "0x7979AC");
myAlert.setStyle("headerColors", "0x9999CC","0xADADDF");
myAlert.setStyle("backgroundColor", "0xF5F5F5");
myAlert.setStyle("fontSize", "12");
myAlert.setStyle("panelBorderStyle","default");
responseHandler.onStatus = function( stat: Object ):Void { alert('Error while calling cfc:' + stat.description); }
myService = connection.getService("components.lookup", responseHandler );
myService.checkUserLogin(UserLogin.text);
}
</cfformitem>
I'm sure it has something to do with the way i'm calling the alert but I have no idea what I'm doing...
Laura
The problem you have is that you do:
var myAlert = mx.controls.Alert.show('blah');
and then later you do:
alert(myAlert);
The alert() function expects a string, not an instance of an alert, and that is why is trying to convert this instance into its string representation.
mx.controls.Alert.show() does the same thing as alert(). Use either one of them inside the onResult function. If you want to customize it, do everything inside the function and use show()
Michael White
var myAlert = mx.controls.Alert.show('blah')
and then later use
show(myAlert); instead of alert(myAlert);
or are both illegal?
Michael White
Michael White
Ed
I was wondering if anyone has an answer for changing the style of the cold fusion generated errors? I have looked as has jas48324 in his post to try and find the right handle to these errors but have not been able to find anything. I am trying to control the color and header of the automatic alert boxes that pop up in white with no header upon a coldfusion validation error. Perhaps this is easy but I am just not getting it.
Any help would be greatly appreciated and as usual, You guys contiue to ROCK!!!
Thanks in advance,
Ed
Jon
Is there any way to control WHERE the alert box is actually displayed? I have played with the x and y properties, as well as the move() method, with no success whatsoever.
I have a form with 5 CFFORMGROUP Type=Panel. Inside of each panel is a grid. A user can remove rows from each grid seperately. I cannot get the Alert PopUp to occur in the correct Panel.
I have used reply 28 by Mike Kaminsky posted on December 19, 2005 at 11:01 AM, but the Alert only shows in the center of my first Panel CFFORMGROUP.
Any ideas?
Thank you in advance.
Maggie
Just wondering if there is an easy way to close the alert box by itself, using alert.hide() or something. I would like the alert box to close on it's own after a few seconds, without the user having to click "ok".
Simon
Does anyone have any ideas ?
Mallek
add
update
or delete
since i am trying to confirm the delete I changed the type from submit to button to fire off the actionscript without submitting the form but the delete button field is not passed with the form.
Thanks in advance,
Mallek
Alvarez