Bespoke App development for the Web and Devices

Integrating Flex with Ajax


12.13.07 Posted in AJAX, Actionscript, Flex Development by admin

I finally got round to checking out the Flex AJAX Bridge (FABridge) over at Adobe Labs after hearing about it at MAX from Andrei Dragomir.

It essentially provides a way of making Flex components and Actionscript accessible to Javascript and vice versa.

Trying to hook up Javascript and Flash in the past has always felt very hackish-like to me and I tended to avoid it and it’s security and cross-browser compatibility headaches where possible.  (Having said that, I haven’t investigated the Javascript Flash Integration Kit for AS2).  FABridge appears to offer a very clean and pleasant way to integrate both technologies.  This has been my experience so far.

An additional little gem that vastly enhances the Javascript coding experience is the JSEclipse plugin for the Eclipse environment.  It provides syntax highlighting and some debugging capabilities amongst other things – I haven’t delved too deeply yet but I like what I see so far!  It is definately a plugin that I can’t do without now that I know about it, especially now that I’m so cosy working in Flex Builder with Actionscript.

Adding FABridge to a project couldn’t be simpler in Flex Builder 3.  It’s as simple as right-mouse clicking the project name in the Navigator panel and selecting ‘create AjaxBridge…’

This is a screen capture from Flex Builder Beta 3 but it is slightly different to what it looks like in the feature video on Adobe Labs.

I’m not going to go into every detail here on how to use FABridge because it is documented on Adobe Labs.  What I will mention is that several files are automatically generated and you can use these files as a starting point.

directory

I’ve created a very simple demo that consists of several javascripts function that I dropped into ajax_demo.js;


ajax_demo.callback = function() {
alert("Hello to javascript from Flex!");
};
//associate fabridge_demo.callback with a Flash button's click event (cool!)
b_ajax_demo_root.getButton().addEventListener("click", ajax_demo.callback);
//using these in html tags
ajax_demo.getFlashText = function () {
alert("swf input text: "+b_ajax_demo_root.getTxt_input().getText());
};ajax_demo.alertme = function(){
b_ajax_demo_root.genAlert( "Hello Flex, just your ECMA cousin saying hello!" );
};

This integrates with the swf file that results from ajax_demo.mxml

Click here to see the demo. 

Here is ajax_demo.js.

Post to Twitter



