« Flex 3 Air – Minimize to system tray (WindowedApplication)

Flex AIR AS 3 – Access dom element (textarea) from HTML component

I’ve struggled a bit to find out how to access a textarea (and select box) that was presented in a Flex AIR HTML component.

Wasn’t much work in the end, but here’s an example (by using babelfish’s translation page) of how to access multiple elements from Flex:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="1024" height="768">
  3.  
  4. <mx:Script>
  5. <![CDATA[
  6. /**
  7. * This example describes how to access HTML elements from Flex AIR AS3.
  8. * It makes use of the babelfish translation website to access the translation elements
  9. * and then submit the specified translation to babelfish.
  10. *
  11. * @Author: S.Radovanovic
  12. * @Url: http://www.saskovic.com/blog/?p=7
  13. * @Date: 05-03-2008
  14. */
  15.  
  16. import mx.controls.Alert;
  17.  
  18. //Our access to the HTML Dom
  19. private var domWindow:Object;
  20. private var blnAlertThrown:Boolean = false;
  21.  
  22. /**
  23. * Find the corresponding element and be able to access it from Flex
  24. *
  25. */
  26. private function initDomWindow(event:Event):void {
  27. //Retrieve a link to the textarea
  28. domWindow = event.currentTarget.domWindow;
  29.  
  30. //Set a trigger (if not done yet)
  31. if( !blnAlertThrown ) {
  32. Alert.show("Click ok to set access HTML elements from Flex", "Access HTML elements", Alert.OK, this, setTranslationValues);
  33. blnAlertThrown = true; //Make sure we don't loop
  34. }
  35. }
  36.  
  37. /**
  38. * Retrieve a reference to a specific HTML element specified by name
  39. */
  40. private function getElementFromHTML(elementName:String):Object {
  41. var arrayContainingAllFoundElements:Object = domWindow.document.getElementsByName(elementName);
  42.  
  43. //We could do some checks here to see if anything was found, but I leave that up to the you... ;)
  44.  
  45. //Always return the first element (there also should only be one)
  46. return arrayContainingAllFoundElements[0];
  47. }
  48.  
  49. /**
  50. * Set the elements in the webpage to your likings.
  51. */
  52. private function setTranslationValues(event:Event):void {
  53. //Get access to the translation text area and pre-fill it
  54. var translationTextArea:Object = getElementFromHTML("trtext");
  55. translationTextArea.value = "Set my own values from Flex!";
  56.  
  57. //Loop through the possible language options of the selectbox and set the one we want (in this case english => dutch)
  58. var languageSelectbox:Object = getElementFromHTML("lp");
  59. for( var i:int = 0; i < languageSelectbox.options.length; i++ ) {
  60. trace(i + ' - ' + languageSelectbox.options[i].value);
  61. if( languageSelectbox.options[i].value == "en_nl" ) {
  62. languageSelectbox.selectedIndex = i;
  63. }
  64. }
  65.  
  66. Alert.show("Submit the values for translation by babelfish", "Translate", Alert.OK, this, submitTranslation);
  67. }
  68.  
  69. /**
  70. * Hit submit!
  71. */
  72. public function submitTranslation(event:Event):void {
  73. //And finally hit translate!
  74. var submitButton:Object = getElementFromHTML("btnTrTxt");
  75. submitButton.click();
  76.  
  77. }
  78. ]]>
  79. </mx:Script>
  80.  
  81. <mx:HTML id="htmlTranslate" x="10" y="84" location="http://babelfish.altavista.com/" complete="initDomWindow(event)"/>
  82.  
  83. </mx:WindowedApplication>
  84. Download this code: accesshtmlcomponentsfromflex.txt

Download code

This entry was posted on Tuesday, March 4th, 2008 at 11:32 am and is filed under AS3, Flex, Flex 3. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

3 Responses to “Flex AIR AS 3 – Access dom element (textarea) from HTML component”

  1. Rajan Mariappan says:
    July 23, 2008 at 5:05 am

    Very useful application.

  2. Dragos says:
    January 30, 2009 at 11:04 am

    This code is great. It was very useful to me. Waiting new posts.

  3. Victor says:
    December 3, 2009 at 3:22 pm

    Hello,

    I’ve got a question concerning the code. I’m trying to implement it into an application I’m writing but I cannot seem to get it working when I send a variable other than a string to the domelement. Is a string the only data possible?

Leave a Reply