JavaFX (12-14) 2008/2009

Z JASR Wiki

<<< Powrót do Tworzenie aplikacji wielowarstowych 2008/2009

Spis treści 1 Wprodadzenie 1.1 Instalacja w laboratorium 1.2 Inne możliwości instalacji 2 JavaFX SDK 2.1 Uruchomienie jako aplet 2.2 Uruchomienie jako aplikacja WebStart 3 Pierwszy projekt 4 JavaFX Script 4.1 Hello World 4.2 Zmienne i definicje 4.3 Typy podstawowe 4.4 Definiowanie własnych klas 4.5 Tworzenie obiektów 4.6 Klasy abstrakcyjne 4.7 Sekwencje obiektów 4.7.1 Operacje na sekwencjach 4.8 Bloki 4.9 Funkcje 4.10 Ćwiczenie 1 4.11 Binding 4.12 Bidirectional Bind 4.13 Bound Function 4.14 Wyzwalacze 4.15 Przykład 4.16 Ćwiczenie 2 4.17 Ćwiczenie 3 4.18 Elementy języka Java 4.19 HttpRequest i PullParser 5 Tutoriale 6 Ciekawe linki

Wprodadzenie

Instalacja w laboratorium

Należy zalogować się na systemie Windows.

• Pobierz NetBeans IDE 6.5.1 for JavaFX 1.1.1
  • http://javafx.com/downloads/all.jsp
• Zainstaluj NetBeans (najlepiej w katalogu C:\Documents and Settings\<login na students>)

Inne możliwości instalacji

• Jeśli masz już zainstalowane środowisko NetBeans IDE 6.5 możesz doinstalować odpowiedni plugin:
  • http://java.sun.com/javafx/1/reference/javafx-netbeans-install/add-javafx-nb-plugin.html
• Aktualnie ze strony java.fx można pobrać także:
  • JavaFX 1.1 Production Suite
  • JavaFX 1.1.1 SDK
• Narzedzia do tworzenia aplikacji JavaFX dostępne są także dla systemu Mac OSX.

JavaFX SDK

• Tworzymy plik HelloWorld.fx
• Kompilujemy za pomocą javafxc.exe
  • "C:\Program Files\JavaFX\javafx-sdk1.0\bin\javafxc.exe" -d . HelloWorld.fx
• Tworzymy jara:
  • "C:\Program Files\Java\jdk1.6.0_11\bin\jar.exe" cvf HelloWorld.jar hello\HelloWorld*.class

Uruchomienie jako aplet

Należy w pliku html wstawić poniższy kod definiujący aplet:

<script src="http://dl.javafx.com/dtfx.js"></script>
<script>
javafx(
    {
        archive: "HelloWorld.jar",
        draggable: true,
        width: 150,
        height: 100,
        code: "hello.HelloWorld",
        name: "HelloWorld"
    }
);
</script>

Uruchomienie jako aplikacja WebStart

Należy stworzyć plik z rozszerzeniem .jnlp (Java Network Launching Protocol) (np. HelloWorld_browser.jnlp):

<?xml version="1.0" encoding="UTF-8"?>
<jnlp spec="1.0+">
    <information>
        <title>Hello World</title>
        <vendor>Acme Corporation</vendor>
        <description>Hello World Applet</description>
    </information>
    <resources>
        <j2se version="1.5+"/>
        <jar href="HelloWorld.jar" main="true" download="eager"/>
        <extension name="JavaFX Runtime" href="http://dl.javafx.com/javafx-rt.jnlp"/>
    </resources>
    <applet-desc main-class="com.sun.javafx.runtime.adapter.Applet" name="HelloWorld" height="200" width="200">
        <param name="MainJavaFXScript" value="hello.HelloWorld"/>
    </applet-desc>
</jnlp>

Pierwszy projekt

• Utwórz nowy projekt "Hello"(File -> New Project -> JavaFX: JavaFX Script Application)
• Uruchom projekt (kliknij prawym klawiszem na projekt i wybierz "Run Project").
• Wypróbuj wszystkie możliwości uruchomienia projektu (Properties -> Run):
  • Standard Execution
  • Web Start Execution
  • Run in Browser
  • Run in Mobile Emulator

