add Skype Button to HTML Panel

Question

I'm working on a WebApplication with GWT and want to use the Skype URI especially the generated Code from this Generator: SkypeButton

I use the HTML Panel because it looks like / works like HTML (see below). What I already have:

EntryClass

@Override
public void onModuleLoad() {
    HTMLPanel htmlPanel = new HTMLPanel("<h1>Headline</h1>");
    HTMLPanel skype = new HTMLPanel(
       "<script type=\"text/javascript\"
       src=\"http://www.skypeassets.com/i/scom/js/skype-uri.js\"></script>"
       + "<script type=\"text/javascript\">"
       + "Skype.ui({\"name\": \"call\",\"element\": "
       + "\"SkypeButton_Call_My.User_1\",\"participants\": "
       + "[\"My.User\"], \"imageSize\": 32 });"
       + " </script> ");
    skype.getElement().setId("SkypeButton_Call_My.User_1");
    RootPanel.get().add(htmlPanel);
    RootPanel.get().add(skype);
    }

When I run this code there is no success. This is how the HTML Code looks like in the browser after compiling.

Developer Tools (Chrome)

<div id="SkypeButton_Call_My.User_1">
   <script type="text/javascript" src="http://www.skypeassets.com/i/scom/js/skype-uri.js"></script>
   <script type="text/javascript">
      Skype.ui({
      "name": "call",
      "element":"SkypeButton_Call_My.User_1",
      "participants": ["My.User"], 
      "imageSize": 32 });
   </script> 
</div>

But when I use the Code above in my index.html file the JS creates this code from the skype-generated-code:

Developer Tools (Chrome)

<a href="javascript://" 
  onclick="Skype.tryAnalyzeSkypeUri('call', '0');
  Skype.trySkypeUri_Generic('skype:My.User?call', '_detectSkypeClient_1393181312260', '0'); 
  return false;
">
<img src="http://www.skypeassets.com/i/scom/images/skype-buttons/callbutton_32px.png" 
  alt="Skype call" 
  role="Button" 
  style="border:0; 
  margin:32px; 
  vertical-align:-41px;">
</a>

My guess is that my application doesn't execute the generated JS like the webserver does with the index.html.

After my research I found the topic JSNI suiteable, but I don't know how to put the generated code into my project. :(

Can someone help me out with this issue? An example or direction would be great :)

Answer 1

You cannot inject scripts using innerHTML (which HTMLPanel uses). You have to construct the ScriptElements programmatically, or with GWT you can simply use the ScriptInjector (don't forget to setWindow(TOP_WINDOW) though).

ScriptInjector.fromUrl("http://www.skypeassets.com/i/scom/js/skype-uri.js")
    .setWindow(ScriptInjector.TOP_WINDOW)
    .setCallback(new Callback<Void, Exception>() {
       @Override
       public void onSuccess(Void result) {
         ScriptInjector.fromString("Skype.ui({\"name\": \"call\",\"element\": "
             + "\"SkypeButton_Call_My.User_1\",\"participants\": "
             + "[\"My.User\"], \"imageSize\": 32 });")
             .setWindow(ScriptInjector.TOP_WINDOW)
             .inject();
       }
       @Override
       public void onError(Exception e) {
         GWT.reportUnhandledException(e);
       }
    })
    .inject();

(beware of setCallback on IE though, see the javadoc)