Join James Talbot for an in-depth discussion in this video Displaying HTML content, part of AIR 2 with Flash and Flex Essential Training.
Let's get a taste of how to incorporate HTML into an AIR application. So you'll see the first thing I have done here is I have imported the ExternalResources.fxp file. And then what I would like you to do is just open up ExternalResources3.mxml, and you'll see here, I have a very simple interface here. So, you can see I have a skeleton of some functionality. I have an init method, I have a gotoLink method, I have a loadComplete, a locationChange, and then you also see I have a Label that says Load an HTML page.
The user will be able to specify an Address. You'll see that there is also a link, and then there is an Open URL button. So let's just take a quick look at the user interface. I am going to just run this, and you'll see I have Load HTML page. What I want to happen is, for example, if the user types in http://www.lynda.com, they click Open URL, I want it to actually load this into my AIR application - not spawn another browser or something like that, but actually display this HTML in the AIR application.
So, let's look at how to do this. The first thing I want you to do is let's add in a component that can actually display that HTML. So if you scroll down here, you should see the </s:Group>. Mine is on approximate line 48. And what I want to do is inside of this group, I am going to add in an HTML component. So this is actually in the mx namespace. So, I'll go ahead and just say, mx:HTML, as you see there, and then assign this an ID of page, so, we can reference it, specify the visible property, and let's tie this to our flag called isLoading.
So let's set up a binding here. I am going to say, isLoading, as you see there, and then close off your binding, and remember, we have this little flag up here in the location change, called isLoading, and again, we are setting it to, when it's complete, we are going to set that to true, and we'll eventually set up an event listener there. But for now just set the visibility property of the HTML to isLoading, so the users will only see this component when the HTML is done, loaded in. And let's set the width equal to 100% of the component that it's sitting in, in this case the group component.
So we are going to set 100%, and the same thing for the height. Let's also set that to 100%, of the component that it's in, which, of course, in this case is the group component. So now you have added in your HTML component, and let's set up our event listeners, and we can do that inside of the init method up here. So I am going to scroll back up to my init method, and what I am going to say is I am going to reference my HTML component, which of course I need page, and I am just going to add in an event listener.
So, I'll say, addEventListener, as you see here, and I will simply just say, Event.COMPLETE, which just simply means that the HTML is loaded in. And I will then use my loadComplete method that you see right down below here, and that's going to set my flag to is true, which will in turn set the visibility of the HTML component to true as well. So, here I have said page. addEventListener, I have called the loadComplete, and let's set up one more that, what happens if the location changes.
So, here I am again going to say, page. addEventListener, and then I will say, Event.LOCATION_CHANGE - make sure that's all caps - and then I'll say, locationChange, and I'll call that method again. And that's below there, and that's going to set isLoading to false, so that, again, if the user types in a different location for the HTML, it'll go back and not display the old HTML component when they type that in, while the other one is loading in.
And then finally, in the gotoLink function, let's just set page, and we can specify the location of the HTML to display. So I am going to say, page.location - remember that's my component - and then I am just going to simply type in link, which is the link where the user is going to type in the URL, and I'll set that to the text property. That's how simple displaying the HTML is in an AIR application. So now I am just going to hit File > Save.
You should see that it compiles with no problem. Go ahead and run the application. And in the Address field, type in any site that you would like. Be sure to include the http. Of course, you could have added that in manually, if you didn't want your users. But in our case, we are just specifying whatever is in the text properties, so the http is needed. And in this case, I will say lynda.com, I'll click open URL, and you should see, it loads it in, and now, look at that, our HTML page is displayed directly inside of our AIR application.
You'll see, I'll be able to switch it out as well. So let's say I switch it out to adobe.com, and you should see it displays that, as well as all of the Flash and everything else that is on this page. So, we've seen how to load HTML into an AIR application using the HTML Loader class, and how to display the HTML using the HTML Loader component. Using these components, we can combine HTML and Flash inside of a desktop application.
- Explaining runtime applications
- Installing and using the Adobe AIR 2 SDK
- Compiling a project in Flash Builder
- Packaging an AIR application in Flash Professional
- Converting a Flex project to an AIR project
- Creating application windows
- Moving and copying files across the operating system
- Opening files in default applications
- Displaying HTML content
- Interacting with other AIR applications
- Using the built-in database
- Securing applications