Материал из JavaFX
Главная | Описание языка | API | Примеры
| Инструменты Разработки | Новости | Ресурсы | Вопросы и ответы | Форум
JavaFX Script API
[править] Swing UI компоненты
[править] Метка < Label >
| Пример использования | Картинка
|
import javafx.ext.swing.*;
SwingFrame {
title: "JavaFX Label"
width: 200
height: 100
content: Label {
text: "Hello World!"
}
visible: true
}
| 
|
[править] Кнопка < Button >
| Пример использования | Картинка
|
import javafx.ext.swing.*;
import java.lang.System;
SwingFrame {
title: "JavaFX Button"
width: 200
height: 100
content: Button {
text: "Click Me"
action: function(){
System.out.println("Button is pressed");
}
}
visible: true
}
| 
|
[править] Элементы Меню < Menu >
| Пример использования | Картинка
|
import javafx.ext.swing.*;
import java.lang.System;
SwingFrame {
title: "JavaFX Menu"
width: 200
height: 100
menus: Menu {
text: "Menu"
items: [ for (name in ["Menu1","Menu2","Menu3"])
MenuItem{
text: name
action: function() {
System.out.println("MenuItem: {name}");
}
}]
}
visible: true
}
| 
|
[править] Компоновщики < Layouts >
[править] Потоковый компоновщик < FlowPanel >
| Пример использования | Картинка
|
import javafx.ext.swing.*;
SwingFrame {
title: "JavaFX FlowPanel"
width: 400
height: 100
content: FlowPanel{
content: [
Label{ text: "Label1" },
Label{ text: "Label2" },
Label{ text: "Label3" },
]
}
visible: true
}
| 
|
[править] < BorderPanel >
| Пример использования | Картинка
|
import javafx.ext.swing.*;
SwingFrame {
title: "JavaFX BorderPanel"
width: 400
height: 200
content: BorderPanel{
top : Button{ text: "Top" }
center: Button{ text: "Center" }
bottom: Button{ text: "Bottom" }
left : Button{ text: "Left" }
right : Button{ text: "Right" }
}
visible: true
}
| 
|
[править] Окружность < Circle >
| Пример использования | Картинка
|
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
Frame {
title: "JavaFX Circle"
width: 200
height: 100
stage: Stage{
content: Circle {
centerX : 100
centerY: 30
radius: 25
fill: Color.YELLOW
stroke: Color.GREEN
}
}
visible: true
}
| 
|
[править] Прямоугольник < Rectangle >
| Пример использования | Картинка
|
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
Frame {
title: "JavaFX Rectangle"
width: 200
height: 100
stage: Stage{
content: Rectangle {
x: 30
y: 10
height: 50
width: 70
arcHeight: 20
arcWidth: 20
fill: Color.LIGHTGREEN
stroke: Color.GREEN
strokeWidth: 2
}
}
visible: true
}
| 
|
[править] Эллипс < Ellipse >
| Пример использования | Картинка
|
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
Frame {
title: "JavaFX Ellipse"
stage: Stage{
content: Ellipse{
centerX: 50
centerY: 30
radiusX: 40
radiusY: 25
fill: Color.YELLOW
stroke: Color.GREEN
}
}
visible: true
}
| 
|
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "JavaFX Path"
stage: Stage{
content: Path {
elements:[
MoveTo{ x: 10, y: 10 },
LineTo{ x: 70, y: 10 },
LineTo{ x: 70, y: 70 },
LineTo{ x: 20, y: 70 },
LineTo{ x: 20, y: 30 },
LineTo{ x: 50, y: 30 },
LineTo{ x: 50, y: 40 },
LineTo{ x: 50, y: 50 },
]
stroke: Color.GREEN
}
}
visible: true
}
| 
|
[править] Преобразования
[править] Вращение < Rotate >
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "JavaFX Rotate"
stage: Stage{
content: [
Rectangle{
x : 30 y : 40
width: 60 height: 50
stroke: Color.GREEN
},Rectangle{
transform: Rotate{ angle: 30 x: 60 y: 65}
x : 30 y : 40
width: 60 height: 50
fill: Color.ORANGE
stroke: Color.GREEN
}]
}
visible: true
}
| 
|
[править] Сдвиг < Translate >
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "JavaFX Translate"
stage: Stage{
content: [
Rectangle{
x : 30 y : 40
width: 60 height: 50
stroke: Color.GREEN
},Rectangle{
transform: Translate{ x: 15 y: 10 }
x : 30 y : 40
width: 60 height: 50
fill: Color.ORANGE
stroke: Color.GREEN
}]
}
visible: true
}
| 
|
Link title
[править] Масштабирование < Scale >
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "JavaFX Scale"
stage: Stage{
content: Group{
transform: Translate{ x: 80 y: 70 }
content: [
Rectangle{
x: -30 y: -30
width: 60 height: 60
stroke: Color.GREEN
},Rectangle{
transform: Scale{ x: 0.8 y: 0.7 }
x: -30 y: -30
width: 60 height: 60
fill: Color.ORANGE
stroke: Color.GREEN
}] }
}
visible: true
}
| 
|
Link title
[править] Комбинирование Фигур
[править] Пересечение < ShapeIntersect >
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "Shape Intersection"
stage: Stage{
content: Group{
content: [
Circle{
centerX: 80
centerY: 80
radius: 50
stroke: Color.GREEN
},Rectangle{
x : 70 y : 70
width: 110 height: 80
stroke: Color.ORANGE
},
ShapeIntersect{
a: Circle{
centerX: 80
centerY: 80
radius: 50
}
b: Rectangle{
x : 70 y : 70
width: 110 height: 80
}
fill: Color.ORANGE
stroke: Color.GREEN
}
]
}
}
visible: true
}
| 
|
[править] Вычитание < ShapeSubtract>
| Пример использования | Картинка
|
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.transform.*;
import javafx.scene.geometry.*;
import javafx.application.*;
Frame{
title: "Shape Subtraction"
stage: Stage{
content: Group{
content: [
Circle{
centerX: 80
centerY: 80
radius: 50
stroke: Color.GREEN
},Rectangle{
x : 70 y : 70
width: 110 height: 80
stroke: Color.ORANGE
},
ShapeSubtract{
a: Circle{
centerX: 80
centerY: 80
radius: 50
}
b: Rectangle{
x : 70 y : 70
width: 110 height: 80
}
fill: Color.ORANGE
stroke: Color.GREEN
}
]
}
}
visible: true
}
| 
|
[править] Обработка пользовательских событий
[править] Button event
| Пример использования | Картинка
|
import javafx.ext.swing.*;
import java.lang.System;
SwingFrame {
title: "JavaFX Button"
width: 200
height: 100
content: Button {
text: "Click Me"
action: function(){
System.out.println("Button is pressed");
}
}
visible: true
}
|
|
[править] Mouse Events
| Пример использования | Картинка
|
import javafx.input.*;
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import java.lang.System;
var x = 100.0;
var y = 30.0;
Frame {
title: "Mouse Events"
width: 200
height: 100
stage: Stage{
content: Circle {
centerX: bind x
centerY: bind y
radius: 25
fill: Color.ORANGE
stroke: Color.GREEN
onMousePressed: function(e:MouseEvent){
System.out.println("Mouse pressed x={e.getX()} y={e.getY()}");
}
onMouseReleased: function(e:MouseEvent){
System.out.println("Mouse released x={e.getX()} y={e.getY()}");
}
onMouseDragged: function(e:MouseEvent) {
x = e.getX();
y = e.getY();
}
}
}
visible: true
}
| 
|
[править] Web приложения
Корневая директория проекта:
+ MyProject
+ lib
+ javafxc.jar
+ javafxrt.jar
+ javafxgui.jar
+ Scenario.jar
+ pack
+ MyApplet.fx
+ index.html
Код апплета MyApplet.fx который лежит в пакете pack:
package pack;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.application.*;
Application {
stage: Stage {
content: [
Text {
x: 10, y: 30
content: "Hello World!"
fill: Color.GREEN
font: Font { size: 24 style: FontStyle.PLAIN }
}
]
}
}
index.html:
<html>
<body>
<applet code="javafx.application.Applet" width=400 height=100 archive="lib/javafxc.jar,lib/javafxrt.jar,lib/javafxgui.jar,lib/Scenario.jar">
<param name="ApplicationClass" value="pack.MyApplet">
</applet>
</body>
</html>
Для компиляции вручную, надо вызвать следующую команду из корня проекта:
> javafxc -d . pack/MyApplet.fx
После этого надо открыть index.html файл в броузере:
Для программирования анимации в языке JavaFX Script предоставляется два основных класса: Timeline и KeyFrame.
[править] Класс KeyFrame
Аттрибуты класса KeyFrame
- time - время, в течении которого будет изменяться переменная
- values - задает конечное значение изменяемой переменной и способ ее изменения
- action - выполняемое действие
var radius = 0;
KeyFrame {
time: 5s,
values: radius => 100 tween Interpolator.LINEAR
action: function() { /* User action */}
}
[править] Класс Timeline
Аттрибуты класса Timeline
- keyFrames - последовательность классов KeyFrame, которые исполняются один за другим
- repeatCount - количество повторяемых итераций
var radius = 0;
Timeline {
keyFrames: KeyFrame {
time: 5s,
values: radius => 100 tween Interpolator.LINEAR
action: function() { /* User action */}
}
repeatCount: 1
}
[править] Простой пример использования анимации
В приведенном примере, радиус окружности линейно изменяется от 0 до 100 в течении 5 секунд, 3 раза.
import javafx.animation.*;
import javafx.application.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.scene.transform.*;
var radius = 0.0;
var timeline = Timeline {
keyFrames: KeyFrame {
time: 5s,
values: radius => 100 tween Interpolator.LINEAR
action: function() { /* User action */}
}
repeatCount: 3
}
timeline.start();
Frame{
width: 200
height: 200
title: "JavaFX Animation"
stage: Stage{
content: Circle{
transform: Transform.translate(100, 100);
radius: bind radius
fill: Color.ORANGE
}
}
visible: true
}
Программа, моделирующая поведение маятника:
| Пример использования | Картинка
|
import javafx.animation.*;
import javafx.application.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.geometry.*;
import javafx.scene.transform.*;
import java.lang.Math;
var g = 10;
var mass = 10;
var radius = 10;
var t = 0.0;
var dt = 0.1;
var w = 0.5;
var angle = bind Math.sqrt( radius / g ) * Math.sin( w * t);
var cx = bind 10 * radius * Math.sin( angle );
var cy = bind 10 * radius * Math.cos( angle );
var timeline = Timeline {
keyFrames: KeyFrame { time: 0.01s, action: function() { t += dt; } }
repeatCount: Timeline.INDEFINITE
}
timeline.start();
Frame{
title: "Pendulum"
width: 220
height: 220
stage: Stage{
content: Group{
transform: Transform.translate(110, 30);
content: [
Line{
endX: bind cx
endY: bind cy
stroke: Color.ORANGE
},
Circle{
centerX: 0
centerY: 0
radius: 5
fill: Color.GRAY
},
Circle{
centerX: bind cx
centerY: bind cy
radius: 15
fill: Color.ORANGE
stroke: Color.ORANGE }
]
}
}
visible: true
}
| 
|
[править] Вопросы и ответы
Задайте интересующий вас вопрос на Форуме или на странице Вопросы и Ответы.
