Hello world
Результатом выполнения этого задания станет простое веб-приложение. Оно будет выводить в окне браузера сообщение "Hello world!".
Шаг 1: Создание собственного контрола
- Создайте директорию PhoneBook, а внутри - файл PhoneBook.ts.
Project └───PhoneBook-demo └───PhoneBook └───PhoneBook.ts
- В файл
PhoneBook.ts
добавьте блок импорта зависимостей.
В первой строке из библиотекиimport { Control, IControlOptions, TemplateFunction } from 'UI/Base'; import * as template from 'wml!PhoneBook-demo/PhoneBook/PhoneBook';
UI/Base
импортируются базовые классы, которые будут использованы для разработки собственного контрола. Во второй строке импортируется шаблон контрола. - Под блоком импорта зависимостей добавьте описание класса контрола PhoneBook.
/* import */ export default class PhoneBook extends Control<IControlOptions> { protected _template: TemplateFunction = template; }
Шаг 2: Создание шаблона PhoneBook.wml
Создадим шаблон страницы, который будет отображаться при работе приложения. В рамках этого задания это будет веб-страница с сообщением Hello world!
.
- Создайте в директории
PhoneBook
файлPhoneBook.wml
.Project └───PhoneBook-demo └───PhoneBook └───PhoneBook.wml
- Откройте файл
PhoneBook.wml
и добавьте в него следующий код:<div> Hello world! </div>
Шаг 3: Добавление контрола в шаблон страницы
Мы создали контрол и его шаблон отображения. Теперь добавьте его на стартовую страницу нашего приложения.
- Откройте файл
Index.wml
, который расположен в директорииPhoneBook-demo
. - Добавьте контрол в шаблон:
<Controls.Application title="PhoneBook">
<PhoneBook-demo.PhoneBook.PhoneBook/>
</Controls.Application>
Здесь контрол встраивается в шаблон по имени.
Шаг 4: Сборка приложения и проверка результата
- Запустите командную строку от имени администратора.
- Перейдите в директорию проекта.
- Выполните следующие команды.
npm install npm run build npm start
- В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
Изменение сетевого порта
Перед сборкой приложения можно изменить сетевой порт. Для этого необходимо в файле package.json изменить значение параметра "port":
на желаемое.
В верхнем левом углу области просмотра должна появиться надпись Hello world!
Можете сверить результат освоения этого задания с файлами репозитория.