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
« April 2014
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
   
       
Today