Using Javascript from Flex

APPLICATIONSOURCE

Ever find your self limited when trying to use a flex widget of some sort, in a regular html form?

Say you have a list of product category’s, and then you have a datagrid that gets populated from the drop down… now you want a second empty datagrid, to drag and drop products into that you would like to associate with whatever your doing on the html form…

Our example was a knowledge base application, This company has issues they need to track, and they manufacture products. Each issue my in some way relate with a certain product or products… the knowledge base administrative tool was already built in coldfusion, or traditional html forms, it’s not something we wanted to really port to flex, it would just be too much work…

To add this drag and drop functionality you would have to mess around for hours with ajax, and browser hacks, trying to get this to work. With flex I completed this in such a short time, it really proved a flex widget most useful.

One of the first things you have to know is how to put javascript in the html template that flex generates… I couldn’t for the life of me figure this hidden unexplained thing out, I became so busy with learning flex, I missed this basic necessity. I ended up editing the index.html page that was in my bin folder, and putting the javascript there, then I noticed when I compiled I would have to do it again. This got pretty old, and after a short while, I found the html template that you have to edit.

In your flex project by default you have a navigation tree on the left side of the window. Find the folder called html-template and edit the index.template.html file that is within it. Now whenever you compile, the changes you made to that template with get put into your new compilation of your project.

NOTE: To call this from flex you use the ExternalInterface.call method, there is documentation at ADOBE LIVE DOCS

here is what some of the code I adjusted looks like

<!–lines 23-27 in default template–>

<script language=“JavaScript” type=“text/javascript”>

function getList(list){

document.forms[“list”].aProd.value = list;

}

</script>

<!– lines 31-33 –>

<form name=“list”>

<input type=“text”

id=“aProd” size=“20” name=“aProd”>

</form>

this code puts a form field on the page, and you’ll notice in the when you click and drag items into and out of the right-hand grid, the list of numbers goes into that form field, and refreshes…

What does this do for me?

Now that you have flex talking to a real html form field, when you post the form, and click submit or whatever you have going on. That list of number submits with the form!!!! Therefor you can manipulate it in your event handler, or however you choose…

I recommend making that form field a hidden input, that way the user will never know the difference… this is just a fantastic way to get some good quick profitability out of flex… Here are the links to the Application and source!

APPLICATIONSOURCE

NOTE: You will not get to see the html template page, to view the actual html, just use your browser to view the html source, and you will see the javascript! 🙂

3 comments on this post.
  1. Avishek:

    Hello Axel,

    I’m new to flex and finding a issue to deal with ExternalInterface.call().
    senariO:
    1. Called ExternalInterface.call(“sendToJavaScript”,param) from a mxml.
    2. Specified function sendToJavaScript in index.html in tag.
    3. When I run the defualt application mxml from flex builder it works fine & the js is being called i.e it open a local path like D:\appln\flexui\trunk\bin\Application.html.
    4. But when I deploy the same as a web application in server & runs the url, the js function is not called(“http://localhost:8888:flexApplication/”).

    not getting why it is unable to call the External js function upon deployed.

    regards,
    Avishek Arang.

  2. jzk:

    This is very useful. Thanks.

  3. Ramaprabhu:

    Nice Stuff,,, Great

Leave a comment