Wikia

JavaFX

Случайная страница Вики-деятельность
Список наблюдения Свежие правки

JavaFX API

Главная | Описание языка | FXD | API | Примеры | Инструменты Разработки | Новости | Ресурсы | Форум


JavaFX Script API

Содержание

Текст Править

Text Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;

Stage {
    title: "JavaFX Text"
    scene: Scene {
        content: Text {
            x: 10  y: 30
            font: Font { size: 24 }
            fill: Color.BLUE
            content: "Hello World!"
        }
    }
}
ExampleText.png

Шрифты Править

Шрифты можно загрузить с сайта:


Добавление шрифта в проект:


  • Создать папку fonts в проекте и скопировать туда фонт
  • Создать папку META-INF в корне проекта в файловой системе.
  • В папке META-INF создать файл fonts.mf в котором указать имя фонта и путь к нему
    • MyFont=/fonts/MyFont.ttf
  • В компоненте Font использовать имя фонта
    • Font { name: "MyFont" size: 40 }

ExampleProjectFont.png


Пример использования Картинка 

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;

Stage {
    title: "Font Sample"
    scene: Scene {
        width: 250
        height: 100
        content: Text {
            x: 10 y: 40
            fill: Color.PURPLE
            font: Font { name: "MyFont" size: 40 }
            content: "Hello!"
        }
    }
}
ExampleTextFont.png

Управляющие Компоненты - Controls Править

User Interface Controls Overview

Метка - Label Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;

Stage {
    title: "JavaFX Label"
    scene: Scene {
        content: Label {
            text: "Hello World!"
        }
    }
}
ExampleLabel.png


Кнопка - Button Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;

Stage {
    title: "JavaFX Button"
    scene: Scene {
        content: Button {
                text: "Click Me"
                action: function() {
                    println("Hello World!");
                }
            }
    }
}
ExampleButton.png

Флажки Опций - CheckBox Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.control.*;


var isGreen = false;

Stage {
    title: "JavaFX CheckBox "
    scene: Scene {
        content: [
            CheckBox {
                text: "Green"
                selected: bind isGreen with inverse
            },
            Circle{
                centerX: 50
                centerY: 50
                radius: 25
                fill: bind if(isGreen) Color.GREEN else Color.BLUE
            }
        ]
    }
}
ExampleCheckBox.png

Переключатели Править

RadioButton Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;


var toggleGroup = ToggleGroup{};


Stage {
    title: "JavaFX RadioButton"
    scene: Scene {
        content: VBox{
            content: [
                RadioButton {
                    text: "large"
                    toggleGroup: toggleGroup
                }
                RadioButton {
                    text: "medium"
                    toggleGroup: toggleGroup
                }
                RadioButton {
                    text: "small"
                    toggleGroup: toggleGroup
                }
                
                Label {
                    text: bind "Selected size: {toggleGroup.selectedButton.text}"
                }


            ]
        }

    }
}
ExampleRadioButton.png

ToggleButton Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;


var toggleGroup = ToggleGroup{};


Stage {
    title: "JavaFX ToggleButton"
    scene: Scene {
        content: HBox{
            spacing: 10
            content: [
                ToggleButton {
                    text: "Run"
                    toggleGroup: toggleGroup
                }
                ToggleButton {
                    text: "Pause"
                    toggleGroup: toggleGroup
                }
                ToggleButton {
                    text: "Stop"
                    toggleGroup: toggleGroup
                }

                Label {
                    text: bind "State: {toggleGroup.selectedButton.text}"
                }


            ]
        }

    }
}
ExampleToggleButton.png

Ползунковый регулятор - SliderПравить

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;


var value = 30.0;

Stage {
    title: "JavaFX Slider"
    scene: Scene {
        content: Slider {
                min: 10.0
                max: 100.0
                value: bind value with inverse
            }        
    }
}
ExampleSlider.png

Индикатора прогресса Править

ProgressBarПравить

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;

var value = 70.0;

Stage {
    title: "JavaFX ProgressBar"
    scene: Scene {
        content: ProgressBar {
                progress: bind ProgressBar.computeProgress( 100, value )
            }
    }
}
ExampleProgressBar.png

ProgressIndicator Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;

var value = 70.0;

