Fuse (beta) release 0.8.0

General
1

Highlights

  • Support for native iOS and Android UI controls in UX markup
  • Fuse Inspector lets you tweak values without refreshing the whole app
  • Fuse Monitor, a common place to find all output from preview
  • Fuse Dashboard, makes it easy to nativagate your Fuse projects
  • On OSX: experimental Sketch importer for Fuse
  • Tons of minor fixes and improvements.

Backwards compatibility

To make your existing projects work with Fuse 0.8.0, you have to add the following to the list of Packages in your .unoproj file:

"Fuse.Android",
"Fuse.Desktop",
"Fuse.iOS",

UX Markup Changes

X,Y, Offset

  • Element gains an X, and Y property which replace the old Offset property. If X is specified it sets the default horizontal alignment to Left and then offsets from that alignment. If Y is specified it sets the default vertical alignment to Left and then offsets from that alignment.
  • The Offset property still offets but no longer modifies the alignment, thus stretching can still be used. To migrate either replace Offset with X and Y or set Alignment="TopLeft".

Grid Columns and Rows

  • Renamed properties on Grid and GridLayout: ColumnData -> Columns and RowData -> Rows. The old Rows and Columns (which are only used in Uno code) are now called RowList and ColumnList respectively.

To migrate, change:

<Grid RowData="1,2" ColumnData="100px,auto">

To:

<Grid Rows="1,2" Columns="100px,auto">

Native Controls

  • An <App> without a theme tag implied a Basic theme previously, but now it implies an “empty” theme. Add Theme="Basic" to your App, and include the Fuse.BasicTheme package in your project to get the basic theme.
  • To enable native UI controls on iOS and android use <App Theme="Native" />. To be able to work desktop preview while using native themes, use Theme="NativeWithFallback"

Misc

  • Fuse.Elements.ImageElement removed. Use the high-level Image to wrap native/graphics images.
  • The hit test for Image is now strictly within the visible image, not the empty area in the control, in cases where the image does not fill the control entirely.
  • Fuse.Shapes is no longer part of the standard namespaces. Circle and Rectangle are now controls in Fuse.Controls.
  • WhileSliding has been replaced with the more generic WhileInteracting.
  • ScrollViewer renamed ScrollView.
  • ScrollView.Behavior removed. You can use the KeepFocusInView and UserScroll properties directly. If you need a scroll view that doesn’t have standard behavior you’ll have to create a style that doesn’t add that behavior.
  • IScrollable has been removed. A Scroller must be rooted inside a ScrollView.
  • BasicTheme Button no longer sets the style of all text contained within, only the ButtonText has a style now. If you were using Text inside a button you can use ButtonText instead.
  • Many of the basic controls are now derived from Panel, making it even more important you never style panel. If you need a custom panel type then create one with <Panel ux:Class="MyPanel"/> and apply a style to that panel.
  • Node.LayoutRole made a style property of Layout since that is the only node in which it applies (used by Layout)
  • Fuse.LayoutRole moved to Fuse.Layouts.LayoutRole
  • Control.VisualTree has been removed. Several controls, like ScrollView derive now from ContentControl which exposes Content. This likely doesn’t require any code change, but if you were using VisualTree in a custom control, you must now use ContentControl and the Content property.
  • Control.Overlays has been removed. You can use Layer="Overlay" on a panel instead now (from which most controls are derived). A few controls, like ScrollView no longer have multiple children, and thus must be placed inside a Panel if you need an overlay or background.
  • Control.OnHitTestControlChildren has been removed, just use OnHitTestChildren.

BottomBarBackground and StatusBarBackground renamed

BottomBarBackground and StatusBarBackground are now deprecated (but still works) in favor of the more consistently-named BottomFrameBackground and TopFrameBackground.

The API’s for both are exactly the same as before.

HitTest changes (Uno)

  • If you override a HitTest... function you must override the matching HitTest...Bounds function and produce an appropriate bounds, otherwise hit test clipping will prevent the node from getting events.
  • IViewport.PixelToWorldRay is replaced with IViewport.PointToWorldRay since point space is more common. Divide by PointDensity to calculate in pixel space (not valid in all situations).
  • Hit test clipping is now based on HitTestBounds and not the RenderBounds of controls. If you have a custom control that doesn’t seem to get messages add a custom HitTestLocalBounds definition. Standard controls should all respond correctly.

FuseJS

  • Storage: Added deleteSync, writeSync and readSync.
  • Fetch and FetchJson are deprecated, use the browser based fetch (lowercase ‘f’) API instead.
  • Added optional parameter to NativeEvent to decide if events should be queued before the handler is set.
  • Added localStorage web api shim.
  • Added setInterval.
2

There is a known bug in this release: Selection in sublime is not working, which means you don’t get in-preview visual cues / highlighting of the UX tags and the inspector will not show any properties.

We are working hard on a new release which fixes this and a few smaller issues.