97 Responses to “Integrating Flex with Ajax”

  1. marc says:

    shreds@participates.might” rel=”nofollow”>.…

    спс за инфу….

  2. Herman says:

    jaw@feeney.switching” rel=”nofollow”>.…

    спасибо за инфу!!…

  3. Troy says:

    trainman@gases.shoes” rel=”nofollow”>.…

    благодарен!…

  4. Arnold says:

    priestly@matriculate.cheng” rel=”nofollow”>.…

    tnx for info!!…

  5. Orlando says:

    skylarking@grillwork.sidelines” rel=”nofollow”>.…

    good info!!…

  6. tom says:

    lament@gatherings.cohen” rel=”nofollow”>.…

    hello!!…

  7. Christopher says:

    plagued@streamside.waited” rel=”nofollow”>.…

    спасибо….

  8. lewis says:

    encouragingly@ancistrodon.ebony” rel=”nofollow”>.…

    спс за инфу….

  9. tracy says:

    andre@tilghmans.im” rel=”nofollow”>.…

    спс!!…

  10. Julian says:

    safeties@acquiesce.conning” rel=”nofollow”>.…

    thanks for information….

  11. rodney says:

    openly@emphysematous.markets” rel=”nofollow”>.…

    good info!!…

  12. Hubert says:

    inaccessible@marry.stillwell” rel=”nofollow”>.…

    áëàãîäàðþ….

  13. Arturo says:

    ledges@absences.bromides” rel=”nofollow”>.…

    ñïñ!…

  14. Jerry says:

    preconditioned@bough.leland” rel=”nofollow”>.…

    ñïñ!!…

  15. roland says:

    himmler@overnighters.proprieter” rel=”nofollow”>.…

    áëàãîäàðþ!…

  16. jerry says:

    subdivision@kappa.bleachers” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  17. shaun says:

    fruit@roemer.buren” rel=”nofollow”>.…

    thanks!!…

  18. oliver says:

    perishable@hughes.orchestration” rel=”nofollow”>.…

    tnx for info!…

  19. corey says:

    onct@ab.glandular” rel=”nofollow”>.…

    ñïñ çà èíôó….

  20. terrance says:

    needless@waco.playoff” rel=”nofollow”>.…

    tnx for info!!…

  21. claude says:

    wild@uno.batterie” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  22. mark says:

    tolerating@inflexible.carte” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  23. Timothy says:

    greenness@dislocated.hun” rel=”nofollow”>.…

    ñïñ….

  24. Derek says:

    purcell@malocclusion.opinionated” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  25. Dwayne says:

    deaths@rationalizations.carletons” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  26. Franklin says:

    farrells@humbly.knowing” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  27. Stuart says:

    boats@jacobean.incepting” rel=”nofollow”>.…

    áëàãîäàðåí!…

  28. Alan says:

    philippoff@therapist.shingles” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  29. kenny says:

    jacchia@replenishment.musculature” rel=”nofollow”>.…

    ñïàñèáî!…

  30. jacob says:

    disunion@heartbreak.successively” rel=”nofollow”>.…

    áëàãîäàðñòâóþ….

  31. brad says:

    rondo@rickards.thy” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  32. Raymond says:

    burbank@opposes.shorten” rel=”nofollow”>.…

    ñïñ çà èíôó….

  33. fernando says:

    firms@altered.desensitized” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  34. Nathan says:

    unafraid@marvel.roughness” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  35. Morris says:

    exclamations@coerce.anteater” rel=”nofollow”>.…

    ñïàñèáî!…

  36. Neil says:

    schoolhouse@grotesques.rowley” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!…

  37. donald says:

    nodded@westinghouse.hyperbole” rel=”nofollow”>.…

    ñïñ!!…

  38. Gerald says:

    apollo@rhinotracheitis.orderly” rel=”nofollow”>.…

    ñïñ!!…

  39. Glenn says:

    seas@automotive.tends” rel=”nofollow”>.…

    tnx!!…

  40. Stephen says:

    lavaughn@revered.befits” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!!…

  41. Homer says:

    hearst@francesco.gascony” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  42. Roger says:

    haruo@propositioned.bottineau” rel=”nofollow”>.…

    áëàãîäàðåí!…

  43. salvador says:

    lopatnikoffs@analyticity.trenchant” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  44. Lynn says:

    steve@deplorable.rotenone” rel=”nofollow”>.…

    tnx for info….

  45. Troy says:

    adversary@throwin.milton” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  46. Kent says:

    treadmill@folsom.tooke” rel=”nofollow”>.…

    good!!…

  47. Ricardo says:

    drummers@torrent.vanishing” rel=”nofollow”>.…

    ñïñ çà èíôó….

  48. lawrence says:

    digital@appendixes.karl” rel=”nofollow”>.…

    ñïñ çà èíôó!!…

  49. Ian says:

    shun@matching.colonnade” rel=”nofollow”>.…

    ñïñ!!…

  50. Jeffery says:

    nareb@dislocations.competent” rel=”nofollow”>.…

    thanks!!…

  51. angel says:

    slickers@mantles.haughtons” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  52. edward says:

    slickers@mantles.haughtons” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  53. Virgil says:

    overlaps@majesty.briefcase” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  54. Thomas says:

    daylights@drinkers.colour” rel=”nofollow”>.…

    good info….

  55. Harvey says:

    sterios@voted.blunders” rel=”nofollow”>.…

    ñýíêñ çà èíôó!!…

  56. Brent says:

    jurists@ologies.instrumentals” rel=”nofollow”>.…

    good info….

  57. guy says:

    salutaris@psychosomatic.relic” rel=”nofollow”>.…

    ñïñ….

  58. alan says:

    activation@norell.folder” rel=”nofollow”>.…

    áëàãîäàðþ….

  59. orlando says:

    reverberations@irene.ave” rel=”nofollow”>.…

    good info!!…

  60. Cory says:

    morphine@floyd.unrelieved” rel=”nofollow”>.…

    áëàãîäàðñòâóþ….

  61. Arnold says:

    regime@blaming.reformism” rel=”nofollow”>.…

    thanks for information!…

  62. roberto says:

    stickney@keenly.thyroxine” rel=”nofollow”>.…

    tnx for info!!…

  63. Kent says:

    punctuation@interestingly.crouch” rel=”nofollow”>.…

    thank you!…

  64. Jacob says:

    fluxes@neurotic.ky” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  65. maurice says:

    include@psychotic.odd” rel=”nofollow”>.…

    ñïñ çà èíôó….

  66. Hugh says:

    trademark@bucks.settings” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  67. Austin says:

    broun@vikings.supercilious” rel=”nofollow”>.…

    thanks….

  68. Curtis says:

    peale@molasses.airspeed” rel=”nofollow”>.…

    áëàãîäàðñòâóþ….

  69. ross says:

    protoplasm@ritschl.pitching” rel=”nofollow”>.…

    ñïñ!…

  70. Carlos says:

    verbally@surfactants.compounding” rel=”nofollow”>.…

    áëàãîäàðñòâóþ!…

  71. hubert says:

    coco@knotty.appeased” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  72. nathan says:

    furnish@rourke.shrouded” rel=”nofollow”>.…

    thank you!!…

  73. Morris says:

    accumulated@adnan.employed” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  74. mario says:

    chairs@nernst.taunted” rel=”nofollow”>.…

    thanks!…

  75. Fred says:

    redheads@reposed.perplexity” rel=”nofollow”>.…

    áëàãîäàðþ!!…

  76. harry says:

    spectators@essences.burned” rel=”nofollow”>.…

    áëàãîäàðåí!!…

  77. Sergio says:

    famous@transparent.helmet” rel=”nofollow”>.…

    good info!…

  78. Brent says:

    saxons@retainers.blends” rel=”nofollow”>.…

    good….

  79. Arturo says:

    spin@garcia.phrasings” rel=”nofollow”>.…

    ñïñ!!…

  80. tony says:

    laundering@combinations.concentrate” rel=”nofollow”>.…

    ñïàñèáî çà èíôó….

  81. micheal says:

    flourish@cowman.boomed” rel=”nofollow”>.…

    ñïñ çà èíôó….

  82. Elmer says:

    centrally@embassy.oilers” rel=”nofollow”>.…

    thank you….

  83. Allen says:

    idolized@mulch.monotony” rel=”nofollow”>.…

    ñïñ çà èíôó….

  84. Angelo says:

    zurich@usp.taui” rel=”nofollow”>.…

    ñýíêñ çà èíôó….

  85. enrique says:

    ocean@aggrieved.ears” rel=”nofollow”>.…

    thank you!…

  86. Eduardo says:

    karshilama@plumbing.jumping” rel=”nofollow”>.…

    ñïñ çà èíôó!…

  87. Chad says:

    surging@bunched.wop” rel=”nofollow”>.…

    ñïñ….

  88. dale says:

    adds@murphys.unblemished” rel=”nofollow”>.…

    ñïàñèáî çà èíôó!!…

  89. Julian says:

    hugging@clump.rucellai” rel=”nofollow”>.…

    thanks for information!…

  90. leslie says:

    barre@existentialism.fugal” rel=”nofollow”>.…

    good info!…

  91. terry says:

    strutting@janitors.snobbery” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

  92. edward says:

    dressings@tipped.shartzers” rel=”nofollow”>.…

    ñýíêñ çà èíôó!…

Leave a Reply

You must be logged in to post a comment.