Difference between revisions of "fpCEF3/de"

From Lazarus wiki
Jump to navigationJump to search
m (Fixed syntax highlighting)
 
(11 intermediate revisions by one other user not shown)
Line 16: Line 16:
 
Neben dem Lazarus Package muss auch das Framework selbst heruntergeladen und dem eigenen Projekt zur Verfügung gestellt werden. Wichtig dabei ist, dass das Framework zu dem Package passt. Welches das ist und weitere hilfreiche Installationshinweise sind auf Github zu finden: [https://github.com/dliw/fpCEF3 https://github.com/dliw/fpCEF3]
 
Neben dem Lazarus Package muss auch das Framework selbst heruntergeladen und dem eigenen Projekt zur Verfügung gestellt werden. Wichtig dabei ist, dass das Framework zu dem Package passt. Welches das ist und weitere hilfreiche Installationshinweise sind auf Github zu finden: [https://github.com/dliw/fpCEF3 https://github.com/dliw/fpCEF3]
  
Zum Zeitpunkt der Erstellung dieser Beschreibung (Juni 2015), ist CEF 3.1750 das benötigte Framework.
+
Zum Zeitpunkt der Überarbeitung dieser Beschreibung (Mai 2016), ist CEF 3.2526.1373 das benötigte Framework.
  
 
===Download Package===
 
===Download Package===
Line 61: Line 61:
 
* Kopieren Sie das komplette CEF3-Verzeichnis ''Resources'' nach ''C:\SimpleBrowser''
 
* Kopieren Sie das komplette CEF3-Verzeichnis ''Resources'' nach ''C:\SimpleBrowser''
 
* Kopieren Sie den Inhalt vom CEF3-Verzeichnis ''Release'' in das Verzeichnis ''C:\SimpleBrowser''  
 
* Kopieren Sie den Inhalt vom CEF3-Verzeichnis ''Release'' in das Verzeichnis ''C:\SimpleBrowser''  
Die Dateien, wie ''libcef.dll'', ''natives_blob.bin'', ''icudtl.dat'' befinden sich somit im gleichen Verzeichnis, wie das Projekt, das Verzeichnis ''locales'' unter ''C:\SimpleBrowser\locales''.<br><br>
+
Die Dateien, wie ''libcef.dll'', ''natives_blob.bin'', ''icudtl.dat'' befinden sich somit im gleichen Verzeichnis, wie das Projekt, das Verzeichnis ''locales'' unter ''C:\SimpleBrowser\locales''.<br>
 +
Um Missverständnisse zu vermeiden ist hier nochmal die Dateistruktur für den Simplebrowser als Bild beigefügt:<br><br>
 +
[[Image:FilesForSimplebrowser.png]]<br><br>  
  
 
Erstellen Sie nun das Projekt mit Lazarus
 
Erstellen Sie nun das Projekt mit Lazarus
Line 72: Line 74:
 
* Erstellen Sie für den TEditButton <tt>edtURL</tt> den <tt>OnButtonClick</tt>-Eventhandler, in dem Sie im Objektinspektor Tab <tt>Ereignisse</tt> das Feld <tt>OnButtonClick</tt> wählen und auf den Button [...] klicken
 
* Erstellen Sie für den TEditButton <tt>edtURL</tt> den <tt>OnButtonClick</tt>-Eventhandler, in dem Sie im Objektinspektor Tab <tt>Ereignisse</tt> das Feld <tt>OnButtonClick</tt> wählen und auf den Button [...] klicken
 
* Schreiben Sie folgenden Code (Chromium soll bei jedem Klick die im Textfeld hinterlegte URL öffnen):
 
* Schreiben Sie folgenden Code (Chromium soll bei jedem Klick die im Textfeld hinterlegte URL öffnen):
<syntaxhighlight>procedure TForm1.edtURLClick(Sender: TObject);
+
<syntaxhighlight lang=pascal>procedure TForm1.edtURLClick(Sender: TObject);
 
begin
 
begin
 
   Chromium.Load(UTF8Decode(edtURL.Text));
 
   Chromium.Load(UTF8Decode(edtURL.Text));
 
end; </syntaxhighlight>
 
end; </syntaxhighlight>
 
* Beim Start des Programms muss <tt>Chromium</tt> initialisiert werden, dazu können Sie den <tt>OnCreate</tt>-Eventhandler des Formulars nutzen:
 
* Beim Start des Programms muss <tt>Chromium</tt> initialisiert werden, dazu können Sie den <tt>OnCreate</tt>-Eventhandler des Formulars nutzen:
<syntaxhighlight>procedure TForm1.FormCreate(Sender: TObject);
+
<syntaxhighlight lang=pascal>procedure TForm1.FormCreate(Sender: TObject);
 
var
 
var
 
   PrjPath: ustring;
 
   PrjPath: ustring;
 
   Lang, FallbackLang: string;
 
   Lang, FallbackLang: string;
 
begin
 
begin
   PrjPath := UTF8Decode(ExtractFilePath(ParamStr(0)));
+
   PrjPath := UTF8Decode(GetCurrentDir + PathDelim);
 
   CefLocalesDirPath := PrjPath + 'locales';
 
   CefLocalesDirPath := PrjPath + 'locales';
 
   GetLanguageIDs(Lang, FallbackLang);
 
   GetLanguageIDs(Lang, FallbackLang);
Line 89: Line 91:
 
end;</syntaxhighlight>
 
end;</syntaxhighlight>
 
* Sollte ein Bezeichner nicht gefunden werden, so muss möglicherweise noch eine Unit in die Uses-Clause aufgenommen werden z.B.:  
 
* Sollte ein Bezeichner nicht gefunden werden, so muss möglicherweise noch eine Unit in die Uses-Clause aufgenommen werden z.B.:  
<syntaxhighlight>uses
+
<syntaxhighlight lang=pascal>uses
 
   sysutils, Forms, EditBtn, cef3lcl, cef3intf, cef3types, cef3lib, gettext;  </syntaxhighlight>
 
   sysutils, Forms, EditBtn, cef3lcl, cef3intf, cef3types, cef3lib, gettext;  </syntaxhighlight>
 
* Starten Sie Ihr Programm, wenn alles gut läuft könnte es so aussehen:
 
* Starten Sie Ihr Programm, wenn alles gut läuft könnte es so aussehen:
[[Image:SimpleChromium.png]]
+
[[Image:SimpleChromium.png]]<br><br>
  
===Anzeigen der geladenen Seite===
+
===Zeige URL der geladenen Seite===
  
Basierend auf dem [[Minimalbeispiel]]
+
Basierend auf dem [[#Minimalbeispiel|Minimalbeispiel]]
  
 
* Erstellen Sie für <tt>Chromium</tt> den <tt>OnLoadEnd</tt>-Eventhandler
 
* Erstellen Sie für <tt>Chromium</tt> den <tt>OnLoadEnd</tt>-Eventhandler
 
* Schreiben Sie folgenden Code (URL soll nach jedem browsen aktualisiert werden):
 
* Schreiben Sie folgenden Code (URL soll nach jedem browsen aktualisiert werden):
<syntaxhighlight>procedure TForm1.ChromiumLoadEnd(Sender: TObject; const Browser: ICefBrowser;
+
<syntaxhighlight lang=pascal>procedure TForm1.ChromiumLoadEnd(Sender: TObject; const Browser: ICefBrowser;
 
   const Frame: ICefFrame; httpStatusCode: Integer);
 
   const Frame: ICefFrame; httpStatusCode: Integer);
 
begin
 
begin
 
   edtURL.Text:=UTF8Encode(Browser.MainFrame.Url);
 
   edtURL.Text:=UTF8Encode(Browser.MainFrame.Url);
 
end; </syntaxhighlight>
 
end; </syntaxhighlight>
 +
 +
===Download von Dateien ermöglichen===
 +
 +
* Erstellen Sie für <tt>Chromium</tt> den <tt>OnBeforeDownload</tt>-Eventhandler und fügen Sie ein:
 +
<syntaxhighlight lang=pascal>procedure TForm1.ChromiumBeforeDownload(Sender: TObject;
 +
  const Browser: ICefBrowser; const downloadItem: ICefDownloadItem;
 +
  const suggestedName: ustring; const callback: ICefBeforeDownloadCallback);
 +
begin
 +
  callback.Cont(suggestedName, True);
 +
end; </syntaxhighlight>
 +
 +
===Drucken per Code===
 +
 +
* Fügen Sie ein <tt>TButton</tt> auf Ihr Formular ein und schreiben in dessen <tt>OnClick</tt> Ereignisbehandlungsroutine:
 +
<syntaxhighlight lang=pascal>procedure TForm1.Button1Click(Sender: TObject);
 +
begin
 +
  Chromium.Browser.Host.Print;
 +
end; </syntaxhighlight>
 +
 +
===Erstellen eines PDFs===
 +
 +
* Fügen Sie ein <tt>TSaveDialog</tt> Ihrem Formular hinzu
 +
* Fügen Sie ein <tt>TButton</tt> Ihrem Formular hinzu und schreiben in dessen <tt>OnClick</tt> Ereignisbehandlungsroutine:
 +
<syntaxhighlight lang=pascal>procedure TForm1.Button1Click(Sender: TObject);
 +
var
 +
  CefPdfPrintSettings: TCefPdfPrintSettings;
 +
  EmptyCefStringUtf16: TCefStringUtf16;
 +
begin
 +
  SaveDialog1.DefaultExt := 'pdf';
 +
  SaveDialog1.Filter    := 'Portable Document Format (pdf)|*.pdf';
 +
  if SaveDialog1.Execute then
 +
  begin
 +
    FillByte(EmptyCefStringUtf16, SizeOf(EmptyCefStringUtf16), 0);
 +
 +
    CefPdfPrintSettings.backgrounds_enabled := 1;
 +
    CefPdfPrintSettings.header_footer_enabled := 0;
 +
    CefPdfPrintSettings.header_footer_title := EmptyCefStringUtf16;
 +
    CefPdfPrintSettings.header_footer_url := EmptyCefStringUtf16;
 +
    CefPdfPrintSettings.landscape := 0;
 +
    CefPdfPrintSettings.margin_bottom := 0;
 +
    CefPdfPrintSettings.margin_left := 0;
 +
    CefPdfPrintSettings.margin_right := 0;
 +
    CefPdfPrintSettings.margin_top := 0;
 +
    CefPdfPrintSettings.margin_type := PDF_PRINT_MARGIN_DEFAULT;
 +
    CefPdfPrintSettings.page_height := 0;
 +
    CefPdfPrintSettings.page_width := 0;
 +
    CefPdfPrintSettings.selection_only := 0;
 +
 +
    Chromium.Browser.Host.PrintToPdf(UTF8Decode(SaveDialog1.FileName), CefPdfPrintSettings, Nil);
 +
  end;
 +
end; </syntaxhighlight>
 +
 +
Die Beschreibung der einzelnen Settings finden Sie in der Deklaration von <tt>TCefPdfPrintSettings</tt>.
 +
 +
==Bekannte Probleme==
 +
 +
* Wenn das Programm nicht gestartet werden kann, wird dieses möglicherweise von einem Antivirusprogramm verhindert.
 +
* Wenn das Programm gestartet wird, das TChromiumfenster aber leer bleibt, kann eine Firewall möglicherweise der Verursacher sein (Siehe [http://forum.lazarus.freepascal.org/index.php/topic,31361.0.html Chromium Embedded Framework for Free Pascal (fpCEF3) BRUNCH 2556]).
 +
* Wenn die Dateistruktur nicht stimmt (Siehe [[#Minimalbeispiel|Minimalbeispiel]]) und somit bestimmte Bibliotheken nicht geladen werden können, können Probleme bei der Darstellung auftauchen (Siehe [http://forum.lazarus.freepascal.org/index.php/topic,30763.0.html Fpcef red borders in the browser]).
  
 
==Weitere Informationen==
 
==Weitere Informationen==

Latest revision as of 05:14, 16 February 2020

Deutsch (de) | English (en)

Beschreibung

SimpleChromium.png

Chromium ist ein Open-Source-Projekt (von Google), welches einen eigenen Browser für unterschiedliche Plattformen zu entwickeln als Ziel hat. Unter anderem basiert der Browser Chrome auf diesen Quelldaten.

Das Chromium Embedded Framework (CEF) ist ein Open-Source-Framework zum Einbetten eines Browser- Controls basierend auf Chromium. Es kann auf Linux, Mac OS X und Windows in 32 und 64 Bit-Versionen genutzt werden. CEF gibt es in den Versionen CEF1 und CEF3 wobei CEF1 nicht mehr weiterentwickelt wird.

Es gibt für Delphi ein Framework (Delphi Chromium Embedded Framework - DCEF3) und zwei Ableger, die auch für Lazarus/FreePascal genutzt werden können (fpCEF3 und WACEF).

Installation

Neben dem Lazarus Package muss auch das Framework selbst heruntergeladen und dem eigenen Projekt zur Verfügung gestellt werden. Wichtig dabei ist, dass das Framework zu dem Package passt. Welches das ist und weitere hilfreiche Installationshinweise sind auf Github zu finden: https://github.com/dliw/fpCEF3

Zum Zeitpunkt der Überarbeitung dieser Beschreibung (Mai 2016), ist CEF 3.2526.1373 das benötigte Framework.

Download Package

fpCEF3 kann per Git

git://github.com/dliw/fpCEF3.git

oder auch gezippt heruntergeladen (und in ein separates Verzeichnis entpackt) werden:

master.zip

Installation des Packages

Chromium.png

Nach dem Herunterladen des Packages fpCEF3, kann dieses in Lazarus installiert werden:

  • Starten Sie Lazarus und öffnen Sie im Hauptmenu Package -> Package-Datei (.lpk) öffnen ...
  • Wählen Sie fpCEF3-Verzeichnis das Unterverzeichnis Component und öffnen Sie die Datei cef3.lpk
  • Das Packagebearbeitungsfenster wird geöffnet
  • Klicken Sie auf Kompilieren. Das Package wird nun kompiliert
  • Klicken Sie nun auf Nutzung ... -> Installieren und bestätigen Sie das sich öffnende Fenster mit Ja
  • Lazarus wird nun neu kompiliert und ein neuer Reiter Chromium in der Komponentenpalette erstellt

Download Framework CEF3

Nun muss noch das Framework heruntergeladen und dessen Libraries für ein jeweiliges Projekt zur Verfügung gestellt werden. Dieses kann man von folgenden Seiten herunterladen:
https://cefbuilds.com
http://www.magpcss.net/cef_downloads (eine ältere Version von hier)

Light bulb  Hinweis: Unbedingt beachten, welche Frameworkversion mit dem aktuellen fpCEF3 genutzt werden kann! Siehe Installation

Verwendung

Minimalbeispiel

Es wird ein Minimalbeispiel erstellt, dass die Verwendung als einfachen Browser zeigen soll.

Windows

Da für das Laden die CEF-Bibliotheken benötigt werden, ist es sinnvoll ein neuen Projektordner anzulegen, das Projekt und die Bibliotheken darin gemeinsam zu speichern.

  • Erstellen Sie mit dem Windows Explorer ein neues Verzeichnis für das Projekt an einen Ort Ihrer Wahl z.B. C:\SimpleBrowser
  • Kopieren Sie das komplette CEF3-Verzeichnis Resources nach C:\SimpleBrowser
  • Kopieren Sie den Inhalt vom CEF3-Verzeichnis Release in das Verzeichnis C:\SimpleBrowser

Die Dateien, wie libcef.dll, natives_blob.bin, icudtl.dat befinden sich somit im gleichen Verzeichnis, wie das Projekt, das Verzeichnis locales unter C:\SimpleBrowser\locales.
Um Missverständnisse zu vermeiden ist hier nochmal die Dateistruktur für den Simplebrowser als Bild beigefügt:

FilesForSimplebrowser.png

Erstellen Sie nun das Projekt mit Lazarus

  • Erstellen Sie eine neue leere GUI-Anwendung
  • Speichern Sie das Projekt in das von Ihnen festgelegte Verzeichnis z.B. für Windows unter C:\SimpleBrowser
  • Legen Sie ein TEditButton auf dem Formular ab und geben Sie ihm im Objektinspektor den Namen edtURL und richten ihn oben am Formular aus, indem Sie das Align auf alTop stellen
  • Beschriften Sie die ButtonCaption mit Go
  • Legen Sie nun noch ein TChromium auf dem Formular ab und geben diesen den Namen Chromium und stellen dessen Align auf alClient
  • Erstellen Sie für den TEditButton edtURL den OnButtonClick-Eventhandler, in dem Sie im Objektinspektor Tab Ereignisse das Feld OnButtonClick wählen und auf den Button [...] klicken
  • Schreiben Sie folgenden Code (Chromium soll bei jedem Klick die im Textfeld hinterlegte URL öffnen):
procedure TForm1.edtURLClick(Sender: TObject);
begin
  Chromium.Load(UTF8Decode(edtURL.Text));
end;
  • Beim Start des Programms muss Chromium initialisiert werden, dazu können Sie den OnCreate-Eventhandler des Formulars nutzen:
procedure TForm1.FormCreate(Sender: TObject);
var
  PrjPath: ustring;
  Lang, FallbackLang: string;
begin
  PrjPath := UTF8Decode(GetCurrentDir + PathDelim);
  CefLocalesDirPath := PrjPath + 'locales';
  GetLanguageIDs(Lang, FallbackLang);
  CefLocale := UTF8Decode(FallbackLang);
  edtURL.Text:='http://www.lazarus-ide.org/';
end;
  • Sollte ein Bezeichner nicht gefunden werden, so muss möglicherweise noch eine Unit in die Uses-Clause aufgenommen werden z.B.:
uses
  sysutils, Forms, EditBtn, cef3lcl, cef3intf, cef3types, cef3lib, gettext;
  • Starten Sie Ihr Programm, wenn alles gut läuft könnte es so aussehen:

SimpleChromium.png

Zeige URL der geladenen Seite

Basierend auf dem Minimalbeispiel

  • Erstellen Sie für Chromium den OnLoadEnd-Eventhandler
  • Schreiben Sie folgenden Code (URL soll nach jedem browsen aktualisiert werden):
procedure TForm1.ChromiumLoadEnd(Sender: TObject; const Browser: ICefBrowser;
  const Frame: ICefFrame; httpStatusCode: Integer);
begin
  edtURL.Text:=UTF8Encode(Browser.MainFrame.Url);
end;

Download von Dateien ermöglichen

  • Erstellen Sie für Chromium den OnBeforeDownload-Eventhandler und fügen Sie ein:
procedure TForm1.ChromiumBeforeDownload(Sender: TObject;
  const Browser: ICefBrowser; const downloadItem: ICefDownloadItem;
  const suggestedName: ustring; const callback: ICefBeforeDownloadCallback);
begin
  callback.Cont(suggestedName, True);
end;

Drucken per Code

  • Fügen Sie ein TButton auf Ihr Formular ein und schreiben in dessen OnClick Ereignisbehandlungsroutine:
procedure TForm1.Button1Click(Sender: TObject);
begin
  Chromium.Browser.Host.Print;
end;

Erstellen eines PDFs

  • Fügen Sie ein TSaveDialog Ihrem Formular hinzu
  • Fügen Sie ein TButton Ihrem Formular hinzu und schreiben in dessen OnClick Ereignisbehandlungsroutine:
procedure TForm1.Button1Click(Sender: TObject);
var
  CefPdfPrintSettings: TCefPdfPrintSettings;
  EmptyCefStringUtf16: TCefStringUtf16;
begin
  SaveDialog1.DefaultExt := 'pdf';
  SaveDialog1.Filter     := 'Portable Document Format (pdf)|*.pdf';
  if SaveDialog1.Execute then
  begin
    FillByte(EmptyCefStringUtf16, SizeOf(EmptyCefStringUtf16), 0);

    CefPdfPrintSettings.backgrounds_enabled := 1;
    CefPdfPrintSettings.header_footer_enabled := 0;
    CefPdfPrintSettings.header_footer_title := EmptyCefStringUtf16;
    CefPdfPrintSettings.header_footer_url := EmptyCefStringUtf16;
    CefPdfPrintSettings.landscape := 0;
    CefPdfPrintSettings.margin_bottom := 0;
    CefPdfPrintSettings.margin_left := 0;
    CefPdfPrintSettings.margin_right := 0;
    CefPdfPrintSettings.margin_top := 0;
    CefPdfPrintSettings.margin_type := PDF_PRINT_MARGIN_DEFAULT;
    CefPdfPrintSettings.page_height := 0;
    CefPdfPrintSettings.page_width := 0;
    CefPdfPrintSettings.selection_only := 0;

    Chromium.Browser.Host.PrintToPdf(UTF8Decode(SaveDialog1.FileName), CefPdfPrintSettings, Nil);
  end;
end;

Die Beschreibung der einzelnen Settings finden Sie in der Deklaration von TCefPdfPrintSettings.

Bekannte Probleme

Weitere Informationen

--Michl 22:58, 1 June 2015 (CEST)