Embedded Flash Param Problem

Vaadin 6 / 7 / 8 Framework UI
1

Good Afternoon,

I am new to Vaadin (very impressive) and this is my first post so please be patient with the possible ignorance/stupidity of the following question!

Ok, I want to add some chart functionality to my Application and have got the JFreeChartWrapper incubator component working fine. But I want slightly more impressive/interactive charts and would like to use the flash based
Fusion Charts
.

I think I just need to use the Embedded Object and have the following simple Application:


public class FusionChartApplication extends Application {
  @Override
  public void init() {
    System.out.println("inint ");
    Window w = new Window();
    setMainWindow(w);
    w.addComponent(getChart());
  }


  public Component getChart() {
    // Create a Shockware Flash resource
    final ClassResource flashResource =
        new ClassResource("FCF_Column3D.swf", getMainWindow().getApplication());
    final Embedded chart =
        new Embedded("Chart Caption", flashResource);

    chart.setCodebase("http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0");
    chart.setClassId("clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");
    chart.setType(Embedded.TYPE_OBJECT);
    chart.setMimeType("application/x-shockwave-flash");
    chart.setWidth(null);
    chart.setHeight(null);
    chart.setParameter("id", "Column3D");
    chart.setParameter("movie", "FCF_Column3D.swf?chartWidth=600&chartHeight=500");
    chart.setParameter("FlashVars", "&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>");
    chart.setParameter("quality", "high");

    return chart;
  }
}

But this doesn’t seem to work. All I get in the Browser (Firefox) is the text “Chart Caption” - although if I right mouse click on the browser page I do get the “About Adobe Flash Player 10…” message so it is recognising the Flash component.

The HTML to get the chart displayed (which works and which I have based the Java code above on) is:


<html>
<body bgcolor="#ffffff">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="600" height="500" id="Column3D" >
   <param name="movie" value="../FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" />
   <param name="FlashVars" value="&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>">
   <param name="quality" value="high" />
   <embed src="../FusionCharts/FCF_Column3D.swf?chartWidth=600&chartHeight=500" flashVars="&dataXML=<graph caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showNames='1' decimalPrecision='0' formatNumberScale='0'><set name='Jan' value='462' color='AFD8F8' /><set name='Feb' value='857' color='F6BD0F' /><set name='Mar' value='671' color='8BBA00' /><set name='Apr' value='494' color='FF8E46'/><set name='May' value='761' color='008E8E'/><set name='Jun' value='960' color='D64646'/><set name='Jul' value='629' color='8E468E'/><set name='Aug' value='622' color='588526'/><set name='Sep' value='376' color='B3AA00'/><set name='Oct' value='494' color='008ED6'/><set name='Nov' value='761' color='9D080D'/><set name='Dec' value='960' color='A186BE'/></graph>" quality="high" width="600" height="500" name="Column3D" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
</html>

Not sure how or if I need to I set the tag on the Embedded Object; think that may just be needed for IE?

I added the .swf file to the vaadin\themes and they are in the war file so should be accessible ok.

Any ideas greatly recieved.

Cheers

Mat

2

Little update…

The issue above was partly caused by my misunderstanding of the ClassResource. I tried to load another non chart and non param requiring .swf file and it wasn’t found\displayed either.

A quick look through the Vaadin book indicated that ThemeResource was what I was looking for (I had stuffed the .swf files in the themes folder), and that solved the issue with not finding the simple .swf file.

I tried the same with the Fusion chart .swf as below:


    final ThemeResource flashResource =
        new ThemeResource("swf/FCF_Column3D.swf");

and this takes me a step further as the web page and chart now returns a “No data to display” message, so I guess there is a problem with the params I am passing. Not sure what they are yet though and probably not anything anyone on here will be able to help with. Any ideas still gratefully received though!

Has anyone passed params to a flash object?

Cheers

Mat

3

Hi Mat

I made a flash integration with Vaadin some time ago and in that implementation I implemented server-to-flash communication. Take a look at the article I wrote on the subject, maybe it will help you a bit. If you run into problems, I’d be happy to help you further.


http://vaadin.com/wiki/-/wiki/Main/Integrating%20Custom%20Flash%20Widget

  • Kim
4

Oh, btw, the article is a bit out-of-date as it talks about IT Mill Toolkit, but don’t be confused, it’s just the previous version of Vaadin. The principles are still the same, just the GWT version and the name has changed :slight_smile:

5

Thanks for the response Kim. Have read (several times) your article and I think I can just about follow the idea. It would seem I need something similar, so will spend a bit of time understanding better how to write custom components.

Cheers/Kippis!

Mat

6

Some obvious “must read” pointers:

7

And here is a small bit of code that shows how to use YouTube player (which is flash):


            Embedded player = new Embedded();
            player.setWidth(250 + "px");
            player.setHeight(200 + "px");
            player.setType(Embedded.TYPE_OBJECT);
            player.setMimeType("application/x-shockwave-flash");
            String url = "http://www.youtube.com/v/"+videoId+"&autoplay=1";
            player.setSource(new ExternalResource(url));
            player.setParameter("movie", url);
        addComponent(player);
8

Hello Sami,

This above works very nicely - and it also illustrates the problem I think there may be with setting Embedded Parameters.

I tried the code below (the link is work safe!) where I set the “movie” parameter to a string with the value “someRandomValue” and added the extra parameter for “FlashVars” - even though the youtube flash clip doesn’t need the parameter. I just wanted to see the HTML that was generated.


    Embedded player = new Embedded();
    player.setWidth(250 + "px");
    player.setHeight(200 + "px");
    player.setType(Embedded.TYPE_OBJECT);
    player.setMimeType("application/x-shockwave-flash");
    String url = "http://www.youtube.com/v/qQ9N742QB4g&autoplay=1";
    player.setSource(new ExternalResource(url));
    player.setParameter("FlashVars", "someValuesOfSomeKind");
    player.setParameter("movie", "someRandomValue");

Interestingly and regardless of the player.setParameter values above
FireBug
 just tells me that the HTML that was generated was:


<div class="v-embedded" style="height: 200px; width: 250px;">
<object width="250px" height="200px">
<param value="http://www.youtube.com/v/qQ9N742QB4g&autoplay=1" name="movie"/>
<embed width="250px" height="200px" src="http://www.youtube.com/v/qQ9N742QB4g&autoplay=1"/>
</object>
</div>

So even the line in your example:

player.setParameter("movie", url);

will be ignored.

If I look through the Embedded src code (including IEmbedded) I can’t see where the additional parameters are utilised and the “movie” value seems to be hardcoded.

Is this how the Embedded object is supposed to work - or am I missing the point completely!?

9

Hmm… You are right. This YouTube sample is so small that the problem you describe will not show.

I noticed that you mentioned ‘IEmbedded’ which says that you are using older version. However, I quickly tested this on 6.1.0 and it seems to be the same: Parameter “movie” is hard coded someway and all others are ignored.

I don’t think this is the way it should work. I have some other Embedded snippets (applets) buried somewhere, and I can check those, but still this is worth a ticket: http://dev.vaadin.com/ticket/3367

10

Did you ever get this resolved ?

Thanks
Chris

11

According to
http://dev.vaadin.com/ticket/3367
, this was fixed in Vaadin 6.2.0 .

12

Pls, has anyone resolved the above issue?