Edit

Create a Feathers UI project in Visual Studio Code

With a few free extensions, Visual Studio Code may be configured as a fully-featured development environment for Feathers UI projects built with Haxe and OpenFL.

Prerequisites

• Install Feathers UI, OpenFL, and Actuate from Haxelib

• Install Lime from Haxelib by running the following commands in a terminal:

  haxelib install lime
  haxelib run lime setup
  

• Install the Feathers UI Extension Pack for Visual Studio Code

Create a project

1. From the File menu, choose Open Folder….

2. Create a new, empty folder for your project somewhere on your computer.

3. Open the folder that you created.

4. Create a file named project.xml and add the following content:

   <?xml version="1.0" encoding="utf-8"?>
   <project>
       <meta title="My Project" package="com.example.MyProject" version="1.0.0" company="My Company"/>
       <app main="Main" path="build" file="MyProject"/>
       <window allow-high-dpi="true"/>
       <window fps="60"/>
       <window fps="0" if="html5"/>
       <source path="src"/>
       <haxelib name="openfl"/>
       <haxelib name="actuate"/>
       <haxelib name="feathersui"/>
   </project>
   

5. Create a file named src/Main.hx, and add the following content:

   import openfl.display.Sprite;
   
   class Main extends Sprite {
       public function new() {
           super();
       }
   }
   

   Tip: Some projects may benefit from using the Application component as the base class, instead of Sprite.

Add your first Feathers UI component

1. Inside src/Main.hx, add the following imports:

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

2. 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);
   }
   

3. 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 Visual Studio Code's status bar, you should find a button that allows you to choose a target platform. Select HTML5/Debug.

2. From the Debug menu, choose Add Configuration….

3. Select Lime from the list of available environments.

4. From the Debug menu, choose Start Debugging (or use the F5 keyboard shortcut).

5. The project should launch in Chrome.

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

6. If you click on the button, it will log a message to the Debug Console in Visual Studio Code.

Troubleshooting

How to fix some issues that you may encounter.

Error: Command failed: lime display html5

This error may indicate a problem in your project.xml file. Check for additional error messages after this one that provide more context.

It may also indicate that Lime is not installed. You can install it from Haxelib by running the following commands in a terminal.

haxelib install lime
haxelib run lime 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 workspace folder after installing a new dependency.

Further Reading

• Visual Studio Code documentation
• OpenFL/Lime project.xml format