JavaFX Script

Hello World

println("Hello World!");

Zmienne i definicje

def x = 1;
var y = 2;

Typy podstawowe

• Boolean

var x: Boolean = true;
var y = false;

• Integer

var x: Integer = 1;

• Number

var x: Number = 1.0;

• String

var x: String = "Tekst1";
var y = 'Tekst2';

• Duration

var w: Duration = 1ms;
var x: Duration = 1s;
var y: Duration = 1m;
var z = 1h;

Definiowanie własnych klas

class Person{
    var firstName: String;
    var lastName: String;
    var married: Boolean;
    var age: Integer;
    var money: Number;
    function printName(){
		println("firstName: {firstName}");
	}
}

Tworzenie obiektów

var p = Person{
    firstName: "Jan"
    age: 30;
    money: 1000.5;
}

Klasy abstrakcyjne

var x = Circle{
    color: "red"
    radius: 10.0
}

x.print();

class Circle extends Figure{
    var radius: Number;
    override function print(){
        println("color = {color}, radius = {radius}");
    }
}

abstract class Figure{
    var color: String;
    function print(){
        println("color = {color}");
    }
}

Warto zwrócić uwagę na to, że definicje klas mogą występować w kodzie po miejscu w którym są używane.

Sekwencje obiektów

Sekwencja to uporządkowana lista obiektów.

var weekDays: String[] = ["Mon","Tue","Wed","Thu","Fri", "Sat", "Sun"];

Operacje na sekwencjach

Kompilator automatycznie spłaszczy zagnieżdżone sekwencje tworząc równowartość zakomentowanej sekwencji.

var x: Integer[] = [1, 2, 3];
var y = [x, [4, 5]];
for (i in y) {
    println(i);
}
//var days = [1, 2, 3, 4, 5];

Sekwencja x składa się z liczb od 1 do 10. Sekwencja y, wygenerowana na podstawie sekwencji x składa się jedynie z liczb parzystych.

