Hello world

Результатом выполнения этого задания станет простое веб-приложение. Оно будет выводить в окне браузера сообщение "Hello world!".

Шаг 1: Создание собственного контрола

1. Создайте директорию PhoneBook, а внутри - файл PhoneBook.ts.

Project
└───PhoneBook-demo
    └───PhoneBook
        └───PhoneBook.ts

1. В файл PhoneBook.ts добавьте блок импорта зависимостей.

import { Control, IControlOptions, TemplateFunction } from 'UI/Base';
import * as template from 'wml!PhoneBook-demo/PhoneBook/PhoneBook';

В первой строке из библиотеки UI/Base импортируются базовые классы, которые будут использованы для разработки собственного контрола. Во второй строке импортируется шаблон контрола. 3. Под блоком импорта зависимостей добавьте описание класса контрола PhoneBook.

/* import */
export default class PhoneBook extends Control<IControlOptions> {
    protected _template: TemplateFunction = template;
}

Шаг 2: Создание шаблона PhoneBook.wml

Создадим шаблон страницы, который будет отображаться при работе приложения. В рамках этого задания это будет веб-страница с сообщением Hello world!.

1. Создайте в директории PhoneBookфайл PhoneBook.wml.

Project
└───PhoneBook-demo
    └───PhoneBook
        └───PhoneBook.wml

1. Откройте файл PhoneBook.wml и добавьте в него следующий код:

<div>
    Hello world!
</div>

Шаг 3: Добавление контрола в шаблон страницы

Мы создали контрол и его шаблон отображения. Теперь добавьте его на стартовую страницу нашего приложения.

1. Откройте файл Index.wml, который расположен в директории PhoneBook-demo.
2. Добавьте контрол в шаблон:

<SbisEnvUI.Bootstrap title="PhoneBook">
   <PhoneBook-demo.PhoneBook.PhoneBook/>
</SbisEnvUI.Bootstrap>

Здесь контрол встраивается в шаблон по имени.

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

1. Запустите командную строку от имени администратора.
   • Перейдите в директорию проекта.
   • Выполните следующие команды.

     npm install
     npm run build
     npm start

2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo

В верхнем левом углу области просмотра должна появиться надпись Hello world!

Что дальше?

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