Create a Feathers UI project in HaxeDevelop

HaxeDevelop (or FlashDevelop) supports an OpenFL project template that we'll use to create a new Feathers UI project.

Prerequisites

Create a project

  1. From the Project menu, choose New Project….

  2. Select OpenFL Project from the list of templates. It should be in the Haxe category.

  3. Give your project a Name and choose a Location to save it on your computer.

  4. Click OK to create your project.

  5. Open project.xml.

  6. Find the line where openfl is specified as a Haxelib dependency, and add new dependencies for actuate and feathersui after it:

    <haxelib name="openfl" />
<haxelib name="actuate" />
<haxelib name="feathersui" />

Add your first Feathers UI component

  1. Open src/Main.hx. This is the main entrypoint of your OpenFL application.

  2. Add the following imports:

    import feathers.controls.Button;
import feathers.events.TriggerEvent;

  3. Modify the constructor with the following code:

    public function new() {
    super();

    var button = new Button();
    button.text = "Click Me";
    button.addEventListener(TriggerEvent.TRIGGER, onButtonTrigger);
    addChild(button);
}

  4. Add an event listener function that logs a message:

    private function onButtonTrigger(event:TriggerEvent):Void {
    trace("Clicked or tapped the button");
}

Run the project

  1. In HaxeDevelop's toolbar, you should see two drop-downs. One will have either Debug or Release selected, and the other will have the name of the target platform, such as html5, windows, or android. Select Debug and html5.

  2. From the Project menu, choose Test Project (or use the F5 keyboard shortcut).

  3. The project should launch in your default web browser.

    If your project does not launch in a browser, check the Results panel or Output panel for errors.

  4. If you click on the button, it will log a message to your web browser's debug console.

    Open your web browser's developer tools to find the debug console other other useful tools for web developers.

Troubleshooting

How to fix some issues that you may encounter.

Error: Library lime is not installed

This error indicates that OpenFL's setup process is not yet complete. Open a terminal and run the following command.

haxelib run openfl setup

Error: Could not find haxelib [library name], does it need to be installed?

This error indicates that one or more of your project's dependencies is not installed. In a terminal, run the haxelib install command with the name of the missing library. For example, run the following command to install Actuate.

haxelib install actuate

You may need to close and re-open your project after installing a new dependency.

Further Reading