Skip to content

Version 3.3.0
Compare
Choose a tag to compare
@tbuschto tbuschto released this 27 Jan 10:53
· 229 commits to master since this release
v3.3.0
dd04b13

UI

Widget "Row" and Layout "RowLayout"

These are exact analogues to the existing Stack widget and StackLayout.

The Row widget is a composite that is automatically arranges its children in one horizontal line, like a single-row table. The corrosponding layout manager RowLayout may also be used on Composite, Canvas, Page and Tab via their layout property.

The default vertical layout of each child is controlled by the alignment property which can be set to 'top', 'bottom', 'centerY', 'stretchY' or 'baseline'. Individual child elements can be layouted different from the default via their own layout properties.

A very simple example:

<Row alignment='top' padding={4} spacing={24} >
  <TextView>lorem</TextView>
  <TextView>ipsum dolor</TextView>
  <TextView>sit amet</TextView>
</Row>

A more elaborate example can be found here.

Canvas Method "toBlob"

This new method on the Canvas widget creates a Blob object containing the image drawn on the canvas as a compressed image file. This can be a JPEG, PNG or WebP file. (WebP is only supported on Android).

It's really simple to use:

canvas.toBlob(blob => doSomething(blob), 'image/jpeg');

The resulting image may be written to disk via the fs service or sent to a server via fetch(). It can also be set on any widget property that supports the ImageValue type.

Function "createImageBitmap" supports Canvas instances

The createImageBitmap() method can now create ImageBitmap instances from a Canvas instance. This recommended over canvas.toBlob() if the image is only used as an ImageValue on some widget and no access to the raw data is needed.

Button property "autoCapitalize"

The new property autoCapitalize controls how the button text is capitalized with the following options:

  • 'default' - The platform decides on the capitalization
  • 'none' - The text is displayed unaltered
  • 'all' - Every letter is capitalized

Data Binding

New Components "ListView" and "ItemPicker"

ListView is an extension of CollectionView that adds high-level convinience API suitable for data binding. The ItemPicker does the same for Picker. Both provide an items property that take instance of List, which is provided by the tabris-decorators module. List features a subset of the standard Array interface, but unlike arrays it can be observed. This means any change to the list is immediately applied to the widget. In case of ListView the change is even animated. Scoll position (for ListView) and selection state (for ItemPicker) are preserved if possible.

The items properties also accept arrays, but in that case changes are not tracked. Instead of modifying the array the property needs to be set to a new array instance.

Both widgets also feature new selection API that directly provide the selected item value instead of just a selection index. Callbacks are not needed anymore either, meaning ListView and ItemPicker can now be more conviniently created in JSX. To do so the <ListView> element needs to contain a<Cell> element which is duplicated as often as needed. Multiple <Cell> elements may be given to display different item types.

Example:

      <ListView stretch items={generate(20)}>
        <Cell padding={8} height={52}>
          <TextView centerY template-text='The color of ${item.text}:' font='24px'/>
          <Composite  stretchY left='prev() 24' width={80} bind-background='item.color'/>
        </Cell>
      </ListView>

Services

Event "keyPress"

On app there now is a keyPress event fired when a hardware key is pressed. Note that these events stem from physical hardware, not from the virtual keyboard. The event object provides the keys' character, keycode and various meta data. The events prevendDefault() method can be used to prevent the default action of the key so the application may define it's own behavior.

Service "sizeMeasurement"

This is a service object that can measure the size of a given text in device independent pixel (DIP). Both synchroneous and asynchroneous API is available.

Other

New CLI "serve" options

The tabris serve command has some minor new features:

  • The --external option allows to define an URL as the only availble external address, which will then also be encoded in the QR code.
  • The --port option allows to define the actual port of the HTTP server so it matches the one given via --external.
  • With the --no-intro option the QR code is not printed to the console. However, the QR code is now always available on the HTML site served by the CLI on the default URL with no path. So if the CLI runs on port 8080, entering http://localhost:8080 in a browser will still display the code.

Repository "tabris-decorators" supports GitPod

GitPod is an online IDE that can instantly provide a ready-to-code dev environment for any GitHub repository. Thanks to the CLI updates mentioned above it is now possible to side-load a tabris project in the developer app directly from a running GitPod instance.

The "tabris-decorators" repository has been pre-configured for this use case. Upon opening the repository in GitPod a script will launch that install the tabris CLI and print a list of available examples that can be launched via npm start <example>. It is also possible to directly launch a specific example using a custom URL. For the example labeled-input this would be:

https://gitpod.io/#example=labeled-input/https://github.com/eclipsesource/tabris-decorators/tree/master/examples/labeled-input

Assets 2
Loading