James Weaver on Quantum Computing and Java

Scratching the Surface with JavaFX -at JayDay/Munich on 01-Jul-2013

One of the very interesting and useful platforms for JavaFX is touch enabled devices such as Windows 8 tablets.  This session at JayDay/Munich on 01-Jul-2013 will demonstrate a variety of JavaFX applications running on a Surface Windows 8 Pro, pointing out capabilities in JavaFX designed to leverage touch capabilities.

The slides presented at this session are shown in the SlideShare presentation below.  The code for the demos presented in the session is on GitHub.  I hope to see you at JayDay!

Regards,

Jim Weaver

Special Effects in JavaFX: A book by Lucas Jordan

Georges Méliès (December 8, 1861 – January 21, 1938), full name Marie-Georges-Jean Méliès, was a French filmmaker famous for leading many technical and narrative developments in the earliest cinema. He was very innovative in the use of special effects. He accidentally discovered the stop trick, or substitution, in 1896, and was one of the first filmmakers to use multiple exposures, time-lapse photography, dissolves, and hand-painted color in his films. Because of his ability to seemingly manipulate and transform reality with the cinematography, Méliès is sometimes referred to as the "Cinemagician."

If you'd like to take a deep dive into the animation, effects, and gaming capabilities of JavaFX, you'll be interested to know that Lucas Jordan has written a book to help you do just that.  It's called JavaFX Special Effects: Taking Java™ RIA to the Extreme with Animation, Multimedia, and Game Elements, and is published by Apress.  I met Lucas at JavaOne 2009 where he and I participated in a JavaFX panel session, and I asked him today to give us a little back-story on the book.  Here's his response:

"I have always been interested in client side technologies and Java. So naturally I was interested AWT and Swing. But I was also interested in graphics beyond just buttons and text fields. Quite a few years ago I found a project from the University of Maryland, Human-Computer Interaction Lab (HCIL) called Piccolo and its predecessor Jazz. These where graphics toolkits that provided a way to describe a scene graph and render it with Java's Graphics 2D. I managed to find a few uses for Piccolo in my day job and was really pleased with the results.

When I heard about JavaFX my first thought was "Why bother, there is already a library for this". Of course this was before I really understood that JavaFX was also a new language and runtime, not just a Java graphics library. I managed to get put a project where I was creating a demo app for the JavaFX launch in the Fall of 2008. This was my first chance to really put in 8 hours a day on a JavaFX application and I quickly learned that JavaFX is an extremely productive language. You can get graphics on the screen wired up as components in no time, really amazing.

At the time I was working on my first JavaFX project, I was also finishing my first iPhone app. So by day I was working with JavaFX and then I would go home and work with cocoa and Objective-C. Let me tell you, Core Graphics feels like you're building a house without power tools compared to JavaFX. The same is true of Piccolo as well, both Java and Objective-C just require a lot more junk to express things that are very simple in JavaFX.

Come June of 2009 I was heading to JavaOne to present the nuts and bolts of the app I had built for the JavaFX launch. The app basically showed off a hand full of graphics effects, so I had a working knowledge of JavaFX and its classes by this point. It was here I met Jim Weaver, and he had just finished a book on JavaFX in time for JavaOne and was extolling the virtues of JavaFX. Jim kindly put me in contact with the people he worked with at Apress and they got in touch with me some time after JavaOne.

Apress basically came to me as said "what do you want to write about?" and I didn't really have an answer at first. It seemed like the core books where already written and JavaFX was only 50 some classes at that point. I knew I had done some interesting things with JavaFX in the last year, so we settled on writing a book explaining the cool stuff I got JavaFX to do. And that is basically what this book is, with each chapter taking a single concept or effect and showing how to implement it in JavaFX. We look at physics, particles, lighting effects and bunch of other stuff. The last few chapters take some of the ideas and combine them. I think my favorite chapter combines physics with particles to create some convincing fire balls. The very last chapter is a description of an entire game. This brings all the lessons together and talks about some of the real world issues of putting an app together.

Anyway, I hope people find it interesting. I think it is a pretty good collection of samples showing what JavaFX can do when you move past the point of drawing Rectangles and figuring out the new syntax." -Lucas Jordan