Stage {
    title: "JavaFX ProgressIndicator"
    scene: Scene {
        content: ProgressIndicator {
                progress: bind ProgressIndicator.computeProgress( 100, value )
            }


    }
}
ExampleProgressIndicator.png

Список - ListView Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.control.*;


var animals = ["cat", "dog", "mouse" ];

Stage {
    title: "JavaFX List"
    scene: Scene {
        content: ListView{
            items: animals            
        }
    }
}
ExampleListView.png


Гипер Ссылка - Hyperlink Править

http://blogs.sun.com/vaibhav/entry/hyperlink_to_url


Открыть браузер по ссылке:


Пример использования Картинка 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Hyperlink;

Stage {
    title: "JavaFX Hyperlink"
    scene: Scene {
        content: Hyperlink {
            text: "http://www.javafx.com"
                action: function() {
                }
            }
       
    }
}
 		ExampleHyperlink.png

Skinning Править

http://fxexperience.com
http://blogs.sun.com/rakeshmenonp/entry/javafx_skinnable_controls
Пример использования Картинка 
import javafx.scene.Scene;
import javafx.scene.control.TextBox;
import com.sun.javafx.scene.control.caspian.TextBoxSkin;

import javafx.scene.paint.Color;

Scene {
    content: TextBox{
        text: "Hello World!"

        skin: TextBoxSkin{
            backgroundFill: Color.LIGHTGREEN
            borderFill: Color.DARKGREEN
            borderWidth: 3
            caretFill: Color.ORANGE
            cornerRadius: 3
            focusFill: Color.GREEN
            focusSize: 3
            highlightFill: Color.TRANSPARENT
            paddingBottom: 10
            paddingLeft: 10
            paddingRight: 10
            paddingTop: 10
            promptTextFill: Color.TRANSPARENT
            selectedTextFill: Color.BLUE
            shadowFill: Color.TRANSPARENT
            shadowWidth: 5
            textFill: Color.LIGHTBLUE

        }

    }
}
ExampleTextBoxSkin.png

Менеджеры Компоновки Править

http://java.sun.com/developer/technicalArticles/javafx/v1_2_newlayouts

Группа - Group Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;

import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

Stage{
    title: "JavaFX Group"
    scene: Scene{
        content: Group{
            transforms: [Rotate{ angle: 45, pivotX: 30, pivotY: 30}]
            content: [
                Rectangle {
                    x: 70, y: 10
                    width: 140, height: 70
                    fill: Color.LIGHTGREEN
                }
                Text {
                    font: Font { size: 24 }
                    x: 75, y: 50
                    fill: Color.BLUE
                    content: "Hello World!"
                }

            ]
        }

    }
}
ExampleGroup.png


Потоковый Компоновщик - Flow Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.layout.*;

Stage{
    title: "JavaFX Flow"
    scene: Scene{
        content: Flow{
            hgap: 20
            vgap: 20
            translateX: 30
            translateY: 30
            content: [
                Circle {
                    radius: 30
                    fill: Color.GREEN
                },
                Rectangle {
                    width: 100, height: 60
                    fill: Color.BLUE
                },
                Ellipse {
                    radiusX: 50, radiusY: 30
                    fill: Color.ORANGE
                }
            ]
        }
    }
}
 		ExampleFlow.png

Стековый Компоновщик - StackПравить

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.layout.*;


Stage{
    title: "JavaFX Stack"
    scene: Scene{
        content: Stack{
            content: [
                Rectangle {
                    width: 200, height: 200
                    fill: Color.ORANGE
                },
                Circle {
                    radius: 90
                    fill: Color.LIGHTGREEN
                    stroke: Color.GREEN
                },
                Text{
                    font: Font{ size: 20}
                    fill: Color.RED
                    content: "Stack Example"
                }

            ]
        }
    }
}
ExampleStack.png


Черепичный Компоновщик - TileПравить

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.layout.*;

var colors = [Color.ORANGE, Color.GREEN, Color.BLUE];

Stage{
    title: "JavaFX Tile"
    scene: Scene{
        content: Tile{

                hgap: 2
                vgap: 2
                
                columns: 3
                rows: sizeof colors

                content: for(color in colors)[
                            Text{
                                font: Font{ size: 20}
                                content: "Hello World!"
                                fill: color
                            },
                            Circle {
                                radius: 30
                                fill: color
                            },
                            Rectangle {
                                width: 60, height: 60
                                fill: color
                            }
                        ]
        }
    }
}
ExampleTile.png

