Flex is great! Javascript can be great! What if two great things got together?

This is a simple code hint which shows how to call javascript functions from Flex and pass data back and forth:

MXML Button:

<mx:Button
id = "button"
label = "Click Me!"
click = "handleButtonClick(event:MouseEvent)
/>

Flex Function:

private function handleButtonClick(event:MouseEvent):void
{
var functionName:String = "handleButtonClick";
var returnData:String = ExternalInterface.call(f, "You clicked the button!");
}

Javascript Function:

function handleButtonClick(message)
{
alert(message);
}

That’s really all there is to it. the ExternalInterface.call() handles everything for you.

By the way, if you wanted to actually return data from the javascript function, you’d just do a standard return and it’d be available in the returnData variable in Flex:

function handleButtonClick(message)
{
alert(message);
return "success";
}

I’ve struggled with popups for some time now. I’ve never really found a good way to handle popping up a new window when clicking a link. Sure, there is the target=”_blank” method but I’ve heard that in XHTML1.0 that is not actually valid. That tells me that browsers can still handle this but might not sometime in the future (or it might end up being included in some kind of quirks rendering mode in the future). A standard Javascript popup is another option but is too easily disabled.

This method will actually do both by creating an event handler.

continue reading "Javascript Popup with graceful fallback"

Honestly, I am blogging this to satisfy a coworker (Axel) who thought this was really cool.

You see this kind of thing all the time, a little X on a window that gets open that allows you to close it. Not the X close button on the title bar of the window but a little close link with an x. I’m a bit of a CSS geek so I made this in CSS. Here’s the code:

<a href="Javascript:window.close()" style="text-decoration:none;">close <span style="border:1px solid gray;width:15px;text-align:center;font-size:8pt;cursor:hand;">X</span></a>

Test It!

I’m sure everyone’s been browsing the net using Internet Explorer and noticed that annoying “Click to activate the ActiveX Control” thing. This was implemented by Microsoft due to a security flaw but what if you happen to know that what you are embedding is secure?

In this case, use Javascript to embed your flash object. The javascript has to be in a seperate .js file.

Example:

<!-- include .js file -->
<script type="text/javascript" src="/js/writeFlash.js"></script>
.
.
.
<!-- call function -->
<script language="JavaScript" type="text/javascript">
RunFlash(#flashwidth#, #flashheight#, "#flashmovie#");
</script>

And here’s the JavaScript code:

function RunFlash(flashWidth, flashHeight, flashMovie) {
    var oeTags = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"'
    + 'width='+flashWidth+' height='+flashHeight+' '
    + 'codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">'
    + '<param name="movie" value="/files/'+flashMovie+'" /><param name="quality" value="high" /><param name="bgcolor" value="##ffffff" /><param name="wmode" value="transparent">'
    + '<embed src="/files/'+flashMovie+'" quality="high" bgcolor="##ffffff" '
    + 'width="'+flashWidth+'" height="'+flashHeight+'" align="left" wmode="transparent"'
    + 'play="true"'
    + 'loop="false"'
    + 'quality="high"'
    + 'allowScriptAccess="sameDomain"'
    + 'type="application/x-shockwave-flash"'
    + 'pluginspage="http://www.macromedia.com/go/getflashplayer">'
    + '<\\/embed>'
    + '<\\/object>';
    document.write(oeTags);   // embed the flash movie
}