Top
JohnKlann / Adobe Flex  / How to display HTML code in an adobe flex desktop application the Easy Way

How to display HTML code in an adobe flex desktop application the Easy Way

So am very new to adobe flex and really don’t plan on using it that much other than to generate a quick ui for something simple.

In this case I wanted to use flex to create a small desktop app to load a live monitor website. In this case the default <mx:HTML location=”http://site.com” was not loading the site at all so was digging all over the place for a solution. I came across expensive libraries that could do it, and a pretty cool github project called Flex-iFrame if you want to get complicated with it. Needless to say I came up with my own solution.

The idea is that the <mx:HTML location=”  can point to a location html file as well. So I wrote a quick html page with an iframe to the website I wanted to monitor. Next I copied the html file to the /src/ directory of the adobe flex project folder.  Finally I added the line <mx:HTML location=”myhtmlfile.html” /> . This worked great for my application and seems to be the easiest way to perform this process.

Steps:

1.)  Create your adobe flex project:

create_new_flex_project

create_new_flex_project

2.)  Name the projected whatever you want and be sure to select the Application type as Desktop then select finish:

create_new_flex_project_settings

create_new_flex_project_settings

3.)  Next create the html file with the html you want to display in my case an iframe:

<html>
<head>
</head>
<body>
<iframe src=”https://site.com/livemonitoring/stuff/display&type=Grid height=”400px”></ifram>
</body>
</html>

Note:  you can add jquery and css file links as well if they are local to your system make sure you copy them with the html file in the next step.

4.)  Now that you have created the html file copy it and any other dependent files to your flex projects src directory. Typically the path will be something like:

C:\users\username\adobe flash builder 4.7\ProjectName\src

Note: This is also the directory where the projects  .mxml and  -app.xml  will be located.

5.) The last part for this will be to add the flex html location code to view the file add something like the following to your flex project.

<mx:HTML location=”yourhtmlfile.html” />

 

flex_html_code

flex_html_code

 

Note: From  here you can build the rest of your app and style it the way you would like.

6.) Finally run your app!

flex_html_app_running

flex_html_app_running

 

Submit your review
1
2
3
4
5
Submit
     
Cancel

Create your own review

Average rating:  
 0 reviews