Диаграммы Править

LineChart Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;

import javafx.scene.chart.*;
import javafx.scene.chart.part.*;

import java.util.*;


var random = new Random();
var randomData = for(i in [1..50]) random.nextInt(100);


Stage {
    title: "Line Chart"
    scene: Scene {
        content: LineChart{
            
              xAxis: NumberAxis{ 
                lowerBound: 0
                upperBound: 50
                tickUnit: 10
              }

              yAxis: NumberAxis{
                lowerBound: 0
                upperBound: 100
                tickUnit: 10
                label: "Random Data"
              }
              
              data: LineChart.Series{
                      name: "Random Data"
                      data: for( d in randomData)
                          LineChart.Data {
                                xValue: indexof d
                                yValue:  d
                          }
                  }
        }
    }
}
ExampleLineChart.png


ScatterChartПравить

Пример использования Картинка 
import javafx.scene.paint.*;
import javafx.scene.chart.*;
import javafx.scene.chart.part.*;

ScatterChart{
        
    xAxis: NumberAxis {
        label: "x",
        lowerBound: 0,
        upperBound: 20,
        tickUnit: 5,
    }

    yAxis: NumberAxis{
        label: "x^2 / 100",
        lowerBound: 0,
        upperBound: 4,
        tickUnit: 2,
        formatTickLabel: function(value) {
                "{%d value.intValue()}"
        }
    }

    data: ScatterChart.Series{
        name: "x^2",
        data: for(i in [0..20]) ScatterChart.Data{
                xValue: i
                yValue: 0.01 * i * i
            }
            
    }
    verticalGridLineVisible: true
    verticalGridLineStroke: Color.BLACK
    verticalGridLineStrokeWidth: 2
}
ExampleScatterChart.png


BarChart3D Править

http://forums.sun.com/thread.jspa?messageID=10773814

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;

import javafx.scene.chart.*;
import javafx.scene.chart.part.*;


Stage {
    title: "BarChart3D"
    width: 250
    height: 80
    scene: Scene {
        content: BarChart3D {
            categoryAxis: CategoryAxis {
                categories: ["Java", "C", "C++", "PHP", "Visual Basic", "C#"]
            }
            valueAxis: NumberAxis {
                lowerBound: 5
                upperBound: 25
                tickUnit: 20
                label:"Rating"
            }
            data: [
                BarChart.Series {
                    name: "2008"
                    data: [
                        BarChart.Data {
                            value: 24
                        }

                        BarChart.Data {
                            value: 9
                        }

                        BarChart.Data {
                            value: 15
                        }

                        BarChart.Data {
                            value: 18
                        }

                        BarChart.Data {
                            value: 22
                        }

                        BarChart.Data {
                            value: 10
                        }
                    ]
               }
           ]
        }
    }
}
ExampleBarChart.png

2D Графика Править

Окружность - Circle Править

Пример использования Картинка 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;

Stage{
    title: "JavaFX Circle"
    scene: Scene{
        content: Circle {
            centerX: 100
            centerY: 30
            radius: 25
            fill: Color.YELLOW
            stroke: Color.GREEN
        }
    }
}
ExampleCircle.png

Прямоугольник - Rectangle Править

Пример использования Картинка 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

Stage{
    title: "JavaFX Rectangle"
    scene: Scene{
        content: Rectangle {
            x: 30
            y: 10
            height: 50
            width: 70
            arcHeight: 20
            arcWidth: 20
            fill: Color.LIGHTGREEN
            stroke: Color.GREEN
            strokeWidth: 2
        }
    }
}
FXRectangle.png

Эллипс - Ellipse Править

Пример использования Картинка 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;

Stage{
    title: "JavaFX Ellipse"
    scene: Scene{
        content: Ellipse{
            centerX: 50
            centerY: 30
            radiusX: 40
            radiusY: 25
            fill: Color.YELLOW
            stroke: Color.GREEN
        }

    }
}
FXEllipse.png

Траектория - PATH Править

Пример использования Картинка 
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.*;
import javafx.scene.shape.*;

