Feathers UI is a framework of graphical user interface (GUI) components for creative, cross-platform, frontend projects. It is especially well-suited for games, interactive data visualizations, and other rich, multimedia experiences.
The following instructions describe how to use Feathers UI with JavaScript.
Open a terminal, and then install Feathers UI using the following command:
npm install feathersui-openflThis command will also automatically install any additional required dependencies, like OpenFL and Actuate, if necessary.
Alternatively, Feathers UI may be added to any HTML file using a few <script> tags:
<script src="https://unpkg.com/[email protected]/dist/openfl.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/actuate.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/feathersui-openfl.min.js"></script>Visual Studio Code is recommended, but any editor or IDE that supports JavaScript should work with Feathers UI.
class HelloWorld extends feathers.controls.Application {
constructor() {
super();
this.layout = new feathers.layout.AnchorLayout();
this.button = new feathers.controls.Button();
this.button.layoutData = feathers.layout.AnchorLayoutData.center();
this.button.text = "Click Me";
this.button.addEventListener(
feathers.events.TriggerEvent.TRIGGER,
this.button_triggerHandler
);
this.addChild(this.button);
}
button_triggerHandler = (event) => {
feathers.controls.TextCallout.show("Hello World", this.button);
};
}
var stage = new openfl.display.Stage(0, 0, null, null, {
allowHighDPI: true,
});
document.body.appendChild(stage.element);
stage.addChild(new HelloWorld());