Full-Page JavaFX Applets: Exercising Resizing

As I mentioned the previous article in this series, the next step in the development of the BandmatesFX program will be to enable the user to navigate more general information than just musicians and bands.  In this article, I've added the ability to navigate soccer players and their teams.  In addition, the program (whose working title is now Topic Map Navigator), can be deployed as a full-browser-page JavaFX applet.  Shown below is a screenshot of the program running in a Chrome 2.0 browser, and it also runs in FireFox 3.5+ and Internet Explorer 7+.  You'll usually need have Java SE 6 update 10+ in order for the applet to run in the browser (e.g. on Mac with Java 1.5 this app opens in its own window).

One of the features of this program is that it opens a web page when you right-click on an image.  Deploying this program in the browser makes this a tighter experience, because the page appears on top of the Topic Map Navigator program.  When you subsequently close the web page, the program is revealed again.  The screenshot below shows the result of clicking the secondary mouse button on the picture of Lionel Messi, and then clicking the Wikipedia link from his Freebase web page that appears. You may also recall from previous articles in this series that clicking the primary mouse button on an image moves that person to the top of the app.

If you have a late-model Chrome, FireFox or Internet Explorer browser, and Java SE 6 update 10+, go ahead an run this program as a JavaFX applet.  If not, you can launch the program via Java Web Start by clicking the Launch button below.  Note: Please leave a comment if you have any difficulty deploying this JavaFX applet, providing your hardware/OS/browser/Java version information.  I'll report these difficulties to the JavaFX JIRA issue tracker, as I'd like for the JavaFX applet deployment experience to be as solid as it is when deploying with Java Web Start.

Exercising Resizing

In order for the JavaFX applet to occupy the full browser page, we change the width and height of the applet to 100% in the HTML file as shown in the snippet below.

  javafx(
    {
      archive: "TopicMapNavigator.jar",
      draggable: true,
      width: "100%",
      height: "100%",
      code: "org.jfxtras.topicmapnav.ui.TopicMapNavMain",
      name: "TopicMapNavigator",
      loading_image_url: "http://www.jmentor.com/JavaFX_1-2/TopicMapNavigator/images/guitar.png",
      loading_image_width: 500,
      loading_image_height: 350
    }
  );

When the browser page is resized, the width and height values of the JavaFX Stage change dynamically.  You can bind to these values and control the appearance of the program, using layout classes that are provided with JavaFX.  In addition, the JFXtras project has some classes such as ResizableScene, ResizableCustomNode, ResizableHBox and ResizableVBox that make quick work of responding to a resized Stage.  For example, the Topic Map Navigator program uses these classes, and the resizable Shelf class, to automatically reposition and scale the cover flows when the user resizes the program.

Regards, and please let me know if you have any questions,

Jim Weaver

Comments

[Coolbeans]

Hi. I am trying to determine when the browser window resizes. In my example program the applet width and height are set to "100%" and I can see my applet resizing as expected when the browser window is resized.

I have the width of the stage bound like this:

width: bind stageWidth with inverse

and in my trigger function I update a text message in the scene like this:

var stageWidth:Number = 800 on replace {msg = "width updated"};

This works fine when I run it as a web start application or the "default" configuration in Netbeans, but in a browser it is not triggering the update to "stageWidth" even though it has been updated. I setup a click event on my page to display "stageWidth" and I can see it has been updated but the trigger never fired.

Any help much appreciated. Thanks.

[Jim Weaver]

"However there doesn't seem to be any examples of datagrids connecting to a database."

Tom,

Please see the following post for an example of using the JFXtras Table to display data, including images:
http://learnjavafx.typepad.com/weblog/2009/09/introducing-speedreaderfx-powered-by-javafx-and-jfxtras.html

Thanks,
Jim Weaver

[David]

It's good to see lots of samples for JavaFX. However there doesn't seem to be any examples of datagrids connecting to a database.

Connecting to a database is fairly common functionality and without being able to present database data to a user easily is a limiting feature set.

[Jim Weaver]

"How can i create tabbed pane in the latest version of javafx?"

Mark,

There isn't a tabbed pane control in JavaFX 1.2, but it would be easy to create one with ToggleButton and Stack classes. I hope that we'll see a component that has tabbed component functionality in the next JavaFX release.

Thanks,
Jim Weaver

[Mark]

Hi, i know that this is not the right place to post but i don't know how to contact the author. I just want to ask regarding "tabbed pane". I have read that it is no longer supported in javafx 1.2. How can i create tabbed pane in the latest version of javafx? tHanks

[Tom]

It is impressive to see that a 1920x1200 applet stills animates acceptably smooth. Although there always is that conflict between time and distance; on such a resolution the animated objects have to be moved a larger distance, so either the steps become larger and jumpier (what happens now) or the animation should take a little more time to make it a bit more smooth. Maybe worth playing with; variable timeframe time's related to the size.