Jim Weaver’s Rich-Client Java Blog

And the winner [of the JavaFXpert RIA Exemplar Challenge] is...

In October 2009 I announced the JavaFXpert RIA Exemplar Challenge, which was to:

"Create an application in JavaFX that exemplifies the appearance and behavior of a next-generation enterprise RIA (rich internet application)".

I am pleased to announce that the winning entry, the Beechcraft Cargoloader, was submitted by Abhilshit Soni.  Here's a screen capture of Abhi's entry:

Abhilshit Soni is a 24 year old Software Engineer living in Mumbai, India. He holds a Bachelor of Technology in BioInformatics and is currently working with Zycus as a Software Engineer in the Product Engineering Team. He has been involved in developing web-based enterprise applications based on Java EE and Spring technologies for almost three years.

About Abhi's Application

According to Abhi, his Beechcraft Loader application "tries to solve a typical engineering problem of loading cargo containers into a Cargo aircraft. It needs a proper way in which your aircraft should be loaded with containers so that the resultant center of gravity of the aircraft is stable. For big cargo carriers like Boeing 747-400F or Airbus A380 there are set of calculations defined in their weight and balance handbook which are always calculated to ensure that center of gravity of the aircraft is and will be stable in all the conditions.  This application tries to calculate the same for a relatively smaller Aircraft called BeechCraft 1900C by the Hawker-Beechcraft Corporation. The cargo aircraft manufacturer describes the operational center of gravity limits (varying based on the total aircraft weight) for a particular aircraft which can be viewed by the  "Aircraft weight" vs "center of gravity" chart. The aim is to load aircraft in such a way that your current center of gravity falls between these operational limits, otherwise your aircraft is either nose heavy or tail heavy. This application considers only Beechcraft 1900C for cargo loading with a specific set of containers . All the equations and Aircraft master data are obtained from Chapter 7 of the FAA Aircraft Weight and Balance Handbook. The application currently does not cover all the functional use cases, like calculating lateral Center of Gravity and many other functional validations which are out of scope as of now".

Instructions for Using the Application

You can take the application for a test flight via Java Web Start by visiting Abhi's blog.  Here are some pre-flight instructions from Abhi:

1. Drag a cargo container from the cargo panel on the left side.
   
2. Place it on any of the sections on bechcraft 1900C main deck in the upper center.
   
3. See the change in center of gravity in the data table.
   
4. Also see the change in weight v/s CG chart, and the weight coverage pie chart, in the lower right and left respectively.
   
5. To remove a dropped container double click it.
   
6. Change the container's position by by dragging from old position to new position.
   
7. To reset the plan click 'Reset Container' button on the toolbar in the center just below the Main deck.
   
8. To enable/disable Drag and Drop animation toggle 'Disable Animation' button on the  toolbar in the center just below the Main deck.
   
9. To quick view/hide cargo weights toggle the "View Weights " button on the toolbar in the center just below the Main deck
   
10. Click on Weight Coverage chart or Weight vs CG chart to get a larger image.
    
11. The yellow dot in the Weight v/s CG chart represents the current center of gravity, and the polygons drawn in the chart are the operational limits provided by the aircraft manufacturer.
    
12. Check out Help and About buttons for more info about the application.

Closing Thoughts

Each of the participants were asked how their entry exemplifies the appearance and behavior of a next-generation enterprise RIA.  Here is Abhi's response: 

"To an end user the enterprise RIA is more about the way user sees the information shown in the application. All that an end user expects from an enterprise  RIA is to access the information in the fastest and coolest looking way. The definition of coolest may be interpreted as drag drop interfaces, animation and effects, different data viewing formats, but not at the cost of performance. By using JavaFX I have tried to achieve the same to an extent by adding drag-drop spot data update in multiple formats like grid and charts, and also onclick zooms, animations and effects with performance as priority."

Also, per the contest rules, Abhi has submitted the source code of this application to the JFXtras open source project in the samples repository.

Congratulations to Abhi, and thanks to everyone who submitted an entry to this RIA Exemplar Challenge!

Regards,

Jim Weaver

Steve on Caffeine (and JFXtras crew) pushes out JFXtras 0.6 Final Release!

From Steve on Java blog post:

"I am pleased to announce the 0.6 release of the open-source JFXtras project, the largest 3rd party library of JavaFX add-ons. This release is a very large undertaking that represents the work of several dozen contributors over the past 6 months.