Stage{
    title: "JavaFX Path"
    scene: Scene{
        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
        }
    }
}
FXPath.png


Дуга - Arc Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;


Stage {
    title : "Arc"
    scene: Scene {
        content: 
            Arc {
                centerX: 100
                centerY: 100

                radiusX: 75
                radiusY: 50

                startAngle: 90

                length: 180 + 90
                
                type: ArcType.OPEN
                
                stroke: Color.GREEN
                fill: Color.WHITE
            }
    }
}
FXArc.png

Треугольник - Triangle Править

Пример использования Картинка 

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

class Triangle extends CustomNode{

    public var x1: Number = 0;
    public var y1: Number = 0;

    public var x2: Number = 100;
    public var y2: Number = 0;

    public var x3: Number = 0;
    public var y3: Number = 100;

    public var fill: Color = Color.WHITE;
    public var stroke: Color = Color.GREEN;

    public override function create(){
        Path {
            fill: bind fill
            stroke: bind stroke
            elements: [
                MoveTo { x: x1, y: y1 },
                LineTo { x: x2, y: y2 },
                LineTo { x: x3, y: y3 },
                ClosePath {}

            ]
        }
  }
}

Stage {
    title: "Triangle"
    scene: Scene {
        width: 200
        height: 200
        content: [
            Triangle{
                transforms: [ Translate{ x: 100 y: 100} Rotate { angle: 180 }]
                fill: Color.LIGHTGREEN
                x1: 50
                x2: -50
                y3: 50
            }
        ]
    }
}
FXTriangle.png

Example.jpg

Картинки Править

Image Править

Путь к изображению задается в формате URL.

Если изображение лежит в том же пакете, что и используемый ее fx файл, то обратиться к ней можно с помощью переменной __DIR__: 

 Image { url: "{__DIR__}lion.png"  }

Если нужно указать полный путь к изображению на диске, то надо использовать следующий формат: 

 Image { url: "file:///C:/images/lion.png"  }


Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.image.*;

Stage {
    title : "Image"
    scene: Scene {
        content: ImageView {
            image: Image {
                url: "{__DIR__}lion.png"
            }
        }
    }
}
FXImage.png

Преобразования Править

Вращение - Rotate Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

Stage{
    title: "JavaFX Rotate"
    scene: Scene{
        content: [
            Rectangle{
                x: 30
                y: 40
                width: 60
                height: 50
                fill: Color.WHITE
                stroke: Color.GREEN
            },Rectangle{
                transforms: Rotate{ angle: 30 pivotX: 60 pivotY: 65 }
                x: 30
                y: 40
                width: 60
                height: 50
                fill: Color.ORANGE
                stroke: Color.GREEN
            }
        ]
    }
    visible: true
}
FXRotate.png

Перемещение - Translate Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

Stage{
    title: "JavaFX Translate"
    scene: Scene{
        content: [
            Rectangle{
                x : 30 y : 40
                width: 60 height: 50
                fill: Color.WHITE
                stroke: Color.GREEN
            },Rectangle{
                transforms: Translate{ x: 15 y: 10 }
                x : 30 y : 40
                width: 60 height: 50
                fill: Color.ORANGE
                stroke: Color.GREEN
            }
        ]
    }
}
FXTranslate.png

Масштабирование - Scale Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

Stage{
    title: "JavaFX Scale"
    scene: Scene{
         content: Group{
            transforms: Translate{ x: 80 y: 70 }
            content: [
                Rectangle{
                    x: -30  y: -30
                    width: 60 height: 60
                    fill: Color.WHITE
                    stroke: Color.GREEN
                },Rectangle{
                    transforms: Scale{ x: 0.8 y: 0.7 }
                    x: -30  y: -30
                    width: 60 height: 60
                    fill: Color.ORANGE
                    stroke: Color.GREEN
                }
             ]
        }
    }
}
FXScale.png

Сдвиг слоев - Shear Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;

Stage{
    title: "JavaFX Shear"
    scene: Scene{
         content: Group{
            transforms: Translate{ x: 80 y: 70 }
            content: [
                Rectangle{
                    x: -30  y: -30
                    width: 60 height: 60
                    fill: Color.WHITE
                    stroke: Color.GREEN
                },Rectangle{
                    transforms: Shear { x: 0.5, y : 0.0 }
                    x: -30  y: -30
                    width: 60 height: 60
                    fill: Color.ORANGE
                    stroke: Color.GREEN
                }
             ]
        }
    }
}
FXShear.png

