Фэндом


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

Краткое введение в язык JavaFX Script Править

Рассмотрим возможности языка JavaFX Script на примере маленькой компании "Pond Inc", которая занимается строительством прудов. Это могут быть пруды для отдыха, для разведения рыбы или для чего-нибудь еще.

Переменные Править

Итак, компании "Pond Inc" пришел заказ на изготовление овального пруда длиной 10 метров, шириной 5 метров и глубиной 2 метра. Заказчик сразу же попросил оценить, чему будет равен объем будущего пруда.

Директор компании "Pond Inc" сразу же вызвал к себе главного программного архитектора и описал ему суть поставленной задачи. После недолгих поисков, программный архтектор нашел документацию по языку JavaFX Script и передал ее вместе с параметрами пруда главному программисту.

Первое, что понял главный программист, это то, что переменные в языке JavaFX Script задаются с помощью ключевого слова var:

 var n = 5;         // Переменная n имеет тип Integer, потому что 5 задано как целое число
 var radius = 10.0; // Переменная radius имеет тип Number, потому что 10.0 задано как число с дробной частью


Главный программист сразу взялся за дело, создал файл Main.fx и внес в него параметры пруда в качестве соответсвующих переменных:

 var length = 10.0;  // переменная length хранит значение длины  пруда
 var width  =  5.0;  // переменная width  хранит значение ширины  пруда
 var depth  =  2.0;  // переменная depth  хранит значение глубины пруда

Для расчета объема пруда, на ежедневном собрании, было предложено воспользоваться формулой, найденной на wikipedia сайте:

V = \pi \cdot radiusX \cdot radiusY \cdot h

На языке JavaFX Script это описывается следующим образом:

var PI = 3.1415;

var radiusX = length / 2;
var radiusY = width  / 2;
var h = depth;

var V = PI * radiusX * radiusY * h;


Чтобы распечать значение переменной, надо воспользоваться методом println(), причем саму переменную надо заключить в фигурные скобки. Например:

println("V = {V}");

Тогда конечная программа имеет вид:


var length = 10.0;
var width = 5.0;
var depth = 2.0;

var PI = 3.1415;

var radiusX = length / 2;
var radiusY = width  / 2;
var h = depth;

var V = PI * radiusX * radiusY * h;

println("V = {V}"); // V = 78.53750000000001

И вот конечный результат получен, объем пруда будет равняться 78.54 кубических метров .

Константы Править

Определим  \pi как константу, чтобы ее в дальнейшем никто не мог изменить:

def PI = 3.1415;


Функции Править

Компании "Pond Corporation" пришел заказ на постройку 2х овальных прудов: с песчаным берегом (sand pond) размерами 7 x 9 x 2 и травяным берегом (grass pond) размерами 8 x 9 x 3.

И опять необходимо посчитать объем каждого пруда.

Используя формулу для объема пруда мы получим следующий результат:

def PI = 3.1415;

var sandPondVolume  = PI * 7.0 / 2 * 9.0 / 2 * 2;
var grassPondVolume = PI * 8.0 / 2 * 9.0 / 2 * 3;

println("sand  pond volume: {sandPondVolume}");   // sand  pond volume:  98.957
println("grass pond volume: {grassPondVolume}");  // grass pond volume: 169.641


Вместо того, чтобы каждый раз переписывать формулу для вычисление объема пруда, перепишем ее один раз в виде функции:

def PI = 3.1415;

function pondVolume(length: Number, width:Number, depth:Number){
    return PI * length / 2 * width / 2 * depth;
}

println("sand  pond volume: {pondVolume( 7, 9, 2 )}");  // sand  pond volume:  98.957
println("grass pond volume: {pondVolume( 8, 9, 3 )}");  // grass pond volume: 169.641

Классы Править

Сразу несколько парков из Петродворца, Пушкина и Павловска заказали постройку прудов. И опять для каждого пруда необходимо вычислить его объем.

Можно поступить как и раньше,для каждого значения длины, ширины и глубины заводить свою переменную, но при этом количество переменных будет быстро возрастать ( 3 переменные для каждого пруда ) и при работе с ними будет очень легко их перепутать:

