James Weaver on Quantum Computing and Java

Achieving mutual symbiosis between Web pages and JavaFX apps

Image: Leonard Low, Creative Commons.

As illustrated in the movie Finding Nemo, clownfish and sea anemones have a mutual symbiotic relationship.  The latter Wikipedia article states that "The territorial [clown] fish protects the anemone from anemone-eating fish, and in turn the stinging tentacles of the anemone protect the clownfish from its predators. A special mucus on the clownfish protects it from the stinging tentacles". Of course, as also demonstrated in Nemo, mutualism breaks down when uninvited barracudas join the party ;-)

Two of the creatures in the internet application ecosystem are web pages/apps, and rich internet apps created in platforms such as JavaFX and Flex.  I like the way that Stephen Chin characterizes these creatures when he was interviewed by James Sugrue for the DZone article entitled JavaFX in Practice:

"My prediction is that this will be the year that the RIA movement will help reclaim developer sanity. Forcing all web applications to run inside the limitations of browser scripting languages was a tremendous setback to the modern computing era and sanity of developers across the world.  I have a lot of respect for the intellectual work that has gone into modern AJAX implementations and Javascript code generation libraries, but reproducing decade-old UI paradigms in the browser is not going to advance the computer science field.  JavaFX has the potential to unleash the creativity of everyday developers by providing a platform that is limitless in possibilities."

I wholeheartedly agree with Stephen, and feel that it is very important when creating a new application to not just assume that its UI should live in a web browser.  We need to carefully consider which portions of its functionality (if any) belong inside a web browser, and which portions would offer the user a better experience outside of the browser.  It is my opinion that desktop applications should follow the lead of apps on mobile devices such as Android and iPhone, declaring that "there's an app for that", rather than "there's a browser-based throwback to 1970s mainframe CICS screens for that" :-)

Of course, web browsers will continue to play a critical role in internet applications, and are particularly suited in areas for which they were originally created, namely sharing current, hyper-linked, information in various media types.  For example, the Help facilities of many installed applications (e.g. Adobe Photoshop and iTunes) are either entirely composed of web pages, or link to web pages for several of their help topics).  Conversely, the Charts tab of the iTunes web site invokes the installed version of iTunes and navigates to a given item in the iTunes store when the user clicks on a song in the web page.

One of the great features of the Web, browsers, and search engines, is the ability to find/bookmark web pages and other content by a URL.  To leverage this, I've been experimenting with the idea of having a landing/launch page for JavaFX apps that are invoked via Java Web Start or in a WidgetFX dock.  This enables these apps to have a page that can be cataloged/ranked by search engines, and gives the user a way to find/bookmark the JavaFX app.  While implementing this idea, I followed the lead of bit.ly and identified a short domain name that would be conducive to tweeting JavaFX app links without requiring URL shortening.  The domain name that I'm using is jfx.me, and I've developed a couple of example landing/launch pages whose URLs are easy to remember and type:

