Feathers UI
  • Docs
  • API
  • Showcase
  • Blog
  • Community

›Create a new project in…

Introduction

  • Getting Started
  • Installation
  • Create a new project in…

    • Command line terminal
    • HaxeDevelop
    • Moonshine IDE
    • Visual Studio Code

    Build a project targeting…

    • Android
    • iOS
    • Linux
    • macOS
    • Windows
    • Web
  • Introduction to OpenFL

UI Components

  • Intro to UI components
  • Alert
  • Application
  • AssetLoader
  • Button
  • ButtonBar
  • Callout
  • Check
  • ComboBox
  • HDividedBox / VDividedBox
  • Drawer
  • Form
  • GridView
  • GroupListView
  • Header
  • ItemRenderer
  • Label
  • LayoutGroup
  • LayoutGroupItemRenderer
  • ListView
  • PageIndicator
  • PageNavigator
  • Panel
  • PopUpListView
  • HProgressBar / VProgressBar
  • Radio
  • RouterNavigator
  • HScrollBar / VScrollBar
  • ScrollContainer
  • HSlider / VSlider
  • StackNavigator
  • TabBar
  • TabNavigator
  • TextArea
  • TextCallout
  • TextInput
  • ToggleButton
  • ToggleSwitch
  • TreeView

Layouts

  • Intro to Layouts
  • AnchorLayout
  • HorizontalLayout
  • HorizontalListLayout
  • HorizontalDistributedLayout
  • ResponsiveGridLayout
  • VerticalLayout
  • VerticalListFixedRowLayout
  • VerticalListLayout
  • VerticalDistributedLayout

Styles and Skins

  • Intro to skins
  • Common shape skins
  • Custom programmatic skins
  • Intro to themes
  • Create a custom theme

Custom UI Components

  • Custom UI components
  • Component lifecycle
  • Custom item renderers
  • Class-based item renderers

Miscellaneous

  • CLI commands
  • Collections
  • haxedef options
  • Install Prerelease Builds
Edit

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

  • Install Feathers UI from Haxelib

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

  • HaxeDevelop documentation
  • OpenFL/Lime project.xml format
  • MDN: What are browser developer tools?
Last updated on 11/5/2020
← Command line terminalMoonshine IDE →
  • Prerequisites
  • Create a project
    • Add your first Feathers UI component
  • Run the project
  • Troubleshooting
    • Error: Library lime is not installed
    • Error: Could not find haxelib [library name], does it need to be installed?
  • Further Reading
Feathers UI
Feathers UI
  • Downloads
  • Showcase
  • Testimonials
  • Join Github Sponsors
  • Make a Donation
Haxe / OpenFL
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
ActionScript / Starling
  • Documentation
  • API Reference
  • Samples
  • GitHub
  • Issue Tracker
Feathers SDK (Starling)
  • Documentation
  • GitHub
Community
  • Forum
  • Discord
  • Stack Overflow
News & Updates
  • Blog (RSS, Atom)
  • Twitter
Copyright © 2021 Bowler Hat LLC — Illustrations by unDraw.