var x = [1..10];
var y = x[n | n mod 2 ==0];
println("Sekwencja y zawiera {sizeof y} elementów, a jej pierwszy element to{y[0]}); //5 2

var x = [1];
insert 4 into x;// wstawia 4 na koniec sekwencji
insert 2 before x[1];// wstawia 2 przed element o indeksie 1
insert 3 after x[1];// wstawia 3 po element o indeksie 1
//var x = [1, 2, 3, 4];

var x = [1, 2, 3, 3, 4, 4];
delete 4 from x;// usuwa wszystkie elementy o wartości 4
//var x = [1, 2, 3, 3];
delete x[3]; //usuwa element o indeksie 3
//var x = [1, 2, 3];
delete x;//usuwa wszystkie elementy
//var x = [];

var x = [1..5];
var y = reverse x;//zwraca sekwencję w odwruconej kolejności
//var y = [5, 4, 3, 2, 1]; 

var x = [10..15];
var y = x[3..5];
//var y = [13, 14, 15];

var x = [10..15];
var y = x[1..<5];;
//var y = [11, 12, 13, 14];

var x = [10..15];
var y = x[3..];;
//var y = [13, 14, 15];

var x = [10..15];
var y = x[3..<];;
//var y = [13, 14];

var x = [1..10 step 2]; // [ 1, 3, 5, 7, 9 ]
var y = [10..1 step -1]; // [ 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 ]

Bloki

Wartością bloku jest jego ostatnie wyrażenie.

var x = 1;
var y = 2;
var sum = {
    var tmp = x+y;
    tmp+1;
}
println(sum);// 4

Funkcje

Słowo kluczowe return nie jest wymagane.
function add(v1: Integer, v2: Integer) : Integer {
	return v1 + v2;
}
println(add(2, 3));

Wynikiem funkcji może być funkcja.

function f(p: Integer): function(): Integer {
	var v = p;
	function(): Integer {
		++v;
	}
}
var x = f(5);
println(x());// 6

Ćwiczenie 1

Stwórz funkcję o jednym parametrze typu Integer, która zwraca sekwencje liczb Fibonacciego o podanym rozmiarze.

Rozwiązanie

Binding

var x = 0;
def y = bind x + 1;
x = 1;
println("x = {x}"); // x = 1
println("y = {y}"); // y = 2

var x = [1..5];
def y = bind for (v in x) v*2;
//def y = [2, 4, 6, 8, 10];

Bidirectional Bind

var x = 1;
var y = bind x with inverse;
println("x={x}, y={y}"); // 1 1
x = 2;
println("x={x}, y={y}"); // 2 2
y = 3;
println("x={x}, y={y}"); // 3 3

Bound Function

var x = 0;
bound function f(v1: Integer){
    v1 * x;
}
var w = bind f(5);
println("w = {w}");// w = 0
x = 2;
println("w = {w}");// w = 10

Wyzwalacze

var v = 0 on replace v1 {
println("Old Value: {v1}");
println("New Value: {v}");
};
v = 1;

Przykład

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.text.*;
import javafx.scene.text.TextOrigin.*;
import javafx.scene.paint.Color.*;
import javafx.scene.layout.*;
import javafx.ext.swing.*;
import java.lang.Math.*;

def radius = 50.0;
var degrees = 0;
var radians = bind toRadians(degrees);
var x = bind cos(radians) * radius;
var y = bind sin(radians) * radius;


Stage {
    title: "Binding"
    scene : Scene {
        width: 250
        height: 200
        content:
        VBox {
             translateX: 10
             translateY: 10
             spacing: 10
             content:
             [SwingSlider {
                  minimum: 0
                  maximum: 360
                  value: bind degrees with inverse
             },
             Text {
                  textOrigin: TOP
                  content: bind "{degrees} degrees"
             },
             Group {
                 translateX: radius
                 translateY: radius
                 content:
                 [Circle {
                     fill: RED
                     radius: radius
                 },
                 Circle {
                    radius: 10
                    fill: BLUE
                    centerX: bind x
                    centerY: bind y
                }]
             }]
        }
    }
}

Opis wykorzystanych klas:

• Stage - klasa odpowiedzialna za wyświetlenie okna.
• Scene - zawiera elementy wyświetlane w oknie.
• VBox - zbiór elementów ustawionych kolejno w pionie.
• SwingSlider - klasa reprezentująca poziomy suwak.
• Text - pole z tekstem.
• Group - grupa elementów.
• Circle - klasa reprezentująca koło.

Ćwiczenie 2

Do powyższego przykładu dodaj na dole okna pole z wartością konta w radianach.

Rozwiązanie

Ćwiczenie 3

Wypisz w oknie ciąg 15 liczb Fibonacciego używając obiektów klasy Text.

Rozwiązanie

Elementy języka Java

import java.util.HashMap;
var map: HashMap = new HashMap;
map.put("key1", "val1");
println("map[key1] = {map.get("key1")}");

HttpRequest i PullParser

def httpRequest : HttpRequest = HttpRequest {
    method: HttpRequest.GET
    location: searchLocation

    onResponseMessage: function(msg:String) {
         if ( httpRequest.responseCode != 200 ) {
             println("HTTP response {httpRequest.responseCode}: {msg}");
         }
    }

    onInput: function(is: InputStream) {
        pullParser.input = is;
        pullParser.parse();
    }
}
def pullParser: PullParser = PullParser {
    documentType: PullParser.XML;
    onEvent: function(event: Event) : Void {
        onPullEvent(event);
        if ( event.type == PullParser.END_DOCUMENT ) {
            pullParser.input.close();
        }
    }
}

httpRequest.enqueue();

Całość znajduje się tutaj:

• http://javafx.com/docs/tutorials/mediabrowser/module3_task2.jsp

Tutoriale

• JavaFX Programming (with Passion!) Online Course
• JavaFX Tutorial (SUN)
• Planet JFX Tutorials

Ciekawe linki

• Oficjalna strona technologii JavaFX
• Strona informacyjna firmy Sun Microsystems
• JavaFX API
• Blog Chrisa Olivera