Skip to content

3.0.0-rc1

Pre-release
Pre-release

Choose a tag to compare

View all tags
@tbuschto tbuschto released this 09 May 10:21
· 384 commits to master since this release
v3.0.0-rc1
34cfe99

General

App

The new read-only property debugBuild can be queried to find out if the app is build in debug mode or release mode as given by the Tabris.js CLI to the tabris build command.

UI

CollectionView

The CollectionView no longer provides a select event as it worked unreliable across platforms. Interactions with a cell have to be handled directly by listeners attached to the cell. The new method itemIndex(cell) may be used to determine the index associated with a cell:

collectionView.createCell = () => {
  const cell = new SomeWidget();
  cell.onTap(() => {
    const index = cell.parent(CollectionView).itemIndex(cell);
    // do something with the item...
  });
  return cell;
}

The method cellByItemIndex(index) was added to allow the reverse - getting the cell widget currently associated with the given index. Can be null when the cell at the given index is currently not displayed.

TextInput

On Android the TextInput appearance can now be customized via the new properties style, and floatMessage. The new properties allow to support the design style guide outlined in the material design specs.

Picker

The Picker now allows to show an empty state. This unselected state can be filled with a new message text property similar to a TextInput. The empty state has the selectionIndex of -1. Setting the selectionIndex to -1 reverts to the empty state and shows the message if available.

On Android the Picker can now be customized via the new properties style, and floatMessage similarly to the new properties introduced on TextInput.

With the introduction of the new style property on Picker, the iOS only property fillColor became redundant and was removed. Previously the fillColor was required to separate the Android underline colorization from the ios picker background color. Setting the Picker style to underline on Android now ignores the background and only applies the borderColor property.

In addition the font property (previously available on Widget in Tabris.js 2.x) has now been added on the Picker explicitly. It changed the appearance of the text shown in the Picker box.

ScrollView

The ScrollView adds the properties scrollXState and scrollYState which indicate whether the view is currently, dragging, scrolling or in a resting position. Matching change events are available to observe these state changes while in motion.

StackLayout and StackComposite

The StackComposite widget introduced in 3.0.0-beta2 was renamed to just Stack and now respects the layoutData of its children. Details can be found in the revised Layout documentation.

TabFolder

The TabFolder has a new property selectionIndex to set the active Tab without having an instance of it. This is especially useful when using JSX where the Tab children are created declaratively and no instance is immediately available.

The badge and badgeColor property are now also supported on Android. The expected type of the badge is now a number instead of a string.

Widget

The padding property is now available on all widgets, not just Composite. It also supports shorthand syntax like [1, 10, 4, 8], '1 10 4 8' or simply 16, in place of {top: 1, right: 10, bottom: 4, left: 8}.

The layoutData preset "fill" was renamed "stretch" and presets "stretchX" and "stretchY" have been added.

A new property excludeFromLayout was added that can be set to true to make the widget not just invisible (like visible = false) but to also make the layout behave as though the widget does not exist. That way there is no empty space where the widget would have been displayed.

The new property absoluteBounds provides widget bounds relative to the tabris.contentView instead of the direct parent like bounds does.

tabris.ui

The tabris.ui object which was already deprecated is now completely removed.

TextView

The TextView alignment value 'center' was renamed to 'centerX'.

AlertDialog

The AlertDialog property texts has been replaced with a ContentView object. Any TextInput instances are appended to it. The ContentViews layout can not be changed and it will position to TextInput objects from top to bottom, similar to replaced texts property.

NavigationView and Actions

Removed properties placementPriority from Action and navigationAction from NavigationView: These properties are replaced by a new property placement on the Action widget. It accepts the values 'default' (same as placementPriority = 'normal'), 'overflow' (same as a placementPriority = 'low') and 'navigation', which puts the action in the place usually reserved by the drawer icon.

Selector API

Introduced global function $() as an alias for tabris.contentView.find(). This especially makes small snippets more readable.

On WidgetCollection the new only() method works like first(), but throws if there is more than one match. It's therefore more secure than first() when selecting a single widget.

The parent() method now also takes a selector, returning the nearest parent that matches.

Removed method find() due to its ambiguous nature. This does not affect composite.find() which still exists.

JSX Stateless Functional Components (i.e. factories) can now be used as selectors, just like widget constructors can.

JSX

All popups now support JSX, i.e. Popover, DateDialog and TimeDialog, in addition to the already supported AlertDialog.

Markup elements: JSX elements can now directly contain tags like <b> and <i>.

Element <$>: This is a globally available element that may be used to group widgets (instead of <WidgetCollection>). It can also contain text, in which case it returns a string.

Almost all layout properties (e.g. left, top, centerY...) now accept true as an alias (usually for 0) which allows a shorter syntax in JSX, e.g. <TextView centerY> instead of <TextView centerY={0}>.

All layoutData preset values ('center', 'stretch', 'centerX', 'stretchY') can now be used as JSX shorthands, e.g. <TextView stretchY> instead of <TextView layoutData='stretchY'>.

TypeScript

Widgets TabFolder, NavigationView and CollectionView are now generic, allowing to narrow down the type of accepted children. The feature already existed on Composite.

The pseudo-property "jsxProperties" that is used to define which JSX attributes are supported in .tsx files was renamed to "jsxAttributes". However, due to changes in the type declaration files of tabris this property should rarely be needed anyway.

Developer Experience

Most Developers Guide articles have been re-written for clarity, links fixed, code examples and images added.

Various internal/low-level APIs have been documented for better extendability/hackability.

The tabris module now includes a sub-module 'ClientMock' that can be used to initialize the tabris module outside of a native Tabris environment, e.g. in node. When generating a new (compiled) Tabris 3.x project via the Tabris CLI (or the yeoman generator) the option to generate such a test setup based on mocha is given. This feature is not yet documented in the developers guide.

The global $() method can be used in the developer console (or CLI with interactive mode) to access any widget (or NativeObject) via its cid number. The cid is usually given in log messages/warning.

Assets 2
Loading