ФЭНДОМ


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

Динамическое изменение содержимого компонента Править

Два способа динамического измения содержимого компонента

Вставка/удаление содержимого компонента Править

  • Определяем элемент, который необходимо будет отображать
var elem = Circle {}
  • Определяем компонент, который будет отображать элементы
var group = Group{};  
  • Отображаем группу на сцене:
Scene {  
  content: [ group ]
}
  • Добавляем/Удалаем элементы:
insert elem into group.content;
delete elem from group.content;



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


var circle = Circle {
            centerX: 100,
            centerY: 100
            radius: 60
            fill: Color.GREEN
        }

var group: Group;  

Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [
            Button {
                text: "Add Circle"
                action: function () {
                    if (group.content == []) {
                        insert circle into group.content;
                    }
                }
            }
            Button {
                translateX: 85
                text: "Remove Circle"
                action: function () {
                    delete circle from group.content;
                }
            }
            group = Group { }
        ]
    }
}
Dinamic add remove

Оператор bind Править

  • Определяем элемент, который необходимо будет отображать
var elem = Circle {}

Определяем переменную, которая будет связанна с содержимым группы

var content: Node[];
  • Отображаем группу на сцене, связав ее содержимое с эелементом node:
Scene {  
  content: [ 
    Group { content: bind content}
  ]
}
  • Добавляем/Удалаем элемент:
content = [ circle ];
content = [];



Пример использования Картинка
Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [
            Button {
                text: "Add Circle"
                action: function () {
                    content = [ circle ];
                }
            }
            Button {
                translateX: 85
                text: "Remove Circle"
                action: function () {
                    content = [];
                }
            }
            Group { content: bind content}
        ]
    }
}
Dinamic add remove