넷빈 6.1에서 JavaFX 사용하기 (basic) - blue box

Written on 오전 4:31 by 강여사(J.Y.Kang)

JavaFX... ㅋㅋ

RIA 구현을 위한 썬 쪽의 공략책이랄까요..ㅎ
어느 세미나에서 JavaFX 의 타겟이 아도비의 FLEX냐, 아니면 실버라이트냐 라고 묻던 분이 계시던데..
답변은 둘다 아니다 였습니다만..ㅎㅎ

아무튼 아직 한국에선 모바일쪽에서 가장 관심이고 데스크탑쪽에서는 이제 슬슬 인듯하지만 요근래 본사 사이트쪽 작업들은 활발해 지는 걸 보면 이것도 손을 대야 하나..싶은거이..쩝.. 뭐 원래 저는 이런 화려한 거 좋아라 합니다. 플래시 자체도 어지간한 디자이너 저리가라 할만큼 해볼만큼 해봤으니..완죤 노가다..--;

각설하고 JavaFX 홈사이트는 여기 입니다. 관련내용은 사이트에서 함 보시고 http://javafx.com/
javaFX 관련 넷빈 사이트는 여기 http://javafx.netbeans.org/

뭐 아시는 분들은 아시겠지만 아직 책이나 튜토리얼들도 그닥 맘에 드는게 없다는..--; 쩝 차츰 나아지겠죠.

해서 이번에 해볼거는 일단 넷빈 6 IDE 에 JavaFX 관련 플러그인 설치하고 베이직한 거 만들어 보고 이벤트까지 걸어보고 정도를 다뤄볼 까 합니다. 그리고 데모로 제시되는 날씨 정보 (야후 웹 서비스 사용)로 javaFX 현황도 보고.. 정도

그럼 시작합시다.

우선 플러그인 설치를 위해 다음을 선택합니다.
위의 Tools - Plugin 클릭

팝업창이 뜨고 잠시후(인터넷으로 불러오기 때문에 시간 걸립니다) 메뉴들이 보이면, 위의 탭을 Available Plugins 으로 선택합니다.
그중 JavaFX 관련 사항을 받습니다. 현재(2008.09.06 일자)로는 3개군요.
모두 체크후 아래 Install 버튼을 눌러 진행합니다.

제시되는 대로 진행시키시면 됩니다.
next

동의 (체크) next

넷빈 재 시작 finish

자동으로 새로 시작된 넷빈 IDE 에서 새로운 프로젝트 카테고리를 보면 JavaFX 가 있습니다.
File - New Project - JavaFX
javaFX Script 어플리케이션을 선택하고 진행
next

이름은 적당히 (그냥 나타나는 대로 줬습니다. 다시 귀차니즘의 발현인가..헐..)
경로는 알아서
메인체크되어 있어서 Main.fx 로 뜨겠네요.
Finish

그럼 왼쪽에 Main.fx 가 가운데 창에 Main.fx 모습이 그리고 오른쪽에 JavaFX 관련 컴포넌트들이 보입니다.

여기서 중간에 view 가 보이는 제 그림은 마우스의 위치에 있는 Preview 를 Enable 해서 그렇습니다. (눌러보시면 압니다 ^^;)
JavaFX 작업은 이렇게 Preview를 거의 실시간처럼 보면서 진행할 수도 있습니다. (에러나면 바로 프리뷰대신 에러메시지가 뜨죠..--;)

그럼 아래 편집창에 와서.. 편집창에서 하나씩 코드 작성을 하셔도 됩니다. (매뉴얼로 javaFX를 짜는 방식).

벗드..최대한 노가다를 안하고픈 강여사..--;

오른쪽의 파레트에 보시면 작성하실 수 있는 컴포넌트 어지간한건 다 있습니다.
우선 Applications 카테고리의 Frame 를 선택하고 마우스로 클릭해서 왼쪽 주석 아래(//place your code here) 놓습니다.
그럼 일련의 코드 작업이 진행됩니다.

말그대로 JavaFX 창(프레임) 작업입니다.
만들어진 코드를 부분부분 원하시는대로 수정하시면 됩니다.
저는 타이틀을 "MyApplication" 대신 "Blue Box" 라고 줬습니다.

그럼 내용을 채워넣어야 하는데 아래 state의 content 안에 넣으시면 됩니다.
(이 작업시 바로 엔터키가 안 먹더군요. 왜그런지는 아직 파악안해봤고 처음 묶여지는게 stage 단위였던지라 그 아래
} 의 칸을 띠우고 다시 하나씩 } 칸 띠우고 ] 칸 띠우니 되더군요. (뭐 해보시면 무슨 말인지 아실듯)

