wysiwyg web — долгожданная мечта всех разработчиков web-приложений. Обычно интерфейс web-приложений разрабатывается классическим способом с помощью HTML и CSS. Современные редакторы уже могут это делать, в так называемом визуальном стиле.
Но все же — это далеко от истины, ведь никакой речи о визуальной разработке здесь и быть не может. Верстальщик web-страницы все-равно набирает команды разметки вручную. Правда видит мгновенный результат своего действия в браузере. Это называется визуальной разработкой.
Что ж, удобно, но это не то, что ищут десктопные разработчики, которые хотят перейти в web-разработку. На самом деле верстальщики (фронтэнд-разработчики) не знаю, что такое настоящая визуальная разработка wysiwyg (что вижу, то и получаю).
Но современный мир не стоит на месте и в последнее время стали появляться фреймворки web-разработки нового поколения, такие как TMS Web Core или же UniGui, которые позволяют создавать пользовательский web-интерфейс в режиме wysiwyg.
Совершенно очевидно, что в скором времени таких технологий будет больше. Например, когда мы создаем классическое VCL-приложение, то что мы видим на форме, то записывается в файл dfm. Этот файл содержит описание того, как элементы управления расположены на форме, так ведь? Что по своей сути является аналогом CSS, только для десктопной разработки.
Я вам скажу больше... Давайте возьмем C# и его библиотеку (Windows Forms). У него то же есть такой файл, который называется Form1.Designer.cs, а в файле Form1.cs записана логика приложения. У пусть расширения файлов одинаковые, но предназначение у них разное. Да, именно в файле Form1.Designer.cs содержится описание внешнего вида формы. Ну то есть, и в Delphi и в C# используются правильные подходы разделения разработки пользовательского интерфейса от логики программы.
Если говорить на языке web-разработчика, то мы имеем дело в фронтэндом и бекендом. Просто десктопный Windows-программист никогда ранее не оперировал такими понятиями, поскольку разработка wysiwyg подразумевает, что он сам «набросает» элементы пользовательского интерфейса и сам напишет логику (программный код). Но благодаря разделению интерфейса от логики (фронтэнда от бекенда) теперь для разработки интерфейса можно привлечь дизайнера и это сделать довольно легко, особенно с поддержкой пользовательских стилей оформления.
А если мы возьмем библиотеку WPF? Мы увидим, что и в этой библиотеке у файла формы тоже есть файл с описание внешнего вида, который имеет расширение — xaml.
Более того, положите элемент управление WPF на форму и вы сразу увидите, что в файле XAML создана строка со свойствами этого элемента управления. Вы можете вручную в XAML добавить еще несколько свойств к добавленному на форму объекту и на форме он мгновенно поменяется. То есть, при создании WPF используется wysiwyg, а генерируемый код в файле xaml уж очень похож на HTML. Тогда почему же при web-разработке мы не можем использовать такой же принцип построения пользовательского интерфейса?
Оказывается можем и TMS Web Core нам в этом очень поможет. У Microsoft тоже есть аналогичная технология, программа называется Microsoft Expression Web (Web Design). Отличная технология. Но как то мало кто с ней знаком.
Ну и конечно все эти вещи, как и в классической манере разработки завязаны на позиционировании элементов управления.
Позиционирование элементов Delphi TMS Web Core очень похоже на позиционирование элементов управления десктопного приложения VCL. А бывает оно абсолютным и относительным.
В двух предыдущих статья мы рассмотрели на примерах как легко создаются SPA и PWA приложения в Delphi вместе с TMS Web Core. Здесь же мы рассмотрим, как позиционируются элементы управления на web-странице.
Абсолютное позиционирование
По умолчанию конструктор форм Delphi TMS Web Core служит в качестве WYSIWYG-поверхности дизайна для форм вашего веб-приложения. Это означает, что элементы управления пользовательского интерфейса на форме Delphi будут отображаться с абсолютным позиционированием на веб-странице. Ну то есть точно так же, как это выглядело бы при разработке VCL-приложения без применения масштабирования к различным типам экранов.
в TMS Web Core для верстки макета и организации страницы существуют типичные элементы управления контейнером Delphi, такие как панель, групповой блок, полоса прокрутки, сетка.
Ну то есть, мы делаем долгожданную всеми верстку в режиме WYSIWYG.
Родительские/дочерние отношения элементов управления Delphi также отражаются на созданных веб-страницах. Доступны дополнительные возможности, такие как выравнивание элементов управления, привязка, панель сетки и элемент управления разделителем, позволяющие вам управлять макетом страниц. В этом режиме по умолчанию все очень знакомо разработчикам Delphi и пользователям приложений Delphi VCL Windows.
Относительное позиционирование
Элементы управления также можно добавлять в конструктор и устанавливать для них относительное позиционирование. Это задается свойством ElementPosition в epRelativate у элементов управления (напомню, что по умолчанию установлено в epAbsolute). В режиме epRelativate координаты для элемента управления не отображаются. Определение макета зависит от DOM браузера. Если для элемента управления HeightStyle и WidthStyle установлены в ssAuto, DOM также определит размер выполнения элемента управления.
Существует одно очень важное соображение относительно позиционированных элементов управления, а именно порядок элементов управления. Относительный порядок элементов управления задается свойством ChildOrder элементов управления. Когда свойство ElementPosition имеет значение epRelative, то ChildOrder используется для управления порядком элементов HTML элемента управления в родительском элементе. Элемент управления с ChildOrder, установленным в 0, будет первым элементом управления в иерархии родительских элементов HTML, следующим элементом управления будет элемент управления с ChildOrder, установленным в 1, и так далее…
Если по простому сказать, что когда вы вручную верстаете в HTML документ и добавляется, скажем в web-документ текстовое поле, а затем кнопку, а затем таблицу, то кнопка текстовое поле будет отображаться первым, далее будет кнопка, а потом таблица — ровно так, как вы указали в коде HTML.
В Delphi же вы набрасываете компоненты визуально и поэтому следует указать их порядок в свойстве ChildOrder.
Теперь у всех наших элементов на форме я установил свойство ElementPosition в epRelative и получилось вот что:
Ну то есть, расположилось все в той последовательности, в которой я размещал элементы на форме. Давайте теперь изменим свойство ChildOrder для каждого элемента управления.
Например, у нас в конструкторе есть панель с ElementPosition = epRelative и WidthStyle, HeightStyle установлены на ssAuto. Она содержит 3 дочерних элемента управления, метку, edit и кнопку с ElementPosition, также установленным на epRelative. ChildOrder метки установлен на 0, ChildOrder редактирования на 1 и ChildOrder кнопки на 2.
Результат будет как на рисунке:
Соответствующий HTML будет: элемент HTML SPAN для панели, элемент DIV с дочерним элементом HTML LABEL для метки. Элемент HTML INPUT для элемента управления edit и элемент HTML BUTTON для кнопки:
<SPAN> <DIV><LABEL></LABEL></DIV> <INPUT type=”TEXT”> <BUTTON type=”BUTTON”> </SPAN>
НУ а уже после генерации HTLM-документа можно заняться его стилизации с помощью таблиц CSS.
Светлая и темная темы
Между тем, все основные настольные и мобильные операционные системы ввели концепцию светлой и темной тем, чтобы учесть типичное предпочтение темных тем для молодых пользователей компьютеров и светлых тем для пользователей постарше. Естественно, существует тенденция, что молодые пользователи компьютеров будут ожидать, что веб-приложение примет темную тему и наоборот для пользователей постарше. Между тем, браузеры предлагают возможности определения того, настроена ли операционная система, в которой работает браузер, на темную или светлую тему. Таким образом, приложение TMS WEB Core может автоматически запускаться с использованием темной или светлой темы в зависимости от этих настроек. Конечно, эта функция является необязательной, и ее можно использовать автоматически, или вы можете добавить код уровня приложения для переключения на нужную вам тему настраиваемым образом.
Чтобы включить эту функцию, перейдите в параметры проекта и включите автоматическую тему с помощью установки в true параметра Use operating system theme.
Использование шаблонов HTML
Фреймворк TMS WEB Core также полностью открыт для разработки макета страницы непосредственно из HTML и CSS (а не только с помощью wysiwyg). Архитектура фреймворка предусматривает разделение дизайна и кода (как уже упоминалось выше) и даже возможность создания дизайна людьми с определенной ролью, например, графическими дизайнерами.
Итак, как осуществляется это разделение? К счастью, очень просто и понятно. Связь между HTML и элементами управления пользовательского интерфейса и кодом, используемыми в Delphi IDE, основана на уникальном идентификаторе элемента HTML. Каждый элемент управления TMS WEB Core имеет свойство ElementID. Когда ElementID не используется, т. е. остается пустым, элементы HTML, из которых состоит элемент управления, генерируются фреймворком TMS WEB Core. Когда ElementID указан, найденный элемент HTML подключается к классу Pascal для элемента управления. Это означает, что методы доступа к свойствам напрямую получают и устанавливают значения из элемента HTML, а различные события Javascript элемента HTML подключаются к классу и отображаются как обработчики событий Pascal.
Здесь TWebMemo подключается через свойство ElementID к HTML-элементу INPUT с идентификатором, установленным на «myEdit» и уже находящимся в HTML-файле.
Если немного иначе сказать, то в html-документе элементам управления можно задавать id-идентификаторы (задаются также через тег ID), которые являются уникальными в пределах html-документа. По другому он еще называется ID-селектор. В тексте HTML он имеет следующий синтаксис:
<div id=значение>текст</div>
Несмотря на то, что само по себе название ID подразумевает использование цифр, тем не менее в HTML данный идентификатор может использовать следующие символы:
- латинские буквы;
- тире или нижнее подчеркивание;
- цифры.
Ну и в нашем случае элементу INPUT в документе можно присвоить идентификатор myEdit следующим образом:
<input type="text" id="myEdit">
И этот селектор (идентификатор) myEdit мы как раз указываем в Delphi.
Разработчик программного обеспечения и графический дизайнер могут сотрудничать, просто гарантируя, что дизайнер предоставит идентификаторы HTML-элементов разработчику программного обеспечения, или разработчик программного обеспечения может предоставить список идентификаторов элементов управления, необходимых графическому дизайнеру.
В качестве альтернативы сопоставление между элементами управления пользовательского интерфейса в дизайнере форм и элементами HTML также можно выполнить с помощью редактора привязок, который вызывается командой Control Binding из контекстного меню TWebForm дизайнера форм.
В этом редакторе привязки элементов управления возможны два представления: представление, которое показывает элементы управления пользовательского интерфейса, найденные в форме в первом столбце, и возможность выбрать в правом столбце элемент HTML для сопоставления элемента управления и наоборот на вкладке HTML Element-Control. Само за себя говорит, что использование этой техники позволяет нам использовать преимущества адаптивного дизайна для веб-приложений TMS WEB Core.
Когда шаблон HTML для страницы применяет методы адаптивного дизайна, т. е. разные макеты для разных размеров экрана устройства, элементы управления пользовательского интерфейса будут отображаться там, где дизайнер определил, что они должны отображаться в зависимости от размера экрана. Но это еще не все. Также можно позволить UI, разработанному Delphi, быть сгенерированным в основной части страницы HTML или в любом указанном элементе контейнера HTML на странице HTML.
Таким образом, графический дизайнер может создать макет страницы с заголовком, подвалом и другими элементами на странице HTML и добавить определенную область с помощью элемента HTML DIV или SPAN, в которой будет сгенерирован разработанный Delphi пользовательский интерфейс. Для этого все, что нужно — это задать идентификатор для элемента HTML, в котором должна быть сгенерирована форма с помощью свойства Form.AppContent.
CSS в Delphi
Наконец, каждый элемент управления пользовательского интерфейса также предоставляет свойство ElementClassName. С помощью этого свойства ElementClassName можно указать стиль CSS для элемента управления пользовательского интерфейса. Таким образом, например, очень легко использовать такой популярный фреймворк, как bootstrap. Достаточно задать имена классов CSS bootstrap для элементов управления пользовательского интерфейса в конструкторе форм Delphi с помощью их свойств ElementClassName.
Здесь свойство ElementClass элемента управления редактированием на форме установлено в стиле bootstrap form-control. Просто изменив тему bootstrap с помощью изменения ссылки в шаблоне страницы HTML (просто путем подключения фреймворка), внешний вид веб-приложения автоматически адаптируется. Задается это таким образом:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Мой Web-проект на Delphi</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
</body>
</html>
Дальнейшая тонкая настройка того, как внешний вид компонентов времени разработки преобразуется во внешний вид времени выполнения, возможна с помощью свойств элемента управления пользовательского интерфейса ElementFont и ElementPosition.
По умолчанию свойство элемента управления пользовательского интерфейса ElementFont установлено в efProperty. Это означает, что значения свойства Font элемента управления пользовательского интерфейса будут использоваться для генерации атрибутов стиля для элемента HTML (в случае, если ElementID и ElementClassName пустые). Когда ElementFont установлено в efCSS, это означает, что шрифт для элемента HTML будет определяться разрешением CSS браузера.
Давайте рассмотрим веб-форму нашего учебного проекта с 3 элементами управления. Шрифт для элементов управления был установлен во время разработки на Verdana, 10pt. В браузере это отображается точно так же:
Теперь изменим свойство ElementFont на всех элементах управления на efCSS и включим следующий CSS в unit1.html формы:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Мой Web-проект на Delphi</title>
<style>
*{
font-family: Courier New;
font-size: 12pt
}
</style>
</head>
<body>
</body>
</html>
В результате этих действия будет следующее:
Из рисунка видно, что шрифт элементов управления изменился.
Свойство ElementPosition определяет, как координаты, основанные на конструкторе форм, используются в качестве атрибутов стиля для элемента HTML. Если ElementPosition установлено в epAbsolute (по умолчанию), атрибуты стиля элемента HTML устанавливаются в абсолютные значения, а положение и размер элемента управления будут точно соответствовать тому, как они были разработаны в конструкторе форм. Если установлено значение epRelative или epNone, макет, положение и размер элемента HTML будут определяться браузером и возможным CSS, примененным к элементу(ам) HTML.
То есть, вы можете разработать внешний вид приложения в классической Delphi-манере и это приложение будет отличаться только тем, что оно будет запускаться в браузере. Браузер будет, своего рода промежуточной оболочкой. Но вы можете сделать свое приложение и в виде сайта, если позволите CSS управлять внешним видом элементов управления.
JavaScript и CSS в Delphi
В предыдущем пункте статьи было объяснено, как форма использует HTML-файл, и что HTML-файл может содержать HTML-элементы, CSS, JavaScript, а также ссылки на существующие библиотеки JavaScript и CSS, такие как, например Bootstrap.
Хотя эти ссылки всегда можно вручную добавить в HTML-файл (как я это показывал, добавляя ссылку в теге на Bootstrap), IDE также обеспечивает автоматическую вставку или удаление таких ссылок. Для этого выберите в контекстном меню окна менеджера проектов, выделив предварительно нужный проект пункт меню: «Manage JavaScript Libraries …» (Управление библиотеками JavaScript).
Это открывает диалоговое окно с несколькими предварительно настроенными популярными библиотеками JavaScript, которые можно добавить.
В этом диалоговом окне просто отметьте библиотеки JavaScript, которые вы хотите использовать для своего проекта.
С помощью кнопки «Add» вы также можете вставить сюда свои собственные предпочтительные библиотеки JavaScript или CSS. Эти пользовательские настройки сохраняются, даже когда вы устанавливаете более новую версию TMS WEB Core.
