Just thought of providing an outline for design and implementation of JavaFX application. I briefly described this in one of previous post - Custom Layout.To start with we will most likely receive a huge PSD file from designer. You may use Production Suite tools to import the content into JavaFX. Here is manual approach..

First we need to identify various functional areas in the UI. Most likely the UI is already grouped. Areas can be Settings, Authentication, Data-Entry/Update View, ToolBar, Search etc. From this we can identify set of packages to be created in JavaFX. If the UI is simple, we may have the entire UI under "view" package. Now we can breakup the UI in to multiple classes based on the functional area. It will be easier if we could make these classes extend Container or CustomNode. From there we come down to actual layout of Controls..

Given below is the layout used in one of MiG Layout Demos - Layout Showdown. Refer to MiG Layout Site for more information. Refer to JFXtras project for more information on MiG Layout for JavaFX.

We will try to implement this UI in JavaFX..

Now we need to visualize a grid on top of the layout so as to identify some pattern in UI. It will be much easier if we could do this mapping. You may refer to various sites such as Layout Cookbook, RIA Screen Layouts or RIA Screen Design to get some idea..

Once we get the mapping, we can implement the layout using various layoutNode functions in Container. Please refer to PersonalDetailsView.fx source for more information.

To launch click on above image or

Please try it out and let me know feedback..

var dzone_style = '2';

There was a request to write a Flat Carousel, here is an attempt using HBox, ClipView and Timeline.

To launch click on above image or

The HBox content is clipped using ClipView layout. When user drags the node, the ClipView.clipX is updated accordingly using a Timeline + EASEOUT Interpolator. We may use custom Interpolator as shown in SpringAnimation sample. Two buttons (vertical bars) are provided on both sides to scroll as per the width of the Carousel.

Please try it out and let me know feedback..

I would like to highlight two import features in java deployment - Deployment Toolkit and Download-Service (available in 1.6.0_18). There is an excellent article on Deploying RIAs in Mixed Environments. This will help in understanding and resolving many of Java/JavaFX deployment issues. JavaFX deployment script - dtfx.js - already does lot of these checking. But these APIs will enable further customization related to JRE-Version, OS, Browser etc.

Above information is obtained using these APIs

DownloadService provides APIs to query user cache. This can be used to request and update resources required by your application. It may be used to query existence of JavaFX runtime extension in cache. Sometimes this runtime is cached in "system" cache, and hence it may not be possible to query using this API. Please refer to DownloadServiceApplet.java and DownloadService.html for more information on usage. Entire list of JNLP Service APIs is available here. Refer to "Deployment" section in JavaFX Tutorials for more information..

Please try it out and let me know feedback..

JavaFX Composer preview is available. You can install this plugin. In NetBeans IDE, goto "Tools" -> "Plugins" -> "Available Plugins". Select "JavaFX Composer" and install the Plugin. Please refer to NetBeans JavaFX Composer and JavaFX Composer Blogs for more information.

Summer has set in like a flick of a switch! So couldn't think of anything else other than Weather. Developed a simple Weather application using Yahoo Weather RSS Feed. It was much easier to visualize and develop using JavaFX Composer, especially for small widget like applications. Soon we will be able to develop complex application using this...

To launch click on above image or

The city is set to Bangalore by default. Double click on the widget to enable the TextBox, in which you can enter your ZipCode or City and press "Enter" key. Ideally I must persist this information using Storage APIs, but I leave that task to you!

For getting the information from Yahoo, we need to first identify the Where On Earth ID - WOEID of the city using its ZipCode or Name. Please refer to Yahoo WOEID documentation for more information. Once we identify the WOEID, we can use forecastrss feed for getting the weather information.

Please try it out and let me know feedback..

var dzone_style = '2';

There was a question related to Best Practices for speed optimization in Oracle-Mix forum. There are many small tips & tricks, just thought of listing out what ever came to my mind..

Use Layout: For positioning node always use Layout. There are plenty of layout available such as HBox, VBox, Tile, Flow and Stack. If we need any custom layout you can use Container or Panel. Position node using layoutX and layoutY attributes. Use translateX and translateY for Animation.

