Our Blog

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

Live Example

Download the source for the complete code

Laura

Laura

36 Comments

  1. Mika
    I am having hard time to make a jump menu on <cfselect>, and unfortunately not much knowledge of ActionScript.
    <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
  2. Brian Sloan

    Brian Sloan

    Mika,

    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
  3. Mika
    Thanks a lot Brian!
    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>
  4. ktucci
    i know this is not directly related to the PopUpManager, but do you have any idea as to how to get the CursorManager to work:

    [Embed(source="wait.jpg")]
    var waitCursorSymbol:String;
    mx.managers.CursorManager.setCursor(waitCursorSymbol);
  5. Hello,

    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
  6. Dan
    Can you display a cfform alert without having to click a button, like just have it happen automatically? Does it just need to be in a cfform tag?
  7. Laura
    Dan,
    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.
  8. Dan
    Could you give me a quick example of using onload code to launch that cfalert? I would really appreciate it, thanks!
  9. Gomez
    Hi i need some help i would posiyion alert near mouse position , my code is :
    <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
  10. Javier Julio
    Any idea why this code does not work when remoting?? I create the popup in the onResult function of the responseHandler and my cfform flash freezes and I don't know why. But if I take it out of that function it works just fine. Why can't this be used after getting a result from remoting?? Is there something I need to change to get it to work??
  11. Micah Knox
    I am trying to use this code to create a popup with the message being data from a form control. For example:
    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>
  12. Michael White
    This looks almost exactly like what I need but I take it there is no way to access the onrollover event in a coldfusion flash form? I see the rollover effects on a flash form (color change) but no info on how to add an action (alert or tooltip) to the rollover event. maybe there's a javascript solution (cfeclipse has a bunch of tooltip stuff when you hover over code)
  13. cEngland

    cEngland

    The title..
    Customizing a cfform alert with pictures and sound

    I cannot seem to see where the code to manipulate the sound is.


    Thanks
  14. Laura
    cEngland,
    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").
  15. Eddy
    Hey to evry one , ihave a poblem with mx.managers.PopUpManager and contentPath .. i tried evry thing to load swf into popup , but notjing is working !
    SOme one had this problem before ?
  16. dkedia
    My question is a big one. pls help me.
    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.
  17. Ken
    Can you direct me to a resource that will inform me of the attributes that can be used in the object of the alert (alertsettings) Or the style attributes ?
    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
  18. Laura
    Ken,
    Look in the Flex docs for mx.controls.Alert, and also in mx.controls.Button if you need to style buttons.
  19. Kristin

    Kristin

    Hello all.

    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!)
  20. Laura
    Kristin,
    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)
  21. harkirat singh

    harkirat singh

    Hi :),
    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
  22. Laura
    Harkirat,
    No, it is not possible to use ColdFusion once you are in the Flash form.
  23. nhoel
    hi, the codes above look good. but i need a pop-up window if a certain variable exists. im using flash form in coldfusion. please help.
  24. Erik
    I am using a CFFORM and Flash Remoting to pull down data for different regions, what I would like to do is have a progress bar popup while it is getting data, then go away when its done.

    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
  25. Dasha_Shi
    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!
  26. Gena
    Everything is very open with a really clear explanation of the issues.
    It was truly informative. Your site is very helpful. Thank you for sharing!

So, what do you think ?

Subscribe to this comment thread
Leave this field empty