JFXtras 0.6 will work with any JavaFX release in the 1.2 family. We recommend using the very latest release (currently JavaFX 1.2.3), which can be downloaded from JavaFX.com.

Starting immediately, we will be focusing on developing a JavaFX 1.3 compatible JFXtras release. Our plan is to release a 1.3 compatible version of JFXtras within 1 week of the official release announcement from Oracle."

Be sure to check out the JFXtras 0.6 announcement, which includes full details on this release, with single-click demos of the major features, such as the XShelfView [launch in Web Start]:

Congrats to Stephen Chin and JFXtras crew, which includes Keith Combs, Jim Clarke, Dean Iverson, David Armitage, Tom Eugelink, John Freeman, Peter Pilgrim, Christophe DUFOUR, Joshua Marinacci, Simon Morris, Andres Almiray, Jeff Friesen, Andrew Hughes, and Liu Huasong!

By the way, my next post on this blog will help announce the JavaFX SDK 1.3 release, which will start the 30-day clock ticking for the RIA Exemplar Challenge deadline. :-)

Regards, 
Jim Weaver

This is your Brain on Devoxx

Java Champion, JavaOne Rock Star, and all-around good guy Stephen Chin is going to teach JavaFX and give away stuff at Devoxx 2009 in Antwerp, Belgium.

He'll first teach a university session to get you up to speed on the JavaFX platform, and later in the week will show you how to build Rich Internet Applications for the enterprise.

Leading up to both these sessions Stephen will post a question via the LearnFX application (see this blog post for more info on LearnFX).  To win a prize, all you have to do is:

1. Answer the question correctly using the LearnFX client
2. Come to the next Devoxx session that Stephen Chin is speaking at
3. Winners will be selected by a random drawing from all the correct responses

To run the LearnFX application, make sure that you have a recent version (update 14 or later) of Java SE 6, and simply click on the blue brain LearnFX icon in the Devoxx logo at the top of this post.  Please don't tell Stephan Janssen (the Devoxx conference organizer) that I desecrated his logo. :-)

Break a leg, Stephen!

P.S. Last year I posted the Whack-a-Janssen game in honor of the great job that Stephen Janssen does (with the awesome help of Valérie Hillewaere and Kristien Leyn) in organizing Devoxx.

Take a whack at this now-retro game!

Regards,

Jim Weaver

Music Explorer FX *Mobile Edition* by Sten Anderson

Sten Anderson, winner of the Sun JavaFX Coding Challenge with his Music Explorer FX app, has just released a version for JavaFX Mobile.  Sten donated the source code to the JFXtras project, and has provided a write-up in his blog which includes a Java Web Start link.

Music Explorer FX Mobile Edition is a great resource/reference for creating JavaFX Mobile apps, so check it out!

Enjoy, and thanks Sten,

Jim Weaver

Pickin' and grinnin' with the JFXtras Picker control

If you've been following this blog recently, you know that I've been developing an application in the SpeedReaderFX category that helps me quickly keep up on new happenings in world events, technology, gadgets, music, and social networks.  SpeedReaderFX is located in the JFXtras open source project, and also serves as an example of using JFXtras classes with JavaFX.

One of the newest enhancements made to the SpeedReaderFX program takes advantage of the Picker control that David Armitage created in the JFXtras project.  Here's a screen shot of a program in the JFXtras project that he created to demonstrate and test the Picker control varieties:

SpeedReaderFX uses the spinner-style variation of the Picker control, shown in the Thumb Wheel row of the screen shot above.  This enables SpeedReaderFX users to quickly choose how many entries of a given feed-type (e.g. Yahoo News feeds), to display in the scrolling table.  The screen shot below shows a portion of the SpeedReaderFX Criteria dialog in which the Pickers appear:

As noted previously in the Picker demo screen shot, the user can operate the mouse wheel, as well as the keyboard or mouse buttons, to select the desired number.

For more information about the SpeedReaderFX application, check out the first post in the SpeedReaderFX category of this blog.  To run the application, click the SpeedReaderFX icon located on the left side of this paragraph.

By the way, since this dialog is getting pretty crowded, Dean Iverson is creating some UI design comps in which each feed type will have its own page.  I've also received other ideas from readers that I plan to implement, and would like to express my appreciation for your continued input!

Regards,

Jim Weaver

Adding feeds to SpeedReaderFX that don't *quite* comply with the RSS/Atom formats

