내 남자의 길~!

전체 글

JavaFx 데모 따라하기..

Ishaya seon 2008. 6. 26. 10:50

2008. 6. 26. 10:50

http://www.javapassion.com/handsonlabs/javafxdraggableapplets/index.html

가장 흥미로웠던 부분이다. JAVAFX에 관한 관심을 증폭시킬만한 데모이니 한번 따라해보세요

JavaFX 스크립트 소개(2)

Ishaya seon 2008. 6. 26. 10:32

2008. 6. 26. 10:32

제공 : 한빛 네트워크
저자 : Anghel Leonard
역자 : 김인희
원문 : Introduction to JavaFX Script

JavaFX 갖고 놀기

이 절에서는, JavaFX의 다양한 특징과 가능성을 엿볼 수 있는 몇 가지 예제를 보도록 하겠다. 예제들을 보여주는 이유는, 첫 번째로 JavaFX 코드 작성과 JavaFX 응용프로그램의 논리적 구조에 익숙해지도록 하기 위함이다. 두 번째로는 단지 몇 줄의 코드만으로 GUI, 애니메이션을 멋지게 만들거나 세련된 효과를 넣고 싶을 때, JavaFX가 시간을 들여 자세히 볼 만큼의 가치가 있다는 것을 알려주고 싶었기 때문이다. 여기서 소개하는 모든 예제들은 JavaFX만의 독특한 기술들을 포함하고 있다.

예제에 대한 간략한 설명을 한 후에 소스 코드를 보여주는 방식으로 진행할 것이고, 모든 예제가 혼자서 할 수 있는 정도로 쉽기 때문에 코드에 대한 설명을 따로 하지는 않았다.

System.out.println의 따옴표 안에 변수나 속성의 이름을 넣으면, 해당 값을 출력할 수 있다.

[예제 2]

//expressions within quoted text
import java.lang.System;
var mynumber:Number = 10;
System.out.println("Number is: {mynumber}");

결과 - Number is: 10

JavaFX는 변수의 집합 원소 개수(cardinality)를 표시하기 위해, 다음과 같이 세가지 연산자를 지원한다.

l	?: 선택 (null값일 수도 있다)
l	+: 1 또는 그 이상
l	*: 0 또는 그 이상

[예제 3]

//cardinality of the variable
import java.lang.System;
var mynumbers:Number* = [1,2,7];
System.out.println("Numbers are: {mynumbers}");

결과 – Numbers are: 1 2 7

JavaFX에서는 타입을 지정하지 않고 변수 선언을 할 수가 있다. JavaFX가 자동으로 변수의 값에 해당하는 타입을 지정하기 때문에, 이러한 방식이 허용된다.

[예제 4]

//the variable's type is optional
import java.lang.System;
var days = ["Monday,","Friday,","Sunday"];
System.out.println("You have to work: {days}");

결과 – You have to work: Monday, Friday, Sunday

sizeof 연산자를 사용하여 배열의 크기를 구할 수 있다.

[예제 5]

//getting the size of an array
import java.lang.System;
var lotto = [21,30,11,40,5,6];
System.out.println("Array size:{sizeof lotto}");

결과 – Array size: 6

어떤 특정한 조건을 만족시키는 부분 배열(subarray)을 얻기 위해 [] 연산자를 사용한다. 조건문은 []사이에 넣으며, 조건문의 결과는 Boolean이다. 이 방식은 Xpath의 조건 서술부(predicate)와 유사하다.

[예제 6]

//using the [] operator - similar to its use in XPath
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var numbers = mynumbers[n|n < 10];
System.out.println("Numbers smaller that 10 are: {numbers}");

결과 – Numbers smaller than 10 are: 1 2 7 3 6 4

indexof 연산자로 배열에 있는 특정 요소의 순서 위치를 구할 수 있다.

[예제 7]

//returning the ordinal position of an element within an array
import java.lang.System;
var mynumbers = [1,2,7,3,30,15,14,6,4];
var number_four = mynumbers[indexof . == 4];
System.out.println("Number four:{number_four}");

결과 – Number four: 30

배열에 요소를 넣기 위해서 다음 중에 하나를 선택해서 insert문을 작성한다

