Рейтинг@Mail.ru

Встраивание браузера Chromium в Delphi приложения

Автор: Alex. Опубликовано в Программирование . просмотров: 518

Рейтинг:  5 / 5

Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна
 

Для отображения HTML-страниц с документами, справок сделанных в Вики или целых веб-порталов в своём приложении, созданном в Delphi, вам понадобится современный встраиваемый браузер, такой как Chromium. О том, как встроить браузер Chromium в своё приложение, узнаем в этой статье.

Встраивание браузера Chromium в Delphi приложения

Прежде всего, нужно отметить, что для встраивания браузера Chromium мы будем использовать библиотеку CEF4Delphi, которая в свою очередь использует фреймворк Chromium Embedded Framework (CEF), который создан как раз для облегчения встраивания браузера Chromium в другие приложения. Получается вот такой слоёный пирог, см. картинку.

Обёртки CEF4Delphi и CEF над браузером Chromium

Для экспериментов я использую Delphi 10.3.3 + VCL + x32. Но по утверждению разработчиков, CEF4Delphi был протестирован с Delphi 7, Delphi XE, Delphi 10, Delphi 10.2, Lazarus 2.0.6 с FPC 3.0.4, поддерживаются VCL, FireMonkey (FMX) и Lazarus, возможна сборка 32 и 64 битных приложений.

Итак, сначала давайте скачаем библиотеку CEF4Delphi. Можете скачать архив с исходниками (ссылка есть на странице проекта в секции Links) или клонировать папку с проектом непосредственно со страницы GitHub. Второй вариант будет удобен для последующего обновления CEF4Delphi.

Чтобы установить компоненты CEF4Delphi в Delphi достаточно после скачивания открыть файл проекта CEF4Delphi.dproj, который находится в папке packages, и выполнить Install. После этого в палитре появились компоненты TChromium, TCEFWindowParent, TChromiumWindow, TBufferPanel, TCEFWorkScheduler, TCEFServerComponent, TCEFLinkedWindowParent, TCEFUrlRequestClientComponent и TCEFSentinel.

Компоненты TChromium

Теперь посмотрите папку demos. Здесь находятся демонстрационные проекты, которые помогут вам быстро стартовать и попробовать те возможности CEF4Delphi, которые вас интересуют.

Для начала давайте откроем проект TabBrowser.dproj, который находится в папке demos\Delphi_VCL\TabbedBrowser. Как вы могли догадаться – это пример браузера с вкладками, где на каждой вкладке будет встроен браузер Chromium.

Если вы начнёте компилировать проект, то увидите, ошибку [dcc32 Fatal Error] TabBrowser.dpr(51): F2613 Unit 'uCEFApplication' not found. Это значит, что нужно прописать пути к папке source, где находятся исходники CEF4Delphi, в проект TabBrowser или в общие настройки Delphi, чтобы не надо было это делать для всех проектов.

Чтобы прописать пути в общих настройках Delphi, выберите пункт меню «Tools -> Options…», потом в диалоге «Language -> Delphi -> Library». Достаточно прописать путь в поле «Library path».

Подключаем пути к библиотеке CEF4Delphi

После этого приложение скомпилируется и запустится, но после запуска вы сразу увидите сообщение, что для работы не хватает бинарных файлов CEF. Список очень большой, поэтому я обрезал диалог, см. картинку.

Диалог с сообщением, что не хватает бинарных файлов CEF

Необходимые бинарные файлы можно скачать по ссылке на странице проекта CEF4Delphi или найти нужный архив с файлами на странице фреймворка CEF. Я скачивал архив «Standard Distribution», но ничего не мешает скачать и «Minimal Distribution».

Версии CEF и браузера Chromium и версии, указанные в CEF4Delphi должны совпадать с теми, что указаны в файле uCEFApplicationCore.pas. У меня это 79.1.31 и 79.0.3945.117:

как определить версию CEF для библиотеки CEF4Delphi

Т.е. когда в будущем вы захотите обновиться, вам нужно будет скачать новую версию CEF+Chromium и синхронно новую версию CEF4Delphi.

Итак, после скачивания архива, скопируйте из него файлы и папки из папок Resources и Release и положите всё это рядом с исполняемым файлом TabBrowser.exe (исполняемые файлы примеров по умолчанию компилируются в папку bin). Вот так это должно выглядеть:

