Добро пожаловать в TMS WEB Core. TMS WEB Core — это основа захватывающего нового и современного способа создания клиентских веб-приложений из Delphi с использованием методологии разработки RAD и компонентно-ориентированной платформы.
Архитектура TMS Web Core
Ранее в статье про оценку фреймворком я немного упоминал TMS Web Core и сравнивал его с остальными фреймворками.
TMS WEB Core основан на компиляции кода пользовательского интерфейса Delphi в JavaScript и создании, таким образом, так называемых одностраничных приложений (SPA -Single Page Application) . Терминологию «страница» не следует путать с формами, к которым привыкли разработчики Delphi. Приложение TMS WEB Core может содержать несколько форм. Эти несколько форм будут размещены в приложении JavaScript, к которому пользователь веб-браузера сможет перейти по URL-адресу одной страницы. Любой современный HTML5-совместимый браузер может запускать веб-клиентские приложения TMS WEB Core. Сюда входят Chrome, Safari, Edge, Firefox, Firefox Developer Edition, Opera.
В дальнейшем я буде называть приложения TMS WEB Core приложениями веб-клиента. Это означает, что приложения выполняются как код JavaScript в клиенте браузера (слева на рисунке 1). Приложение веб-клиента обычно взаимодействует с сервером или серверами для работы с данными или другими службами (на рисунке 1 показано справа). Веб-клиентское приложение TMS WEB Core открыто для работы с различными серверными технологиями. Сюда входят, помимо прочего, TMS XData, Embarcadero RAD Server, node.js, микросервисы ASP.NET Core. Типичная технология, используемая для этой связи, — через HTTP REST API.
Установка и запуск TMS Web Core
Установка TMS Web Core очень простая и сводится к подтверждению запросов, предлагаемых мастером. Поэтому не будем ее рассматривать. Единственное, что Delphi должна быть во время установки закрыта.
После установки откройте Delphi, выберите File/New/Other... . Затем в появившемся окне New Items выберите в мастере один из предлагаемых типов приложений (рисунок 2).
Давайте выберем верхний вариант TMS Web Application. Это будет стандартное SPA web-приложение.
Когда мы это сделаем, то на экране у нас откроется привычная нам среда. Созданный проект будет также отображаться в менеджере проектов (рисунок 3).
Проект состоит из исходного файла проекта и одного или нескольких файлов форм, аналогично тому, как работают приложения VCL Windows и кроссплатформенные приложения FMX. Помимо исходного файла проекта (файл .DPR), есть файл HTML проекта. Этот файл HTML содержит HTML-код тела вашего приложения, и он может включать ссылки на файлы CSS и/или JavaScript. Для каждой формы есть файл .PAS, файл .DFM и файл .HTML. Файл .PAS содержит логику пользовательского интерфейса для формы и ее элементов управления. Цель файла .DFM — сохранить настройки компонента, а файл HTML служит контейнером HTML, в котором будут размещены элементы управления формы или который содержит элементы HTML, с которыми будут сопоставлены экземпляры класса элементов управления Delphi.
То есть, здесь фактически все как по классике. Добавились только два файла: Project1.html и Unit1.html.
Контекстное меню проекта в IDE также отображает ряд дополнительных пунктов.
Технически, приложение TMS WEB Core во время разработки в Delphi является приложением VCL Windows. Это сделано по технической причине, чтобы использовать конструктор форм Delphi IDE для создания клиентского веб-приложения. Ну то есть, ровно то, о чем все так давно мечтали. Вряд ли еще найдется среда программирования, которая в настоящий момент времени может это предложить. Фреймворк TMS WEB Core Delphi IDE компилирует проект со всеми файлами форм с помощью компилятора pas2js в файл JavaScript (.JS) и развертывает его на веб-сервере.
А вот так выглядит файл проекта Project.dproj:
program Project1;
uses
Vcl.Forms,
WEBLib.Forms,
Unit1 in 'Unit1.pas' {Form1: TWebForm} {*.html};
{$R *.res}
begin
Application.Initialize;
Application.MainFormOnTaskbar := True;
Application.CreateForm(TForm1, Form1);
Application.Run;
end.
Это выглядит как при стандартном приложении VCL. Когда проект компилируется в приложение JavaScript, его можно автоматически запустить в браузере из IDE. Это делается с помощью сервера отладки и приложения запуска браузера (TMSWebServerManager.exe), которое настраивается в IDE в разделе Tolls/Options.../TMS Web/Options в строке Web Server.
Это что то вроде локального web-сервера...
По умолчанию приложение JavaScript запускается в браузере, который установлен в операционной системе в качестве браузера по умолчанию. Если вы хотите запустить приложение в другом браузере, это можно настроить на уровне проекта в разделе Project/ Options.../TMS Web/Compile в строке Browser.
Чтобы браузер запускал приложение веб-клиента, по умолчанию TMS WEB Core поставляется с облегченным отладочным веб-сервером, который настраивается во время установки для работы на порту 8000. Веб-сервер указывается в разделе Tools/Options.../TMS Web/Options в строке Web Server.
HTML-файл проекта Project1.html по умолчанию содержит:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta $(ThemeColor)>
<noscript>Your browser does not support JavaScript!</noscript>
<link rel="icon" href="data:;base64,=">
<meta $(Manifest)>
<link $(FavIcon)/>
<title>TMS Web Project</title>
<script type="text/javascript" src="$(ProjectName).js"></script>
<style>
</style>
</head>
<body>
<meta $(BodyParameters)>
</body>
<script type="text/javascript">
rtl.run();
</script>
</html>
Вообще, в данный файл проекта вы сможете подключить что угодно: любые сторонние скрипты PHP, JavaScript, файлы стилей CSS и т.п. Очень удобно. Это на случай, если функционала TMS Web Core вам будет где то не хватать (не святой же он, как и все вокруг). Ну или может быть вы когда то, или кто-то реализовывал некий функционал на другом языке, вы можете не переписывать тот кусок кода, а подключить его сюда. В частности вы можете хотя бы поменять языковую установку lang="en" на свой родной.
Это HTML-файл, указывающий на то, что это документ формата HTML5. Как вы видите, по умолчанию в HTML-файле есть только одна ссылка, и это ссылка на файл JavaScript $(ProjectName).js. Плагин TMS WEB Core IDE в этом случае скомпилирует приложение в Project1.js, а в развернутом HTML-файле эта ссылка будет выглядеть следующим образом:
<script type="text/javascript" src="Project1.js"></script>
Из HTML-файла видно, что приложение запускается:
<script type="text/javascript"> rtl.run(); </script>
Когда открыт файл Unit.pas, палитра инструментов IDE предлагает все элементы управления, которые были разработаны и зарегистрированы для использования с TMS WEB Core:
Как и в случае с приложениями VCL, перетащите элементы управления на форму и добавьте код логики пользовательского интерфейса в файл формы.
Как вы видите, с каждым файлом формы идет файл HTML, в данном случае unit1.html. Это контейнер HTML, в который будет встроена веб-форма. Этот файл HTML будет загружен в BODY документа браузера, когда веб-приложение запустит форму. Файл HTML можно редактировать напрямую из IDE во встроенном редакторе HTML, но его также можно отредактировать любом веб-редакторе, например Microsoft Visual Code.
Изначально секция BODY этого файла пустая. При добавлении элементов управления пользовательского интерфейса в файл формы, во время выполнения элементы HTML, из которых состоят эти элементы управления, будут динамически добавлены в HTML BODY.
Настройка TMS Web Core
Конфигурацию TMS WEB Core можно найти в Delphi IDE в разделе Tools/Options.../TMS WEB/Options:
Рассмотрим основные настройки (в зависимости от версии TMS Web Core каких то из пунктов настроек может не быть):
- Web Compiler: указывает на местоположение компилятора Pascal в Javascript (pas2js);
- Library path: это путь, который использует компилятор Pascal в Javascript. Обратите внимание, что сторонние элементы управления могут отдельно регистрировать пути, и это не влияет на общий путь библиотеки;
- Open Output path в Explorer: это путь по умолчанию, который компилятор использует для генерации конечного файла Javascript (.JS) проекта. Значение по умолчанию находится в исходной папке проекта \TMSWeb\Debug или \TMSWeb\Release;
- URL: это URL, с помощью которого веб-приложение может быть запущено через браузер. Если используется другой веб-сервер, а не веб-сервер TMS по умолчанию, URL можно изменить;
- Single JS File: по умолчанию генерируется один Javascript для всего веб-приложения. Если этот параметр отключен, необходимо будет указать ссылку на каждый сгенерированный файл .js (в этом случае для каждого модуля есть файл .js) в HTML-файле проекта;
- ECMA Script: это устанавливает уровень стандартов JavaScript, для которого будет сгенерировано скомпилированное приложение;
- Installation directory: это путь, по которому установлено ядро TMS WEB. Относительно этого пути компилятор ищет исходные файлы и ресурсы;
- Web Runner: это путь к приложению, который используется для запуска выбранного браузера для запуска веб-приложения;
- Web Server: это путь, по которому находится веб-сервер, который используется и будет запущен;
- Use ShellExecute: этот параметр управляет тем, будет ли подключаемый модуль IDE использовать Windows ShellExecute для запуска приложения Web Runner или создавать процесс напрямую;
- Web Server Params: может содержать дополнительные параметры командной строки для запуска веб-сервера;
- Web Server Visibility: настраивает, будет ли веб-сервер скрыт при запуске или останется видимым;
- Wait for Web Server: если true, IDE будет ждать, пока веб-сервер не запустится, прежде чем запускать браузер, чтобы открыть URL веб-приложение;
- Browser: указывает, какой браузер предпочтительнее запускать для отладки веб-приложения;
- Debug Manager: указывает инструмент отладки, который используется для связи между IDE и браузером. С помощью этого менеджера отладки можно перезапустить веб-приложение на той же вкладке браузера, когда компилируется новая версия, вместо того, чтобы запускать приложение в новом окне браузера или на новой вкладке браузера.
В списке настроек вы можете найти список установленных сторонних компонентов для TMS WEB Core. Вы можете отметить или снять отметку с путей сторонних компонентов, которые будут использоваться для компиляции приложения веб-клиента.
Автоматическое управление версиями TMS Web Core
Если имя проекта — project1.dproj, файл JavaScript приложения по умолчанию будет project1.js и будет указан в файле проекта HTML как:
<script type="text/javascript" src="Project1.js"></script>
В некоторых ситуациях браузер может кэшировать файл project1.js, а web-сервер не может сообщить браузеру, что имеется обновленный project1.js и его следует загрузить вместо использования кэшированной версии.
Чтобы преодолеть эту потенциальную проблему, TMS WEB Core имеет функцию автоматического управления версиями проекта. Благодаря этому автоматическому управлению версиями каждый раз при сборке проекта генерируется новый номер версии, на который ссылается HTML-файл, что делает каждую версию проекта уникальной и позволяет избежать использования кэшированной версии, когда это не ожидалось. Включить автоматическое управление версиями в проекте легко. Перейдите в параметры проекта. Установите начальную версию на X.Y.Z и установите для параметра Auto-increment version значение True.
Каждый раз, когда выполняется сборка, значение Z будет увеличиваться на единицу. Параметры автоувеличения номера устанавливаются в Project/Options.../TMS Web/Compile в параметрах Version и Auto-increment:
Первый проект TMS Web Core (или первый сайт на Delphi)
До этого момента мы рассматривали теоретические вопросы web-программирования на Delphi. В частности в статье Сайт на Delphi, мы касались технологий создания web-приложений в среде Delphi (да и в ряде других статей).
Итак, может ли наш Delphi с таком же успехом создавать web-приложения, с каким он создает десктопные приложения? Может ли он соревноваться с классической связкой типа HTML/CSS/JavaScript + PHP/Python или что-либо другое? Проверим...
Здесь мы создадим простое приложение, так сказать, классику «Hellow Word!», только теперь оно будет уже в виде web-сайта (web-приложения). Что ж, времена меняются и Delphi тоже...
Выберите команду File/New/Other... . Затем в появившемся окне New Items выберите TMS Web Application (показываю на примере Delphi 11.2 Aleksandria и TMS Web Core 2.1. Версия TMS Web Core несколько устарела, но тем, не менее, достоинств у нее от этого не меньше).
Откройте unit1.dfm как вы это делаете обычно и положите на форму три компонента: TWebButton, TWebEdit и TWebListBox:
Отлично. В событии onClick для нашей кнопки добавьте код. Пардон, событие теперь называется WebButtonClick. Ну в общем, для не пишем:
procedure TForm1.WebButton1Click(Sender: TObject); var myText: string; begin myText:=WebEdit1.Text; WebListBox1.Items.Add(myText); end;
Предлагаю запустить проект. Ну что, ошибка? Типа: «Url: http://+:8000/Project1 Error: Отказано в доступе 2024-07-25 11:16:48.047 [INFO] Message processing error: (EHttpSysSessionException) Could not add the following Url to the server. Be sure that you have reserved the Url in Http.Sys with proper permissions». Если по-русски, то просто не запускается TMS Web Server. Я тоже попался на эту удочку. Легко исправить...
Для того, чтобы убрать эту ошибку следует воспользоваться утилитой TMS Sparkle. Она находится в каталоге установки TMS. У меня в: C:\Users\Алексей\AppData\Local\tmssoftware\registered\TMS WEB Core RSXE14\Bin\Win32
Для ее поиска можно зайти на диск С и в поиске каталогов операционной системы ввести TMSHttpConfig.exe. Запустить эту программу и добавить вот такой параметр:
Короче, нажимаете Add и водите строку: http://+:8000/
Нажимаете ok. Все. Можете закрывать TMS Sparkle. TMS Web Server работает на 8000 порту и поэтому его нужно прописать в настройках. И на этом все.
А теперь снова переходим к нашему проекту и запускаем компиляцию как обычно (например по F9).
Давайте добавим свой любой текст в поле ввода и нажмем на копку. Текст перенесется в список. Все ровно так, как мы написали в программном коде выше.
После компиляции приложения в каталоге Debug содержатся следующие файлы:
Необходимо отметить, что существует два режима компиляции: режим отладки Debug и режим выпуска — Release Configuration. Отладочная версия нужна для поиска ошибок. Режим выпуска нужен для конечного распространения программы. Выбрать режим компиляции можно в Project/Options.../TMS Web/Compile — поле «Target».
Следует сделать еще одно интересное отступление. Если по классике при компилировании под Windows у нас есть одна папка Debug (В Delphi 7 ее вообще нет, exe-файл появляется в том же каталоге, в котором находится проект), то когда мы компилируем проект TMS Web Core появляются две папка Debug, одна как обычно в каталоге Проект/Win32/Debug, а вторая TMSWeb/Debug.
Только в Проект/Win32/Debug хранятся файлы: Project1.exe и TMSWebRunner.ini. Если вы запустите исполняемый файл, то получите в браузере все то же наше приложение, которое мы сделали только что. Естественно, что нам эти два файла не нужны, поскольку мы разрабатываем web-приложение. Поэтому нас интересует каталог TMSWeb/Debug.
Файл project1.js содержит скомпилированное приложение Javascript. Файл project1.html — это общий файл HTML проекта. Unit1.html — это HTML, специфичный для form1, которая является формой по умолчанию в проекте. Интересный файл — это файл project1.js.map. Это файл, который облегчает отладку напрямую с использованием языка Delphi из браузера. При компиляции в режиме выпуска этот файл не создается. И кстати, не зависимо от того, выберите ли вы в опциях проекта режим компиляции Debug или Release, все равно конечные файлы появятся в каталоге TMSWeb/Debug. Единственное, что в режиме выпуска файлы будут без отладочной информации.
Когда кто-то захочет развернуть приложение на веб-сервере, все, что нужно сделать, это поместить файлы project1.html / project1.js и unit1.html в папку на веб-сервере. Конечно, это примитивный проект и в реальном проекте файлов будет гораздо больше. Но в сущности, сделать нужно будет тоже самое. Удобно? Еще бы. Это как если бы вы написали приложение на JavaScript.
Конечно, если писать приложение на JavaScript, преимуществ будет больше, поскольку вы оптимизируете код так, как вам нужно. Но компилятор от Delphi в этом плане сильно не уступает. Он отлично оптимизирован и строит вполне себе качественные файлы js. Более того, если есть дикое желание, вы всегда можете этот файл отредактировать (если вы знаете JavaScript конечно). Вы также можете привлечь дизайнера и верстальщика, который добавит стили к html файлам.
Ну что же, классика удалась на славу! Попробуйте сами. Вы увидите, что создавать приложения на Delphi для web очень легко. Я не знаю, за что не любят Delphi, ведь создать приложение на нем гораздо быстрее, чем вы это сделаете на том же C# или Python. не ругайте меня пожалуйста любители этих языков, мне они самому нравятся, но ведь действительно скорость создания у Delphi, а самое главное удобство разработки на порядок выше. Это при том, при всем, что Delphi постоянно прижимают в развитии его конкуренты.
Так что, желаю удачи в обучении, а мы чуть позже продолжим...
