Mixing

Ashera provides cross platform widgets which can mixed and matched.

Example

For example, TextView in android can be mapped to either UITextView or UILabel in ios. This is achieved using widget-override attribute in xml. In ts file, we can use ts-mixer to mix the widgets so that we can access functions on both widgets.

<TextView
    style="@style/h2_bold_black"
    widget-override-ios="ASUITextViewLabel"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="10.23" />

The above example shows where a TextView in android is matched with ASUITextViewLabel rather than ASUILabel.

The mixing of the two widgets at ts level is shown below:

import "reflect-metadata";
import 'babel-polyfill';
import {Mixin} from 'ts-mixer';

import {ListView as ADListView} from '../android/widget/ListViewImpl';
import {ListView as SWTListView} from '../swt/widget/ListViewImpl';

class ListView extends Mixin(ADListView, SWTListView){

}

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name) as PropertyDescriptor);
        });
    });

}

applyMixins(ListView, [ADListView, SWTListView]);

export default ListView;

The above example mixes ListView from android and ListView from swt to produce cross platform neutral ListView where methods on ListView in swt and android is available.