Enyo 2.0b2: Enyo 2 gets UI

We’re happy to announce the availability of Enyo 2.0b2! This release is all about UI — it includes an initial set of widgets for Enyo 2 and a layout library, along with incremental improvements to the Enyo core.

In keeping with the broad cross-platform vision for Enyo 2, we’ve aimed to make the new widgets and layout controls work in a wide range of desktop and mobile browsers, from IE 8 to iOS 5.

We’re excited about what we’re releasing today and hope you will be too. That said, the Enyo 2 UI layer is still very much a work in progress. We’re releasing it now in the spirit of open development, and look forward to getting your feedback.

Onyx

As we promised when we released Enyo 2 last month, we’ve been hard at work on a set of widgets. We originally set out to adapt the Enyo 1 widgets for use with Enyo 2, but we quickly determined that we could achieve better cross-platform compatibility and build a more solid foundation for the future by starting with a clean slate. The result is a new UI library for Enyo 2 called Onyx.

Despite the changes under the hood, you’ll find that Onyx is clearly an evolution of the Enyo 1 UI from a design point of view. This first Onyx release features a variety of commonly used widgets, including toolbars, text inputs, checkboxes, groups and multiple types of buttons. Onyx also includes a base Slideable control that you can use to implement views that slide back and forth between pre-defined positions, including on and off screen.

To get a feel for Onyx, check out the OnyxSampler example. Needless to say, we’re not done — we’ll be expanding the Onyx widget set as we go. You can expect at least one update in March, with more to follow.

Layout

Along with Onyx, we are also releasing a layout library for Enyo 2. This library will eventually provide a collection of layout functionality, but for now it’s focused on one thing: helping you create layouts that expand to fit available space — a common need for apps, but one that has historically been difficult to meet using web technologies.

The new FittableColumns and FittableRows controls let you define views whose children are arranged either horizontally or vertically. Within a given view, you can designate one child to expand and contract to fit the available space, while its siblings retain their natural or explicitly specified sizes. Fittable views can be nested as needed.

If you’re thinking that this sounds a lot like a limited version of the CSS Flexible Box Model, you’re right. Our main objective was to provide a layout model with capabilities similar to Flex Box, but with greater browser compatibility. We also wanted to impose as few limitations as possible on the CSS styling of child components, and to use JavaScript sparingly (we use it to calculate the height of fittable elements, but otherwise leave the layout work to the browser).

As much as we like them, we want to emphasize that you should only use FittableColumns and FittableRows when you need views to expand and contract to fit available space. If you simply want to arrange elements horizontally or vertically, you’re better off employing standard web layout techniques.

Check out the Fittable sample to see FittableColumns and FittableRows in action.

Fittable ColumnsFittable Rows

Enyo core

While Onyx and the new layout library are the highlights of the 2.0b2 release, we’ve also made some significant enhancements to the Enyo core. Most notably, we’ve:

  • Made some improvements to event handling — see this document for the details.
  • Added a set of unstyled base UI controls. These controls serve as the basis for the controls in Onyx, and can be used by alternative UI libraries as well.
  • Updated enyo.Scroller to improve performance on iOS and Android.

For details, read the Enyo 2.0b2 release notes.

Try it out

Enyo 2.0b2 is available for download today from the Enyo site, and we’ve also added GitHub repositories for Onyx and the new layout library.

We’d love to get your feedback and suggestions. As always, the Enyo forums are open for discussion, and you can file bug reports and requests in the appropriate issue trackers on GitHub.