def PI = 3.1415;

var petrodvoretsPondLength = 10.0;
var petrodvoretsPondWidth  =  5.0;
var petrodvoretsPondDepth  =  3.0;

var pushkinPondLength =  8.0;
var pushkinPondWidth  =  7.0;
var pushkinPondDepth  =  3.0;

var pavlovskPondLength =  9.0;
var pavlovskPondWidth  =  5.0;
var pavlovskPondDepth  =  3.0;

function pondVolume(length: Number, width:Number, depth:Number){
    return PI * length / 2 * width / 2 * depth;
}

var petrodvoretsPondVolume = pondVolume(petrodvoretsPondLength, petrodvoretsPondWidth, petrodvoretsPondDepth);
var pushkinPondVolume = pondVolume(pushkinPondLength, pushkinPondWidth, pushkinPondDepth);
var pavlovskPondVolume = pondVolume(pavlovskPondLength, pushkinPondWidth, pavlovskPondDepth);

println("Petrodvorets pond volume: {petrodvoretsPondVolume}");
println("Pushkin      pond volume: {pushkinPondVolume}");
println("Pavlovsk     pond volume: {pavlovskPondVolume}");


Результат выполнения программы:

 Petrodvorets pond volume: 117.80625
 Pushkin      pond volume: 131.943
 Pavlovsk     pond volume: 148.435875


Задача: Найди в коде выше опечатку.


Создадим класс Pond, в котором будут храниться аттрибуты длина, ширина и глубина:

class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;
}

Тогда весь код выше можно будет записать в более читабельной форме:

var petrodvoretsPond = Pond{ 
    length: 10
    width:   5
    depth:   3
}
    
var pushkinPond = Pond{ 
    length: 8
    width:  7
    depth:  3
}

var pavlovskPond = Pond{ 
    length: 9
    width:  5
    depth:  3
}


Но вычисление объема пруда осталось все таким-же громоздким:

var pushkinPondVolume = pondVolume(pushkinPond.length, pushkinPond.width, pushkinPond.depth);


Чтобы этого избежать, добавим фукцию вычисления объема пруда в класс Pond:

def PI = 3.1415;

class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;

    public function getVolume () {
        return PI * length / 2 * width / 2 * depth;
    }
}


И тогда окончательная программа будет выглядеть следующим образом:

def PI = 3.1415;

class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;

    public function getVolume () {
        return PI * length / 2 * width / 2 * depth;
    }
}


var petrodvoretsPond = Pond{ 
    length: 10
    width:   5
    depth:   3
}
    
var pushkinPond = Pond{ 
    length: 8
    width:  7
    depth:  3
}

var pavlovskPond = Pond{ 
    length: 9
    width:  5
    depth:  3
}

println("Petrodvorets pond volume: {petrodvoretsPond.getVolume()}");
println("Pushkin      pond volume: {pushkinPond.getVolume()}");
println("Pavlovsk     pond volume: {pavlovskPond.getVolume()}");

Результат выполнения программы:

 Petrodvorets pond volume: 117.80625
 Pushkin      pond volume: 131.943
 Pavlovsk     pond volume: 106.025625

Рисование Графики Править

Пакет javafx.scene.shape содержит классы для рисования графики, такие как линия, окружность, эллипс, дуга, многоугольник и другие.

Чтобы нарисовать окружность, надо для атрибута content класса Scene определить класс Circle и для класса Circle перечислить его атрибуты: координаты цетра окружности, радиус, цвет.


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

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

Stage {
    title: "Circle"
    width: 200
    height: 200

    scene: Scene {
        content: Circle {
            centerX: 100
            centerY: 100
            radius: 40
            fill: Color.WHITE
            stroke: Color.GREEN
        }
    }
}

Introduction circle.png


Компания "Pond Corporation" решило создать приложение, которое будет рисовать поверхность пруда по его параметрам. Для этого надо создать объект Pond, нарисовать в приложении эллипс и атрибутам эллипса присвоить соответсвующие атрибуты пруда:

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

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

class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;
}

var pond = Pond{
    length: 10
    width:   5
    depth:   3
}

