WARNING: The tips I am giving here are true for the current version of JavaFX Mobile, which is part of the JavaFX 1.1 SDK. In future versions the behavior will change, the
current bad performance of the mentioned artifacts will be optimized away or at least significantly improved. Everything I am writing about here is a snap-shot, nothing should be understood as
final!

Item 3: Use simple shapes instead of images

Item 4: Use small images instead of complex shapes

These two items seem to contradict each other. Unfortunately there is no easy answer available here:  sometimes using shapes is better, sometimes using an image is better. To help making the right decision, here are some points one should consider:

  • Complexity Single basic shapes like rectangles or circles are almost always faster than images. But the higher the number of shapes, which are assembled to get the desired artifact, or the more complex a user-defined path is, the more expensive operations on these shapes are. And the advantage shrinks. Important note: A javafx.text.Text object is a very complex shape.
  • Size The performance of most operations on images behaves quadratic, which means the operations become 4 times as slow if width and height are doubled, 9 times as slow if they are tripled etc. Therefore the bigger an element is, the better is using shapes.
  • Transformations Rotating or scaling does not only look better when using shapes, but it is usually also faster than transforming images. Especially if rotation and scaling are animated, shapes will perform better.
  • Startup time Loading an image and setting up an ImageView is usually slower then setting up shapes.
  • Footprint Static and dynamic footprint is almost always higher when using images.

Important: The variable cache of javafx.scene.Node is currently NOT used in the runtime. Setting it makes no difference!

Links to previous parts:

Item 1: Avoid unnecessary bindings
Item 2: Keep the scenegraph as small as possible

Tags: , ,

12 Comments on Best Practices for JavaFX Mobile Applications 3

  1. Bruno Garcia says:

    How do complex shapes compare with images when Node.cache is flipped on?

  2. Michael Heinrichs says:

    Darn! I knew I forgot something really important in this post: the cache-variable. The cache-variable is currently NOT used in the JavaFX Mobile runtime!

  3. Michael Heinrichs says:

    Thanks a lot, Bruno! I updated the post.

  4. Bruno Garcia says:

    Great series of articles, Michael. I’ll be referring to these when I get into FX mobile. Also, the lack of caching on mobile should certainly be documented :)

  5. Tamer KARAKAN says:

    what’s performance differences bind and/or bound function with on replace {call function or var foo = call function}

  6. Michael Heinrichs says:

    Tamer,
    it depends, I would say. A simple example I benchmarked became 4 times faster when the binding was removed. If you have a specific function in mind, you can measure the difference yourself. Simply change the bound value say a million times and measure how long it takes with bindings compared to using a trigger.

    The runtime code for bound functions is pretty complex, I assume they are even slower.

  7. Subhodh says:

    I was always confused regarding complex shapes and images. Thanks for the vital information. It would help me in developing an application which I plan to showcase in Forum Nokia Developer Conference.

  8. Pablo says:

    Hi Michael

    I have made a jfx application who reloads and shows an image from the internet because the image changes periodically, the application works correctly in desktop or applet profile, but in win mobile the image only loads once and doesnt change in spite of the image is still changing in the web server.

    what can i do??

    thank you and please excuse my english

  9. Mike says:

    Can you please provide the source code?

  10. Pablo says:

    of course!

    //this is the image by default
    var image: Image = Image{
    url: “{__DIR__}images/nodisponible2.jpg”;
    }
    var cam: ImageView = ImageView {
    cache:false
    translateY:72;
    translateX:9;
    fitWidth:223;
    preserveRatio:true;
    image: imagen
    }

    //a timeline calls a periodically a function that reloads the image

    var timeline: Timeline = Timeline{
    repeatCount: Timeline.INDEFINITE
    keyFrames:[
    KeyFrame{
    time : 0.25s
    action : renovarUrl
    }
    ]
    }

    //each time you call this function a new image variable is created, but win mobile always shows the same

    function renovarUrl() : Void{
    var imagen2: Image = Image{
    url: “http://127.0.0.1/map0/cam0/cam.jpg”;
    }
    cam.image=imagen2;
    }

    thanks!

  11. Pablo says:

    //i made a copy-paste mistake**

    var imagen: Image = Image{
    url: “{__DIR__}images/nodisponible2.jpg”;
    }

  12. Mike says:

    From the code, everything seems to be ok. Although the update rate is a little high, loading a new image four times a second is a lot for a device. :-)

    I have to try this myself, to see what might be wrong.