Комбинирование Фигур Править

Пересечение < ShapeIntersect > Править

Пример использования Картинка 
import javafx.stage.*;

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;


Stage{
    title:  "Shape Intersection"
    scene: Scene{
        content: [
            Circle{
                centerX: 80
                centerY: 80
                radius: 50
                fill: Color.WHITE
                stroke: Color.GREEN
            },Rectangle{
                x : 70 y : 70
                width: 110 height: 80
                fill: Color.WHITE
                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
            }
        ]
    }
}
FXShapeIntersection.png

Вычитание < ShapeSubtract> Править

Пример использования Картинка 
import javafx.stage.*;

import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;


Stage{
    title:  "Shape Subtraction"
    scene: Scene{
        content: [
            Circle{
                centerX: 80
                centerY: 80
                radius: 50
                fill: Color.WHITE
                stroke: Color.GREEN
            },Rectangle{
                x : 70 y : 70
                width: 110 height: 80
                fill: Color.WHITE
                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
            }
        ]
    }
}
FXShapeSubtract.png

Эффекты Править

DropShadow Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.effect.*;

Stage {
    title : "DropShadow Effect"
    scene: Scene {
        content: Circle {
                centerX: 100, centerY: 100
                radius: 40
                fill: Color.GREEN
                effect: DropShadow {
                        color: Color.BLACK
                        radius: 15
                        offsetX: 10
                        offsetY: 5
                    }
            }
    }
}
ExampleDropShados.png


InnerShadow Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.effect.*;

Stage {
    title : "InnerShadow Effect"
    scene: Scene {
        content: Circle {
                centerX: 100, centerY: 100
                radius: 40
                fill: Color.GREEN
                effect: InnerShadow {
                        color: Color.DARKGREEN
                        radius: 20
                        choke: 0.5
                        offsetX: -10
                        offsetY: -10

                    }
            }
    }
}
ExampleInnerShadow.png

Медиа компоненты Править

Видео Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.media.*;

Stage {
    title: "My Video"
    scene: Scene {
        width: 200
        height: 200
        content:MediaView {
            preserveRatio: true
            mediaPlayer: MediaPlayer {
                autoPlay: true
                media: Media {
                    source: ""
                }
            }
        }
    }
}
Simple video.png
RaindropДобавил Raindrop

Рабочая ссылка на видео: http://sun.edgeboss.net/download/sun/media/1460825906/1460825906_2956241001_big-buck-bunny-640x360.flv"

Обработка пользовательских событий Править

Button event Править

Пример использования Картинка 
import javafx.scene.*;
import javafx.ext.swing.*;

Scene{
    content: SwingButton {
        text: "Click Me"
        action: function(){
            println("Button is pressed");
        }
    }
}
ExampleButton.png

Mouse Events Править

Пример использования Картинка 
import javafx.stage.*;
import javafx.scene.*;

import javafx.scene.input.*;
import javafx.scene.paint.*;
import javafx.scene.shape.*;

var x = 100.0;
var y = 30.0;

Stage{
    title: "Mouse Events"
    width: 200
    height: 100
    scene: Scene{
        content: Circle {
            centerX: bind x
            centerY: bind y
            radius: 25
            fill: Color.ORANGE
            stroke: Color.GREEN

            onMousePressed: function(e:MouseEvent){
                println("Mouse pressed x={e.x} y={e.y}");
            }

            onMouseReleased: function(e:MouseEvent){
                println("Mouse released x={e.x} y={e.y}");
            }

            onMouseDragged: function(e:MouseEvent) {
                x = e.x;
                y = e.y;
            }

        }
    }
}
ExampleMouseCanvas.png


Анимация Править

Для программирования анимации в языке 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: 5
}

Простой пример использования анимации Править

В приведенном примере, радиус окружности линейно изменяется от 0 до 100 в течении 5 секунд, 3 раза. 

import javafx.scene.*;
import javafx.stage.*;

import javafx.animation.*;

import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;


var radius = 0.0;

