API Changes from 2.0 to 3.0

This page contains a list of the features, APIs, and etc. that have changed in Infusion 3.0.

Framework Changes

Core Framework Changes

This section describes major APIs that were in common use. For information about less widely-used features removed in 3.0, consult Deprecations in 2.0.

DataSources

A new facility for representing sources or sinks of data as Infusion components has been implemented as DataSources. Implementing grades derived from fluid.dataSource allows the process of reading and writing data, e.g. from HTTP URLs, databases, and the filesystem, to be configured as an open pipeline of asynchronous transformations.

Note that the scheme for configuring writable variants of datasource components has changed with respect to some previous development releases of Infusion, including several labelled as 3.0.0-dev and 4.0.0-dev releases, as well as for some DataSources implemented in Kettle versions 1.x from which the DataSource implementation was originally ported. Under this older system, the writable variant of a dataSource was automatically configured by a grade linkage similar to

fluid.makeGradeLinkage("kettle.dataSource.CouchDB.linkage", ["fluid.dataSource.writable", "kettle.dataSource.CouchDB"], "kettle.dataSource.CouchDB.writable");

which contributed a concrete writable implementation of a DataSource reacting to the co-occurrence of the base, read-only grade, e.g. kettle.dataSource.CouchDB and the abstract grade fluid.dataSource.writable.

The method of configuring writable DataSources in the final 3.0.0 Infusion release is harmonised with that occurring in 2.x versions of Kettle and involves implementing a boolean flag option named writable and alongside it a string-valued option writableGrade holding the name of the concrete writable variant of the grade, e.g.

    writableGrade: "fluid.dataSource.URL.writable"

See the documentation on implementing a DataSource for more details.

Model Transformations

• fluid.transforms.round can take in scale and method options for rounding numbers to a decimal value. Additionally, numbers round away from 0 (i.e 0.5 -> 1, -0.5 -> -1).
• fluid.transforms.valueMapper takes an defaultInput option to provide the model data directly. This also provides a location for adding nested transformations.

Fluid Document

fluid.focus and fluid.blur now return an ES6 promise resolved when the related DOM event fires. In Infusion 2.0, they would immediately return the node that the event was bound to.

Preferences Framework

Model Changes

Reset

By default, reset will only reset the preferences model path. Other model values will remain unchanged. If you'd like to also have these paths changed, add a listener to the beforeReset event to execute a fireChangeRequest for the model paths you need to reset. (See: ArrowScrolling.js)

listeners: {
    "beforeReset.resetPanelIndex": {
        listener: "{that}.applier.fireChangeRequest",
        args: {path: "panelIndex", value: 0, type: "ADD", source: "reset"}
    }
}

Model Paths

A prefsEditor is configured with the fluid.remoteModelComponent grade. This adds a local and remote model path for managing model changes between the component and those stored elsewhere. Any model value that should be persisted must be relayed into the local model path.

Any prefsEditor using the fluid.prefs.arrowScrolling grade, such as the one contained in fluid.prefs.separatedPanel, will contain the following new model paths.

Preference Map

The keyword "default" was used to setup a model relay between an internal model and the preferences state. If no existing preference was stored, the value was taken from the "default" property of the related primary schema. The keyword has been changed to "value".

In 2.0

{
    "preferenceMap": {
        "fluid.prefs.tableOfContents": {
            "model.toc": "default"
        }
    }
}

In 3.0

{
    "preferenceMap": {
        "fluid.prefs.tableOfContents": {
            "model.toc": "value"
        }
    }
}

Preference Editor

Selectors

The panels selector, by default .flc-prefsEditor-panel, is used to find all panel containers within the preference editor. The mobile presentation of UIO makes use of this to determine which panel is in view.

UI Options / Separated Panel

In 2.0

<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
    <!-- This div is for the sliding panel that shows and hides the Preference Editor controls -->
    <div class="fl-panelBar">
        <span class="fl-prefsEditor-buttons">
            <button id="reset" class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
            <button id="show-hide" class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
        </span>
    </div>
</div>
<!-- END markup for Preference Editor -->

In 3.0

<!-- BEGIN markup for Preference Editor -->
<div class="flc-prefsEditor-separatedPanel fl-prefsEditor-separatedPanel">
    <!--
        This div is for the sliding panel bar that shows and hides the Preference Editor controls in the mobile view.
        A separate panel bar for mobile displays is needed to preserve the correct tab order.
    -->
    <div class="fl-panelBar fl-panelBar-smallScreen">
        <span class="fl-prefsEditor-buttons">
            <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
            <button class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
        </span>
    </div>

    <!-- This is the div that will contain the Preference Editor component -->
    <div class="flc-slidingPanel-panel flc-prefsEditor-iframe"></div>

    <!--
        This div is for the sliding panel bar that shows and hides the Preference Editor controls in the desktop view.
        A separate panel bar for desktop displays is needed to preserve the correct tab order.
    -->
    <div class="fl-panelBar fl-panelBar-wideScreen">
        <span class="fl-prefsEditor-buttons">
            <button class="flc-slidingPanel-toggleButton fl-prefsEditor-showHide">
                Show/Hide
            </button>
            <button class="flc-prefsEditor-reset fl-prefsEditor-reset">
                <span class="fl-icon-undo"></span>
                Reset
            </button>
        </span>
    </div>
</div>
<!-- END markup for Preference Editor -->

Panel Changes

Selectors

All panels must supply a header selector, by default .flc-prefsEditor-header. This will be used by the fluid.prefs.arrowScrolling grade to provide the clickable arrows for navigating between adjusters in the small screen responsive view.

Contrast

The "Contrast" panel was refactored to be based off of the fluid.prefs.panel.themePicker grade.

Selectors

Message Bundle Changes

Line Spacing

The "Line Spacing" panel was refactored to be based off of the fluid.prefs.panel.stepperAdjuster grade.

Model Changes

Message Bundle Changes

Links and Buttons

The "Links and Buttons" adjusters and enactors are collapsed to a single preference called "Enhance Inputs".

Model Changes

Message Bundle Changes

Table of Contents

The table of contents panel was refactored to be based off of the fluid.prefs.panel.switchAdjuster grade.

Model Changes

Message Bundle Changes

Text Size

The text size panel was refactored to be based off of the fluid.prefs.panel.stepperAdjuster grade.

Model Changes

Message Bundle Changes

Text to Speech

The text to speech panel was refactored to be based off of the fluid.prefs.panel.switchAdjuster grade.

Model Changes

Message Bundle Changes

Store Changes

The fluid.prefs.store grade has been refactored to use fluid.dataSource as its base grade.

Primary Schema Changes

Component API Changes

Reorderer Component

• The stylisticOffset selector was no longer in use and has been removed.

Tabs Component

The fluid.tabs component has been removed.

Textfield Slider

Removed the jQuery UI Slider, in favour of using a native HTML5 range input.