Thursday Mar 05, 2009

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

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script> function updateChannelData(channelData) { document.getElementById("ChannelData").innerHTML = channelData; } javafx( { archive: "http://javafx.com/samples/RSSViewer/webstart/RSSViewer.jar,", 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" } ); </script>

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_news_widget";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today