플래닛 NetBeans

Netbeans-korean by 강여사: Sun Tech Days 2008 Seoul!

Wed, 17 Sep 2008 05:45:04 +0000

Sun Tech Days 2008 Seoul!

공지 및 행사안내 2008/09/11 15:21

썬마이크로시스템즈의 전세계 개발자 컨퍼런스인 Sun Tech Days가 서울에 상륙합니다.
국내 개발자들의 Java와 OpenSolaris를 비롯한 오픈 소스 기술을 개발시켜 주는 Sun Tech Days 2008 Seoul!
전문가들로부터 최신 지식과 기술을 습득하고, 다른 개발자들과 네트워크를 만들고,
커뮤니티 안에서 정보를 공유함으로서 귀하의 능력을 향상시킬 수 있는 최고의 기회입니다.

Sun Tech Days 2008 본 행사에 참석하신 분들께는
메신저백, 티셔츠, 듀크 스트레스 토이, 열쇠고리 등 다양한 기념품을 드립니다.
또한 행사 종료 후에는 경품 추첨을 통해 다양하고 푸짐한 선물을 드립니다.

Netbeans-korean by 강여사: 넷빈 6.1에서 JavaFX 사용하기 (basic) - blue box

Sun, 07 Sep 2008 11:47:35 +0000

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) 에러에 일주일을 보낸적도 있습니다.

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

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

세상에 공짜는 없습니다.

수고하셨습니다. ^^

Netbeans-korean by 강여사: JDK 6 - 09: Splash Screen : HelloSplash

Tue, 02 Sep 2008 14:15:37 +0000

JDK 6 - 09: Splash Screen (스플래시 스크린) 사용하기 - 01: HelloSplash

JDK 6 버전의 new feature 중 하나입니다. 시리즈 별로 올라갈 텐데.. 언제 다 올라갈지는 오직 신만이 아신다는... ^^;;

스플래시 스크린은 간단히 말하면 넷빈 시작하면 중간에 퍼억~ 뜨는 그림 보셨을 겁니다. 그겁니다. ^^
간단히는 그림만 띠우는 수준부터 프로그래시브(상태바) 표시까지도 가능하지요. ^^

자바 프로그램을 완벽 로딩하기까지 멀뚱~히 있던 지루함을 달래주기엔 딱입니다. ㅋ

뭐 언제나 그러하듯이 저의 접근법은 넷빈을 최대한으로..(인즉은 '노가다를 최대로 줄여보자'..--;) 입니다.

그럼 시작하죠.
new project - java - java application
next

프로젝트 이름은 splash_test 로 줬습니다. (뭐 적당히 알아서 주시면 됩니다)
경로도 역시 적당히 알아서
finish

최종 결과 프로그램 화면이 GUI 이기 때문에 JFrame Form 을 이용해서 최종 프로그램 샘플을 만들겠습니다.
프로젝트에서 오른쪽 클릭 - new - JFrame Form

클래스 이름은 HelloSplash
패키지 이름은 test
finish

그럼 디자인 창이 나오는데 이 JFrame 에 제목을 넣고 싶으면 오른쪽 중간에 JFrame- Properties 에 보시면 title 이 있습니다.
거기에 적당히 넣으시면 됩니다.
저는 Splash Test 라고 줬습니다.

이제 디자인을 할 차례인데 뭐 간단히 라벨 작업만 할 예정입니다.
파레트에서 Label 를 선택하고 디자인창의 적당한 곳에 놓습니다.

그런 다음 적당한 문구를 넣고.. 저는 Did you see Splash Screen? :-) 이라고 줬습니다.
그런 다음 JFrame 사이즈를 적당히 줄여 그림과 같이 만들었습니다.
저게 나중에 최종 프로그램으로 뜰 모습입니다.

자 그럼 이제 스플래시를 동작시키기 위해 소스부분에 적절한 처리를 하겠습니다.
Source 탭을 눌러 아래 run() 메소드 아래에다 적절한 타이밍 작업을 합니다.

======================================================================

try {
Thread.sleep(1500);
} catch (InterruptedException e) {
e.printStackTrace();
}

======================================================================

라고 줬습니다. 저 시간만큼 지연되겠군요. ^^

그런 다음 스플래시로 사용할 이미지를 프로젝트 폴더에 탐색기를 사용하여 넣습니다. (넣고난후 넷빈의 Files 탭을 눌러 확인해 보실 수도 있습니다.)

이때 그림의 경로가 문제인데, 그림을 넷빈에서 실행시키고자 할 때에는 프로젝트 바로 아래 두셔야 정상동작합니다. 그러나 이것만 하게되면 나중에 배포판(dist)를 만들경우 그림이 들어가질 않죠. 해서 src 폴더 아래에도 두시게 되면 배포판을 만들 경우 그림이 자동으로 들어갑니다. src 에 넣을 경우 그림은 default package 아래 놓이게 되겠죠.

그럼 이제 스플래시를 구동시킬 vm 옵션처리를 하겠습니다.
프로젝트에서 오른쪽 마우스 클릭 - properties 클릭

Run 카테고리에서 메인 클래스를 찾아 넣고(작업한 클래스: test.HelloSplash 가 되겠군요) browse 버튼을 누르면 팝업창이 뜨고 찾아 OK 하면 됩니다.

VM 옵션에 다음과 같이 적습니다.

-splash:splashtest_350W.gif

OK

그럼 이제 해당 파일을 실행(Run file)하겠습니다. (파일차원으로 실행하시거나 아니면 프로젝트 run 하셔도 됩니다)

아래 그림에 있는 DUKE 이미지가 바로 스플래시 스크린으로 지정한 이미지 파일입니다. 저게 한참을 보이다 최종 프로그램이 보여지면 자동 없어집니다.

아까 작성한 최종 GUI 프로그램입니다.

이게 스플래시의 베이직입니다.

수고하셨습니다. ^^

Netbeans-korean by 강여사: 넷빈 6.1에서 웹서비스보안(usename auth and symmetric key) 적용하기 - 01