Бинарные файлы фреймворка CEF

Как видите, если вы будете в своём приложении использовать встроенный браузер Chromium, то в ваш проект добавится 71 файл и он увеличится на 237 Мб.

После этого TabBrowser запустился и загрузил страницу www.google.com.

Простой браузер с закладками на основе Chromium

Кроме этого примера в папке demos есть ещё много полезных примеров, например, пример SimpleBrowser – поможет понять основы, CookieVisitor – покажет, как работать с печеньками, PostInspectorBrowser – как перехватывать POST-данные форм, MDIBrowser – как сделать MDI-приложение, где в каждом окошке будет браузер Chromium.

И напоследок, хочу вам напомнить: при создании своего проекта не забывайте, что почти первой строчкой после запуска приложения должно быть создание объекта TCefApplication, а при завершении работы приложения – его удаление. Как это делать, смотрите в файле .dpr каждого примера.

Кстати, если вам нужно, чтобы файлы Chromium лежали в определённых местах, то вы можете задать свои пути с помощью свойств FrameworkDirPath, ResourcesDirPath, LocalesDirPath, Cache и UserDataPath объекта TCefApplication, после его создания.

Итог

Как я уже писал выше, если вы будете использовать в своём приложении браузер Chromium, то вам надо быть готовым к тому, что к вашему приложению добавится 71 файл и объём увеличится на 237 Мб. Если это вас не пугает, то вы добавите в свой арсенал мощный современный встроенный браузер.

Во всём остальном браузер Chromium хорош. Кроме отображения страниц и порталов, с ним вы сможете встраивать HTML5 элементы в ваше существующее приложение, создавать оболочки для пользовательского интерфейса, разработанного с использованием веб-технологий, обрабатывать веб-контент «вне экрана», выступать в качестве хоста для автоматического тестирования существующих веб-свойств и приложений.

Tags: Chromium CEF4Delphi CEF Учебники по программированию Delphi

Комментарии   

Вииалий
0 #1 Вииалий 08.02.2020 21:01
Примеры хорошо посмотреть. а как самому с нуля запустить сайт. создал компонент Chromium1 и CEFWindowParent1 на кнопке висит "Chromium1.LoadURL('http://vk.ru/');" и ничего не происходит.
Процедура
procedure CreateGlobalCEFApp;
var gCommonDir: string;
begin
GlobalCEFApp := TCefApplication.Create;
end;
тоже есть. Как объединить эти компоненты*?
Цитировать
Alex
0 #2 Alex 09.02.2020 20:18
Цитирую Вииалий:
Примеры хорошо посмотреть. а как самому с нуля запустить сайт. создал компонент Chromium1 и CEFWindowParent1 на кнопке висит "Chromium1.LoadURL('http://vk.ru/');" и ничего не происходит.
Процедура
procedure CreateGlobalCEFApp;
var gCommonDir: string;
begin
GlobalCEFApp := TCefApplication.Create;
end;
тоже есть. Как объединить эти компоненты*?

Попробуйте для начала открыть сайт в примере, просто поменяв ссылку. Если в примере получилось, а у вас нет, значит вы что-то упустили в своём приложении. Посмотрите файл .dpr, что там делается, внимательно посмотрите файлы с формой, где открывается страница сайта. Проверьте события на форме.
Цитировать
Виталий2
0 #3 Виталий2 12.02.2020 13:16
Цитирую Alex:
Цитирую Вииалий:
Примеры хорошо посмотреть. а как самому с нуля запустить сайт. создал компонент Chromium1 и CEFWindowParent1 на кнопке висит "Chromium1.LoadURL('http://vk.ru/');" и ничего не происходит.
Процедура
procedure CreateGlobalCEFApp;
var gCommonDir: string;
begin
GlobalCEFApp := TCefApplication.Create;
end;
тоже есть. Как объединить эти компоненты*?

Попробуйте для начала открыть сайт в примере, просто поменяв ссылку. Если в примере получилось, а у вас нет, значит вы что-то упустили в своём приложении. Посмотрите файл .dpr, что там делается, внимательно посмотрите файлы с формой, где открывается страница сайта. Проверьте события на форме.

Если что объединение этих компонентов происходит при создании формы вот если что код Chromium1.CreateBrowser(CEFWindowParent1, '');
Создается браузер и указывается где его отобразить.
Цитировать

Добавить комментарий