Html Pages on the Flex application : “importing a html page to flex”

Html pages on the flex application : “importing a html page to flex app”
Importing a html page from a server or through database is a easy job with some upgradation of the html page generated by the flex application.
Here we can use a concept of IFrame’s ,persons who has basic knowledge of html knows it.
At first i want to import a google page in to my flex application than i start the code like this.

1.define a iframe component in flex of type canvas, it contains get and set methods which are used to set and get the source of the html page, and
other methods for moving the iframe and soure set.here we use ExternalInterface.
The code any iframe is similar to that of below one.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Canvas xmlns:mx=”http://www.adobe.com/2006/mxml&#8221;
resize=”callLater(moveIFrame)”
move=”callLater(moveIFrame)”>

<mx:Script>
<![CDATA[

import flash.external.ExternalInterface;
import flash.geom.Point;
import flash.net.navigateToURL;

private var __source: String;

/**
* Move iframe through ExternalInterface. The location is determined using localToGlobal()
* on a Point in the Canvas.
**/
private function moveIFrame(): void
{

var localPt:Point = new Point(0, 0);
var globalPt:Point = this.localToGlobal(localPt);
ExternalInterface.call("moveIFrame", globalPt.x, globalPt.y, this.width, this.height);
}

/**
* The source URL for the IFrame. When set, the URL is loaded through ExternalInterface.
**/
public function set source(source: String): void
{
if (source)
{

if (! ExternalInterface.available)
{
throw new Error("ExternalInterface is not available in this container. Internet Explorer ActiveX, Firefox, Mozilla 1.7.5 and greater, or other browsers that support NPRuntime are required.");
}
__source = source;
ExternalInterface.call("loadIFrame", source);
moveIFrame();
}
}

public function get source(): String
{
return __source;
}

/**
* Whether the IFrame is visible.
**/
override public function set visible(visible: Boolean): void
{
super.visible=visible;

if (visible)
{
ExternalInterface.call("showIFrame");
}
else
{
ExternalInterface.call("hideIFrame");
}
}

]]>
</mx:Script>

</mx:Canvas>

2.now upgrading the generated html files of ur flex application.For example if u create ur project as IFrameDemo than the html page is IFramDemo.html in the bin folder ( Iam spoon feeding i think ) and another html file is IFrameDemo-debug.html in bin folder and another html file index.template.html in html-template folder.
so these three html files u have to make changes(Note: these file are generated on creation of project no need to create again).
The three changes u have to make in these three html files is
1. wmode set to opaque at AC_FL_RunContent(); mehtod and in <object> tag
2. the moveIFrame,hideIFrame,showIFrame,loadIFrame methods including in the script tag
3. the ‘myFrame’ div adding at the bottom
the code for secound point:

<script language=”JavaScript” type=”text/javascript”>

// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 0;

function moveIFrame(x,y,w,h) {
var frameRef=document.getElementById(“myFrame”);
frameRef.style.left=x;
frameRef.style.top=y;
var iFrameRef=document.getElementById(“myIFrame”);
iFrameRef.width=w;
iFrameRef.height=h;
}

function hideIFrame(){
document.getElementById(“myFrame”).style.visibility=”hidden”;
}

function showIFrame(){
document.getElementById(“myFrame”).style.visibility=”visible”;
}

function loadIFrame(url){
document.getElementById(“myFrame”).innerHTML = “”;
}

</script>

the code for 3rd point div tag:

<div id=”myFrame” style=”position:absolute;background-color:transparent;border:0px;visibility:hidden;”></div> at bottom of the page
Note:
these changes in all the three html pages

3.including the iframe component at the application

<mx:Panel width=”100%” height=”100%” title=”Content Pane” paddingTop=”1″ paddingBottom=”1″ paddingLeft=”1″ paddingRight=”1″ >
<mx:Canvas width=”100%” height=”100%”>

</mx:Canvas>

in script tag put iFrame.source=”www.google.com/”; to view the result. it displays google page at the flex application.

As u can see the below inamge the panel contains an iframe where my html pages resideshtml.jpeg

About these ads

9 Responses to Html Pages on the Flex application : “importing a html page to flex”

  1. Ved says:

    Thank you so much for your help!

  2. Etienne says:

    Hi,

    I found your code about “Html Pages on the Flex application”. I don’t know if you work again on it but I have a question about it.
    In fact, I’d like to use a NavigatorTab and on each tab, I’d like to open a different html page, so a different iframe.
    I used an iterator to do that but I have anormal effect like no html page or each time the same but never a different source like I set.
    I beleive that it’s come from the javascript.
    But before start to made search and modification, have you some clue or idea about that ?

    Thanks
    Etienne

    • kumargandhi says:

      Hi,

      we may have to create seperate Iframe for each usage, as you can see in the above example , Flex IFrame component uses one set of Java Script methods which creates the IFrame in the HTML file, so in order to create different IFrames we got repeat the above steps that many times.Because each of them create different div tag,IFrame tag in the Html File.

      regards,
      kumar.

  3. ss says:

    Hi,I have an issue,three tabs are there,and a left side accordion comes,with a maxinise and close button,in the first tab when i close the accordion and go to second tab the iframe screen overlaps.any idea why it is like that?

  4. Good artile you’ve created very interesting!

  5. liaratsoni says:

    I couldn’t use it.
    In my html files there is something like this:

    ${title}

    html, body { height:100%; }
    body { margin:0; padding:0; overflow:auto; text-align:center;
    background-color: ${bgcolor}; }
    object:focus { outline:none; }
    #flashContent { display:none; }


    // For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
    var swfVersionStr = “${version_major}.${version_minor}.${version_revision}”;
    // To use express install, set to playerProductInstall.swf, otherwise the empty string.
    var xiSwfUrlStr = “${expressInstallSwf}”;
    var flashvars = {};
    var params = {};
    params.quality = “high”;
    params.bgcolor = “${bgcolor}”;
    params.allowscriptaccess = “sameDomain”;
    params.allowfullscreen = “true”;
    var attributes = {};
    attributes.id = “${application}”;
    attributes.name = “${application}”;
    attributes.align = “middle”;
    swfobject.embedSWF(
    “${swf}.swf”, “flashContent”,
    “${width}”, “${height}”,
    swfVersionStr, xiSwfUrlStr,
    flashvars, params, attributes);
    // JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
    swfobject.createCSS(“#flashContent”, “display:block;text-align:left;”);

    To view this page ensure that Adobe Flash Player version
    ${version_major}.${version_minor}.${version_revision} or greater is installed.

    var pageHost = ((document.location.protocol == “https:”) ? “https://” : “http://”);
    document.write(“” );

    http://$swf.swf
    <!–

    Should I exchange it with the code that u provide? :B

  6. kesintisiz güç kaynakları…

    [...]Html Pages on the Flex application : “importing a html page to flex” « flex on blog – by kumar[...]…

  7. scripts | shop scripts | web scripts | website tools | tutorials | design | themes | php | html | html5 | clone…

    [...]Html Pages on the Flex application : “importing a html page to flex” « flex on blog – by kumar[...]…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: