Home > javafx > JavaFX – News Widget

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&#34;></script>

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


              archive: "http://javafx.com/samples/RSSViewer/webstart/RSSViewer.jar,&#34;,
              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&#34;
          function updateChannelData(channelData) {
            document.getElementById("ChannelData").innerHTML = channelData;
        <div id="ChannelData" style="text-align: center;"></div>

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

function updateChannelData(channelData) {
document.getElementById(“ChannelData”).innerHTML = channelData;
archive: “http://javafx.com/samples/RSSViewer/webstart/RSSViewer.jar,&#8221;,
width: 610,
height: 62,
code: “rssviewer.Main”,
name: “appl”
} , {
isApplet: “true”,
js_mode: “true”,
rss_url: “http://news.google.com/news?pz=1&ned=us&hl=en&topic=w&output=rss&#8221;

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_news_widget&#8221;;
var dzone_style = ‘2’;

digg_skin = ‘compact’;
digg_window = ‘new’;

Categories: javafx Tags: , , , ,
  1. farukh obaid
    March 5, 2009 at 3:14 PM

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

  2. March 6, 2009 at 1:31 AM

    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.

  3. Farrukh obaid
    March 6, 2009 at 12:03 PM

    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

  4. March 8, 2009 at 8:52 PM

    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.

  5. Farrukh Obaid
    March 10, 2009 at 3:05 PM

    Thanks Rakesh

  6. Lahiru
    June 25, 2009 at 9:01 PM

    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

  7. September 4, 2009 at 5:32 AM

    @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

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: