Feathers UI v1.2 — Big performance boosts

Today, Feathers UI v1.2.0 is now officially available on Haxelib. This release includes a ton of great performance optimizations (especially for scrolling containers), support for the Haxe 4.3 compiler, and various bug fixes.

If you're not aware, Feathers UI is an open source framework of graphical user interface (GUI) 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!) all using the same Haxe codebase.

What's new in 1.2.0

This release doesn't include any new UI components. Instead, it focuses on impactful improvements to the existing implementations. Normally, this section includes screenshots and short descriptions of what's been added. This time, it include more of a deeper dive of Feathers UI internals. If you're interested in that, keep reading. If not, that's fine. Just update and enjoy the

Performance Improvements

The biggest focus for this release was on optimizing performance of the framework — both overall, and within individual components. Things like scrolling and other animations should be smoother, initialization of data-heavy components should complete faster, and Feathers UI apps should run better on lower end devices, especially on mobile and the web.

Here are a few things that should make things measurably faster:

  • Removed unecessary calls to setInvalid(), which means fewer duplicate component validations between rendering updates.
  • The code that determines when scroll bars are needed has been refactored to reduce the number of content measurement passes that are required before the final stable layout is ready.
  • Data containers, like ListView, won't call the update function on DisplayObjectRecycler as often. They now detect when the state object, like ListViewItemState, is unchanged, and they skip the function call when it's not required. Previously, that update function could be called multiple times for each item on container creation, and also every time the container scrolled.
  • List layouts have been optimized to better handle their item measurement cache, which means that item renderers don't need to be measured as often, and there is significantly less chance that all item renderers need to be thrown away and re-created from scratch.
  • It's now less expensive to call dataProvider.updateAt() or dataProvider.updateAll() to notify a data container of changes.

Warning! After updating to Feathers UI 1.2, may find that some item renderers are missing data, or they may display stale data. This is most likely not a bug in Feathers UI. It's likely that your code is missing a call to dataProvider.updateAt() or dataProvider.updateAll() after changing some variables used in DisplayObjectRecycler.update(). In previous versions, there were so many extra calls to DisplayObjectRecycler.update() that it could be easy to miss that the dataProvider.updateAt() and dataProvider.updateAll() calls were missing.

As a temporary workaround, if you don't have time to add calls to dataProvider.updateAt() or dataProvider.updateAll() right away, you can set listView.forceItemStateUpdate = true, and Feathers UI will restore the previous behavior that includes extra calls to DisplayObjectRecycler.update() (but you won't benefit from some of the performance improvements mentioned above). The new forceItemStateUpdate property may be deprecated and removed in a future version of Feathers UI, so if you enable this workaround, try to switch over to the proper calls to dataProvider.updateAt() or dataProvider.updateAll() as quickly as possible.

Haxe 4.3 support

For most targets, building Feathers UI projects with Haxe 4.3 should work without any changes. However, Haxe 4.3 adds some new deprecation warnings for @:extern and @:enum abstract that encourage the use of the proper keywords extern and enum instead. If you see these deprecation warnings when compiling your Feathers UI project, you should update to OpenFL 9.2.2 and Lime 8.0.2 or newer. A number of fixes for these warnings can be found in the updated versions of OpenFL and Lime.

If you're building an Adobe AIR app with Feathers UI, and you want to use Haxe 4.3, you'll be strictly required to update to Feathers UI 1.2.0, OpenFL 9.2.2, and Lime 8.0.2 or newer. While each version of the Haxe compiler ships with valid externs for Adobe AIR, OpenFL bundles some of its own customized AIR externs. Haxe 4.3 insists that getter/setter properties for AIR are written a certain way, so Lime, OpenFL, and Feathers UI all needed updates to produce valid code for AIR. If you're not targeting Adobe AIR, or if you're sticking with Haxe 4.0-4.2 a bit longer, this issue won't affect you.

Anything else?

  • A new feathersui_strict_set_invalid define may be declared to enable performance debugging. When using this define, a component will throw an exception if its setInvalid() method is called while the same component is validating. If you're developing a custom component or item renderer, this define can help you ensure that the component is optimized for better performance. Inside your update() function, use the new runWithInvalidationFlagsOnly() method to redirect setInvalid() calls to setInvalidationFlag() instead.
  • StackNavigator has a new popMultipleItems() method that allows you to go back in history to any position between popItem() and popToRootItem().
  • The Scroller class has a new, advanced applyLayoutShift() method that may be used by virtual layouts to prevent changes between estimated item size and real item size from causing sudden large jumps in scroll position.

Install Feathers UI v1.2.0

Feathers UI v1.2.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui 1.2.0

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.

Documentation

  • The Feathers UI Getting Started guide provides the most essential links for creating your first Feathers UI project. Start there to learn about all of the UI components, layouts, skins, and the many other features that are available in the framework.
  • The v1.2.0 API Reference includes descriptions of all classes, interfaces, enums, utility functions, and the various other APIs available to developers working with Feathers UI.

Community

How to help the project

Want to help new components get added and keep the servers running? Please contribute on Github Sponsors.

Questions or comments?

I've created an official v1.2.0 discussion thread in the community forums. Do you love one of the new features? Ran into a strange bug that wasn't in the last release? Head over there to leave a comment about this release!

Feathers UI v1.1 release for Haxe and OpenFL

Today, Feathers UI v1.1.0 is now officially available on Haxelib. This is the first update after the initial stable 1.0 release of the library. It includes a number of new features, and a variety of bug fixes for various components. There are no breaking changes, so everyone is encouraged to update!

If you're not aware, Feathers UI is an open source framework of graphical user interface (GUI) 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!) all using the same Haxe codebase.

What's new in 1.1.0

UI components

This update adds the new ActivityIndicator component, sometimes called a loading spinner. An activity indicator is meant to display indeterminate progress with a repeating animation. In other words, it shows that something is happening, but it doesn't necessarily indicate how long it might take. This component supports a new IIndeterminateSkin interface for creating skins with custom graphics and animations.

The HProgressBar and VProgressBar components have a new fillMode property that controls how the fillSkin appearance is adjusted when the progress bar's value changes. It defaults to ProgressBarFillMode.RESIZE, which matches the existing behavior in 1.0 – where the fillSkin width or height is adjusted. However, the new fillMode property supports two additional modes, ProgressBarFillMode.MASK and ProgressBarFillMode.SCROLL_RECT. Both of these modes keep the width or height of the fillSkin the same for all values, and instead, the width or height of a mask or scrollRect is adjusted. In other words, it crops the fill skin instead of stretching or squishing it.

Layouts

HorizontalLayout and VerticalLayout now support adding extra margins to specific items in the layout. Previously, you could set the gap property to specify a certain amount of spacing between all items. Now you can set the marginLeft and marginRight properties on HorizontalLayoutData, or you can set marginTop and marginBottom properties on VerticalLayoutData, to adjust the positioning between items in a more granular way.

Styles and skins

DonutSkin is a new shape skin that similar to CircleSkin, but it has an inner radius that is not filled (like a certain sugary baked good that it's named after).

FillStyle.Gradient and LineStyle.Gradient now have more ways to specify the transformation of the gradient box. Previously, you could pass in a pre-created openfl.geom.Matrix, or you could pass in a Float value representing the rotation of the gradient in radians. These were somewhat limited compared to the parameters on createGradientBox(), though. The full Matrix couldn't be adjusted later if the skin width or height changed, x/y translation wasn't supported on its own, nor was it supported in combination with rotation. It would also be nice to be able to choose between degress and radians, right? The new GradientBoxTransform enum provides a number of transformation options, including:

New samples

This update includes two new sample projects to demonstrate how to use certain features of Feathers UI.

For complete details about what's new in this build, check out the v1.1.0 CHANGELOG.

Install Feathers UI v1.1.0

Feathers UI v1.1.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui 1.1.0

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.

Documentation

  • The Feathers UI Getting Started guide provides the most essential links for creating your first Feathers UI project. Start there to learn about all of the UI components, layouts, skins, and the many other features that are available in the framework.
  • The v1.1.0 API Reference includes descriptions of all classes, interfaces, enums, utility functions, and the various other APIs available to developers working with Feathers UI.

Community

How to help the project

Want to help new components get added and keep the servers running? Please contribute on Github Sponsors.

Questions or comments?

I've created an official v1.1.0 discussion thread in the community forums. Do you love one of the new features? Ran into a strange bug that wasn't in the last release? Head over there to leave a comment about this release!

What a journey! The conclusion of Feathers UI v1.0 Release Week

We've finally reached the conclusion of what I've been calling Feathers UI Release Week. In fact, it's been two full weeks of celebration. It all started out with the big release of Feathers UI v1.0, a cross platform GUI library for creative frontend projects, built on Haxe and OpenFL. Then, I released a total of nine new open source projects/repos to support not only Feathers UI, but also the wider OpenFL ecosystem.

Want to check out those new open source projects? Here's a summary:

  • AMF I/O is a library that aims to be the best and most complete implementation of the AMF (Action Message Format) specification for OpenFL. It also supports reading and writing Flash local shared object files.
  • Lime and OpenFL Plugin for Maven makes it possible to build OpenFL and Feathers UI projects with Maven, a popular build tool in the Java ecosystem.
  • RPC Services provides Remote Object and HTTP services, ported from Apache Flex and Royale. It uses the previously mentioned AMF I/O library as the basis for its RemoteObject implementation, which allows server and client to share the same typed objects.
  • OpenFL Loader for Webpack makes it possible to bundle OpenFL HTML/JS projects using the popular Webpack build tool from the JS/web ecosystem. Supports tree shaking and code splitting with the Haxe Genes library to dynamically load modules at runtime.
  • Cairngorm for Feathers UI provides an MVC microarchitecture for organizing and maintaining large scale applications.
  • OpenFL Plugin for Vite allows bundling OpenFL HTML/JS projects using the relatively new Vite build tool from the JS/web ecosystem. Similar to the Webpack loader, it supports code splitting, tree shaking, and dynamic module loading.
  • PureMVC Demos for Feathers UI and OpenFL provides several demo projects that show how to use Feathers UI with the PureMVC framework.
  • Form Validators for Feathers UI offers several form validation classes for numbers, dates, email address, zip codes, currency, phone numbers, string length, and more.
  • String Formatters for Feathers UI makes it possible to format numbers, dates, zip codes, and currency as strings with appropriate separators/delimiters.

It's been quite a journey, and I'd like to thank everyone who has supported the project over the last few years as I converted from AS3/Starling to Haxe/OpenFL. Now, I guess it's time to start planning the next exciting release…

String Formatters 1.0 for Feathers UI

Today, I'm happy to introduce version 1.0 of the new feathersui-formatters open source project, which is a port of the string formatting classes from Apache Flex (formerly Adobe Flex) to Feathers UI, Haxe and OpenFL.

This is the newest of multiple projects that I'll be releasing as part of the Feathers UI v1.0 release week celebration.

The following formatter classes are included in the library:

  • CurrencyFormatter formats a numeric monetary value, including the currency symbol (such as $ or ) and appropriate precision for things like cents/pence.
  • DateFormatter formats a date string with a specific pattern.
  • NumberFormatter formats a numeric value, including support for thousands separator, decimal separator, precision, and negative values.
  • PhoneFormatter formats a phone number with the appropriate separators/delimiters.
  • ZipCodeFormatter formats a US or Canadian postal code.

Install String Formatters v1.0.0 for Feathers UI

Form Validators v1.0.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui-formatters 1.0.0

Documentation

The v1.0.0 API Reference includes descriptions of all APIs available in Form Validators for Feathers UI.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in the Feathers UI Community forum.

Form Validators 1.0 for Feathers UI

Today, I'm happy to introduce version 1.0 of the new feathersui-validators open source project, which is a port of the form validation classes from Apache Flex (formerly Adobe Flex) to Feathers UI, Haxe and OpenFL.

This is the newest of multiple projects that I'll be releasing as part of the Feathers UI v1.0 release week celebration.

The following validator classes are included in the library:

  • CreditCardValidator verifies Visa, MasterCard, AMEX, Discover, and Diner's Card numbers.
  • CurrencyValidator validates the formatting of a numeric monetary value, including the currency symbol (such as $ or ) and appropriate precision for things like cents/pence.
  • DateValidator validates a date value, including month, day, and year, to ensure that all parts are in the correct ranges and the specified formatting order.
  • EmailValidator validates an email address.
  • NumberValidator validates a numeric value, including support for thousands separator, decimal separator, precision, and negative values.
  • PhoneNumberValidator validates 10 digit phone numbers, including formatting characters.
  • RegExpValidator is the most versitile, allowing the custom validation using regular expressions.
  • SocialSecurityValidator validates the formatting of a US social security number.
  • StringValidator ensures that a string meets minium and maximum length requirements.
  • ZipCodeValidator validates US and Canadian postal codes (and it can optionally allow both at the same time).

All validators have the option to make a value required, or to optionally allow an empty value.

Install Form Validators v1.0.0 for Feathers UI

Form Validators v1.0.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui-validators 1.0.0

Documentation

The v1.0.0 API Reference includes descriptions of all APIs available in Form Validators for Feathers UI.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in the Feathers UI Community forum.

PureMVC demos for Feathers UI and OpenFL

PureMVC is an architectural framework built using Model-View-Controller and other software design patterns — and you can use it with most popular programming languages (including Haxe, of course). A team of application developers can use PureMVC to better organize their code, separate concerns, and improve their project's scaleabilty and maintainability.

A Haxe version of PureMVC has been around for many years already, so I didn't need to port it myself, like I did recently with the Cairngorm MVC framework. With that in mind, I instead focused on creating several example projects that demonstrate how to use PureMVC specifically with Feathers UI and OpenFL.

This is just one of many projects/repositories that I'm releasing as part of the Feathers UI v1.0 release week celebration.

The repository currently contains four demos:

  • App Skeleton demonstrates a startup process for a PureMVC-based application that displays a splash screen with a progress bar that loads several resources.
  • Cafe Townsend recreates the Cafe Townsend sample from the Cairngorm MVC framework to allow developers to more easily compare PureMVC to Cairngorm.
  • TodoMVC demonstrates how to create the classic TodoMVC project.
  • Hello OpenFL demonstrates how to use PureMVC with OpenFL alone (no Feathers UI).

Install PureMVC

PureMVC may be installed using the haxelib install command in your terminal. The following command installs the "standard" version.

haxelib install puremvc-standard

Documentation

The PureMVC API Reference includes descriptions of all APIs available in PureMVC.

Questions or comments?

If you need some help implementing PureMVC with Feathers UI or OpenFL, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.

OpenFL Plugin for Vite 1.0

Vite is a relatively new build tool in the JavaScript and web ecosystem that's growing in popularity, and organizations that use Vite may want to integrate an OpenFL or Feathers UI frontend into their existing build process. With that in mind, today, I'm releasing a new OpenFL Plugin for Vite.

This is just one of many projects that I'm releasing as part of the Feathers UI v1.0 release week celebration.

Haxe and OpenFL already bundle all of the generated JavaScript into a single minified file already, so why would you want to use Vite? (or Webpack?)

  • In an organization already making heavy use of Vite, it is helpful if there's a way to integrate OpenFL into common workflows.
  • The Vite ecosystem offers a ton of plugins to process and enhance JavaScript, HTML, and CSS files. These tools make it possible to go beyond the default capabilities of the Haxe compiler when targeting the web.
  • Many modern teams have switched to JS modules, which are enhanced by some of Vite's more advanced capabilities, like code splitting and tree shaking. With Haxe, you can use a library like Genes to modify the output of the compiler to generate JS modules instead of a classic script — allowing you to take advantage of everything that Vite has to offer.

Using vite-plugin-openfl v1.0.0

You need to install a few npm dependencies and then configure the plugin in your vite.config.js file. Then, build normally with Vite.

First, install dependencies from npm:

npm install --save-dev vite vite-plugin-openfl

Then, configure your a vite.config.js file to use vite-plugin-openfl:

import { defineConfig } from "vite";
import openflPlugin from "vite-plugin-openfl";

export default defineConfig({
  plugins: [openflPlugin()],
});

Additionally, there are a couple of sample projects on Github to help you get started. The basic project uses the default output from the Haxe compiler, and the genes project uses Genes to generate JS modules and load a code-split module at runtime. There's also a rollup project sample that demonstrates how to uses the plugin with Rollup instead of Vite (Vite and Rollup have similar APIs, and plugins can be made compatible with both).

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.

Cairngorm 1.0 MVC framework for Feathers UI

Today, I'm happy to introduce version 1.0 of the new feathersui-cairngorm open source project, which is a port of the Cairngorm MVC framework from Apache Flex (formerly Adobe Flex) to Feathers UI, Haxe and OpenFL.

This is the newest of multiple projects that I'll be releasing as part of the Feathers UI v1.0 release week celebration.

The original Cairngorm was a very popular MVC microarchitecture for Adobe Flex and ActionScript application development, and it was created by Alistair McLeod and Steven Webster of the company iteration::two. They conceived Cairngorm from their experiences building large, enterprise-scale web applications — which have their own unique and special architectural and maintainability considerations compared to smaller projects.

Cairngorm powered the codebases of hundreds of intranet applications running in major corporations around the world. Many different design-pattern-based MVC, IoC, and other types of architectural frameworks followed in Cairngorm's footsteps, but Cairngorm was the O.G. for many Flex developers.

Some organizations still have Flex apps running that need to migrate to another technology. Many have probably become desktop apps with Adobe AIR these days, or they might even still require Flash Player in a VM. For those who have been putting off the move away from Flex, I hope that this port of the Cairngorm MVC framework for Feathers UI and OpenFL will help. Even if you're building all new applications with Feathers UI, you might want to consider Cairngorm as an option for organizing your project's code.

Getting started with feathersui-cairngorm

Check out the README.md file for an overview of the classes and interfaces that make up the core of Cairngorm, such as IModelLocator, FrontController, ICommand, ServiceLocator, CairngormEventDispatcher and CairngormEvent.

Follow that up by diving into the sample projects on Github to see how all of the pieces get assembled together. The cafe-townsend project is a classic Cairngorm example designed to help developers learn the framework. The todomvc project project is another good one to look at because you can compare it to the Feathers UI todomvc sample that doesn't use a framework.

Install Cairngorm v1.0.0 for Feathers UI

Cairngorm v1.0.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui-cairngorm 1.0.0

Documentation

The v1.0.0 API Reference includes descriptions of all APIs available in Cairngorm for Feathers UI.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in the Feathers UI Community forum.

Webpack OpenFL Loader 1.0

Webpack is a very popular build tool in the JavaScript and web ecosystem, and organizations that use Webpack may want to integrate an OpenFL or Feathers UI frontend into their existing build process. With that in mind, today, I'm releasing a new Webpack OpenFL Loader.

This is just one of many projects that I'm releasing as part of the Feathers UI v1.0 release week celebration.

Haxe and OpenFL already bundle all of the generated JavaScript into a single minified file already, so why would you want to use Webpack? (or Vite?)

  • In an organization already making heavy use of Webpack, it is helpful if there's a way to integrate OpenFL into common workflows.
  • The Webpack ecosystem offers a ton of plugins and loaders to process and enhance JavaScript, HTML, and CSS files. These tools make it possible to go beyond the default capabilities of the Haxe compiler when targeting the web.
  • Many modern teams have switched to JS modules, which are enhanced by some of Webpack's more advanced capabilities, like code splitting and tree shaking. With Haxe, you can use a library like Genes to modify the output of the compiler to generate JS modules instead of a classic script — allowing you to take advantage of everything that Webpack has to offer.

Using webpack-openfl-loader v1.0.0

See the project README.md for complete details, but basically, you need to install a few npm dependencies and then configure the loader in your webpack.config.js file. Then, build normally with Webpack.

First, install dependencies from npm:

npm install --save-dev webpack-cli webpack-dev-server openfl-loader

Then, configure your a webpack.config.js file to indicate that your OpenFL project.xml is the entry point and should be handled by openfl-loader:

module.exports = {
  entry: "./project.xml",
  output: {
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\/project\.xml$/,
        use: [
          {
            loader: "openfl-loader",
          },
        ],
      },
    ],
  },
};

Again, check the README.md for more details. Additionally, there are a couple of sample projects on Github to help you get started. The basic project uses the default output from the Haxe compiler, and the genes project uses Genes to generate JS modules and load a code-split module at runtime.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.

RPC Services 1.0 for Feathers UI

Today, I'm happy to introduce version 1.0 of the new feathersui-rpc-services open source project, which is a port of the RPC service classes from Apache Flex (formerly Adobe Flex) to Feathers UI, Haxe and OpenFL. The available service classes include RemoteObject and HTTPService.

This is the newest of multiple projects that I'll be releasing as part of the Feathers UI v1.0 release week celebration.

RemoteObject sends and loads typed objects using AMF (Action Message Format). This service enables developers to transfer data using the same types on both server and client. This feature is powered by the amfio library that I released earlier this week.

HTTPService can load various data formats from a server, similar to OpenFL's URLLoader class. Supported formats include JSON, XML, and URL query strings. These formats are automatically converted from strings into appropriate types, saving a manual parsing step. JSON is converted to an anonymous structure with haxe.Json.parse(). An URL query string is also converted into an anonymous structure, and each variable becomes a field. Finally, XML data can be automatically parsed into one of multiple types. Of course, that includes haxe.Xml. However, if the XML is formatted in a particular way, it can be converted into an anonymous structure or an array as well.

Install RPC Services v1.0.0

RPC Services v1.0.0 may be installed using the haxelib install command in your terminal.

haxelib install feathersui-rpc-services 1.0.0

Documentation

The v1.0.0 API Reference includes descriptions of all APIs available in Feathers UI RPC Services.

Questions or comments?

If you need some help, or want to give feedback, feel free to create a thread in either the Feathers UI Community forum or the OpenFL Community forum.