fpCEF3/de

From Free Pascal wiki
Revision as of 09:44, 4 May 2016 by Michl (talk | contribs)
Jump to navigationJump to search

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)