l	as first: 배열의 첫 번째 위치에 넣는다
l	as last: 배열의 마지막 위치에 넣는다 (기본 설정값)
l	before: 특정 위치 앞에 넣는다
l	after: 특정 위치 뒤에 넣는다

delete문으로 배열 내에 한 요소를 삭제할 수 있다.

[예제 8]

//insert and delete statement
import java.lang.System;
var mynumbers = [1,2,7];
System.out.println("Before inserting anything:
    {mynumbers}");
insert 10 into mynumbers;
System.out.println("After inserting at the end
    the "10" value:{mynumbers}");
insert [8,6,90] as first into mynumbers;
System.out.println("After inserting at the first
    positions the "8,6,90" values:{mynumbers}");
insert 122 as last into mynumbers;
System.out.println("After inserting at the
    end the "122" value:{mynumbers}");
insert 78 before mynumbers[3];
insert 11 after mynumbers[3];
System.out.println("After inserting the "78"
    and "11" values before/after the 3rd
    element:{mynumbers}");
delete mynumbers[. == 122];
System.out.println("After deleting:{mynumbers}");

결과:
Before inserting anything: 1 2 7
After inserting the 10 value at the end: 1 2 7 10
After inserting the 8, 6, and 90 values at the first positions: 8 6 90 1 2 7 10
After inserting the 122 value at the end: 8 6 90 1 2 7 10 122
After inserting the 78 and 11 values before/after the 3rd element: 8 6 90 78 11 1 2 7 10 122
After deleting: 8 6 90 78 11 1 2 7 10

JavaFX에서 select와 foreach 연산자로 리스트 내장(list comprehensions)을 구현할 수 있으며, 이 기능은 꽤 유용하다. 다음 (각각 select와 foreach를 사용한) 두 예제는 특정 간격마다 홀수를 찾는다.

[예제 9]

//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) {
    return select i from i in [1.0 ..p]
        where (i%2 == 1.0);
    }
var result = odd(10.0);
System.out.println("Odd numbers:{result}");

결과 – Odd Number: 1.0 3.0 5.0 7.0 9.0

[예제 10] (select 대신에 foreach 사용)

//JavaFX select and foreach operators
import java.lang.System;
function odd(p:Number) {
    return foreach (i in [1.0 ..p] where (i%2 == 0.0)) i;
    }
var result = odd(10.0);
System.out.println("Odd numbers:{result}");

다음 예제는 foreach로 얼마나 멋진 효과를 낼 수 있는지를 보여준다.

[예제 11]

//JavaFX select and foreach operators
import java.lang.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
Frame {
    centerOnScreen: true
    visible: true
    height: 500
    width: 500
    title: "Foreach demo..."
    onClose: operation() {System.exit(0);}
    content: ScrollPane {
    background: white
    view: Canvas {
        content: bind foreach (i in [1..8], j in [1..8])
        Rect {
        x: i*30
        y: j*30
        width:30
        height:30
        fill: Color {red: (100+i) green: (100+j) blue: (100+(i*j))}
        stroke:white
        strokeWidth:1
        }
    }
    }
}

[그림 4] 예제 11 실행 결과

JavaFX 키워드와 같은 이름의 변수나 속성을 사용하려면, 다음과 같이 이중 괄호(double angle)사이에 이름을 넣으면 된다.

[예제 12]

//Identifier quotes
import java.lang.System;
for (<> in [0..3]) {
    System.out.println("for = {<>}");
    }

결과 – for = 0 for =1 for=2 for=3

JavaFX는 Swing 인터페이스 개발시에 코드의 수를 획기적으로 줄어주며, javax.swing.* 패키지와도 궁합이 잘 맞기 때문에 상당히 좋은 툴이라 할 수 있다. 앞 장(NetBeans5.5 용 JavaFX 플러그인을 사용한 Hello World 프로그램 작성)에서, 얼마나 손쉽게 간단한 프레임을 만들었는지 이미 경험을 했을 것이다. 다음으로 버튼(Button)과 텍스트 필드(TextField)를 생성하는 두 예제를 보도록 하자.

[예제 13]

import javafx.ui.*;
import java.lang.System;
Frame{
    content: Button {
    text: "Exit"
    action: operation() {
    System.exit(0);
    }
    }
    visible: true
}

[그림 5] 예제 13 실행 결과

[예제 14]

import javafx.ui.*;
Frame {
    content: GroupPanel {
    var myRow = Row { alignment: BASELINE }
    var label_col = Column { alignment: TRAILING }
    var field_col = Column { alignment: LEADING  }
    rows: [myRow]
    columns: [label_col, field_col]
    content:
    [SimpleLabel {
    row: myRow
    column: label_col
    text: "Type your text here:"
    },
    TextField {
    row: myRow
    column: field_col
    columns: 50
    }]
    }
    visible: true
};

[그림 6] 예제 14 실행 결과

Java.net에서 JavaFX로 Swing 인터페이스 만들기에 관한 튜토리얼을 찾을 수 있다.

JavaFX 스크립트 소개(1)

Ishaya seon 2008. 6. 26. 10:31

2008. 6. 26. 10:31

제공 : 한빛 네트워크
저자 : Anghel Leonard
역자 : 김인희
원문 : Introduction to JavaFX Script

JavaFX는 무엇인가?

2007년 봄, 썬은 JavaFX라 불리는 새로운 프레임워크를 발표했다. JavaFX는 두 가지 중요한 컴포넌트인 스크립트 컴포넌트와 모바일 컴포넌트를 아우르는 일반적인 용어이며, 향후에 썬은 더 많은 컴포넌트들을 추가할 계획이다.

JavaFX의 핵심 컴포넌트는 선언형 언어인 JavaFX 스크립트(Script)이며, 코드 스타일은 자바와 상당히 다르지만 자바 클래스와 상호 작용하는 능력은 뛰어나다. 수 많은 JavaFX 스크립트 클래스들은 스윙이나 자바 2D 기능들을 손쉽게 구현할 수 있도록 설계되었다. 단지 몇 줄의 코드만으로 GUI와 애니메이션을 보여주거나 텍스트와 그래프에 화려한 효과를 넣을 수 있다. 또 다른 기능으로, JavaFX 스크립트에 자바와 HTML 코드를 넣을 수도 있다.

또 다른 컴포넌트인 JavaFX 모바일(Mobile)은 휴대용 기기에 들어가는 자바 응용프로그램 개발을 위한 플랫폼이다. JavaFX 모바일은 JavaFX 스크립트가 사용될 최대 플랫폼이 될 예정이지만, 아직은 이 기사의 내용과는 크게 관련이 없다.

JavaFX 응용프로그램 예제

새로운 언어를 배우기에 앞서, 몇 가지 JavaFX 코드 예제들을 살펴보도록 하자. JavaFX 공식 사이트는 예제를 얻기 위한 좋은 정보처이며, JavaFX 스크립트 2D 그래픽스 튜토리얼을 클릭하면 몇 가지 예제들을 포함한 tutorial.jnlp 파일을 다운받을 수 있다. 이 파일을 더블 클릭하면 [그림 1]과 같은 프로그램이 실행된다. (프로그램이 실행되지 않는다면, 자바 웹스타트에서 .jnlp 확장자 파일이 실행되도록 설정해야 한다.)

[그림 1] tutorial.jnlp 튜토리얼 파일 실행

tutorial.jnlp에 포함된 예제와 코드들을 천천히 살펴보면, 단지 몇 줄의 코드만으로 다양하고 흥미로운 그래픽 효과를 얻을 수 있음을 알게 될 것이다.

JavaFX가 과연 유용한 것인가 여전히 의문이 가는 독자라면, OpenJFK 프로젝트에서 Studiomoto와 Tesla Motors 사이트를 부분적으로 재현한 두 가지 데모(JavaFX Script Studiomoto Demo, JavaFX Script Tesla Demo)를 다운받아 보길 바란다. 데모를 실행하기 위해서는 자바 웹스타트가 필요하며, 컴퓨터 설정에 따라 자동적으로 실행될 수 있지만 그렇지 않다면 다운받은 .jnlp 파일을 직접 실행시켜야 한다.

JavaFX 다운로드와 설치

JavaFX 응용프로그램 개발을 배우기 원하는가? 그렇다면 우선 JavaFX로 작업하는데 최소한 3가지 방법이 있으며, JavaFX 응용프로그램은 브라우저 기반이 아니라는 사실을 염두에 두도록 하자. 첫번째로, JavaFXPad라는 가벼운 툴을 사용하는 것이 가장 쉽고 빠른 방법이다. 이 툴의 가장 큰 장점은 에디터에서 작업한 코드의 결과를 바로 볼 수 있다는 점이다. OpenJFK 프로젝트의 JavaFX 스크립트 JavaFXPad 데모를 클릭하면 JavaFXPad를 다운받을 수 있다. 거듭 말하지만, 자바 웹스타트가 있어야 해당 파일을 실행할 수 있다. ([그림 2]를 보자)

[그림 2] JavaFXPad 에디터 실행

또 다른 방법으로, NetBeans 5.5용 JavaFX 스크립트 플러그인(Plug-in)이나 Eclipse 3.2용 JavaFX 스크립트 플러그인(Plug-in)을 사용하는 방법이 있다. (물론, 이 플러그인들을 설치하기 전에 NetBeans 5.5나 Eclipse 3.2를 미리 설치해야 한다)

NetBeans 5.5용 JavaFX 플러그인을 사용하기로 했다면, OpenJFK 프로젝트에 있는 NetBeans용 JavaFX 문서가 많은 도움이 될 것이다. 마찬가지로, Eclipse용 JavaFX 플러그인을 선택했다면 Eclipse용 JavaFX를 방문해 보길 바란다. 앞으로 설명할 모든 예제는 NetBeans 5.5용 JavaFX 플러그인에서 테스트 하였지만, 다른 환경에서도 잘 돌아갈 것이다.

NetBeans 5.5용 JavaFX 플러그인을 사용한 Hello World 프로그램 작성

새로운 언어를 배울 때 처음으로 작성하게 되는 것이 Hello World 프로그램일 것이다.

[예제 1]

import javafx.ui.*;
import java.lang.System;
Frame {
    centerOnScreen: true
    visible: true
    height: 50
    width: 350
    title: "HelloWorld application..."
    background: yellow
    onClose: operation() {System.exit(0);}
    content: Label {
        text: "Hello World"
        }
    }

NetBeans 5.5에서 다음과 같은 순서로 이 간단한 예제를 작성하고 실행할 수 있다.

NetBeans 5.5를 실행한다.
메인 메뉴의 File에 있는 New Project를 선택한다.
New Project 창의 Category에서 General을, Projects에서 Java Application을 선택한다. (Next를 클릭한다)
New Java Application 창에서 Project Name에 “FXExample”라고 넣는다.
Browse 버튼을 클릭하여 프로젝트의 위치를 지정한다.
“Set as main project”와 “Create main class” 체크박스는 해제한다. (Finish를 클릭한다)
FXExample에 있는 Source Packages에서 오른쪽 마우스를 클릭한 후에, New에 있는 File/Folder를 선택한다.
New File 창의 Categories에서 Other를, File Types에서 JavaFX File을 선택한다.
New JavaFX File 창에서 File Name에 “Hello World”를, Folder에는 “src’를 넣는다.
예제 1의 코드를 복사해서 HelloWorld.fx에 넣는다.
FXExample 프로젝트를 오른쪽 마우스 클릭하고 Properties를 선택한다.
Project Properties의 FXExample에서, Categories에 있는 Run를 선택한다.
Arguments 텍스트 필드에 “Hello World”를 넣는다. (OK를 클릭한다)
FXExample 프로젝트를 오른쪽 마우스 클릭하고 Run Project를 선택한다.

지금까지 아무런 문제가 없었다면, [그림 3]과 같은 프레임을 확인할 수 있을 것이다.

[그림 3] NetBeans 5.5로 Hello World 프로그램 실행

이제 여러분은 JavaFX 응용프로그램을 개발하고 실행할 수 있는 소프트웨어 환경을 갖추게 되었다.

JavaFX 구문

JavaFX를 시작하기에 앞서, JavaFX 구문의 몇 가지 우수한 점들에 대해 알아보도록 하자. 자바 언어 구문에 대해 잘 알고 있는 독자라면, JavaFX 구문이 자바와 매우 비슷하면서도 한편으로 몇몇 부분은 상당히 다르다고 생각할 것이다.

JavaFX 데이터형

JavaFX는 4가지 데이터형을 지원한다: String (java.lang.String와 대응), Boolean (java.lang.Boolean과 대응), Number (java.lang.Number와 대응), Integer (byte, short, int, long, BigInteger와 대응)

JavaFX 변수

JavaFX 변수는 var 키워드로 선언하며 다음과 같이 사용한다.

var x:Number = 0.9;
var name:String = "John";
var y:Integer = 0;
var flag:Boolean = true;

var numbers:Number = [1,2,3,4,5];

JavaFX 연산자

여러분이 잘 알고 있는 자바 연산자 &&, ||, !는 JavaFX에서 다음과 같이 바뀐다.

l	Java: &&
JavaFX: and 
l	Java: ||
JavaFX: or 
l	Java: !
JavaFX: not

JavaFX 함수

JavaFX는 함수를 지원한다. 다음 예제는 인수, 변수 선언, 리턴문으로 구성된 간단한 함수이다.

function taxes(x) {
    var t:Number = (19.0/100.0)*x;
    return t;
    }

JavaFX – if문

if문을 사용해 조건 블록(block)을 설정하며, 중괄호 사용은 필수이다. 만약 else절이 또 다른 if문이라면 중괄호를 생략할 수 있다.

if (place_your_condition_here) {
        //do something
    } else if (place_your_condition_here) {
        //do something
    } else {
        //do something
    }

JavaFX – while문

자바의 while 문과 유사하며 중괄호 사용은 필수다.

while (place_your_condition_here)
    {
    //do something
    }

JavaFX – for문

일정 간격마다 반복하는 for문을 만들 수 있다. ( [] 괄호와 .. 기호로 간격 범위를 설정한다. )

//i will take the values: 0, 1, 2, 3, 4, 5
for (i in [0..5])
    {
    //do something with i
    }

JavaFX 프로시저

다음과 같이 JavaFX 프로시저 앞에 operation 키워드를 붙인다.

operation startClock() {
do{
    while(true)
        {
        if(seconds>=360)
    {seconds = 0; seconds = [0,6..360] dur 60000 linear;}
        if(minutes>=360)
    {minutes = 0; minutes = [0,6..360] dur 3600000 linear;}
        if(hours>=360)
    {hours = 0; hours = [0,6..360] dur 43200000 linear;}
        }
    }
}

JavaFX 클래스

JavaFX 클래스 앞에 class 키워드를 넣는다. JavaFX 클래스는 extends 키워드와 클래스 이름 사이에 콤마를 넣어 다수의 클래스들을 상속받을 수 있다. 다음 Order 클래스에는 속성, 함수, 프로시저가 있으며 중괄호 사이에 놓여있다.

class Order {
    attribute order_nr: String;
    attribute ordertype: Order inverse Order.products;
    attribute products: Order* inverse Order.ordertype;
    function getOrderNr(): String;
    operation addOrder(order: Order);
    }

속성은 attribute 키워드로 선언하며, 함수와 프로시저의 바디(body)는 클래스의 바디(body)에 포함되지 않는다. 앞으로 보게 되겠지만, 함수와 프로시저의 구현은 클래스를 선언한 후에 이루어진다.

inverse 옵션은 한 속성과 그 속성이 속한 클래스의 다른 속성과의 양방향 관계를 나타낸다. 이 경우에, JavaFX는 삽입, 수정, 삭제와 같은 업데이트를 자동으로 수행한다.

Java.net에서 더 자세한 정보를 얻을 수 있다.

PREV 이전 1 ···139 140 141 142 143 144 145 ···247 NEXT 다음

내 남자의 길~!

전체 글

JavaFx 데모 따라하기..

JavaFX 스크립트 소개(2)

JavaFX 스크립트 소개(1)

+ Recent posts

티스토리툴바