• jfx.me/speedreaderfx.html (An application that aggregates news and social network sources)
• jfx.me/radiofx.html (Yannick Van Godtsenhoven's excellent RadioFX widget)

Currently these pages are within the context of the JavaFXpert blog, but if there is JavaFX community interest, I'll forward the jfx.me domain to a site dedicated to this purpose.  By the way, you'll notice if you visit either of the landing pages above that both Yannick and I intend to offer these apps (at no charge) in the Java Store.

Anyway, I'm very interested in your thoughts surrounding web page and RIA mutualism, so please leave a comment with your ideas.

Regards,

Jim Weaver

JavaFX 1.3 Leakage at Devoxx 2009

I love it when Sun employees like Richard Bair and Jasper Potts demonstrate features, and show code samples (in wet concrete of course), for upcoming JavaFX releases. In this post I'd like to bring some of these Sun-leaked features and code samples to light.  Please note that this talk was a preview, and things will of course change before the final JavaFX 1.3 release.

 

From Enterprising JavaFX by Richard and Jasper at Devoxx (and the 1960-70s judging from the Devoxx theme-art this year)

After delivering a brilliant explanation of how to use the JavaFX Task API (introduced in JavaFX 1.2), Richard went on to expose some of the planned JavaFX 1.3 controls.  Here's a shot of the slide that denotes some of the UI controls in 1.3 with asterisks:

The ListView, TreeView and TableView controls will allow you to customize their contents with the use of the Cell class shown in the shot below:

To create a custom cell, use the cellFactory function reference of the ListView, TreeView or TableView classes, and supply background, node, and/or foreground values.  This approach allows the runtime to memory manage cell instances:

Please note that ListView was introduced in 1.2, but will be greatly improved in 1.3.  TreeView will be introduced in a basic form in 1.3, and TableView will be released post-1.3.

Here's a busy shot of a UI controls demo from Richard, for which Jasper later apologized because the demo isn't skinned to Jasper's liking:

Later, Jasper discussed the strategies for styling JavaFX components moving forward  as shown in the shot below, and then focused on CSS for styling components on desktop, mobile and TV:

Here's an example of using CSS to style the scene, which cascades to controls contained by the scene:

Jasper then discussed the regions construct that will be included as an internal API in 1.3, and possibly exposed to developers in future releases:

 

Regions can be used, for example, to help create custom component such as the ScrollBar shown below:

Another upcoming item of interest from this presentation is that the underlying graphical toolkits will be replaced (post-JavaFX 1.3) with Prism, which will provide a much faster UI and a common toolkit across devices on which JavaFX is deployed.

This post has only scratched the surface of what was presented in the hour-long Enterprising JavaFX session at Devoxx, but hopefully it gave you a taste of some the many features coming in JavaFX 1.3.  Thanks to Jasper and Rich for sharing!

Regards,

Jim Weaver

The JavaFX How2 Compendium

I'd like to make sure that you know about a great new JavaFX resource that Sun's JavaFX Documentation Team has been working on.  This resource, located on the JavaFX.com site, is called the JavaFX How-To's (although I like to call it the JavaFX How2 Compendium because it is a concise, yet comprehensive compilation of how to get things done in JavaFX).

For example, if you want to build a UI in JavaFX, you can refer to the how-to instructions such as Use layouts, and Work with controls, referred to in the screen shot above.  Clicking on the Use layouts link takes you to an instructive guide, shown in the screen shot below, on how to layout a UI in JavaFX.

Enjoy the JavaFX How2 Compendium, and be sure to provide feedback so that the folks at Sun can continue to add how-to's that you want to see.

Regards, and enjoy!

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

The RIA Exemplar Challenge Mötley Judging Crüe

Note: the deadline for the JavaFXpert RIA Exemplar Challenge has been extended to April 10, 2010. Please see this post for details.

In the JavaFXpert RIA Exemplar Challenge announcement, I stated that the graphic design judge would be chosen and disclosed soon.  I am pleased to say that there will actually be two very high-caliber graphic design judges for this contest: Jasper Potts and Romain Guy.  As if these guys needed an introduction:

Jasper Potts is a developer on the JavaFX & Swing teams at Sun Microsystems, and lives in Bath, UK. He is currently working on the new JavaFX UI controls and graphics frameworks, and was the bloke that created the JavaFX Charts API.  Jasper, and Richard Bair, have an excellent JavaFX blog at fxexperience.com, where Jasper has already begun providing tips for the RIA Exemplar Challenge participants.

Romain Guy is the co-author of the ground-breaking Filthy Rich Clients book, and is a user interface toolkit engineer at Google on the Android project. Romain lives in San Francisco, California, and has a blog named Curious Creature that contains some stunning photographs, very recently of the Colorado River at sunset.  He also has a "French, goofier version of Curious Creature" named #ProgX.

Stephen Chin, a Pro JavaFX book co-author, is going to help me judge the RIA Exemplar Challenge entries from a developer perspective.  Stephen is the leader (with Keith Combs), of the WidgetFX and JFXtras projects.  Stephen is very active in the leadership of the JavaFX community, having recently founded the Silicon Valley JavaFX User Group, and has a JavaFX/Java blog at steveonjava.com.

All three are internationally recognized experts and speakers, and I am very pleased to have them help me judge the RIA Exemplar Challenge.  Please be sure and enter the challenge!

Regards,

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

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