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

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

Comments:

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;

//240x400//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);
}
}

Posted by Manuel Tijerino on November 07, 2009 at 05:05 PM IST #

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

Posted by Rakesh Menon on November 09, 2009 at 06:32 AM IST #

Post a Comment:
Comments are closed for this entry.
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