바탕화면에 MP3 플레이어 Drag하기

By Josh Marinacci, November 17th, 2008

Java SE 6 Update 10은 사용자들이 나중에 사용하기 위해서 그들의 바탕화면에 저장할수 있는 드래그 가능한 애플릿을 개발자들이 만들수 있게 해줍니다. 이 기능을 이용한 한가지 탁월한 사용은 음악 밴드를 위한 특정 MP3 플레이어 입니다. 음악 밴드는 그들의 노래가 미리 로드되어 있고 청취자를 그들의 웹사이트로 다시 데려다주는 back 버튼이 달린 플레이어를 그들의 웹사이트에 놓아둘수 있습니다.

Run Example with Java Webstart

la bonne soupe 2003년에 결성된 San Francisco를 기반으로 하는 그룹중 하나인 이 그룹은 사운드를 만들어 낸다. 그들의 가장 최근 short-player, Scottish insufficiency(2008)는 조용한 사건이었다; 슬프지도 않고 그저 조용하기만한. 이 그룹의 여러 음악적 스타일을 소개하는 가장 좋은 방법은 조설근의 서사시인 홍루몽에서 덧없는 순간을 다시 상상하는 2006년의 Literay Gentlemen을 확인해 보는 것이다.

코드 이해하기

JavaFX에서 드래그 할수 있는 애플릿을 기본적으로 지원하는 것은 매우 쉽습니다. 여러분은 애플릿 태그를 생성하는 자바스크립트에서 draggable:true 속성을 추가하기만 하면 됩니다. 하지만 여러분의 애플릿이 훌륭한 dragging 경험을 가지도록 하기위해선 약간의 작업이 더 필요합니다. JavaFX는 여러분이 여러분 자신의 드래그 가능한 제목표시줄, 닫기 버튼, hint indicator를 생성할수 있도록 드래그 움직임을 변경하게 해줍니다.

Drag가능한 부분 만들기

여러분의 어플리케이션을 드래그 가능하게 만들기 위해서는 여러분은 필요한 모든 정보들을 수집해야만 합니다. 여러분의 어플리케이션은 애플릿으로 실행중인것인지 알기를 원합니다(Java Web Start application으로 실행되었을지도 모르기 때문에); 만약 애플릿 dragging이 지원된다면 적어도(이 경우 사용자는 Java의 예전 버전을 가지고 있습니다); 그리고 마우스 커서가 현재 "드래그 가능한 범위" 안에 있는지 여부. "드래그 가능한 범위"는 사용자가 어플리케이션을 브라우저 밖으로 드래그 하고 계속해서 그것을 이동시키는 사용자 인터페이스의 한 부분입니다. 이것은 일반적으로 여러분의 윈도우 프레임의 가장자리의 사각형 형태와 같은 제목표시줄 이지만 정확한 모양은 오로지 여러분에게 달려 있습니다. Figure 1에서 코드는 이러한 모든 정보를 어떻게 수집하는지 보여줍니다.

Source Code
var isApplet = "true".equals(FX.getArgument("isApplet") as String);
var inBrowser = isApplet;
var draggable = AppletStageExtension.appletDragSupported;
var dragRect:Rectangle = Rectangle { x: 155 y: 30 width: 420 height: 40 fill: Color.TRANSPARENT
    onMouseDragged:function(e:MouseEvent):Void {
        stage.x += e.dragX;
        stage.y += e.dragY;
    }
};
var dragTextVisible = bind inBrowser and draggable and dragRect.hover;

Figure 1: Main.fx, draggable applet support

Figure 1의 dragRect는 stage의 위치를 변경해주는 onMouseDragged 이벤트 핸들러를 가지고 있습니다. 이것은 한번에 애플릿이 웹브라우저 밖에 있도록 하는 표준 draaing 움직임을 구현하는 여러분의 GUI의 한 부분입니다. 이렇게 하기 위한 능력은 초기 드래그는 다른 어떤곳에 정의되어야 합니다. 초기 드래그 할수 있는 능력은 나중에 설명되는것과 같이 다른 곳에 정의 됩니다. 또한 Figure 1 에서 isApplet 변수는 isApplet라고 이름 붙여진 인자를 확인함으로써 초기화 되는 점을 주목해야합니다. 이것은 Figure 2에서 보여지는 것처럼 여러분의 애플릿에 적합하게 HTML 안에서 여러분이 정해야만 하는 인자입니다.

Source Code
javafx({
    archive: "webstart/DraggableMP3Player.jar,webstart/lib/FXDContainer.jar,webstart/lib/FXDPackager.jar,webstart/lib/javafx-fxd-1.0.jar,",
    width: 510,
    height: 345,
    code: "draggablemp3player.Main",
    draggable: true,
    name: "appl"
} , { 
    isApplet: "true"
    }
);

Figure 2: Set the isApplet attribute of the applet tag

Drag가능한 Stage 만들기

적절한 boolean 변수로 여러분은 스스로 드래그 가능한 stage를 만들수 있습니다. 여러분은 Figure 3에서 보여지는 것처럼 AppletStageExtension의 인스턴스를 생성하고 이벤트 핸들러를 변경해서 이것을 합니다. 여러분은 사용자가 애플릿을 드래그 영역 안에서 마우스가 눌려졌을때만 드래그 하기를 원하기때문에 shouldDragStart 이벤트 핸들러는 마우스의 상태와 dragRect.hover 가 true인지 모두를 확인합니다. 드래그가 시작될때 그것은 inBrowset 변수를 false로 설정할것입니다. 애플릿은 다시 브라우저 안으로 되돌아 갈때 stage.close()를 호출함으로서 inBrowser 변수를 true로 되돌려 놓습니다. 또한 scene의 백그라운드 fillinBrowser 변수에 의해서 결정되는 것을 주목하세요. 이것은 브라우저 안에서는 배경화면을 하얗게 만들지만 사용자가 애플릿을 밖으로 드래그 할경우 투명도를 변경할것입니다.

Source Code
stage = Stage {
    scene: Scene {
        //conditionally make the background white or transparent
        fill: bind if (inBrowser) Color.WHITE else Color.TRANSPARENT
        content:  // your gui goes here...
    }
    extensions: [
        AppletStageExtension {
            shouldDragStart: function(e): Boolean {
                return inBrowser and e.primaryButtonDown and dragRect.hover;
            }
            onDragStarted: function(): Void {
                inBrowser = false;
            }
            onAppletRestored: function(): Void {
                inBrowser = true;
            }
            useDefaultClose: false
        }
    ]
}

Figure 3: