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

Изменение сетевого порта

Перед сборкой приложения можно изменить сетевой порт. Для этого необходимо в файле package.json изменить значение параметра "port": на желаемое.

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

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

Что дальше?

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