Timeline {
    keyFrames: KeyFrame {
        time: 5s,
        values: radius => 100 tween Interpolator.LINEAR
        action: function() { /* User action */

        }
    }
    repeatCount: 3
}.play();



Stage{
    title: "JavaFX Animation"
    scene: Scene{
        width: 200
        height: 200
        content: Circle{
            centerX: 100
            centerY: 100
            radius: bind radius
            fill: Color.ORANGE
        }
    }
}

FXAnimation.png

Маятник Править

Программа, моделирующая поведение маятника:

Пример использования Картинка 
import java.lang.Math;

import javafx.scene.*;
import javafx.stage.*;

import javafx.animation.*;

import javafx.scene.paint.*;
import javafx.scene.shape.*;
import javafx.scene.transform.*;



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.play();

Stage{
    title: "Pendulum"

    width: 220
    height: 220

    scene: Scene{
        content: Group{
            transforms: 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
                }
            ]
        }
    }
}
FXPendulum.png

Web приложения Править

Чтение RSS Править

JavaFX - RSS and ATOM Task 

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.text.*;
import javafx.scene.control.*;
import javafx.data.feed.rss.*;

import java.lang.Exception;
import javafx.scene.layout.LayoutInfo;


var feed: String = "http://planetnetbeans.org/rss20.xml";

var rssItems: String[];
var rssTask = RssTask {
            interval: 30s
            location: feed;
            onStart: function() {
                println("loading RSS feed...");
            }
            onItem: function(rssItem: Item) {
                insert rssItem.title into rssItems;
            }
            onException: function(e: Exception) {
                println("There was an error: {e.getMessage()}");
            }
            onDone: function() {
                println("done reading RSS");
            }
        };

rssTask.start();

Stage {
    title: "Read RSS"
    scene: Scene {
        width: 200
        height: 200
        content: ListView {
            layoutInfo: LayoutInfo{ width: 300 height: 400 }
            items: bind for(item in rssItems) Text{
                font: Font{ size: 16 }
                content: item
            }
        }
    }
}

Read rss.png

HTTPRequest Править

GET Править

import javafx.io.http.HttpRequest;

def http: HttpRequest = HttpRequest {

            method: HttpRequest.GET
            location: "http://www.wikipedia.org"

            onResponseHeaders: function(headerNames: String[]) {
                println("There are {headerNames.size()} response headers:");
                for (name in headerNames) {
                    println("  {name}: {http.getResponseHeaderValue(name)}");
                }
            }

            onException: function(e) { e.printStackTrace() }
        }

http.start();

Результат: 

There are 12 response headers:
  : HTTP/1.0 200 OK
  date: Mon, 17 May 2010 14:26:23 GMT
  server: Apache
  cache-control: s-maxage=3600, must-revalidate, max-age=0
  last-modified: Thu, 13 May 2010 04:53:47 GMT
  vary: Accept-Encoding
  content-length: 47067
  content-type: text/html; charset=utf-8
  x-cache: HIT from sq77.wikimedia.org
  x-cache-lookup: HIT from sq77.wikimedia.org:80
  age: 13
  connection: keep-alive

Апплеты Править

Замена картинки при загрузки апплета.


Код апплета MyApplet.fx который лежит в пакете pack: 

package pack;

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.paint.Color;
import javafx.scene.effect.DropShadow;


Stage {
    title: "My Applet"
    width: 250
    height: 80
    scene: Scene {
        content: Text {
            x: 10  y: 30
            font: Font { size: 24 }
            fill: Color.BLUE
            effect: DropShadow{ offsetX: 3 offsetY: 3}
            content: "Hello World!"
        }
    }
}


index.html: 

<html>
    <body>
        <h1>Wiki</h1>
        <script src="http://dl.javafx.com/dtfx.js"></script>
        <script>
            javafx(
                {
                      archive: "Wiki.jar",
                      draggable: true,
                      width: 150,
                      height: 100,
                      code: "pack.MyApplet",
                      name: "Wiki"
                }
            );
        </script>
    </body>
</html>

Для компиляции вручную, надо вызвать следующую команду из корня проекта: 

 > javafxc -d . pack/MyApplet.fx

После этого надо открыть index.html файл в броузере:

FXApplet.png


Социальные сети Править

Facebook Править

JavaFX + Facebook

Полезные примеры Править

Сохранить приложение в виде картинки Править

