Thursday Jul 16, 2009

JavaFX - Lazy Loading


It will be nice if we could break down the application into smaller modules and load the modules as and when its required. This will significantly reduce the start-up time. Here is an attempt to perform lazy loading of javafx modules.

A list of samples is shown. User can select the sample to be loaded from this list. The samples are dynamically loaded from JavaFX Samples. The sample is loaded using URLClassLoader. Then its instantiated and content of stage (JFrame) is obtained and added to main application.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/LazyLoader/LazyLoader.js"></script>

Click on above image to load the Applet

This is an experimental implementation, just to try out the approach. There are issues with focus (cursor not shown on TextBox, but can still type), multiple Stage (JFrame) and may be some memory leak. The content is initially shown on another frame. Then its removed from original frame and added it to main frame. This causes some flickering. The implementation can be enhanced a bit so as to use some internal APIs and make things a bit more elegant. In any case I think the next version of JavaFX will have built in support for this. Which will be much more stable and flexible.

Disclaimer: Its an experimental implementation. Not concrete yet. Yes it can be enhanced. I just thought of putting it out so others can try to enhance it..

Source:

Saturday Apr 11, 2009

JavaFX - Loading Images


JavaFX provides many features which can be utilized while loading large images. Image has an attribute backgroundLoading which can be set to true, so that image loads in a background thread without freezing the UI. A placeholder image (thumbnail) can be shown using placeholder attribute. The approximate percentage of image's loading that has been completed can be determined from progress attribute.

Now lets see how to use these attributes. In below code we have set backgroundLoading to true and specified placeholder image.

// Load specified image in background thread
var imageView = ImageView {
    image: Image {
        url: "<image url>"
        backgroundLoading: true
        placeholder: Image {
            url: "<thumbnail url>"
        }
    }
}

Now we can directly get the progress of image loading using imageView.image.progress or we can bind this value to another attribute as shown below

// Bind to Image.progress and print the progress
var progress = bind imageView.image.progress on replace {
    println("progress {progress}");
}

The same progress attribute can be bound to actual progress bar. In this sample we are binding this progress to width of a Rectangle. So that the width of rectangle is proportional to the progress of image loading as shown below.

Rectangle {
    x: 11
    y: (sceneHeight - 9)
    // Change width of rectangle proportional to image progress
    width: bind ((sceneWidth - 20\* progress)/100.0
    height: 3
    arcWidth: 5
    arcHeight: 5
    fill: Color.RED
}

Launch Sample -

Source:

About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« July 2015
SunMonTueWedThuFriSat
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
       
Today