When adding more feeds to the SpeedReaderFX application's Criteria dialog, I found that some of them don't *quite* comply with RSS/Atom formats.  For example, I thought it'd be cool to have RSS feeds from Engadget and Gizmodo (what self-respecting geek wouldn't want those feeds?)  I also wanted to have a daily dose of Dilbert delivered, but in these three cases the JavaFX RSS API reported that the dates for the feed items were just prior to the OS epoch.

Naturally, I consulted the RSS/Atom Smasher himself (Rakesh Menon) and he instructed me in the ways of creating a custom feed parser, which I added to SpeedReaderFX.  Here's a partial screenshot of the Criteria dialog where you can select the Gizmodo, Engadget, TechCrunch, and Dilbert feeds:

For more information about the SpeedReaderFX application, check out the first post in the SpeedReaderFX category of this blog.  To run the application, click the SpeedReaderFX icon located on the left side of this paragraph.

By the way, one of the next things that SpeedReaderFX needs is a GUI makeover (I've received lots of helpful feedback in that regard, and my graphical skills are admittedly weak).  Please leave a comment to this post if you have ideas or graphic comps that would make this look more like an iPhone app.  SpeedReaderFX is a sample in the open source JFXtras project, and your contributions to the appearance of this application would be much appreciated and acknowledged on this blog.

Enjoy!
Jim Weaver

Introducing SpeedReaderFX, powered by JavaFX and JFXtras

Some of you may remember the advertisements for the Evelyn Wood Reading Dynamics course back in the 1970s.  Here's a flashback in which Steve Allen (an excellent former host of the Tonight Show), is interviewing students of this course.  Gotta love those '70s hairstyles :-) 

This course promised to increase reading speed and comprehension, partially (as I recall) by using the technique of scanning a page while limiting eye movement. 

The ability to digest new information quickly is at least as important now as it was 20+ cranks of Moore's Law ago.  RSS and Atom feeds have provided mechanisms to publish information as it becomes available, and social networking tools such as Twitter have HTTP-based APIs.  Because it is time consuming to visit various sources of new information, I've begun developing a tool named SpeedReaderFX to present information obtained via RSS, Atom, and social networking APIs in one place.

Here's a screen shot of SpeedReaderFX as it is displaying new items of interest:

In the screen shot above, there are tweets from interesting people (Josh Marinacci and Dean Iverson), a picture taken by some fortunate soul viewing a beautiful Australian sunrise, a video containing stunning new pictures from the Hubble telescope, and an article about an expensive bottle of wine.  These are displayed in the very impressive Table component that Stephen Chin and Keith Combs are creating for the open source JFXtras project.  A future post will explain how to use the JFXtras Table component, using this SpeedReaderFX program as the example.

The popup menu shown above enables the user to hide a given feed (l8r, Dean!), or open the URL associated with an item in a browser (in this case, Dean's Twitter post).  Note that because JavaFX does not yet have a popup menu, I leveraged the menu bar/menu capabilities of the JFXtras project to make this slightly odd-looking popup menu.  If a popup menu isn't available in the next version of JavaFX, one will be created in the JFXtras project.

To inform SpeedReaderFX about your items of interest, choose the Feeds>Configure menu option.  The Criteria dialog will appear (a portion shown below), enabling you to specify user names, tags, and blog feeds for various feed sources and social networks.

 

The prompts in the shorter text boxes indicate the type of information that may be typed into the box.  For example, you'll separate the search tags in a Flickr text box with commas.  The program has some text boxes filled in with examples, but you can overwrite them.  A not-too-distant future version of this program will automatically save your criteria when exiting, and will load it again upon start-up.  The SpeedReaderFX category of this blog will contain posts that point out some JavaFX code behind new functionality, as well as catching you up on some of the code used so far in this program.  For example, I'll cite the JavaFX library that Rakesh Menon created to read the YouTube Data API, which I'm using in this program.

Selecting a check box causes the associated information source to be read and displayed in the table shown previously, with its items interspersed with items from other sources in reverse chronological order.  Deselecting a check box removes the associated items from the table, which is the same result as the Hide this feed popup menu item discussed earlier.

When you're finished with the Criteria dialog, click the Close button in the upper right corner, or select the Feeds>Configure menu option again.  By the way, the View menu has a couple of options that help you manage the application's window, given that you'll be opening up content in a browser.  One menu item is the self-explanatory Always on Top, and the other one enables you to Hide the Date Published Column.

Now that you know how to use SpeedReaderFX, please give it a whirl by clicking the Web Start Launch button below.  As always, please leave a comment if you have any questions or comments.

Regards,

Jim Weaver

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