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

1

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

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

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



세상에 공짜는 없습니다.



수고하셨습니다. ^^



JDK 6 - 09: Splash Screen : HelloSplash

1

Written on 오전 7:02 by 강여사(J.Y.Kang)

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 프로그램입니다.



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

수고하셨습니다. ^^

JDK 6 - 08: Scripting : MultiScopes

0

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

스크립트 변수 예제에서, 스크립트 전역 변수로 어플리케이션 객체를 표현하는 방법을 봤었다. 스크립트를 위한 다중 전역 “영역”을 표현할 수 있다. 단일 영역은 javax.script,Bindings의 인스턴스다. 이 인터페이스는 java.util.Map에서 파생되었다. A scope a set of name-value pairs where name is any non-empty, non-null String. 다중 영역은 javax.script,SriptContext 인터페이스에 의해 지원된다. 디폴트로, 각 스크립트 엔진은 기본 스크립트 context를 가진다. 기본 스크립트 context는 소위 “ENGINE_SCOPE” 라고 불리는 적어도 하나의 영역을 가진다. 스크립트 context에 의해 지원되는 다양한 영역은 getScopes 메소드를 통해 사용가능하다.

=================================================================================
package test;

import javax.script.Bindings;
import javax.script.ScriptContext;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
import javax.script.SimpleScriptContext;

public class MultiScopes {

public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");

engine.put("x", "hello");
// print global variable "x"
engine.eval("println(x);");
// the above line prints "hello"

// Now, pass a different script context
ScriptContext newContext = new SimpleScriptContext();
Bindings engineScope = newContext.getBindings(ScriptContext.ENGINE_SCOPE);

// add new variable "x" to the new engineScope
engineScope.put("x", "world");

// execute the same script - but this time pass a different script context
engine.eval("println(x);", newContext);
// the above line prints "world"
}
}
=================================================================================

JDK 6 - 07: Scripting : RunnableImplObject

0

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

만약 스크립팅 언어가 객제 기반이거나 객체 지향이라면, 스크립트 객체에 스크립트 메소드에 의한 자바 인터페이스를 구현할 수 있다. 인터페이스 메소드를 위한 전역 함수 호출을 회피할 수 있다. 스크립트 객체는 인터페이스 구현자에 의한 “상태” 를 저장할 수 있다.

====================================================================================
package test;

import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class RunnableImplObject {

public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");

// JavaScript code in a String
String script = "var obj = new Object(); obj.run = function() { println('run method called'); }";

// evaluate script
engine.eval(script);

// get script object on which we want to implement the interface with
Object obj = engine.get("obj");

Invocable inv = (Invocable) engine;

// get Runnable interface object from engine. This interface methods
// are implemented by script methods of object 'obj'
Runnable r = inv.getInterface(obj, Runnable.class);

// start a new thread that runs the script implemented
// runnable interface
Thread th = new Thread(r);
th.start();
}
}
====================================================================================

JDK 6 - 05: Scripting : InvokeScriptMethod

0

Written on 오전 2:46 by 강여사(J.Y.Kang)

만약 스크립팅 언어가 객체 기반(자바 스크립트와 같은) 혹은 객체 지향이라면, 스크립트 객체에 스크립트 메소드를 호출할 수 있다.

===================================================================================
package test;

import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class InvokeScriptMethod {

public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");

// JavaScript code in a String. This code defines a script object 'obj'
// with one method called 'hello'.
String script = "var obj = new Object(); obj.hello = function(name) { print('Hello, ' + name); }";
// evaluate script
engine.eval(script);

// javax.script.Invocable is an optional interface.
// Check whether your script engine implements or not!
// Note that the JavaScript engine implements Invocable interface.
Invocable inv = (Invocable) engine;

// get script object on which we want to call the method
Object obj = engine.get("obj");

// invoke the method named "hello" on the script object "obj"
inv.invokeMethod(obj, "hello", "Script Method !!");
}
}
===================================================================================

JDK 6 - 04: Scripting : InvokeScriptFunction

0

Written on 오전 2:38 by 강여사(J.Y.Kang)

스크립트 함수와 메소드 호출하기

때때로 특정 스크립트 함수를 반복하여 호출하고자 할 때가 있다 – 예를 들어, 스크립트로 구현된 어플리케이션 메뉴 기능 등등. 여러분의 메뉴 액션 이벤트 핸들러 안에, 특정 스크립트 함수를 호출하길 원할 경우, 다음 예제의 자바코드로부터 특정 스크립트 함수를 호출하는 방법으로 사용하면 된다.

