Создание телефонного справочника

Wasaby — это современный фреймворк для создания пользовательских веб-интерфейсов. Для быстрого решения задач разного уровня мы предлагаем богатый набор возможностей. Базовой концепцией Wasaby является представление интерфейса как набора иерархически вложенных контролов. Контролом мы называем изолированную часть функционала, которую можно использовать повторно при разработке интерфейса.

В этом задании телефонный справочник будет создан на основе контрола View из библиотеки Controls/grid. Коротко контрол называют "Таблица" (здесь и далее).

Чтобы справочник по умолчанию был заполнен демонстрационными записями, на основе файла Data.ts мы создадим источник данных. Скачайте файл Data.ts и поместите его в файловую структуру вашего проекта в соотвествии со схемой ниже.

Источник данных будет создан на основе класса Memory из библиотеки Type/source и передан в конфигурацию контрола.

Файловая структура на момент начала задания:

Project
└─── PhoneBook-demo
     ├─── PhoneBook
     │    ├─── PhoneBook.wml
     │    └─── PhoneBook.ts
     ├─── Data.ts
     ├─── Index.ts
     └─── Index.wml

Шаг 1: Настройка контрола

Для избежания ошибок при обмене опциями и свойствами между объектами приложения необходимо использовать интерфейсы. Опишем некоторые из них.

Шаг 1.1: Создание нового интерфейса IPhoneBookRecord

  1. Откройте файл PhoneBook.ts.
  2. В файле PhoneBook.ts создайте интерфейс IPhoneBookRecord.
// TypeScript
interface IPhoneBookRecord {
    Address: string;
    FIO: string;
    key: number;
    Phone: string;
}

С помощью интерфейса IPhoneBookRecord мы описали тип данных для элемента таблицы.

Шаг 1.2: Создание интерфейса IPhoneBookOptions

Также в файле PhoneBook.ts создайте интерфейс IPhoneBookOptions.

// TypeScript
interface IPhoneBookOptions extends IControlOptions {
    data: IPhoneBookRecord[];
}

С помощью интерфейса IPhoneBookOptions мы описали, что опция data принимает массив элементов с типом IPhoneBookRecord. Интерфейс наследуется от базового интерфейса контрола IControlOptions.

Шаг 1.3: Добавление интерфейса IPhoneBookOptions в класс контрола

В описании класса PhoneBook укажите интерфейс IPhoneBookOptions.

// TypeScript
export default class PhoneBook extends Control<IPhoneBookOptions> {
    protected _template: TemplateFunction = template;
}

Шаг 1.4: Настройка начального значения для опции data

Для контрола PhoneBook создайте статическое поле defaultProps. Данное поле устанавливает значение по умолчанию для опции data, если эта опция не задана. Разместите данное поле внутри описания класса PhoneBook.

// TypeScript
export default class PhoneBook extends Control<IPhoneBookOptions> {
    static defaultProps: Partial<IPhoneBookOptions> = {
        data: []
    };
}

Шаг 2: Добавление источника данных

Шаг 2.1: Импорт файла с готовыми данными (файл Data.ts)

Демонстрационные данные для статического источника расположены в директории PhoneBook-demo — файл Data.ts.

  1. Откройте файл Index.ts.
  2. Импортируйте данные из файла Data.ts в переменную data.
  3. Создайте новое свойство _phoneBookData и передайте в него data.
// TypeScript
import data from './Data';

export default class Main extends Control<IControlOptions> {
    ...
    protected _phoneBookData: unknown = data;
}

Шаг 2.2: Подключение демонстрационных данных к контролу PhoneBook

  1. Откройте файл Index.wml.
  2. Внутрь контрола PhoneBook добавьте следующую опцию:
<!-- WML -->
<PhoneBook-demo.PhoneBook.PhoneBook
   data="{{_phoneBookData }}"/>

Теперь с этими данными можно работать в контроле PhoneBook через переменную data.

Шаг 2.3: Импорт библиотеки Types/source и класса Memory

  1. Откройте файл PhoneBook.ts.
  2. Импортируйте класс Memory из библиотеки Types/source в файл PhoneBook.ts.
// TypeScript
import {Memory} from 'Types/source';

Шаг 2.4: Объявление свойства _source

  1. Откройте файл PhoneBook.ts.
  2. Опишите свойство _source с типом Memory:
// TypeScript
protected _source: Memory;

Шаг 2.5: Инициализация источника данных

В хуке _beforeMount() создайте статический источник данных и передайте его в свойство _source.

// TypeScript
protected _beforeMount(options?: IPhoneBookOptions): void {
    this._source = new Memory({
        keyProperty: 'key',
        data: options.data
    });
}

Шаг 3: Добавление "Таблицы"

Шаг 3.1: Импорт класса View из библиотеки Controls/grid

  1. Откройте файл PhoneBook.ts.
  2. Импортируйте класс View из библиотеки Controls/grid.
// TypeScript
import { View, IColumn } from 'Controls/grid';

Шаг 3.2: Создание свойства _columns и настройка колонок

Для того чтобы сконфигурировать отображение колонок таблицы, необходимо сначала объявить свойство, например _columns.

// TypeScript
export default class PhoneBook extends Control<IPhoneBookOptions> {
    ...
    protected _columns: IColumn[] = [{
        displayProperty: 'FIO',
        width: '230px'
    }, {
        displayProperty: 'Address',
        width: '400px'
    }, {
        displayProperty: 'Phone',
        width: '170px'
    }];
    ...
}

Шаг 3.3: Объявление переменной _children

В свойстве _children обозначим дочерний контрол gridView.

  1. Откройте файл PhoneBook.ts.
  2. Добавьте описание свойства _children.
// TypeScript
protected _children: {
    gridView: View & Control;
};

Здесь в свойствах displayProperty указаны имена полей на основе данных из файла Data.ts.

Шаг 3.4: Добавление таблицы в шаблон

  1. Откройте файл PhoneBook.wml.
  2. Добавьте в шаблон контрол Controls/grid:View.
<!-- WML -->
<div>
   <Controls.grid:View
      name="gridView"
      columns="{{_columns}}"
      keyProperty="key"
      source="{{_source}}">
   </Controls.grid:View>
</div>

Примечание. Здесь мы встроили контрол в шаблон по имени. Есть и другой способ встраивания, о чем подробнее читайте здесь.
Для передачи опций в конфигурацию контрола использован синтаксис, который описан здесь.
В опции columns и source мы передали значения, которые хранятся в свойствах контрола MyControls/Phonebook. Для этого мы использовали синтаксис, описанный здесь.
В опцию keyProperty передано значение key, потому что в файле Data.ts идентификаторы записей хранятся в одноименном поле. 3. Настройте отображение шапки таблицы через опцию header. Для того чтобы передать значение для опции, используйте синтаксис xml. Его также можно применять для конфигурации контролов наравне с показанным в п.2.

<!-- WML -->
<div>
   <Controls.grid:View
      name="gridView"
      columns="{{_columns}}"
      keyProperty="key"
      source="{{_source}}">
      <ws:header>
         <ws:Array>
            <ws:Object title="ФИО"/>
            <ws:Object title="Адрес"/>
            <ws:Object title="Телефон"/>
         </ws:Array>
      </ws:header>
   </Controls.grid:View>
</div>

Шаг 4: Сборка приложения и проверка результата

  1. Запустите командную строку от имени администратора.
    • Перейдите в директорию проекта.
    • Выполните следующие команды:
      npm run build
      npm start
  2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
  3. Результат должен быть таким как на изображении ниже.

Можете сверить результат освоения этого задания с файлами репозитория.

Что дальше?

Переходите к следующему уроку