Customizing a cfform alert with pictures and sound
I received a lot of questions from the post Customizing the look of a cfform alert so I thought I could respond to all. One problem people were having was that even though the alert was resized, the text inside was not changing accordingly. I do not have a solution for that specifically since it seems to be a bug. But if we only want to show text (and pictures) and an ok button (not a confirmation alert, but a simple alert), then we can use a different technique.
Yes, there is yet another way to create an alert. In this case we can add html to the message, but bear in mind that it is really buggy! Pictures get cropped, and other strange things happen. In addition, this technique is highly dependant on the way validation errors are shown by CF (with a popup), meaning that if in the next version of ColdFusion that is changed, this code will brake. So you are warned. Now to the code:
Set up the message we want to show first:
var msg = '<p>Adding some html</p>';
Since we can write html, we can add a picture or a swf file in the message:
var msg = '<img src="alert.jpg" align="left" height="40" vspace="0" width="35">';
Then create an object with the alert settings: the title, the message, the width, height, and x and y, the window's initial position.
var alertSettings:Object = {title:'Warning', message: msg, width:350, x: 60, y: 10, headerHeight: 27}
We then show it, making sure we use errorpopup as the alert variable name, otherwise we will not be able to close it.
errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);
then center it if you want:
errorpopup.centerPopUp(this);
Hack level: Very high. Might very likely not be available in future versions
Mika
<cfselect name="Home" ><option value="">HOME</option>
<option value="" onClick="getURL("http://www.macromedia.com", "_blank")">History of Rugweaving</option>
<option value="">QuickFacts</option>
<option value="">Home</option>
</cfselect>
Please help me!
Mika
Brian Sloan
Try this...
<cfsavecontent variable="change">
if (selectName.selectedItem.data == "option1"){
getURL("page1.cfm", "_blank");
} else if (selectName.selectedItem.data == "option2") {
getURL("page2.cfm", "_blank");
}
</cfsavecontent>
<cfselect name="selectName" onChange="#change#">
<option value="option1">page 1</option>
<option value="option2">page 2</option>
</cfselect>
Brian
Mika
Actually it works like this too:
<cfselect name="ABOUTUS" onChange="getURL(ABOUTUS.selectedItem.data, '_parent');" ><option value="#">ABOUT US</option>
<option value="link1">About Company</option>
<option value="link2">Contact Us</option>
</cfselect>
ktucci
[Embed(source="wait.jpg")]
var waitCursorSymbol:String;
mx.managers.CursorManager.setCursor(waitCursorSymbol);
Mitch
This is really neat. I to use this from within a function
i.e
var showMessage = function(message,title){var msg = '<img src="alert.jpg" width="35" height="40" vspace="0" align="left"/><p><b>html</b></p>';
var alertSettings:Object = {title:'Warning', message: msg, width:350, headerHeight:27 }
var errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);
errorpopup.centerPopUp(this);
alert('trace');
}
flash player compiles, but stops responding.
Any ideas?
Thank you
Dan
Laura
You can call an alert from anywhere in your ActionScript code. But ActionScript code in cfform only runs after an event triggers, it could be the form onload, the click of a button, a grid item selection, an item acquiring focus, a remoting call returning, etc.
Dan
Gomez
<cfsavecontent variable="check">
var numBoxes:Number = chk.length.toString();
var count:Number=0;
for (var i:Number = 0; i < numBoxes; i++) {
if (count > 10) { alert("You can't choose more than 10 players","WARNING", mx.controls.Alert.CANCEL);text.visible=false;break; }
if (chk[i].selected == true) {count++;}
if (count==10) {text.visible=true;}
if (count < 10) {text.visible=false;}
}
</cfsavecontent>
is it possible?
I try to serac on Flex doc but i dont undderstad x and y propriety.
tanx
Gomez
Javier Julio
Micah Knox
function viewRating():Void
{
var alertSettings:Object = {title:'Highly Effective', message: rating1.text, headerHeight:30, textAlign: 'center' };
errorpopup = mx.managers.PopUpManager.createPopUp(this, FormErrorException, true, alertSettings);
errorpopup.centerPopUp(this);
}
<cfform>
<cftextarea type="text" name="rating1" width="550" style="marginLeft: 40px;" readonly>This is the message that I want to display and it is generally a couple of sentences long. It always constricts the width of the message in the popup. Why is that?</cftextarea>
<cfinput type="Button" name="myBtn1" onClick="viewRating()" value="Highly Effective" />
</cfform>
Michael White
cEngland
Customizing a cfform alert with pictures and sound
I cannot seem to see where the code to manipulate the sound is.
Thanks
Laura
The code to add sound is the same as the code to add an image. Just replace your image source (src="alert.jpg") by a swf file that contains the sound (ie: src="alertSound.swf").
Eddy
SOme one had this problem before ?
dkedia
I am generating a popup thru actionscipt:
myTW = mx.managers.PopUpManager.createPopUp(_root, mx.containers.Window, false, {closeButton: true, title: _root.reqmessage1, _width: 610, _height: 232, _x: 120, _y: 240, color: 16711680,contentPath:radioButtonArray[_loc2].object.bkimage});
where,
bkimage represents any img/swf which comes from an xml file. Now, i have already specified the width& height in the properties. But, when the image is bigger or smaller, i would like to have the popup scale itself accordingly. What changes do i make to the script?
the img/swf in this popup changes when the user clicks on a radiobtn or chk box. That code is ok. but the problem comes when i want only the img to change ( that's happening even now) but the popup also refreshes each time the radio/chk is clicked. I don't want the popup to refresh.
Ken
I'm trying to make the alert blend in with the rest of the application. I know that I can use headerColor and this changes the color of the header. But this also has a "footer" that contains the button(s) which I can't find the attribute name for.
Ken
Laura
Look in the Flex docs for mx.controls.Alert, and also in mx.controls.Button if you need to style buttons.
Kristin
I'm having difficulty moving the alert from the center of the form. I'm using a function to check on my own that all the fields were filled in how I want them, then if msg != "", I show mx.controls.Alert.show(msg, "my Title", mx.controls.Alert.OK, this, myClickHandler);
I checked the flex documentation, and the "this" parameter refers to the parent against which the popup should be centered. I don't want it centered, though, I want it at the top (I have a long form). I tried replacing "this" with "null", but didnt' see any change. In the Flex example, they have the number 3 there, and I tried that but got an error.
I remember seeing in one of your forms _global.styles.Alert.setStyle("top", 50) - what does this do? I tried changing that number, but couldn't see any effect. Does anyone have any idea of how to get a regular alert box to not be centered (besides using the technique described above which might break in future versions - I couldn't get that to have a scroll bar if the msg was higher than the height).
If this is a bug that can't worked around, can someone point me where to submit it to Adobe?
Thanks!!!
(btw, this site is where I've learned 90percent of my Flash Form development - you guys are awesome. I look foward to learning Flex on here, too!)
Laura
You should be able to position the alert using the code the in the third box in the post. You will use that to set the x and y coordinates of the alert window. (where it say x: 60, y: 10)
harkirat singh
My questions concerns using geturl(). Is it possible to use coldfusion functions to process actionscript parameters before passing them to a page with geturl.
I am passing URL paramters using the geturl function to a page. The param values come from actionscrip variables. However before I submit the vars to the page I need to somehow encrypt the vars using a coldfusion function. The problem I am having is that I am not able to pass the actionscript var value to the coldfusion function.
I have tried everything I could think of but I cant seem to make it work.
Heres my code
<!--- Replace [plus] with actual symbol --->
<!--- Form page form.cfm --->
<cfform format="flash" name="myform">
<cfformitem type="script">
function addBldg()
{
var myvar:Number;
myvar=806;
<cfoutput>
<!--- Does not work :(. For demo purposes I have used the reverse
function which should output 608 but outputs ravym instead--->
getUrl("javascript:window.open('formsubmit.cfm?companyid=#reverse(" [plus] myvar [plus] ")#',
'PopupWin');void(0);");
</cfoutput>
<!---
These codes seem to work
<cfoutput>
getUrl("javascript:window.open('formsubmit.cfm?companyid="#"[plus]myvar[plus]"#"',
'PopupWin');void(0);");
getUrl("javascript:window.open('formsubmit.cfm?companyid=#DE("[plus]myvar[plus]")#',
'PopupWin');void(0);");
</cfoutput>
--->
}
</cfformitem>
<cfinput type="button" name="addbuilding" value="Add Building"
onclick="addBldg();"/>
</cfform>
<!--- Submit page formsubmit.cfm ---><cfoutput>
#url.companyid#
</cfoutput>
Thanks a heap in advance !
Harkirat
Laura
No, it is not possible to use ColdFusion once you are in the Flash form.
nhoel
Erik
This gets me close, I can make the alert window appear with my flash progress bar, but there is still an OK button the user can click to make it go away (would like to get rid of this also, and when the data is done loading into the grid I can't seem to make it go away.
If anyone has some better ways to make a popup progress bar I would be interested in hearing them, I tried using the flex progressbar but wasn't having much luck, still very new to flex/actionscript.
Thanks