===============================================================================
package test;

import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class InvokeScriptFunction {

public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");

// JavaScript code in a String
String script = "function hello(name) { print('Hello, ' + name); }";
// evaluate script
engine.eval(script);

// javax.script.Invocable is an optional interface.
// Check whether your script engine implements or not!
// Note that the JavaScript engine implements Invocable interface.
Invocable inv = (Invocable) engine;

// invoke the global function named "hello"
inv.invokeFunction("hello", "Scripting!!");
}
}
===============================================================================

JDK 6 - 03: Scripting : ScriptVars

0

Written on 오전 2:09 by 강여사(J.Y.Kang)

스크립트 변수(Script Variables)

여러분의 자바 어플리케이션에 스크립트 엔진과 스크립트를 embed 했을 때, 스크립트에 전역변수(global variables)로써 어플리케이션 객체를 원할 때가 있다. 이번 예제에서는 스크립트에 전역변수로써 어플리케이션 객체를 제시하는 방법에 대해 알아보자. 우선, 어플리케이션에 java.io.File 을 생성하고, 같은 이름의 “file”을 전역 변수로 처리할 수 있다. 스크립트는 변수(“file”)에 접근 가능하다 – 예를 들어, public 메소드 호출이 가능하다. 자바 객체, 메소드, 그리고 필드를 액세스하는 문법은 스크립트 언어에 의해 달라지는데, 자바스크립트는 대부분 “natural” 자바와 비슷한 문법을 가지고 있다.

==================================================================
package test;

import java.io.File;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class ScriptVars {

public static void main(String[] args) throws Exception {
ScriptEngineManager manager = new ScriptEngineManager();
ScriptEngine engine = manager.getEngineByName("JavaScript");

File f = new File("test.txt");
// expose File object as variable to script
engine.put("file", f);

// evaluate a script string. The script accesses "file"
// variable and calls method on it
engine.eval("print(file.getAbsolutePath())");
}
}
==================================================================

JDK 6 - 02: Scripting : EvalFile

0

Written on 오전 1:26 by 강여사(J.Y.Kang)

스크립트 파일(File) 사용(Evaluate)

이번 예제에서는, java.io.Reader로 입력 소스를 읽어오는(accept) eval 메소드를 호출한다. Reader에 의해 읽혀진 스크립트가 실행된다. 이 방법은 파일, URLs 그리고 readers 로써 입력 스트림 객체로 랩핑된 자원들로부터 스크립트를 실행 가능케 한다.

------------------------------------------------------------------------------------
package test;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class EvalFile {

public static void main(String[] args) throws Exception {
// create a script engine manager
ScriptEngineManager factory = new ScriptEngineManager();
// create JavaScript engine
ScriptEngine engine = factory.getEngineByName("JavaScript");
// evaluate JavaScript code from given file - specified by first argument
engine.eval(new java.io.FileReader(args[0]));
}
}

------------------------------------------------------------------------------------

파일이름 "test.js" 로 주어진 스크립트 소스는 다음 내용으로 작성:

println("This is hello from test.js");

터미널에서 실행

java EvalFile test.js

JDK 6 - 01: Scripting : EvalScript

0

Written on 오전 12:39 by 강여사(J.Y.Kang)

Examples - 01 : Hello World

ScriptEngineManager 인스턴스로 부터, getEngineByName 메소드를 사용, 자바 스크립트 엔진 인스턴스 요청. 스크립트 엔진에, eval 메소드는 자바스크립트 코드로 주어진 문장(문자열)을 수행하기 위해 호출된다. 예제엔 단순화하기 위해 Exception 핸들링은 하지 않았다. Javax.script API에 의해 컴파일 시/실행 시 오류 처리가 되며, 물론 원래 Exceptions은 적절히 핸들링되야 한다.
-----------------------------------------------------------------------------------
package test;

import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;

public class EvalScript {

public static void main(String[] args) throws Exception {
// create a script engine manager
ScriptEngineManager factory = new ScriptEngineManager();
// create a JavaScript engine
ScriptEngine engine = factory.getEngineByName("JavaScript");
// evaluate JavaScript code from String
engine.eval("print('Hello, World')");
}
}
-----------------------------------------------------------------------------------