How to embed a Adobe Flex generated page in a simple Ousystems page

How to embed a Adobe Flex generated page in a simple Ousystems page

  
Greetings,

I would like to embed a Adobe Flex generated page in a simple Ousystems page.
The files are:
AC_OETags.js
Chatter.html
Chatter.swf
history
      history.css
      history.js
      historyFrame.html
playerProductInstall.swf

I've pasted the Javascript in the HomePage Javascript part (including the ones in *.js files).
Did the same for the CSS.
And pasted the following code in a Expression widget , with Escape Content set to NO:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
            id='Chatter' width='100%' height='100%'
            codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>
            <param name='movie' value='Chatter.swf' />
            <param name='quality' value='high' />
            <param name='bgcolor' value='#869ca7' />
            <param name='allowScriptAccess' value='sameDomain' />
            <embed src='Chatter.swf' quality='high' bgcolor='#869ca7'
                width='100%' height='100%' name='Chatter' align='middle'
                play='true'
                loop='false'
                quality='high'
                allowScriptAccess='sameDomain'
                type='application/x-shockwave-flash'
                pluginspage='http://www.adobe.com/go/getflashplayer'>
            </embed>
    </object>

Result: In the final outsystems page appears half screen with the background color of the flash application, and the other half in white background, all empty.

Do you know what is wrong? Now I will paste the HTML in the file chatter.html.
Cheers,

<!-- saved from url=(0014)about:internet -->
<html lang="en">

<!--
Smart developers always View Source.

This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.

Learn more about Flex at http://flex.org
// -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!--  BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<!--  END Browser History required section -->

<title></title>
<script src="AC_OETags.js" language="javascript"></script>

<!--  BEGIN Browser History required section -->
<script src="history/history.js" language="javascript"></script>
<!--  END Browser History required section -->

<style>
body { margin: 0px; overflow:hidden }
</style>
<script language="JavaScript" type="text/javascript">
<!--
// -----------------------------------------------------------------------------
// Globals
// Major version of Flash required
var requiredMajorVersion = 9;
// Minor version of Flash required
var requiredMinorVersion = 0;
// Minor version of Flash required
var requiredRevision = 124;
// -----------------------------------------------------------------------------
// -->
</script>
</head>

<body scroll="no">
<script language="JavaScript" type="text/javascript">
<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);

// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);

if ( hasProductInstall && !hasRequestedVersion ) {
    // DO NOT MODIFY THE FOLLOWING FOUR LINES
    // Location visited after installation is complete if installation is required
    var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
    var MMredirectURL = window.location;
    document.title = document.title.slice(0, 47) + " - Flash Player Installation";
    var MMdoctitle = document.title;

    AC_FL_RunContent(
        "src", "playerProductInstall",
        "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
        "width", "100%",
        "height", "100%",
        "align", "middle",
        "id", "Chatter",
        "quality", "high",
        "bgcolor", "#869ca7",
        "name", "Chatter",
        "allowScriptAccess","sameDomain",
        "type", "application/x-shockwave-flash",
        "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
} else if (hasRequestedVersion) {
    // if we've detected an acceptable version
    // embed the Flash Content SWF when all tests are passed
    AC_FL_RunContent(
            "src", "Chatter",
            "width", "100%",
            "height", "100%",
            "align", "middle",
            "id", "Chatter",
            "quality", "high",
            "bgcolor", "#869ca7",
            "name", "Chatter",
            "allowScriptAccess","sameDomain",
            "type", "application/x-shockwave-flash",
            "pluginspage", "http://www.adobe.com/go/getflashplayer"
    );
  } else {  // flash is too old or we can't detect the plugin
    var alternateContent = 'Alternate HTML content should be placed here. '
      + 'This content requires the Adobe Flash Player. '
       + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>';
    document.write(alternateContent);  // insert non-flash content
  }
// -->
</script>
<noscript>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            id="Chatter" width="100%" height="100%"
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
            <param name="movie" value="Chatter.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#869ca7" />
            <param name="allowScriptAccess" value="sameDomain" />
            <embed src="Chatter.swf" quality="high" bgcolor="#869ca7"
                width="100%" height="100%" name="Chatter" align="middle"
                play="true"
                loop="false"
                quality="high"
                allowScriptAccess="sameDomain"
                type="application/x-shockwave-flash"
                pluginspage="http://www.adobe.com/go/getflashplayer">
            </embed>
    </object>
</noscript>
</body>
</html>
Hi Pedro,

Have you added an extended property scroll="no" to the web screen?

Cheers,
Tiago Simões
extended property scroll="no"

like in the printscreen in attachment?

the output is the same(also in attach)

Thx,
Pedro
other printscreen
are you sure the  relative links are right?

for example... embed src='Chatter.swf' expects the swf in the same dir as the asp/html.

goes the same for the javascript-links.


@Joost: All the files like 'Chatter.swf' are in the Resources folder (can see the attach). I've alto tried to put these in the IIS  localhost folder of the project e.g."C:\Program Files\OutSystems\Platform Server\running". No result.
I understand they are in the Resources folder, but

a) what's the directory they are targeted to?

b) can you access those directly in the browser?

c) is the relative path in the html-source correct, so when you strip the page from the url and add the relative path, you still get the file you need?

for example, looking at your source:
there is a stylesheet with path history/history.css

when you do http://localhost/eSpace2ndTry/history/history.css, what do you get?
same with the history.js








@Joost: Thx ,I've placed the 'http://localhost/espace2ndTry/Chatter.swf' in the object like this:
and now it appears something! but the position is wrong and the white space appears below don't know why exactly (send printscreen in attach).
"<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' id='Chatter' width='100%' height='100%' codebase='http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab'>		
			<param name='movie' value='http://localhost/eSpace2ndTry/Chatter.swf' />
			<param name='quality' value='high' />
			<param name='bgcolor' value='#869ca7' />
			<param name='allowScriptAccess' value='sameDomain' />
			<embed src='http://localhost/eSpace2ndTry/Chatter.swf' quality='high' bgcolor='#869ca7'
				width='100%' height='100%' name='Chatter' align='middle'
				play='true'
				loop='false'
				quality='high'
				allowScriptAccess='sameDomain'
				type='application/x-shockwave-flash'
				pluginspage='http://www.adobe.com/go/getflashplayer'>
			</embed>
	</object>"

And now the 
Hi Pedro,

Take a look at the source of the generated page. I'm not sure, but I believe the expression widget will render as a span HTML tag. In that case you might need to add extended properties to it to set the width and height of it to be 100%.

Cheers,
Tiago Simões