1 Reply Latest reply on Apr 26, 2011 9:53 AM by csmqrv

Embedded SWF 100% width and height

csmqrv Apr 26, 2011 7:27 AM

Hi everyone,

I've the task of embedding a swf in a xhtml page with 100% width and height.

I tried the code below but it works only with Chrome (10.0.648.205) and not with ie, firefox, opera (the swf starts to load but doesn't finish). Hope someone can help me find a solution.

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich"
  xmlns:a4j="http://richfaces.org/a4j" xmlns:c="http://java.sun.com/jstl/core" template="/layout/viewTemplate.xhtml">
  
    <ui:define name="side">
    <a4j:form ajaxSubmit="true" id="filterForm">
      <rich:spacer height="25px" />

      <c:forEach var="file" items="#{spaceTimeDiagram.xhtmlFiles}">
        <ui:include src="#{file}" />
      </c:forEach>

      <rich:spacer height="10px" width="100%" />
 
      <h:commandButton value="#{messages['impt.std.Apply']}" action="#{spaceTimeDiagram.applyFilters}" />
    </a4j:form>
  </ui:define>

  <ui:define name="body">

  <h:form id="spaceTimeDiagramForm">

      <a4j:queue ignoreDupResponses="true"></a4j:queue>

      <h1>#{messages['impt.std.title']}</h1>

      <rich:panel id="stdPanelId">
         <object >
            <embed src="/im_pt/flex/STDiagram.swf" type="application/x-shockwave-flash" width="100%" height="100%" quality="high" wmode="transparent" />
         </object>
      </rich:panel>

    </h:form>

  </ui:define>
</ui:composition>

Seam version : 2.2.0.GA

JBoss version : 5.1.0.GA

Flex sdk : 4.1

Regards,

Henry

1. Re: Embedded SWF 100% width and height

csmqrv Apr 26, 2011 9:53 AM (in response to csmqrv)

tried another solution with javascript swfobject but like before, it only works with chrome :

<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:rich="http://richfaces.org/rich"
  xmlns:a4j="http://richfaces.org/a4j" xmlns:c="http://java.sun.com/jstl/core" template="/layout/viewTemplate.xhtml">
  
  <ui:define name="head">
  
  <script src="swfobject.js"></script>
 <script>
var flashvars = {};
var params = { scale: "exactFit" };
var attributes = {};

swfobject.embedSWF("/im_pt/flex/STDiagram.swf", "stdiagram", "100%", "100%", "9.0.0","expressInstall.swf", flashvars, params, attributes);
</script></ui:define>
  
    <ui:define name="side">
    <a4j:form ajaxSubmit="true" id="filterForm">
      <rich:spacer height="25px" />

      <c:forEach var="file" items="#{spaceTimeDiagram.xhtmlFiles}">
        <ui:include src="#{file}" />
      </c:forEach>

      <rich:spacer height="10px" width="100%" />
 
      <h:commandButton value="#{messages['impt.std.Apply']}" action="#{spaceTimeDiagram.applyFilters}" />
    </a4j:form>
  </ui:define>

  <ui:define name="body">



  <h:form id="spaceTimeDiagramForm">

      <a4j:queue ignoreDupResponses="true"></a4j:queue>

      <h1>#{messages['impt.std.title']}</h1>
      <rich:panel id="stdPanelId"> 
          <div id="stdiagram">This div will be replaced by an object via SWFObject</div>

          
        
            
      </rich:panel>

    </h:form>

  </ui:define>
</ui:composition>