Wednesday Apr 29, 2009

JavaFX - Always On Top

Stage is the top level container in JavaFX. It provides attributes such as fullScreen, iconified, opacity, style, icons, resizable, title which loosely maps to corresponding methods in java.awt.Frame.

But it doesn't provide any functionality to create Dialog behavior (modal, no task bar icon etc) and also support for setAlwaysOnTop. These two features are required to get the actual Widget feel. As of now the Stage shows a taskbar icon for each application.

So here is a workaround.. Create an instance of AWTEventListener. Add the same to default AWT Toolkit so as to listen to all ComponentEvent. This will receive an event when Stage (Frame) resized and shown. Get the instance of Frame from this event. Retrieve the content of the Frame and add it to new instance of Dialog. Dispose the Frame. Now set various attributes of Dialog such as modality, always-on-top and make this Dialog visible. Now the content of Frame will be shown in Dialog! :) We may also apply translucency, shaped windows etc to newly created dialog using AWT APIs.

A simple implementation of above approach is provided in FXDialogUtils. This class must be instantiated before Stage is shown so that it can listen to all events. Example, the code can be embedded in Calendar sample as shown below. That is just adding one line to existing application.

FXDialogUtils { };

Stage {
    x: bind stageX with inverse
    y: bind stageY with inverse
    width: fxCalendar.width
    height: fxCalendar.height
    title: "Calendar"

If you just want to change some attributes of Frame, you may directly obtain the Frame instance using Frame.getFrames(). This will return an array of Frame instance. We can get find the frame instance of specified Stage using its title. We can modify various Window or Frame properties using this instance.

We may also directly obtain the instance of AWT Window equivalent of Stage using some JavaFX internal APIs, but that may not be compatible across releases. But yes, that is another way of doing it

Now you can launch the Calendar as real widget

Yes, its a hack! Keep exploring other possibilities!

<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>

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=""></script>

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


              archive: ",",
              width: 610,
              height: 62,
              code: "rssviewer.Main",
              name: "RSSViewer"
              isApplet: "true"
              js_mode: "true"
              rss_url: ""
          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

<script src=""></script> <script> function updateChannelData(channelData) { document.getElementById("ChannelData").innerHTML = channelData; } javafx( { archive: ",", width: 610, height: 62, code: "rssviewer.Main", name: "appl" } , { isApplet: "true", js_mode: "true", rss_url: "" } ); </script>

<script type="text/javascript">var dzone_url = "";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src=""></script>


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


« July 2016