Jim Weaver’s Rich-Client Java Blog

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

RIA Exemplar Challenge Extension

The JavaFXpert RIA Exemplar Challenge deadline will be extended to 30 days after the JavaFX SDK 1.3 is officially released.  I'm extending the deadline for a couple of reasons:

1. Based upon JavaFX presentations at Devoxx and the Silicon Valley Java Users Group, the upcoming JavaFX 1.3 release will have some features very relevant to the goals of this RIA Exemplar Challenge.  For example, this release will have several new UI controls, as well as the ability to transform nodes on the Z axis.
2. Although I still recommend that the participants of this contest consist of a developer and a graphic designer, I am removing this restriction.  An individual developer can enter the contest, and win the 2000 USD.  Please be aware that two of the four judges in the contest are graphic designers, so the user experience and visual design are important aspects of a winning entry.

If you have already submitted an entry to this challenge, please feel free to resubmit an updated entry closer to the new deadline.

Thanks for your understanding on extending the contest deadline,

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