JavaFX – Resolution Independent UI


Creating Resolution Independent UI – This is very tricky and complicated topic. The real solution will be to use layout. But sometimes (mostly?) you learn this the hard way!

I was preparing some demos for SiliconIndia Mobile Application Conference. I downloaded a bunch of samples from javafx.com – samples. Installed it on Sony Ericsson – X1. Cool! The demos launched successfully.. But…!!!

BrickBreaker sample as seen in mobile with [480 x 800] resolution..

Actual Scaled
<img src="http://javafxdemos.googlecode.com/hg/resource/ResInd/bb_org.png&quot; <img src="http://javafxdemos.googlecode.com/hg/resource/ResInd/bb_scaled.png&quot;

Many of the nice samples are written for [240 x 320] (resolution of default JavaFX emulator skin). So they appear to be so small on [480 x 800] resolution phone. There is no straight forward way to fix all these samples in such short time (have to show it in conference!!). What next?

Hmm.. Just scale the root node so as to fit the screen. It doesn’t look bad at all on mobile (above screenshot may not look good though)… Well this is not an attempt to provide a solution, but just to help you in case you end up in similar situation! Ofcourse the solution is still to avoid hard-coding of coordinates in the application.. This is just a gentle reminder..

Yes! The demos and presentation was successful.. But yeah.. sometimes you have to incorporate such workaround.. Hope you agree!! You may also be interested in new website – Josh On Design with topics related to UI design..

Diff of BrickBreaker Main.fx

Advertisements

About Rakesh Menon
-

2 Responses to JavaFX – Resolution Independent UI

  1. Hi Rakesh,
    Try this one out. May the force be with you.
    Manuel
    /*
    * ScreenSize.fx
    * Created on Sep 1, 2009, 12:36:37 PM
    */
    package com.check1two.screen;
    /**@author Manuel Tijerino CEO check1two , htp://www.check1two.com
    USAGE:
    Stage {
    style: StageStyle.UNDECORATED
    title: "One Size Fits All"
    resizable:false
    width: screenSize.SW;
    height: screenSize.SH;
    scene: Scene {
    width: screenSize.SW
    height: screenSize.SH;
    content: [
    Group {
    //rotate the screen
    //transforms: Rotate { angle: 90 }
    //translateX: screenSize.SH;
    content: [
    Rectangle {
    x: screenSize.getX(10), y: screenSize.getY(10)
    width: screenSize.getWidth(140), height: screenSize.getHeight(90)
    fill: Color.BLACK
    }
    ]
    }
    }
    }
    */
    import javafx.stage.*;
    public class ScreenSize {
    //480 x 558 //HTC Touch Diamond
    //public var SW:Double = 480;
    //public var SH:Double = 558;
    //public var SW:Double = 558;
    //public var SH:Double = 480;
    //320 x 240//QuertyFXPhone1
    //public var SW:Double = 320;
    //public var SH:Double = 240;
    //480 x 320//Apple I Phone & TMobile G1 looks cool can’t see yes
    //public var SW:Double = 480;
    //public var SH:Double = 320;
    //480 x 360//Blackberry Storm great can’t see yes
    //public def SW:Double = 480;
    //public def SH:Double = 360;
    //240×400//Samsun Omnia SGH-i900 can’t see ok yes no
    //public def SW:Double = 400;
    //public def SH:Double = 240;
    //320 x 320//Samsun Saga
    //320 x 320//Palm Trio Pro
    //public def SW:Double = 320;
    //public def SH:Double = 320;
    //800 x 480//Xperia X1
    //public def SW:Double = 800;
    //public def SH:Double = 480;
    //the size of the screen on our device
    public var SW:Double = Screen.primary.visualBounds.width as Double on replace{
    if("{__PROFILE__}" != "mobile") {
    //SW = 1280
    //SW = 1024
    //SW = 800
    //SW = 480 /2
    SW = 400
    //SW = 200
    //SW = 100
    }
    }
    public var SH:Double = Screen.primary.visualBounds.height as Double on replace{
    if("{__PROFILE__}" != "mobile") {
    //SH = 800
    //SH = 768;
    //SH = 600
    //SH = 558 /2
    SH = 300
    //SH = 150
    //SH = 75
    }
    }
    //flipped
    //public def SW:Double = Screen.primary.visualBounds.height as Double;
    //public def SH:Double = Screen.primary.visualBounds.width as Double;
    ////////////////////////////
    //the reference resolution.
    public var RW:Double = 1024;
    public var RH:Double = 768;
    ////////////////////////////
    public function getX(x:Double):Double{
    return x / RW * SW;
    }
    public function getY(y:Double):Double{
    return y / RH * SH;
    }
    public function getWidth(w:Double):Double{
    return w / RW * SW;
    }
    public function getHeight(h:Double):Double{
    return h / RH * SH;
    }
    public function getSize(h:Double):Double{
    return getX(h);
    }
    }

  2. Rakesh Menon says:

    @Manuel Tijerino Thanks for alternate approach.. I’ll try this out..

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: