JavaFX - News Widget

This is an attempt to answer several queries in one go. Lets see if it helps..
  1. Can I embed JavaFX in JSP, ASP, PHP, JSF,...
    (Endless several other web technologies)?
  2. Can JavaFX dynamically interact with html page via JavaScript?
  3. Is it feasible to implement JavaFX <-> JavaScript communication?
  4. Can JavaFX retrieve data from external services/resources?

Answer is YES! to all of above. Lets try to prove that..

We have a JavaFX Sample - RSS-Viewer which we will try to customize and integrate it into this blog. RSS-Viewer can retrieve data from various RSS feeds. It will parse the feed using JavaFX parser and render the HTML data in browser.

By default the application loads the feed from Yahoo! news. We will customize it so as to load the feed from Google News. The application accepts an argument rss_url which can be used to specify the RSS feed.

Now how will we incorporate this widget into this blog? We need to create a <div> in HTML which will act as placeholder for embedding the HTML data from JavaFX. We will update the content of this <div> using JavaScript.

<div id="ChannelData" style="text-align: center;"></div>

Now we will write a JavaScript method which will update the data from JavaFX.

function updateChannelData(channelData) {
    document.getElementById("ChannelData").innerHTML = channelData;
}

JavaFX will invoke updateChannelData( <data> ) with data from RSS feed and update the content. Now we need to include the JavaFX Widget. For this we need to include the JavaScript dtfx.js and call javafx function passing the application attributes as shown below.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script>

<table width="40%" border="1" cellpadding="10" cellspacing="0">
  <tbody>
    <tr>
      <td align="center">

        <script>

          javafx(
            {
              archive: "http://javafx.com/samples/RSSViewer/webstart/RSSViewer.jar,",
              width: 610,
              height: 62,
              code: "rssviewer.Main",
              name: "RSSViewer"
            } , { 
              isApplet: "true", 
              js_mode: "true", 
              rss_url: "http://news.google.com/news?pz=1&ned=us&hl=en&topic=w&output=rss"
            } 
          );
          
          function updateChannelData(channelData) {
            document.getElementById("ChannelData").innerHTML = channelData;
          }
          
        </script>
        
        <div id="ChannelData" style="text-align: center;"></div>
        
      </td>
    </tr>
  </tbody>
</table>

After embedding above code in your html you must be able to load and view Google News.

Now we have incorporated an existing widget into html page. It also uses JavaFX <-> JavaScript interaction and loads the data from external service - Google News.

Refer to LiveConnect Support in the Java™ Plug-In Technology for more information on Java <-> JavaScript communication.

But did I prove the first point - Can I embed JavaFX in JSP, ASP, PHP, JSF,...??. May be not? Please try to follow above steps and try to incorporate this widget into your page and let me know how things go. You must be able to provide any well formatted RSS feed as rss_url.

For standalone mode



Posted on: Mar 05, 2009

Posted by: Rakesh Menon

Category: JavaFX

Permanent link to this entry

Comments:

nice article weldone. what is the difference between custom component and custom swingcomponent

Posted by farukh obaid on March 06, 2009 at 04:44 AM IST #

Thanks Farukh. Custom component in FX refer to nodes extending CustomNode [ http://java.sun.com/javafx/1.1/docs/api/javafx.scene/javafx.scene.CustomNode.html ]. Custom Swing components are created by extending JavaSE Swing classes.

Posted by Rakesh Menon on March 06, 2009 at 03:01 PM IST #

thanks Rakesh i m still not cleared about that.
There are three classes CustomNode, SwingComponent and Control now my question is suppose i want to make custom button simply by drawing rectangle and fill gradient color this task can be done in any of the three classes so what is the difference between the three

Posted by Farrukh obaid on March 07, 2009 at 01:33 AM IST #

The difference is in rendering code path. When you extend CustomNode the node is rendered by SceneGraph layer. SwingComponent is an encapsulation of JavaSE Swing classes and rendering is delegated to Swing layer. Control is an extension of CustomNode which provides explicit support for Skin. You can refer to below links for more info on CSS and Skin.
http://weblogs.java.net/blog/javakiddy/archive/2008/12/javafx_in_style.html
http://learnjavafx.typepad.com/weblog/2009/01/javafx-skins-game.html

Posted by Rakesh Menon on March 09, 2009 at 09:22 AM IST #

Thanks Rakesh

Posted by Farrukh Obaid on March 11, 2009 at 03:35 AM IST #

wow !!! great work Mr Rakesh Menon.
btw, i have a problem when work with netbeans 6.5.
u knw it automatically generate all the distribution files work with browser, desktop etc.when i run your rss viewer project which downloaded from javafx.com, it works fine with desktop.but when i double click the generated html file, its continuously loading java icon in the browser without giving this output.
please help me !!!
thank you

Posted by Lahiru on June 26, 2009 at 09:31 AM IST #

@Lahiru I have another post which is simple and wraps all JavaScript calls in JavaScriptUtil.java (which can be reused). Please refer to http://blogs.sun.com/rakeshmenonp/entry/javafx_javascript

Posted by Rakesh Menon on September 04, 2009 at 06:02 PM IST #

Post a Comment:
  • HTML Syntax: NOT allowed

This blog copyright 2009 by Rakesh Menon