JavaFX - Save As Image

DraggableNode Править

Этот простой компонент позволяет перетаскивать JavaFX компоненты с помощью мышки: 

import javafx.scene.*;

 public class DraggableNode extends CustomNode {

    public var content: Node;
    
    var dragX: Number;
    var dragY: Number;
    var dragAnchorX: Number;
    var dragAnchorY: Number;

    public override function create(): Node {
        Group {

            content: content

            translateX: bind dragX
            translateY: bind dragY

            onMousePressed: function(e): Void {
                dragAnchorX = dragX;
                dragAnchorY = dragY;
            }
            onMouseDragged: function(e): Void {
                dragX = dragAnchorX + e.dragX;
                dragY = dragAnchorY + e.dragY;
            }
        }
    }

}

Пример использования: 

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: DraggableNode{
            content: Circle{
                centerX: 250
                centerY: 250
                radius: 100
                fill: Color.YELLOW
                stroke: Color.ORANGE
            }
        }
    }
}

ScalableNode Править

Этот простой компонент позволяет масштабировать JavaFX компоненты с помощью мышки: 

import javafx.scene.*;

public class ScalableNode extends CustomNode {

    public var content: Node;
    var scale = 1.0;

    public override function create(): Node {
        Group {

            content: content

            scaleX: bind scale
            scaleY: bind scale
            
            onMouseWheelMoved: function(e): Void {
                scale += e.wheelRotation / 10.0;
            }
            
        }
    }

}

Пример использования: 

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: ScalableNode{
            content: Circle{
                centerX: 250
                centerY: 250
                radius: 100
                fill: Color.YELLOW
                stroke: Color.ORANGE
            }
        }
    }
}


CenterScalableNode Править

Этот простой компонент позволяет масштабировать JavaFX компоненты относительно позиции мышки: 

import javafx.scene.*;
import javafx.scene.transform.*;

public class CenterScalableNode extends CustomNode {

    public var content: Node;
    var s = 1.0;
    var px: Number;
    var py: Number;

    function getP(s1: Number, s2: Number, p1: Number, p2: Number): Number {
        ((1 - s1) * s2 * p1 + (1 - s2) * p2) / (1 - s1 * s2)
    }

    public override function create(): Node {
        Group {
            content: content
            transforms: Scale { x: bind s y: bind s pivotX: bind px pivotY: bind py }
            onMouseWheelMoved: function(e): Void {
                def ds = 1.0 + e.wheelRotation / 10.0;
                px = getP(s, ds, px, e.sceneX);
                py = getP(s, ds, py, e.sceneY);
                s = s * ds;
            }
        }
    }

}

Пример использования: 

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;

Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: CenterScalableNode{
            content: Circle{
                centerX: 250
                centerY: 250
                radius: 100
                fill: Color.YELLOW
                stroke: Color.ORANGE
            }
        }
    }
}

PopupNode Править

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.shape.*;
import javafx.scene.paint.*;
import javafx.scene.input.*;
import javafx.scene.text.*;

class PopupNode extends CustomNode {

    public var x: Number;
    public var y: Number;
    public var content: Node;
    public var popupScene: Scene;

    public override function create(): Node {
        insert this into popupScene.content;
        Group {
            content: content
            translateX: x
            translateY: y
            onMouseExited: function (e) {
                delete this from popupScene.content;
            }
        }
    }

}
var scene: Scene;

Stage {
    title: "Application title"
    scene: scene = Scene {
        content: Rectangle {
            width: 200
            height: 200
            fill: Color.LIGHTBLUE
            onMouseClicked: function (e) {
                if (e.button == MouseButton.SECONDARY) {
                    PopupNode {
                        x: e.x
                        y: e.y
                        popupScene: scene
                        content: Text {content: "Hello World!"}
                    }

                }

            }
        }
    }
}

Вопросы и ответы Править

Задайте интересующий вас вопрос по языку JavaFX Script

Источник — «http://ru.jfx.wikia.com/wiki/JavaFX_API»

Страницы на JavaFX

Добавить страницу
31статья на этой вики
Advertisement | Your ad here

Latest Photos

Добавить Фото
150фото на этой вики
Подробнее >

Последние действия в вики

Подробнее >

Викия-сеть

Случайная вики