Consolidate Theme Attributes : We can reuse many theme related objects such as Font, Color, Paint, Image. Eg: If we use same Font for many Label/Text, we can use the same Font instance instead of creating one each for each instance of Node. This consolidation also allow us to customize the UI. You may refer to Theme used in Calendar sample. Also share Image instances such as default-image, place-holder image etc across multiple objects.

Bind with Caution: I have stressed on this in one of my previous post. Repeating the same again. Use this mostly for wiring model to view. Minimize use for other purpose such as layout of Nodes. Also better to avoid chaining of binds, its very problematic and difficult to debug.

JavaFX for View: There is a tendency to write entire application using pure JavaFX. This may be fine for small widget like application or samples. But when you write real business application we need to push out the business logic, IO operations and non-ui related code to Java layer. Use JavaFX Async APIs + Callback methods so as to execute these code outside Event-Dispatch-Thread. HttpRequest API demonstrates use of this approach.

Reduce use of Effects: In many cases we may need to have static effects in UI, such as nice gradient for background, font effects etc. If these effects are static, its always better to use Image instead of effect API.

Stroke Vs Fill: Instead of using stroke attribute for shape, we may use nested shapes with fill attribute. Example: For creating a stroke for Rectangle, we can create two instances of Rectangle overlapping, with the inner Rectangle smaller than outer Rectangle. This will have better performance compared to use of stroke attribute.

Avoid Class-Path in Manifest: When we add various jars as library to Netbeans, these jars are directly referenced in Class-Path of Manifest file of the application jar. When deployed, this will force to download all jars before start of application. Concept of lazy download will not work. Also there will be an attempt to make an unnecessary network connection, even though resources such as plugin.jar, javaws.jar etc are not hosted. This will increase initial applet/javaws startup time.

Use Image.width & Image.height: If we need to show a thumbnail of large image, its better to specify its width and height Image object itself rather than resizing the ImageView using fitWidth and fitHeight attribute. This will reduce the memory used to hold the image.

Provide Startup Feedback: Many a times people get bored due to lack of proper feedback during startup. This creates a notion of increased startup time. Except for small use-cases such as advertisements, RIA's do have some startup time. It will be nice to provide a Custom Splash Screen and even better a Progress Listener UI to give useful feedback.

Tips for Mobile: : Joshua Marinacci has listed some useful tips for mobile.

I'm sure there are more... 'll keep updating this list...

var dzone_style = '2';

There was overwhelming response for the poll - "What is "Rich" in RIA?" and its time to announce the results... The vote was for core components Graphics-Effects-Animation (25%) followed by CSS support (19%) and "Controls" (17%) as third.

Now lets try to map this back to JavaFX stack..

Vote was for lower level core APIs and CSS framework. I think that makes sense. If we have stable core library with CSS support, we can create most of common controls without putting much effort. Yes, we need platform support for Popup and complex components such as Grid and Tree.

A bit surprised to note low priority for "Client - Server" communication (7%). May be because its more to do with "I" of "RIA" and not "R" It would have been very tough to choose, all those components are required for "Rich" User Experience.. I will discuss more about "CSS" features after next JavaFX release.. Jonathan Merritt has a nice blog post in which he tries to predict the release date here..

Since "Reach" (platform/device independence) is very low, we may mix JTable & JTree using SwingComponent (for now). Of-course yes, these components should not stand out and say "Hey! I'm Swing!", we need to tweak the Cell-Renderers so that it gel well with the user interface.

Above diagram of stack may also be used to decide which language to use for implementing functionality. I have seen many applications written purely in JavaFX (without using Async APIs). As you may already know, code written in JavaFX is executed on Event Dispatch Thread. This thread is used to execute tasks specific to user interface. Cluttering this thread with execution of business-logic, IO operations, database access etc will impact the application responsiveness. So the application must be designed in such a way that only UI specific code is written & executed in JavaFX layer. I will gather some of tips & tricks and write about it..

Once again Thanks a lot for participating in this poll, hope you found it useful..

var dzone_style = '2';

Tech Days 2010
Worldwide Developer Conference
March 24-25, 2010
Hyderabad International Convention Centre [HICC]
Hyderabad, India

Sessions on Client Technologies

• Advanced JavaFX: Tips and Techniques
• Cloud Computing: Why and How
• Debugging Java Applications with DTrace and BTrace
• Java ME: Building Cool Interfaces with the Lightweight UI Toolkit
• JavaFX Platform: Quick and Easy Rich Internet Applications
• JavaFX Programming for Mobile Devices
• JDK 7: The Future of The Java Platform
• Performance Tuning Garbage Collection
• Scripting Languages: Options for Your Java VM
• Sun Virtualization Products and Technologies

