James Weaver on Quantum Computing and Java

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

Creating Menus in JavaFX (with JFXtras Menu Classes by Jonathan Giles)

Jonathan Giles has announced the release of the JavaFX Menubar that he created for the JFXtras project.  To demonstrate how to use it, I've added a menu to the BandmatesFX program that I've been developing in this series of blog posts. 

By the way, my grand scheme for the BandmatesFX program is for it to become what I'm calling an image-based knowledge navigation facility.  It's going to be an open-source JFXtras example, where Sten Anderson (JavaFX Coding Challenge winner) and others will collaborate with me in its continued design and development.  A baby step in that direction has been to add the ability to reference space mission information so that users can interact with astronauts and missions in the same way they can now interact with musicians and bands.  Here's a screenshot of the program with the JFXtras menu:

 

As you can see from the screenshot, there are a couple of items in the View menu, enabling the user to toggle the following states:

• The Google Map menu item controls whether the map shown above is visible.
• The Topics with No Image menu item controls whether topics (e.g. astronauts, missions, musicians, and bands) that don't have an associated image in the Freebase database) will be displayed.

Go ahead and launch the application using the Java Web Start Launch button below, consulting past articles such as this one in the series for instructions on how to use it.  Note: Now that there is a Help menu, it'd probably be a good idea for me to put the instructions in a help facility :-P

Here's the menu-related code in this program:

var menubar: MenuBar;
menubar = MenuBar {
  width: bind sceneRef.width;
  menus: [
    // View Menu
    Menu {
      text: "View"
      items: [
        CheckedMenuItem {
          text: "Google Map"
          checked: bind showLocationMap with inverse
          graphic: bind if (showLocationMap) {
            ImageView {
              image: Image {
                url: "{__DIR__}images/lightbulb_on.png";
              }
            }
          }
          else {
            ImageView {
              image: Image {
                url: "{__DIR__}images/lightbulb.png";
              }
            }
          }
        },
        CheckedMenuItem {
          text: "Topics with No Image"
          checked: bind showTopicsThatHaveNoImage with inverse
          action: function() {
            obtainGroupsForArtist(artistToSearch);
          }
          graphic: bind if (showTopicsThatHaveNoImage) {
            ImageView {
              image: Image {
                url: "{__DIR__}images/lightbulb_on.png";
              }
            }
          }
          else {
            ImageView {
              image: Image {
                url: "{__DIR__}images/lightbulb.png";
              }
            }
          }
        }
      ]
    },
    // Help Menu
    Menu {
      text: "Help"
      items: [
        MenuItem {
          text: "About"
          action: function() {
            Alert.inform("About BandmatesFX",
                         "Developed by Jim Weaver/JFXtras team to "
                         "demonstrate JFXtras (and Freebase) features.");
          }
          graphic: ImageView {
            image: Image {
              url: "{__DIR__}images/about.png";
            }
         }
        }
      ]
    }
  ]
}

Jonathan has done a great job in defining a simple API, as well as creating an appearance for these menus that blend well with the Caspian skin in the JavaFX 1.2 UI controls.  Thanks Jonathan!

Regards,

Jim Weaver

Continuing BandmatesFX: JavaFX Tips, Tricks and a Treasure Trove

In this episode of the building the BandmatesFX application series, I'm going to show you how to add the following functionality to a JavaFX application:

1. Showing a splash page before the main functionality of the program starts.
2. Handling mouse events on the individual images in a JFXtras Shelf (cover flow) control.
3. Detect whether the JavaFX program is running as an applet in the browser.
4. Open a web page in a browser, whether running as an applet or from Java Web Start.
5. Use the GoogleMap custom node from Sergey Surikov's open source CRUDfx project (the treasure trove mentioned in the title) to display an interactive Google map in a JavaFX program.

Before we get into how to do these things, take the newest iteration of the BandmatesFX app for a spin, making sure that you test out the new functionality mentioned above.

There are some pointers after the screenshot below to help you along.

 