The picture above is a screen shot of the game to which Lucas referred, in which you shoot clowns out of a cannon into the vat of hydrochloric acid on the right side of the page.  It's really water, but just wanted to see if you're still reading this. ;-)  Tell you what, be the first commenter on this post, mentioning the acid thing, and I'll twist Mr. Jordan's arm to give you a free JavaFX Special Effects e-book.

Thanks and congratulations on your book, Lucas!

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

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

Making Music (and Software) with My Friends in JavaFX

It's great to finally be able to give you some details about a cool JavaFX project in which I've had the privilege of participating.  For the last couple of months, some co-workers at Veriana and I have been helping Indaba Music create an internet-based, collaborative recording studio named Indaba Console 2.0.  The alpha release was this morning (July 9, 2009) and it is written entirely in JavaFX/Java.  Check out this screenshot, and a Wired article that contains a demonstration video by musician and co-founder Dan Zaccagnino.

If you were at JavaOne 2009 you may remember the JavaFX panel session on which Chris Danzig (Indaba co-founder) and I participated.

One of the main reasons that Indaba chose JavaFX/Java is that it enables recording high-quality audio directly onto the client platform.  This is achieved by leveraging the capability of JavaFX to call Java methods, and Java to call JavaFX functions.  One person with whom we work closely is Bjorn Roche, who created a Java-based facility and API that interacts with the audio capabilities of the client machine.  The JavaFX portion of the Console provides most of the UI, and uses the Java-based API when it needs to play a track, apply audio effects, render a sound-wave, or record music.  This Java library then invokes JavaFX callback functions as it is doing its work.

The UI consists of many custom components, some of which subclass CustomNode, and many which subclass Contol (when skinnable and/or highly interactive components are required).  Recording session, mix, and audio data are stored "in the cloud", as they say.  The application is written in JavaFX 1.1, but is being ported to JavaFX 1.2, where performance and memory usage are greatly optimized.

Congrats, and thanks to the Indaba folks!  Please give the music console a whirl and unleash your musical creativity!

Regards,

Jim Weaver

Emily Litella: All this custom cursing in JavaFX is terrible! There's enough cursing as it is!

Back when Saturday Night Live was funny, the late comedienne and actress Gilda Radner played a hilarious character named Emily Litella. According to Wikipedia, "Emily Litella was an elderly woman with a hearing problem who made regular appearances on SNL's Weekend Update op-ed segment in the late 1970s. Attired in a frumpy dress and sweater, Litella was introduced with professional dignity by the news anchors, who could sometimes be seen cringing slightly in anticipation of the verbal faux pas which they knew would follow".

Needless to say, when I read the Chui's Counterpoint blog post entitled JavaFX Custom Cursors, I had flashbacks to the Emily Litella SNL appearances (my favorite one being where she wondered why people were making such a big deal about conserving "natural racehorses" (natural resources).

Check out Chui's blog post and learn about custom cursing in JavaFX! :-)

Regards,

Jim Weaver
http://JavaFXpert.com

JavaFX Performance Tips from Michael Heinrichs

There is a scene in Rocky II in which boxing trainer Mickey tells Rocky something to the effect of: We need speed. Speed's what we need. Greasy, fast speed!

Today I'd like to feature some JavaFX performance tips that Michael Heinrichs documented in his article entitled JavaFX Mobile Applications - Best Practices for Improving Performance.  This article points out some performance-related lessons learned while preparing the JavaFX Mobile release:

• Avoid unnecessary bindings
• Keep the scenegraph as small as possible
• Use simple shapes instead of images
• Use the pre-scaling functionality
• Use background loading
• Use Integer instead of Number
• Use functions of class Sequences

The tips in the article are not only valid for JavaFX Mobile, but for JavaFX on other platforms as well.  Michael does a great job in explaining these tips, as well as using short code examples to make them easy to understand and implement.

As a random bit of trivia, did you know that the Mickey character shown above in the Rocky series was played by the same actor as The Penguin in the Batman television series?  Yup, they were both played by the late [Oliver] Burgess Meredith :-)

Regards,
Jim Weaver

JavaFX Tips and Tricks: Invoking JavaFX Functions from Java

Occasionally the requirement arises to call a JavaFX function from within a Java method.  I needed to do this yesterday, so I thought I'd take a moment to explain a way to do this in three simple steps:

1. Create a Java interface
2. Extend the interface with a JavaFX class, implementing any functions defined by the interface
3. Obtain a reference to, and call a function of, the JavaFX class defined by the interface