덧. 이유를 아시는 분은 답글 부탁드립니다~~ ㅎㅎ

일단 content : [ ] 안에 넣고자 하는 내용을 역시 파레트에서 드래그해서 넣을 예정입니다.
선택한 내용은 Basic Shapes 카테고리의 Rectangle
파레트에서 선택한후 마우스로 드래그해서 [ ] 안에 넣습니다. 그림 참조

그런 다음 Color.BLACK 을 Color.BLUE 로 바꿨습니다. 이러한 칼러 참조는 역시 파레트에 보시면 Colors 카테고리를 열어 보시면 있습니다.

이제 Preview를 다시 켜보면 (위의 Preview 버튼 클릭)
지금 작성한 파란 박스가 보입니다.

그럼 파란 박스에 글씨도 첨가해보죠.
아까 content 가 배열로 처리되어 있기 때문에 Rectangle 뒤에 , (쉼표) 를 주고 이번엔 text 요소를 추가 합니다.

역시 오른쪽 파레트에 Basic Shapes 의 Text 를 마우스 드래그해서 쉼표 아래 놓습니다.
색은 원래 BLACK 인것을 아쿠아마린 으로 줬습니다.
아쿠아마린 색으로 HelloWorld 가 보이는 군요..흠..^^

그럼 이제 이 게시물의 마지막인 이벤트 상황을 주도록 하겠습니다.

이거할때 느낀건데 하도 fix import 에 익숙해져서리 이 자동임포트가 안되니 엄청 불편하더군요..--;

현재 javafx 플러그인으로는 아직 자동 임포트 메뉴는 없습니다. 파레트에서 끌고 오면 해당 임포트는 알아서 해줍니다만, 소스 작업을 수동으로 하게되면 필요한 임포트는 반드시 직접 명시해야 합니다.

다음 작업은 핑크색 박스를 하나 만들고 그게 마우스에 따라 움직이도록 할 예정입니다. 해서 필요로 하는 임포트는 다음과 같습니다.

import javafx.input.MouseEvent;
import javafx.scene.transform.Translate;
import javafx.scene.Group;

그리고 마우스의 x y 좌표 관련 변수 세팅

var mouseX : Number = 100;
var mouseY : Number = 100;

파레트의 Actions 카테고리에 보면 onMouseMoved 가 있습니다.

클릭해서 드래그한후 fill: Color.BLUE 아래 놓습니다.

그럼 코드가 만들어지는데 여기다 직접 작업을 합니다. 작업할 내용은 다음,
-------------------------------------------------------------------------
onMouseMoved: function( e: MouseEvent ):Void {
mouseX = e.getX();
mouseY = e.getY();
}
-------------------------------------------------------------------------
파란 박스안에서의 마우스 움직임에 따라 x y 좌표를 가져옵니다.

그런 다음 이 파란 박스의 마우스 x y 좌표를 따라 움직이는 분홍 박스를 만듭니다.
역시 모두가 content 의 배열처리되니까 각각 쉼표(,)로 분리하시고
-------------------------------------------------------------------------
,

Group {
transform : Translate { x : bind mouseX - 25, y : bind mouseY - 25 }
content :
Rectangle { width : 50, height : 50, fill : Color.PINK }
} ,

-------------------------------------------------------------------------
작성이 완료되면 저장(save all) 하고 실행합니다. (뭐 실행하기전에 preview 에서 해보셔도 되지만)

실행 결과, 파란 박스에서 마우스를 움직임에 따라 분홍색 박스가 움직이는 걸 보실 수 있습니다.

(그럼 이 예제를 직접 하신 분들께 아주 간.단.한 질문을 드리겠습니다. ^^

질문 1.

현재 마우스의 체크 범위는 파란 박스가 경계입니다. 그럼 fx 창 전체로 분홍색 박스를 움직이게 하려면 어떻게 하면 될까요?

질문 2.

프리뷰와 실행창에는 엄연히 차이가 있습니다. 현재 파란 박스 경계 밖은 하얀색입니다.
그럼 파란 박스 경계 밖의 색을 노란색으로 채우려면 어떻게 하면 될까요?

답은 해결하고 보면 의외로 쉽습니다. ^^

여러분은 에러에 대해 얼만큼 투자 하십니까?

시간적 측면이나 노력 측면이나..

폰트 세팅시 보이지도 않는 빈공백(null) 에러에 일주일을 보낸적도 있습니다.

하지만 그게 낭비라고 생각하진 않습니다.

그러한 에러에 대한 시간들이 저의 오늘날의 밑바탕이 된 건 분명하니까요.

세상에 공짜는 없습니다.

수고하셨습니다. ^^