Hello world

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

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

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

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

2. В файл 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

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

   <div>
       Hello world!
   </div>

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

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

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

<Controls.Application title="PhoneBook">
   <PhoneBook-demo.PhoneBook.PhoneBook/>
</Controls.Application>

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

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

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

     npm install
     npm run build
     npm start

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

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

Что дальше?

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