var scale = 10;

Stage {
    title: "Pond"
    width: 200
    height: 200

    scene: Scene{
        content: Ellipse {
            transforms: Translate{ x: 100 y: 85}
            radiusX: pond.length / 2 * scale
            radiusY: pond.width  / 2 * scale
            stroke: Color.DARKBLUE
            fill: Color.LIGHTBLUE
        }
        fill: Color.SANDYBROWN
    }
}
Introduction ellipse.png

Создание Пользовательских Графических Компонент Править

Чтобы создать собственную графическую компоненту, надо расширить класс CustomNode и переопределить у него метод create().

Создадим класс PondNode у которого будут атрибуты scale и pond и который будет рисовать пруд в нашем приложении:

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


class PondNode extends CustomNode{

    public var scale:Number;
    public var pond:Pond;

    public override function create () {
        Ellipse{
            radiusX: pond.length / 2 * scale
            radiusY: pond.width  / 2 * scale
            stroke: Color.DARKBLUE
            fill: Color.LIGHTBLUE
        }
    }
}


Тогда приложение, изображающее пруд, можно будет переписать следующим образом:

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

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


class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;
}

class PondNode extends CustomNode{

    public var scale:Number;
    public var pond:Pond;

    public override function create () {
        Ellipse{
            radiusX: pond.length / 2 * scale
            radiusY: pond.width  / 2 * scale
            stroke: Color.DARKBLUE
            fill: Color.LIGHTBLUE
        }
    }
}

Stage {
    title: "Pond"
    width: 200
    height: 200
    scene: Scene{
        content: PondNode{
            scale: 10
            pond: Pond{
                length: 10
                width:   5
                depth:   3
            }
            transforms: Translate{ x: 100 y: 85}
        }
        fill: Color.SANDYBROWN
    }
}
Introduction ellipse.png

Связывание Данных Править

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

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

var x = 100.0;
var y = 100.0;

Stage {
    title: "Circle"
    width: 200
    height: 200

    scene: Scene{
        content: Circle {
            centerX: bind x
            centerY: bind y
            radius: 20
            fill: Color.ORANGE
            stroke: Color.GREEN
            onMouseDragged: function( e: MouseEvent ){
                x = e.x;
                y = e.y;
            }
        }
    }
}

Pond drag circle.png



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

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


class Pond{
    public var length:Number;
    public var width :Number;
    public var depth :Number;
}

class PondNode extends CustomNode{

    public var scale:Number;
    public var pond:Pond;


    public override function create () {
        Group{
            content: [
                Ellipse{
                    radiusX: bind pond.length / 2 * scale
                    radiusY: bind pond.width  / 2 * scale
                    fill: Color.LIGHTBLUE
                    stroke: Color.DARKBLUE
                }, Circle{
                    centerX: bind pond.length / 2 * scale
                    radius: 7
                    fill: Color.LIGHTBLUE
                    stroke: Color.DARKBLUE
                    onMouseDragged: function( e: MouseEvent ) {
                        pond.length = e.x * 2 / scale;
                    }
                }, Circle{
                    centerY: bind - pond.width / 2 * scale
                    radius: 7
                    fill: Color.LIGHTBLUE
                    stroke: Color.DARKBLUE
                    onMouseDragged: function( e: MouseEvent ) {
                        pond.width = - e.y * 2 / scale;
                    }
                }

            ]
        }
    }
}

Stage {
    title: "Pond"
    width: 200
    height: 200
    scene: Scene {
        content: PondNode{
            scale: 10
            pond: Pond{
                length: 10
                width:   5
                depth:   3
            }
            transforms: Translate{ x: 100 y: 85}
        }
        fill: Color.SANDYBROWN
    }
    visible: true
}
Pond draggable.png

Обнаружено использование расширения AdBlock.


Викия — это свободный ресурс, который существует и развивается за счёт рекламы. Для блокирующих рекламу пользователей мы предоставляем модифицированную версию сайта.

Викия не будет доступна для последующих модификаций. Если вы желаете продолжать работать со страницей, то, пожалуйста, отключите расширение для блокировки рекламы.

Также на Фэндоме

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