• After invoking the BandmatesFX app, start typing (for example) Axl Rose and notice that a list appears suggesting William Bailey (Axl's given name). 
• Click on William in the list, and the screen should look almost like the screenshot above. Note: After this was posted, I altered the queries so that if an image of an artist or band isn't available in Freebase (and therefore not in Wikipedia), it will show a placeholder image.
• Hover the mouse on the images in each of the cover flows, noticing that the name of the band or artist appears in a popup window on the upper left side of the images.
• Click the secondary mouse button on any of the images, and the Freebase.com page for that band or artist should appear in the browser.
• Look at the map in the upper right portion of the application, noticing that Axl was born in Lafayette, Indiana (which is about 80 miles from where I live).  Try clicking on the map and dragging the mouse, which should expose other parts of Indiana and the United States.
• Recall from the last article in this series that clicking the artist that is in the center of the bottom Shelf will move his/her picture to the top of the app.  The bands and artists in the cover flows will be replaced accordingly.  Trivia: According to the screenshot above, the given name of the Guns N' Roses lead guitarist is Saul Hudson (who is more widely known as Slash).

Some Example Code Snippets

Here are some code snippets behind the new functionality:

/**
 * Use the availability of the eval function (that uses the browser's 
 * JavaScript engine), as an indicator that we're running as an applet
 */
def runningAsApplet:Boolean = AppletStageExtension.eval("2+3") != null;

var splashStageRef:Stage;

/*
 * Show a "splash" page (Stage) while the main Stage is performing some startup
 * functionality.  At the end of this script, this splash screen will be removed 
 * with the following lines of code:
 *
 *   if (not runningAsApplet) {
 *     splashStageRef.close();
 *   }
 *
 * Note: To show a splash page when tunning as an applet, use the following
 *       loading_image_* lines in a script tag of the HTML file:
 *
 *   javafx(
 *       {
 *             archive: "BandmatesFX.jar",
 *             draggable: true,
 *             width: 1000,
 *             height: 700,
 *             code: "javafxpert.BandmatesMain",
 *             name: "BandmatesFX",
 *             loading_image_url: "http://www.jmentor.com/JavaFX_1-2/BandmatesFXnext/images/guitar.png",
 *             loading_image_width: 1000,
 *             loading_image_height: 700
 *       }
 *   );
 * 
 */
if (not runningAsApplet) {
  splashStageRef = Stage {
    title: "BandmatesFX Splash Page"
    style: StageStyle.TRANSPARENT
    scene: Scene {
      width: 1000
      height: 700
      content: {
        ImageView {
          image: Image {
            url: "http://www.jmentor.com/JavaFX_1-2/BandmatesFXnext/images/guitar.png"
          }
        }
      }
    }
  }
}

...some code omitted...

/*
 * This instantiates the GoogleMap custom node that Sergey Surikov developed
 */
googleMapRef = GoogleMap {
  focusTraversable: true
  width: IMAGE_HEIGHT
  height: IMAGE_HEIGHT
  zoom: 4.0
  // Make the up and down arrows affect the zoom level of the map
  onKeyPressed:function(ke:KeyEvent):Void {
    println("googleMapRef.zoom:{googleMapRef.zoom}");
    if (ke.code == KeyCode.VK_UP) {
      googleMapRef.zoom += 1;
    }
    else if (ke.code == KeyCode.VK_DOWN) {
      googleMapRef.zoom -= 1;
    }
  }
},

...some code omitted...

/*
 * To change the geographic location shown by the GoogleMap node, change its
 * latitude and longitude variables.
 */
googleMapRef.latitude = if (latStr == "") 0.0 else Float.parseFloat(latStr);
googleMapRef.longitude = if (longStr == "") 0.0 else Float.parseFloat(longStr);

/* 
 * Here is the Shelf that contains the images of the bands for the chosen artist
 */
Shelf {
  reflection: false
  showScrollBar: false
  showText: true
  centerEventsOnly: false
  imageUrls: bind for (grp in freebaseResult.result.musicGroupMemberMembership) {
    "{freebaseImageURL}{grp.group.id}?maxheight={IMAGE_HEIGHT}"
  }
  imageNames: bind for (grp in freebaseResult.result.musicGroupMemberMembership) {
    grp.group.name;
  }
  /* 
   * When the secondary mouse button is pressed on an image, open a page
   * in the browser for that band.  If running as an applet, use the
   * javafx.stage.AppletStageExtension class.  If running as a Java Web Start
   * application, the use the BasicService class (located in jnlp.jar)
   * to open the web page.
   */
  onImagePressed:function(se:ShelfEvent):Void {
    if (se.mouseEvent.button == MouseButton.SECONDARY) {
      def fbId = freebaseResult.result.musicGroupMemberMembership[se.index].
                 group.id;
      if (runningAsApplet) {
        AppletStageExtension.showDocument("http://www.freebase.com/view/{fbId}", 
                                          "_blank");
      }
      else {
        def basicService:BasicService = 
            ServiceManager.lookup("javax.jnlp.BasicService") as BasicService;
        def url:URL = new URL("http://www.freebase.com/view/{fbId}");
        basicService.showDocument(url);
      }
    }
  }
  /* 
   * When the mouse enters an image, make a popup visible that contains the
   * name of the band represented by the image.
   */
  onImageEntered:function(se:ShelfEvent):Void {
    println("Entered image:{se.index}, obj:{se.mouseEvent.node}");
    println(freebaseResult.result.musicGroupMemberMembership[se.index].
       group.name);
    infoBoxName = freebaseResult.result.musicGroupMemberMembership[se.index].
       group.name;
    infoBoxVisible = true;
    infoBoxPosX = se.mouseEvent.node.localToScene(se.mouseEvent.node.layoutBounds).minX;
    infoBoxPosY = se.mouseEvent.node.localToScene(se.mouseEvent.node.layoutBounds).minY;
  }
  /* 
   * When the mouse exits an image, make the popup invisible
   */
  onImageExited:function(se:ShelfEvent):Void {
    println("Exited image:{se.index}");
    infoBoxVisible = false;
  }
  index: bind groupOneIndex with inverse
  thumbnailWidth: IMAGE_HEIGHT
  thumbnailHeight: IMAGE_HEIGHT
  layoutInfo: LayoutInfo {
    width: bind sceneRef.width
    height: IMAGE_HEIGHT + 120
  }
},

As always, please leave a comment if you have any questions.

Regards,

Jim Weaver

Captured Live at the [SD]Forum: The JFXtras and WidgetFX Tour!

Prolific reviewer highway_star had this to say about the Three Dog Night Captured Live at the Forum album (paraphrased a bit).

"Three Dog Night was one of the seventies' most popular groups. Even though most of their songs were composed by other songwriters (Paul Williams, Hoyt Axton, Randy Newman and Nilsson to name a few), the combination of three excellent lead singers and a fantastic backup band ensured that they had more hits than most bands. This concert recorded on September 12th, 1969 at The Forum in Los Angeles, is one of the best concerts this reviewer has ever heard."

As an aside, I was surprised to find out that Randy Newman wrote the Three Dog Night hit song entitled "Mama Told Me Not to Come" :-O

At any rate, if you missed Three Dog Night live at the Forum, as a consolation I can highly recommend the JFXtras and WidgetFX presentation captured live at the SDForum. 

If you want to keep up on the latest additions to these JavaFX open source projects, then watch the video of this presentation in which Stephen Chin and Keith Combs skillfully walk you through the very cool and useful features!

Regards,
Jim Weaver