Nativescript - Making your own bulleted or numbered list

I am currently working my way through developing a nativescript app. Developed by Telerik, it allows generation of native cross platform applications using Typescript or javascript. I am a fan of Typescript so I will be posting examples in that.

I wanted to be able to display bulleted or numbered lists in my views. Views are developed using xml. To do this, I developed a custom component that uses labels inside a grid layout.

The first step was to make a texthelper class. You can refer to this class file in the xml layout.

You can then add your own custom components like below.

The typescript is quite simple and can be seen below.

// Makes a bulleted or numbered list using a grid layout
// Accepts a string value and a seperator

export function makeList(gridLayoutAdd: gridLayout.GridLayout, stringValue: string, seperator: string, bullet: boolean): void {
    var stringValues = stringValue.split(seperator);

    makeListFromArray(gridLayoutAdd, stringValues, bullet);
}

// Makes a bulleted or numbered list using a grid layout
// Accepts a string array and a seperator

export function makeListFromArray(gridLayoutAdd: gridLayout.GridLayout, stringValues: Array, bullet: boolean): void {
    try {
        gridLayoutAdd.addColumn(new gridLayout.ItemSpec(30, gridLayout.GridUnitType.pixel));
        gridLayoutAdd.addColumn(new gridLayout.ItemSpec(1, gridLayout.GridUnitType.star));

        for (var i = 0, imax = stringValues.length; i < imax; i++) {
            var labelAdd = new label.Label();
            labelAdd.text = stringValues[i].trim();
            gridLayout.GridLayout.setRow(labelAdd, i);
            gridLayout.GridLayout.setColumn(labelAdd, 1);
            labelAdd.textWrap = true;
            gridLayoutAdd.addChild(labelAdd);

            labelAdd = new label.Label();
            if (bullet) {
                labelAdd.text = "-";
            }
            else {
                labelAdd.text = (i + 1) + ")";
            }
            gridLayout.GridLayout.setRow(labelAdd, i);
            gridLayout.GridLayout.setColumn(labelAdd, 0);
            labelAdd.textWrap = true;
            labelAdd.style.verticalAlignment = "top";
            gridLayoutAdd.addChild(labelAdd);

            gridLayoutAdd.addRow(new gridLayout.ItemSpec(1, gridLayout.GridUnitType.auto));
        }
    }
    catch (ex) {
        dialogs.alert(ex.message);
    }

}

// Used for building a bulleted list from a string seperated by a key

export class BulletedList extends gridLayout.GridLayout {

    private _seperator: string = "#";
    private _stringValue: string;
    constructor() {
        super();

    }

    // Seperator to split lines of text

    public get seperator(): string {
        return this._seperator;
    }

    public set seperator(value: string) {
        this._seperator = value;
    }

    // String value to split into lines of text

    public get stringValue(): string {
        return this._stringValue;
    }

    public set stringValue(value: string) {
        makeList(this, value, this.seperator, true);
        this.stringValue = value;
    }

}

// Used for building a number list from a string seperated by a key

export class NumberedList extends BulletedList {


    // String value to split into lines of text

    public set stringValue(value: string) {
      
        makeList(this, value, this.seperator, false);
        this.stringValue = value;
    }

Hopefully you will find this useful, I will post other examples.