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

[Jordan Shoes]

I am pleasant when after reading your great blog. Good job you do! Hope you have more better and more splendid experience.

[buy viagra]

I love this progam, give us more info and navigation is super detailed!

[Deborah]

I have edited my html to reflect size and width at 100%, but while that works to correct my width problem, it doesn't fix the height. I'm not sure what to do. I'm using ie, but I'm hoping whatever html/script I use would be viewable regardless of browser.

[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.