JavaFX 예제 코드 | DisplayShelfMobile

모바일용 Display Shelf

작성자 Josh Marinacci, 2008년 10월 20일

기본적인 Display Shelf 예제는 PerspectiveTransform을 사용한다. 이 효과는 모바일 장비에서는 이용하지 않으나 네비게이션 시스템과 같은 display shelf는 더 작은 스크린에서도 유용하다. 이 예제는 모바일 장비에서 작동하도록 어떻게 DisplayShelf를 수정하는지 알려준다.

코드 살펴보기

Display Shelf의 모바일 버전은 3가지 변경으로 데스크탑 버전과 같다.: 더 작은 스크린 조절, PerspectiveTransform을 바꾸기 위해 스케일 효과를 사용, 더 효과적인 시각화를 위해 배경 변경

화면 크기를 변경하는 것은 휩다. 화면에 더 작은 컨텐트를 놓아야 한다. 그러면 자동적으로 크기가 바뀐다. DisplayShelf 클래스는 크기 조절과 함께 작성되어 있다. 이 클래스는 몇가지 변수를 갖는다. 스크린에서 사진 교체와 크기 조절을 하도록 부분 변경을 할 수 있다. : spacing, smallScale, leftOffset, rightOffset. 이 변수들을 조절하여 각각 측면에서 더 가깝게 사진을 이동할 수 있고, 가운데 사진에 더 가깝게 이동하고, 가운데에 위치하지 않은 사진의 크기를 변경한다. 그림 1에서 보는 변수들은 더 견고하게 압축된 사진과 함께 더 작은 장면을 만든다.

소스 코드

var shelf:DisplayShelf;
shelf = DisplayShelf {
    spacing: 30
    scaleSmall: 0.6
    leftOffset: -55
    rightOffset: 55
    content: bind for(i in images) {
        var item:Item = Item {
            angle: 45
            blocksMouse: true
            position: indexof i - half
            image:Image { url: "{__DIR__}photos/{i}" width: 100 height: 100 }
            shelf: bind shelf
        };
        item;
    }

Figure 1: 모바일 특성을 위한 DisplayShelf 구성하기

본래의 DisplayShelf 예제에서 PerspectiveTransform은 Item 클래스의 내부에 적용된다. 모바일 버전을 위해 그림 2에서 보는 것처럼 PerspectiveTransform 코드를 완벽하게 제거했다. 크기를 조절하는 것은 scaleSmall 변수를 설정할 때 DisplayShelf 내에서 자동적으로 발생한다.(which is 1.0 by default for no-scale).

소스 코드

public class Item extends CustomNode {
    public var position:Integer = 0;
    public var angle = 45.0;
    public var shelf:DisplayShelf;
    public-init var image:Image;
    
    override var onMousePressed = function(e:MouseEvent) {
        shelf.shiftToCenter(this);
    };

    override public function create():Node {
        return Group {
            content: [
                ImageView {
                    image: image
                },
                Rectangle { width: 100 height: 100 
                    stroke: Color.BLACK strokeWidth: 3
                    fill: null }
            ]
        }
    }

}

Figure 2: 모바일에서 사용하기 위한 Item.fx 수정

모바일 장비에서 DisplayShelf가 작동하도록 하기 위해 두가지를 변경한다. 그러나 보기엔 사진이 여전히 좀 작다. 본래 버전에서 사진은 중심에 있었음에도 불구하고 하나의 각도에서 볼 수 있었다. 현재 모든 사진은 모든 방향에서 보여진다. 이러한 현상은 사진의 끝쪽을 보는 것이 어렵게 한다. 이 문제는 모바일 사이즈에 스크린을 줄임으로써 더 뒤섞인다.(This problem is further compounded by shrinking the screen to mobile size.) 사진을 더 시각적으로 하기 위해 Item 클래스(위의 그림 2)에 있는 각 사진 주위에 3픽셀 넓이의 검은색 경계선을 추가했다. 또한 더 어둡게 하기 위해 배경 그레디언트를 변경했다. 더 더우운 그레디언트와 검은 경계선은 사진이 더 쉽고 잘 보도록 한다.

소스 코드

var stage = Stage {
    visible: true
    resizable: false
    scene: Scene {
        content: [
            Rectangle {
                width: width
                height: 240
                fill: LinearGradient {
                    startX: 0 startY: 0
                    endX: 0 endY: 1
                    proportional: true
                    stops: [
                        Stop { offset: 0.0 color: Color.rgb(150,150,150) }
                        Stop { offset: 0.3 color: Color.rgb(0,0,0)},
                        Stop { offset: 0.7 color: Color.rgb(0,0,0)},
                        Stop { offset: 1.0 color: Color.rgb(150,150,150)},
                    ]
                }
            },
            shelf
        ]
    }
}

그림 3: 새로운 그레디언드 배경

FX

Profile

모바일용 Display Shelf

코드 살펴보기