Control Webpage in HTML Control in AIR
Line Break
Author: Arjan (47 Articles) - Author Website
Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.
One of the additional controls you get from the AIR runtime is the HTML control. The purpose of this control is very straightforward: show webpages or other HTML content, using it for that single purpose is straightforward and easy, but you can do some more advanced stuff to, for example filling in a form and simulating button clicks from actionscript.
For this example I chose to load the google.com website, fill in the query textfield and click the search or gamble button. To do this, first I have to know the name or id of the fields and buttons i want to control. You can use inspect element of either google chrome or firebug in firefox or something similar in any other browser:
As you can see, the query field has a name “q” and the buttons has the names “btnG” and “btnI”.
Ok now we can build our AIR app. Lets create a layout first so that we can enter some query, two buttons and the HTML control:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> <s:layout> <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/> </s:layout> <s:HGroup verticalAlign="middle"> <s:Label text="Query:"/> <s:TextInput id="query" enter="search(true)" width="200"/> <s:Button click="search(true)" label="Search"/> <s:Button click="search(false)" label="Gamble!"/> </s:HGroup> <s:Line width="100%" stroke="{new Stroke(0x000000, 4, 1)}"/> <mx:HTML id="html" width="100%" height="100%"/> </s:WindowedApplication> |
And the script section that handles everything:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <fx:Script> <![CDATA[ import mx.graphics.Stroke; // Control Search or Gamle private var isSearch:Boolean; private function search(search:Boolean):void{ // Set isSearch var, to be used in load complete handler isSearch = search; // Add event listener to the complete event html.addEventListener(Event.COMPLETE, fillQueryAndClickButton); // Load google.com html.htmlLoader.load(new URLRequest("http://www.google.com")); } private function fillQueryAndClickButton(event:Event):void{ // Remove event listener html.removeEventListener(Event.COMPLETE, fillQueryAndClickButton); // Fill query field html.htmlLoader.window.document.getElementsByName("q")[0].value = query.text; // Execute click on the correct button if(isSearch) { // Execute click on search button html.htmlLoader.window.document.getElementsByName("btnG")[0].click(); } else { // Execute click on gamble button html.htmlLoader.window.document.getElementsByName("btnI")[0].click(); } } ]]> </fx:Script> |
As you can see, I am using the getElementsByName method to refer to the elements, this is because the elements don’t have an ID on the google page. The getElementsByName returns an array of elements with the name specified, so html.htmlLoader.window.document.getElementsByName(“q”)[0] refers to the first element in that result array.
Instead of referring to elements by name, you can do it by ID if the element id is available in the webpage. getElementById is the method you can use then. This method doesn’t return an array, it returns the element directly because two or more elements can’t have the same ID. Only one result is possible.
Download the sample application here, view source is enabled (Just make sure to right click in the upper part of the application and not in the HTML control (which takes up almost the complete application.)
Here’s the complete source code as well:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" viewSourceURL="srcview/index.html"> <s:layout> <s:VerticalLayout paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5"/> </s:layout> <fx:Script> <![CDATA[ import mx.graphics.Stroke; // Control Search or Gamle private var isSearch:Boolean; private function search(search:Boolean):void{ // Set isSearch var, to be used in load complete handler isSearch = search; // Add event listener to the complete event html.addEventListener(Event.COMPLETE, fillQueryAndClickButton); // Load google.com html.htmlLoader.load(new URLRequest("http://www.google.com")); } private function fillQueryAndClickButton(event:Event):void{ // Remove event listener html.removeEventListener(Event.COMPLETE, fillQueryAndClickButton); // Fill query field html.htmlLoader.window.document.getElementsByName("q")[0].value = query.text; // Execute click on the correct button if(isSearch) { // Execute click on search button html.htmlLoader.window.document.getElementsByName("btnG")[0].click(); } else { // Execute click on gamble button html.htmlLoader.window.document.getElementsByName("btnI")[0].click(); } } ]]> </fx:Script> <s:HGroup verticalAlign="middle"> <s:Label text="Query:"/> <s:TextInput id="query" enter="search(true)" width="200"/> <s:Button click="search(true)" label="Search"/> <s:Button click="search(false)" label="Gamble!"/> </s:HGroup> <s:Line width="100%" stroke="{new Stroke(0x000000, 4, 1)}"/> <mx:HTML id="html" width="100%" height="100%"/> </s:WindowedApplication> |
No related posts.
Written by · Filed Under Examples
Was this post useful to you?
Please rate this post, follow us @ twitter, or link to this page from your website!
(10 votes, average: 4.70 out of 5)
Loading ...Comments
4 Responses to “Control Webpage in HTML Control in AIR”
Hey! thanx for great tutorial. But how can we get page`s whole html code?
Hi there, im a complete noob to Flex, and all i wanted was an iframe, lets say google to open as soon as you launched the application.
Is that possible?
thks in advance.
Hi Vasco,
It is possible with some external components. For example: http://code.google.com/p/flex-iframe/
Regards,
Roelof
Is it possible to do the same in AIR for mobile devices?