Here are snippets of the code that I created yesterday in the context of the steps listed above:

Create the Java interface

public interface UniverseHandler {
  public void onSphereClicked(SphereBranch sphereBranch);
}

Extend the interface with a JavaFX class, implementing any functions defined by the interface

public class WindshieldModel extends UniverseHandler {
  ...model code omitted...

  /**
   * This is called when user clicks a sphere on the 3D Canvas
   */
  public override function onSphereClicked(sphereBranch:SphereBranch) {
    curSphereBranch = sphereBranch;
  }
}

Obtain a reference to, and call a function of, the JavaFX class defined by the interface

 universeHandler.onSphereClicked(currentSphereBranch);

The universeHandler was passed into the constructor of the Java class.

Thanks again to InteractiveMesh.org for their lightweight 3D canvas and classes that enable JavaFX/Java 3D integration!

Regards,
Jim Weaver
JavaFXpert.com

JavaFX Tips and Tricks: Using Singleton Pattern to Share a Model

Features of JavaFX such as declarative UI scripting, and binding, make it very natural to use a model-view-controller pattern.  I typically have at least one class that comprises the model, and usually put model classes in a package whose ending node is "model". 

Often it is necessary to share a model instance with more than one view class.  In these cases I leverage the Singleton pattern with a factory function to ensure that there is at most one instance of a model class.  The screenshot below is the UI of a very simple program that I developed to demonstrate this technique.  The screenshot on the right is of the quintessential model Betty Boop :-)

Here's the code behind the example, beginning with the model class:

/*
 * SingletonExampleModel.fx
 *
 * Example of using the Singleton pattern to have share a model class
 * by more than one view class in JavaFX.
 *
 * Developed 2009 by James L. Weaver as a JavaFX example to be freely used
 */

package com.javafxpert.model;

/**
 * Singleton instance of model
 */
var modelInstance:SingletonExampleModel;

/**
 * Get or create the singleton instance of model
 */
public function getInstance():SingletonExampleModel {
  if (modelInstance == null) {
    modelInstance = SingletonExampleModel {};
  }
  return modelInstance;
}

public class SingletonExampleModel {
  /**
   * String that comprises this very simple model
   */
  public var myString:String = "Change me!";
}

The model class above uses a module-level variable to store the singleton instance, and a module-level function that retrieves it (creating one if necessary).  This model instance is accessed by the simple, contrived, view classes (CustomNodeA and CustomNodeB) shown in the listings below:

CustomNodeA.fx:

package com.javafxpert.ui;

import javafx.scene.*;
import javafx.scene.control.TextBox;
import com.javafxpert.model.SingletonExampleModel;

public class CustomNodeA extends CustomNode {
  /**
   * Reference to the model class
   */
  var model:SingletonExampleModel = SingletonExampleModel.getInstance();

  /**
   * Define the scene graph for this custom node
   */
  public override function create() {
    var tbRef:TextBox = TextBox {
      text: "Change me!"
      columns: 15
      action: function():Void {
        model.myString = tbRef.text;
      }
    }
  }
}

CustomNodeB.fx:

package com.javafxpert.ui;

import javafx.scene.*;
import javafx.scene.text.*;
import com.javafxpert.model.SingletonExampleModel;

public class CustomNodeB extends CustomNode {
  /**
   * Reference to the model class
   */
  var model:SingletonExampleModel = SingletonExampleModel.getInstance();

  /**
   * Define the scene graph for this custom node
   */
  public override function create() {
    Text {
      content: bind model.myString
      font: Font.font("default", FontWeight.BOLD, 24)
    }
  }
}

Finally, here is the main script that puts the custom nodes shown above in a scene on the stage:

SingletonExampleMain.fx

package com.javafxpert.ui;

import javafx.stage.Stage;
import javafx.scene.*;
import javafx.scene.layout.VBox;

Stage {
  title: "Singleton Model Example"
  scene: Scene {
    width: 300
    height: 200
    content: VBox {
      translateX: 50
      translateY: 50
      spacing: 30
      content: [
        CustomNodeA {},
        CustomNodeB {}
      ]
    }
  }
}

Using this technique, any number of view classes can access a single, shared, model instance.

Regards, and please leave a comment if you have any questions,

Jim Weaver
JavaFXpert.com