Every three to four weeks, I've been posting updates on Kickstarter that summarize what I've been adding to the Haxe/OpenFL version of Feathers UI recently. To be sure that no one has missed any of these updates, I'm going to occasionally post a quick roundup here on the Feathers UI blog. Let's jump right in…
Today, Feathers UI beta.3 is now officially available on Haxelib. This is the latest of multiple preview builds that are planned before the first stable release in early 2022. Since we're in the beta stage, the core framework architecture has settled down, and breaking changes are much less likely to happen. Developers who don't mind a few rough edges here and there should consider Feathers UI ready for starting development on new projects!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this is a beta version of Feathers UI. Some components and features may still be missing, and occasional bugs should be expected.
Feathers UI has reached this milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep up the good work!
Let's take a look at some of the new UI components and features that are included with Feathers UI beta.3
Alert displays a message in a modal pop-up dialog with a title and a set of buttons.
ButtonBar displays a grouping of buttons based on a data collection.
Form and FormItem display a set of form controls with labels, including the ability to assign a specific submit button.
Header display a title in the center and two optional views on the left and right sides.
This build also includes a ton of minor improvements. Here's a few worth highlighting:
GridView component when the content width exceeds the container width.branchIcon, branchOpenIcon, branchClosedIcon, and leafIcon styles on the TreeViewItemRenderer component.maxChars property for TextInput and TextArea.setPadding() convenience method was added to all classes with paddingTop, paddingRight, paddingBottom and paddingLeft properties. It sets all four value at once.Application.topLevelApplication static property that makes it easy to access the root Feathers UI application object.ArrayHierarchicalCollection is a new implementation of IHierarchicalCollection that's a bit more flexible than the existing TreeCollection.filterFunction and sortCompareFunction properties on IHierarchicalCollection to match the same properties on IFlatCollection.For complete details, check out the beta.3 CHANGELOG.
Feathers UI may be installed using the haxelib install command in your terminal.
haxelib install feathersui
If you already have the library installed, and you simply want the latest version, run the haxelib update command instead.
haxelib update feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up supported editors and IDEs.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe even a screenshot 🖼!).
I've created an official beta.3 discussion thread in the community forums. Head over there to leave a comment!
From time to time, people ask how they can send a little thank you donation to the Feathers UI open source project. Feathers UI is a cross-platform GUI framework for building mobile, desktop, and web apps (native and GPU-accelerated).
Starting today, the best way to help out is to sponsor Josh Tynjala on Github. Not only will you help fund Feathers UI development, but you'll also get some perks in exchange. Depending on your budget, you could get special forum avatar badges, priority support, your logo on feathersui.com, and more. Whether you're an indie developer or a big company, there are various levels of sponsorship for everyone. Check it out!
Additionally, Josh Tynjala is eligible for the Github Sponsors Matching Fund, which means that for every dollar you send, Github will double it. So if you sign up for $10 monthly, Josh will get $20. Not bad, right?
Thank you so much for your generous support, and of course, for continuing to build your projects using Feathers UI. This community is truly inspiring.
Today, Feathers UI beta.2 is now officially available on Haxelib. This is the latest of multiple preview builds that are planned before the first stable release in early 2022. We've now made it past the alpha stage, which means that the core framework architecture has settled down, and breaking changes are much less likely to happen. Developers who don't mind a few rough edges here and there should consider Feathers UI ready for starting development on new projects!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this is a beta version of Feathers UI. Some components and features may still be missing, and occasional bugs should be expected.
Feathers UI has reached this milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep up the good work!
Let's take a look at some of the new features that are included with Feathers UI beta.2.
The previous beta.1 build was unintentionally released containing some incompatibilties with OpenFL 8.9. This was a mistake. Obviously, not everyone is ready to upgrade to OpenFL 9 yet. To ensure that this doesn't happen again, the CI server now builds using OpenFL 8.9 so that any new incompatible changes can be caught immediately.
In desktop apps, a tool tip may be added to a UI component so that a helpful description is displayed when the mouse hovers over it. Now, all Feathers UI components have a toolTip property that accepts a string value.
var button = new Button();
button.text = "Click Me";
button.toolTip = "If you click me, you'll win a prize!";
addChild(button);
The Application component enables the ToolTipManager automatically, but it may be disabled with <haxdef name="disable_tool_tip_manager"> in your project.xml file. If your root class isn't an Application, you may manually call ToolTipManager.addRoot() to enable tool tips.
As with all "managers" in Feathers UI, there is an IToolTipManager interface that may be used to implement a custom tool-tip manager, if the default one does not completely meet your needs.
The ListView, GridView, and TreeView components have been updated to support displaying multiple types of item renderers for the same data collection.
The following example uses custom item renderers for the first and last items displayed by the ListView:
var regularItemRecycler = DisplayObjectRecycler.withClass(ItemRenderer);
var firstItemRecycler = DisplayObjectRecycler.withClass(CustomFirstItemRenderer);
var lastItemRecycler = DisplayObjectRecycler.withClass(CustomLastItemRenderer);
var listView = new ListView();
listView.itemRendererRecycler = regularItemRecycler;
listView.setItemRendererRecycler("first-item", firstItemRecycler);
listView.setItemRendererRecycler("last-item", lastItemRecycler);
listView.itemRendererRecyclerIDFunction = function(state:ListViewItemState):String {
if(state.index == 0) {
return "first-item";
}
if(state.index == listView.dataProvider.length - 1) {
return "last-item";
}
// return null to use the default itemRendererRecycler
return null;
};
For complete details about what else is included in this build, check out the beta.2 CHANGELOG.
Feathers UI may be installed using the haxelib install command in your terminal.
haxelib install feathersui
If you already have the library installed, and you simply want the latest version, run the haxelib update command instead.
haxelib update feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up supported editors and IDEs.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe even a screenshot 🖼!).
I've created an official beta.2 discussion thread in the community forums. Head over there to leave a comment!
Today, Feathers UI beta.1 is now officially available on Haxelib. This is the latest of multiple preview builds that are planned before the first stable release in early 2022. We've now made it past the alpha stage, which means that the core framework architecture has settled down, and breaking changes are much less likely to happen. Developers who don't mind a few rough edges here and there should consider Feathers UI ready for starting development on new projects!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this is a beta version of Feathers UI. Some components and features may still be missing, and occasional bugs should be expected.
Feathers UI has reached this milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep up the good work!
Let's take a look at some of the new UI components and features that are included with Feathers UI beta.1.
Drawer is a container that adds a special drawer that slides in and out, above all other content. It may be opened or closed with a swipe gesture from one of the four edges. (Live Demo)
HDividedBox and VDividedBox are containers display dividers between each of their children, and the dividers may be dragged to resize the children. (Live Demo 1 and Live Demo 2)
LayoutGroupItemRenderer is a base class for creating custom item renderers to display in data containers, such as ListView and GridView. This class allows item renderers with any number of children added to a layout (like LayoutGroup), and it also supports skinning based on mouse/touch states (like ItemRenderer).
This build includes three new samples that demonstrate how to create custom skins for Feathers UI components.
The custom-programmatic-skin sample demonstrates how to create a custom skin with your own drawing commands. Source Code on Github
The custom-programmatic-skin-with-states sample creates a custom skin for a Button component that changes appearance when the button's state changes. Source Code on Github
The animated-tween-skin sample creates a custom skin that triggers animations based on mouse/touch events. Source Code on Github
This build also includes a ton of minor improvements. Here's a few worth highlighting:
GridView componentListView and GridView componentsResponsiveGridLayout classTriangleSkin, PillSkin, and TabSkin)For complete details, check out the beta.1 CHANGELOG.
Feathers UI may be installed using the haxelib install command in your terminal.
haxelib install feathersui
If you already have the library installed, and you simply want the latest version, run the haxelib update command instead.
haxelib update feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up supported editors and IDEs.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe even a screenshot 🖼!).
I've created an official beta.1 discussion thread in the community forums. Head over there to leave a comment!
Today, Feathers UI alpha.3 is now officially available on Haxelib. This is the third of multiple preview builds that are planned for 2020. These preview builds are intended to give the community an opportunity to see how development of Feathers UI is progressing — and to give everyone a chance to start prototyping some cool, new projects!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this version of Feathers UI is considered to be alpha quality. Many of the planned UI components and features are still missing, and some APIs are likely to change in future builds. Use in production is not yet recommended.
Feathers UI has reached this milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep up the good work!
Let's take a look at some of the new UI components and features that are included with Feathers UI alpha.3.
GroupListView renders a collection of data, similar to a ListView, but items are also divided into groups with headers. (Live Demo)
As you can see above, this release doesn't include a lot of new components or major new features. The core focus this time around was around improving stability and fixing bugs. There are community projects that want to use Feathers UI in production, but alpha.2 wasn't quite ready for that yet.
With alpha.3, things are really coming together — with critical stability improvements to ListView, TreeView, TextInput, TextArea, programmatic skinning, and scrolling behavior.
One project that is starting to adopt Feathers UI is Moonshine IDE. I've been working closely with the team to migrate a number of dialogs and views in the app from Apache Flex (and ActionScript 3) to Feathers UI (and Haxe). This collaboration with the Moonshine IDE team is what drove many of the stability improvements in alpha.3, and it really made a big difference.
The goal with Moonshine IDE is to eventually replace the entire codebase with Haxe and compile it as a native app. In the meantime, it's likely that you'll soon see a release of Moonshine IDE that runs a mix of both Flex and Feathers UI side-by-side inside the existing Adobe AIR app. As a migration path for legacy Flex apps, it's really nice that Feathers UI makes it possible to do things incrementally instead of requiring a complete rewrite that's all-or-nothing.
As development continues in Moonshine IDE and other projects that are starting to adopt Feathers UI, you can expect future update to bring even more important bug fixes, performance boosts, and other improvements to stability.
Feathers UI may be installed using the haxelib command in your terminal.
haxelib install feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up supported editors and IDEs.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe even a screenshot 🖼!).
I've created an official alpha.3 discussion thread in the community forums. Head over there to leave a comment!
Visual Studio Code is one of the best editors for Haxe and OpenFL development today. Obviously, that makes it one of the best editors for Feathers UI development too. Today, Feathers UI is getting two new VSCode extensions to elevate the experience even more. Not only will you be able to create a new Feathers UI project with a single command, you can also set up everything you need for Haxe, OpenFL, and Feathers UI in just one click.
When you install the official Feathers UI extension for Visual Studio Code, you'll be able to create a new Feathers UI project in your workspace folder by running a simple command.
This will create an OpenFL project.xml file, a main class file that extends the Application class, and VSCode's editor configuration files to create a default build task and a Lime/OpenFL launch configuration.
Get the extension from the VSCode Marketplace:
As I was writing the documentation for creating a new Feathers UI project in Visual Studio Code, I realized that the list of prerequisites was getting pretty long. You need the Haxe extension, the Lime extension for OpenFL, and (of course) the new Feathers UI extension mentioned above. Rather than search for each of those separately, wouldn't it be better to get them all in one click?
The second extension is actually an extension pack, which is a bundle of multiple extensions that can all be installed together.
Get the Feathers UI extension pack from the VSCode Marketplace:
Today, Feathers UI alpha.2 is now officially available on Haxelib. This is the second of multiple preview builds that are planned for 2020. These preview builds are intended to give the community an opportunity to see how development of Feathers UI is progressing — and to give everyone a chance to start prototyping some cool, new projects!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this version of Feathers UI is considered to be alpha quality. Many of the planned UI components and features are still missing, and some APIs are likely to change in future builds. Use in production is not yet recommended.
Feathers UI has reached this milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep up the good work!
Let's take a look at some of the new UI components and features that are included with Feathers UI alpha.2.
GridView renders a table of data that may be scrolled. (Live Demo)
TreeView displays hierarchical data in a list with branches that may be opened and closed. (Live Demo)
PageNavigator supports navigation between views using a PageIndicator component. (Live Demo)
TabNavigator supports navigation between views using a TabBar component. (Live Demo)
TextArea displays editable text wrapped over multiple lines — and it supports scrolling vertically. (Live Demo)
The new CLI interface makes it possible to create a new Feathers UI project from your terminal in a single command.
haxelib run feathersui new-project HelloWorld
The command above creates a new project in a folder named HelloWorld using a simple template that includes an OpenFL project.xml file, a main class that extends Application, and a default icon.
Additionally, if you add the --vscode flag, it will create supporting configuration files for Visual Studio Code, and you can easily open your project from the command line.
haxelib run feathersui new-project HelloWorld --vscode
code ./HelloWorld
This will add .vscode/tasks.json with a default Lime/OpenFL build task and ./vscode/launch.json with a Lime/OpenFL launch configuration.
A proper list view UI component needs to be able to display thousands or millions of items without requiring a ridiculous amount of memory or maxing out the CPU.
Typically, this means that a small subset of the items from its data provider are rendered at any given time, and as the list view scrolls, some items are no longer rendered and new ones take their place. This is known as layout virtualization.
In the alpha.2 build, the ListView component can display larger data providers by using three new layouts:
HorizontalListLayout optimizes for items positioned from left to right, in a single row. Each item may have a different width.VerticalListLayout optimizes lists with items positioned from top to bottom, in a single column. Each item may have a different height. This layout is the default used by ListView.VerticalListFixedRowLayout is similar to VerticalListLayout — except all items must have the exact same height. This layout offers better performance by reducing the height lookups associated with variable item heights.Many people navigate through user interfaces without a mouse or touchscreen. They might be power users, they may have limited motor function, or maybe they're using a game controller or a TV remote control. It's important for many apps to have the option available to navigate between UI controls without using some kind of pointer.
The alpha.2 build includes a new focus manager that supports navigation with Tab and Shift+Tab. In a future update, the default focus manager will also support directional pads (D-pads) on game controllers and TV remote controls.
Loading up the new Login Form sample is an easy way to try out using the tab key to navigate between UI components in a simple form.
Additionally, it's worth mentioning that I also made several commits upstream to OpenFL to improve keyboard focus management for all OpenFL projects — not just those that use the Feathers UI focus manager. Those enhancements will be available in an upcoming update to OpenFL.
Feathers UI may be installed using the haxelib command in your terminal.
haxelib install feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up supported editors and IDEs.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe even a screenshot 🖼!).
I've created an official discussion thread in the forums. Head over there to leave a comment!
Every three to four weeks, I've been posting updates on Kickstarter that summarize what I've been adding to the Haxe/OpenFL version of Feathers UI recently. To be sure that no one has missed any of these updates, I'm going to occasionally post a quick roundup here on the Feathers UI blog. Let's jump right in…
Today, for very the first time, Feathers UI may be installed from Haxelib. This is the first of multiple preview builds that are planned for 2020. These preview builds are intended to give the community an opportunity to see how development of Feathers UI is progressing — and to give everyone a chance to start prototyping!
Feathers UI is an open source framework of user interface components for creative, cross-platform projects. Using the Haxe programming language, Feathers UI is built on OpenFL — a user-friendly library for rendering, input, networking, and more. Deploy native apps to iOS, Android, Windows, macOS, Linux (and even publish your project to the web!) using the same Haxe codebase.
🚨 Please note that this version of Feathers UI is considered to be alpha quality. Many of the planned UI components and features are still missing, and some APIs are likely to change in future builds. It is not ready for production yet.
Feathers UI has reached this first big milestone thanks the very generous support of all of the backers from the Feathers UI Kickstarter campaign, which completed successfully in the summer of 2019. A big, enthusastic thank you to everyone who has supported the project, whether you are a backer, shared the Kickstarter with your friends on social media, or simply encouraged me (Josh) to keep it up!
Let's take a look at a few of the samples that are included with Feathers UI. Each one includes a live web demo that you can try out in your browser.
The calculator sample demonstrates how to build a simple app, which uses the Application, LayoutGroup, Button and Label components. This sample also includes a simple custom theme that changes the appearance of the app's components to look different from the default styles.
The components-explorer sample includes a basic demo of every component currently supported by Feathers UI.
It also shows how Feathers UI may be used to build single-page apps with deep linking. This sample uses the RouterNavigator component, which integrates with the HTML History API so that each view has its own custom URL. As you navigate through the app, watch as your browser's current location updates automatically.
Finally, as you can see in the screenshot below, this sample shows how the default styles in Feathers UI support both light and dark modes.
The horizontal-layout-percentage-sizing sample demonstrates how layouts included with Feathers UI allow components to be sized using a percentage of their parent container's size. (Project on Github)
The list-view-data-provider-collection-sorting sample demonstrates how data collections displayed by components like ListView support real-time changes to their sorting. (Project on Github)
Feathers UI may be installed using the haxelib command in your terminal.
haxelib install feathersui
Be sure to take a look at the complete installation instructions for details about installing required dependencies, along with links to step-by-step tutorials for setting up your editor or IDE.
Everyone, I just want to say thank you again for your support. I'm looking forward to hearing what you think of the new Feathers UI so far. If you create anything with this build — even a simple prototype — I'd love it if you could share your experiences (and maybe a screenshot!).
I've created an official discussion thread in the forums. Head over there to leave a comment!