Register Now! and Be There!

I viewed my tag cloud and noticed some pattern in my posts. The topics are mostly inspired by feedback from various JavaFX related forums. So I think it reflects the requirements / expectations of end users.

Earlier developers focused on "User Interface" and first impression that I get from "RIA" is Photoshopped or GIMPed UI. But now we expand the scope so as to include various other aspects and focus on "User Experience". The scope of "RIA" itself may broaden to include "REA".

All these brings an interesting question.. What does "Rich" in "RIA" mean to you? Here is an attempt to map those "Rich" User Experience requirements back to technology and find what it means in terms of technology.

Please participate in this poll so as to help me understand your requirements.. This will also help me decide future topics to be included in my blogs.. Thanks a lot for your time, support and feedback..

var dzone_style = '2';

One of the previous post [Applet Startup Time] provided a way to measure start-up time of JavaFX Applets. Many responded with requested information (Thanks a lot!). One of the main concern raised was high start-up time for "Without JavaFX Runtime". This is high because it includes time taken to download and install JavaFX Runtime.

Unfortunately there was no way to notify the user about exact progress of this. Hence user will not be able to differentiate between download and install of "JavaFX Runtime" and "JavaFX Application".

Recent JavaFX Update 1.2.3 reduced the download size and start-up time. You can notice this change by trying out the start-up time measurement applet again.. But still it doesn't provide a way to exactly notify the start-up progress. We can only specify a custom splash-screen as specified here.

And then we have Java Update 1.6.0_18 - [Download Now] - Not sure how many of you noticed this feature - Download Service Listener It allows you to provide a Custom Progress UI using AWT/Swing/Java2D APIs. It has callback methods which will provide information related to download and validation of resources. Please refer to Download Service Listener Example for more information. Refer to ProgressListener.java and ProgressView.java for implementation used in this sample.

To launch click on above image or

Now we can implement custom progress listener with actual values. We can use the same approach for JavaFX applications as well. There is minor issue in using this feature with JavaFX Applet deployed using dtfx.js. This script is not updated to utilize this feature. So for now we need to explicitly hide the default splash screen by invoking JavaScript method hideOverlay as shown in ProgressListenerFX.html

Reference:

• ProgressListenerFX.html
• ProgressListenerFX_browser.jnlp
• ProgressListenerFX.jnlp
• Download Service Listener Example
• JavaSE 1.6.0_18 Release Notes
• DownloadServiceListener Implementation
• Custom Progress UI

Hmm.. thatz a long post with lots of information.. But I think its very useful.. As usual, please try it out and let me know feedback..

var dzone_style = '2';

One of the previous post had a sample to download large files using JavaFX. It relies on HttpRequest attribute sink to specify the output file location. Similarly we can use source attribute for uploading a file.

I have written a simple UploadServlet to receive the file content and save at <user.home>/JavaFXDownloads/ location.

Relevant part of JavaFX client code is given below..

def uploadServletURL = 
    "http://localhost:8080/server/UploadServlet";

def urlConverter = URLConverter{ };
def encodedServletURL = urlConverter.encodeURL(
    "{uploadServletURL}?file={inputFile.getName()}")

def httpRequest: HttpRequest = HttpRequest {

    location: encodedServletURL    
    source: new java.io.FileInputStream(inputFile)
    method: HttpRequest.POST

    headers: [
        HttpHeader {
            name: HttpHeader.CONTENT_TYPE
            value: "multipart/form-data"
        }
    ]
}

Name of file is passed as argument to upload servlet. This URL is encoded using URLConverter. The file to be uploaded is assigned to source attribute. Http content-type is set to "multipart/form-data". You can host the UploadServlet - server - code in any webserver such as Tomcat, Glassfish etc. Value of uploadServletURL in JavaFX client must be updated to point to this servlet URL.

I found another sample code Multipart HTTP file upload with JavaFX which demonstrates alternate approach.

Try it out and let me know feedback..

var dzone_style = '2';

you know its coming...
but you find it difficult to believe...
like someone said, "all good things come to an end"... For a new beginning...