fpCEF3/de: what changed
Revision 1 to 2. Removed lines have a minus sign; added lines have a plus sign.
| Old | New | Line | |
|---|---|---|---|
| 1 | - | ||
| 2 | - | ||
| 3 | - | ||
| 4 | - | ||
| 5 | - | ||
| 6 | - | ||
| 7 | - | ||
| 8 | - | ||
| 9 | - | ||
| 10 | - | ||
| 11 | - | ||
| 12 | - | ||
| 13 | - | ||
| 14 | - | ||
| 15 | - | ||
| 16 | - | ||
| 17 | - | ||
| 18 | - | ||
| 19 | - | ||
| 20 | - | ||
| 21 | 1 | ## Beschreibung | |
| 22 | 2 | ||
| 23 | - | ||
| 3 | + | <img src="SimpleChromium.png" title="SimpleChromium.png" width="320" /> | |
| 24 | 4 | ||
| 25 | - | ||
| 5 | + | 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. | |
| 26 | 6 | ||
| 27 | - | ||
| 7 | + | 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. | |
| 28 | 8 | ||
| 29 | - | ||
| 9 | + | 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](https://github.com/dliw/fpCEF3) und [[WACEF/de|WACEF]]). | |
| 30 | 10 | ||
| 31 | 11 | ## Installation | |
| 32 | 12 | ||
| 33 | - | ||
| 13 | + | 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) | |
| 34 | 14 | ||
| 35 | - | ||
| 15 | + | Zum Zeitpunkt der Überarbeitung dieser Beschreibung (Mai 2016), ist CEF 3.2526.1373 das benötigte Framework. | |
| 36 | 16 | ||
| 37 | 17 | ### Download Package | |
| 38 | 18 | ||
| 39 | - | ||
| 40 | - | ||
| 41 | - | ||
| 42 | - | ||
| 19 | + | fpCEF3 kann per [Git](http://git-scm.com/) | |
| 43 | 20 | ||
| 44 | - | ||
| 45 | - | ||
| 46 | - | ||
| 47 | - | ||
| 21 | + | [`git://github.com/dliw/fpCEF3.git`](git://github.com/dliw/fpCEF3.git) | |
| 48 | 22 | ||
| 23 | + | oder auch gezippt heruntergeladen (und in ein separates Verzeichnis entpackt) werden: | |
| 24 | + | ||
| 25 | + | [`master.zip`](https://github.com/dliw/fpCEF3/archive/master.zip) | |
| 26 | + | ||
| 49 | 27 | ### Installation des Packages | |
| 50 | 28 | ||
| 51 | - | ||
| 29 | + |  | |
| 52 | 30 | ||
| 53 | - | ||
| 31 | + | Nach dem Herunterladen des Packages fpCEF3, kann dieses in Lazarus installiert werden: | |
| 54 | 32 | ||
| 55 | - | ||
| 56 | - | ||
| 57 | - | ||
| 58 | - | ||
| 59 | - | ||
| 60 | - | ||
| 33 | + | - Starten Sie Lazarus und öffnen Sie im Hauptmenu *Package* -\> *Package-Datei (.lpk) öffnen ...* | |
| 34 | + | - Wählen Sie fpCEF3-Verzeichnis das Unterverzeichnis *Component* und öffnen Sie die Datei *cef3.lpk* | |
| 35 | + | - Das Packagebearbeitungsfenster wird geöffnet | |
| 36 | + | - Klicken Sie auf *Kompilieren*. Das Package wird nun kompiliert | |
| 37 | + | - Klicken Sie nun auf *Nutzung ...* -\> *Installieren* und bestätigen Sie das sich öffnende Fenster mit *Ja* | |
| 38 | + | - Lazarus wird nun neu kompiliert und ein neuer Reiter *Chromium* in der Komponentenpalette erstellt | |
| 61 | 39 | ||
| 62 | 40 | ### Download Framework CEF3 | |
| 63 | 41 | ||
| 64 | - | ||
| 65 | - | ||
| 66 | - | ||
| 42 | + | 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:\ | |
| 43 | + | [<https://cefbuilds.com>](https://cefbuilds.com)\ | |
| 44 | + | [<http://www.magpcss.net/cef_downloads>](http://www.magpcss.net/cef_downloads) (eine ältere Version von [hier](http://www.magpcss.net/cef_downloads/index.php?query=label%3ADeprecated#list)) | |
| 67 | 45 | ||
| 68 | - | ||
| 46 | + | > **Note:** Unbedingt beachten, welche Frameworkversion mit dem aktuellen [fpCEF3](https://github.com/dliw/fpCEF3) genutzt werden kann! Siehe Installation | |
| 69 | 47 | ||
| 70 | 48 | ## Verwendung | |
| 71 | 49 | ||
| 72 | 50 | ### Minimalbeispiel | |
| 73 | 51 | ||
| 74 | - | ||
| 52 | + | Es wird ein Minimalbeispiel erstellt, dass die Verwendung als einfachen Browser zeigen soll. | |
| 75 | 53 | ||
| 76 | 54 | #### Windows | |
| 77 | 55 | ||
| 78 | - | ||
| 56 | + | 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. | |
| 79 | 57 | ||
| 80 | - | ||
| 81 | - | ||
| 82 | - | ||
| 58 | + | - Erstellen Sie mit dem Windows Explorer ein neues Verzeichnis für das Projekt an einen Ort Ihrer Wahl z.B. *C:\SimpleBrowser* | |
| 59 | + | - Kopieren Sie das komplette CEF3-Verzeichnis *Resources* nach *C:\SimpleBrowser* | |
| 60 | + | - Kopieren Sie den Inhalt vom CEF3-Verzeichnis *Release* in das Verzeichnis *C:\SimpleBrowser* | |
| 83 | 61 | ||
| 84 | - | ||
| 85 | - | ||
| 86 | - | ||
| 87 | - | ||
| 88 | - | ||
| 62 | + | 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*.\ | |
| 63 | + | Um Missverständnisse zu vermeiden ist hier nochmal die Dateistruktur für den Simplebrowser als Bild beigefügt:\ | |
| 89 | 64 | ||
| 90 | - | ||
| 65 | + | \ | |
| 91 | 66 | ||
| 92 | - | ||
| 93 | - | ||
| 94 | - | ||
| 95 | - | ||
| 96 | - | ||
| 97 | - | ||
| 98 | - | ||
| 67 | + | Erstellen Sie nun das Projekt mit Lazarus | |
| 99 | 68 | ||
| 100 | - | ||
| 69 | + | - Erstellen Sie eine neue leere [[Form Tutorial/de|GUI-Anwendung]] | |
| 70 | + | - Speichern Sie das Projekt in das von Ihnen festgelegte Verzeichnis z.B. für Windows unter *C:\SimpleBrowser* | |
| 71 | + | - 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 | |
| 72 | + | - Beschriften Sie die `ButtonCaption` mit `Go` | |
| 73 | + | - Legen Sie nun noch ein `TChromium` auf dem Formular ab und geben diesen den Namen `Chromium` und stellen dessen `Align` auf `alClient` | |
| 74 | + | - 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 | |
| 75 | + | - Schreiben Sie folgenden Code (Chromium soll bei jedem Klick die im Textfeld hinterlegte URL öffnen): | |
| 76 | + | ||
| 77 | + | ``` pascal | |
| 101 | 78 | procedure TForm1.edtURLClick(Sender: TObject); | |
| 102 | - | ||
| 103 | - | ||
| 104 | - | ||
| 79 | + | begin | |
| 80 | + | Chromium.Load(UTF8Decode(edtURL.Text)); | |
| 81 | + | end; | |
| 105 | 82 | ``` | |
| 106 | 83 | ||
| 107 | - | ||
| 84 | + | - Beim Start des Programms muss `Chromium` initialisiert werden, dazu können Sie den `OnCreate`-Eventhandler des Formulars nutzen: | |
| 108 | 85 | ||
| 109 | - | ||
| 86 | + | ``` pascal | |
| 110 | 87 | procedure TForm1.FormCreate(Sender: TObject); | |
| 111 | - | ||
| 112 | - | ||
| 113 | - | ||
| 114 | - | ||
| 115 | - | ||
| 116 | - | ||
| 117 | - | ||
| 118 | - | ||
| 119 | - | ||
| 120 | - | ||
| 88 | + | var | |
| 89 | + | PrjPath: ustring; | |
| 90 | + | Lang, FallbackLang: string; | |
| 91 | + | begin | |
| 92 | + | PrjPath := UTF8Decode(GetCurrentDir + PathDelim); | |
| 93 | + | CefLocalesDirPath := PrjPath + 'locales'; | |
| 94 | + | GetLanguageIDs(Lang, FallbackLang); | |
| 95 | + | CefLocale := UTF8Decode(FallbackLang); | |
| 96 | + | edtURL.Text:='http://www.lazarus-ide.org/'; | |
| 97 | + | end; | |
| 121 | 98 | ``` | |
| 122 | 99 | ||
| 123 | - | ||
| 100 | + | - Sollte ein Bezeichner nicht gefunden werden, so muss möglicherweise noch eine Unit in die Uses-Clause aufgenommen werden z.B.: | |
| 124 | 101 | ||
| 125 | - | ||
| 102 | + | ``` pascal | |
| 126 | 103 | uses | |
| 127 | - | ||
| 104 | + | sysutils, Forms, EditBtn, cef3lcl, cef3intf, cef3types, cef3lib, gettext; | |
| 128 | 105 | ``` | |
| 129 | 106 | ||
| 130 | - | ||
| 107 | + | - Starten Sie Ihr Programm, wenn alles gut läuft könnte es so aussehen: | |
| 131 | 108 | ||
| 132 | - | ||
| 133 | - | ||
| 109 | + | \ | |
| 134 | 110 | ||
| 135 | 111 | ### Zeige URL der geladenen Seite | |
| 136 | 112 | ||
| 137 | 113 | Basierend auf dem Minimalbeispiel | |
| 138 | 114 | ||
| 139 | - | ||
| 140 | - | ||
| 115 | + | - Erstellen Sie für `Chromium` den `OnLoadEnd`-Eventhandler | |
| 116 | + | - Schreiben Sie folgenden Code (URL soll nach jedem browsen aktualisiert werden): | |
| 141 | 117 | ||
| 142 | - | ||
| 118 | + | ``` pascal | |
| 143 | 119 | procedure TForm1.ChromiumLoadEnd(Sender: TObject; const Browser: ICefBrowser; | |
| 144 | - | ||
| 145 | - | ||
| 146 | - | ||
| 147 | - | ||
| 120 | + | const Frame: ICefFrame; httpStatusCode: Integer); | |
| 121 | + | begin | |
| 122 | + | edtURL.Text:=UTF8Encode(Browser.MainFrame.Url); | |
| 123 | + | end; | |
| 148 | 124 | ``` | |
| 149 | 125 | ||
| 150 | 126 | ### Download von Dateien ermöglichen | |
| 151 | 127 | ||
| 152 | - | ||
| 128 | + | - Erstellen Sie für `Chromium` den `OnBeforeDownload`-Eventhandler und fügen Sie ein: | |
| 153 | 129 | ||
| 154 | - | ||
| 130 | + | ``` pascal | |
| 155 | 131 | procedure TForm1.ChromiumBeforeDownload(Sender: TObject; | |
| 156 | - | ||
| 157 | - | ||
| 158 | - | ||
| 159 | - | ||
| 160 | - | ||
| 132 | + | const Browser: ICefBrowser; const downloadItem: ICefDownloadItem; | |
| 133 | + | const suggestedName: ustring; const callback: ICefBeforeDownloadCallback); | |
| 134 | + | begin | |
| 135 | + | callback.Cont(suggestedName, True); | |
| 136 | + | end; | |
| 161 | 137 | ``` | |
| 162 | 138 | ||
| 163 | 139 | ### Drucken per Code | |
| 164 | 140 | ||
| 165 | - | ||
| 141 | + | - Fügen Sie ein `TButton` auf Ihr Formular ein und schreiben in dessen `OnClick` Ereignisbehandlungsroutine: | |
| 166 | 142 | ||
| 167 | - | ||
| 143 | + | ``` pascal | |
| 168 | 144 | procedure TForm1.Button1Click(Sender: TObject); | |
| 169 | - | ||
| 170 | - | ||
| 171 | - | ||
| 145 | + | begin | |
| 146 | + | Chromium.Browser.Host.Print; | |
| 147 | + | end; | |
| 172 | 148 | ``` | |
| 173 | 149 | ||
| 174 | 150 | ### Erstellen eines PDFs | |
| 175 | 151 | ||
| 176 | - | ||
| 177 | - | ||
| 152 | + | - Fügen Sie ein `TSaveDialog` Ihrem Formular hinzu | |
| 153 | + | - Fügen Sie ein `TButton` Ihrem Formular hinzu und schreiben in dessen `OnClick` Ereignisbehandlungsroutine: | |
| 178 | 154 | ||
| 179 | - | ||
| 155 | + | ``` pascal | |
| 180 | 156 | procedure TForm1.Button1Click(Sender: TObject); | |
| 181 | - | ||
| 182 | - | ||
| 183 | - | ||
| 184 | - | ||
| 185 | - | ||
| 186 | - | ||
| 187 | - | ||
| 188 | - | ||
| 189 | - | ||
| 190 | - | ||
| 191 | - | ||
| 192 | - | ||
| 193 | - | ||
| 194 | - | ||
| 195 | - | ||
| 196 | - | ||
| 197 | - | ||
| 198 | - | ||
| 199 | - | ||
| 200 | - | ||
| 201 | - | ||
| 202 | - | ||
| 203 | - | ||
| 204 | - | ||
| 205 | - | ||
| 206 | - | ||
| 207 | - | ||
| 157 | + | var | |
| 158 | + | CefPdfPrintSettings: TCefPdfPrintSettings; | |
| 159 | + | EmptyCefStringUtf16: TCefStringUtf16; | |
| 160 | + | begin | |
| 161 | + | SaveDialog1.DefaultExt := 'pdf'; | |
| 162 | + | SaveDialog1.Filter := 'Portable Document Format (pdf)|*.pdf'; | |
| 163 | + | if SaveDialog1.Execute then | |
| 164 | + | begin | |
| 165 | + | FillByte(EmptyCefStringUtf16, SizeOf(EmptyCefStringUtf16), 0); | |
| 166 | + | ||
| 167 | + | CefPdfPrintSettings.backgrounds_enabled := 1; | |
| 168 | + | CefPdfPrintSettings.header_footer_enabled := 0; | |
| 169 | + | CefPdfPrintSettings.header_footer_title := EmptyCefStringUtf16; | |
| 170 | + | CefPdfPrintSettings.header_footer_url := EmptyCefStringUtf16; | |
| 171 | + | CefPdfPrintSettings.landscape := 0; | |
| 172 | + | CefPdfPrintSettings.margin_bottom := 0; | |
| 173 | + | CefPdfPrintSettings.margin_left := 0; | |
| 174 | + | CefPdfPrintSettings.margin_right := 0; | |
| 175 | + | CefPdfPrintSettings.margin_top := 0; | |
| 176 | + | CefPdfPrintSettings.margin_type := PDF_PRINT_MARGIN_DEFAULT; | |
| 177 | + | CefPdfPrintSettings.page_height := 0; | |
| 178 | + | CefPdfPrintSettings.page_width := 0; | |
| 179 | + | CefPdfPrintSettings.selection_only := 0; | |
| 180 | + | ||
| 181 | + | Chromium.Browser.Host.PrintToPdf(UTF8Decode(SaveDialog1.FileName), CefPdfPrintSettings, Nil); | |
| 182 | + | end; | |
| 183 | + | end; | |
| 208 | 184 | ``` | |
| 209 | 185 | ||
| 210 | - | ||
| 186 | + | Die Beschreibung der einzelnen Settings finden Sie in der Deklaration von `TCefPdfPrintSettings`. | |
| 211 | 187 | ||
| 212 | 188 | ## Bekannte Probleme | |
| 213 | 189 | ||
| 214 | - | ||
| 215 | - | ||
| 216 | - | ||
| 190 | + | - Wenn das Programm nicht gestartet werden kann, wird dieses möglicherweise von einem Antivirusprogramm verhindert. | |
| 191 | + | - Wenn das Programm gestartet wird, das TChromiumfenster aber leer bleibt, kann eine Firewall möglicherweise der Verursacher sein (Siehe [Chromium Embedded Framework for Free Pascal (fpCEF3) BRUNCH 2556](http://forum.lazarus.freepascal.org/index.php/topic,31361.0.html)). | |
| 192 | + | - Wenn die Dateistruktur nicht stimmt (Siehe Minimalbeispiel) und somit bestimmte Bibliotheken nicht geladen werden können, können Probleme bei der Darstellung auftauchen (Siehe [Fpcef red borders in the browser](http://forum.lazarus.freepascal.org/index.php/topic,30763.0.html)). | |
| 217 | 193 | ||
| 218 | 194 | ## Weitere Informationen | |
| 219 | 195 | ||
| 220 | - | ||
| 221 | - | ||
| 196 | + | - [Thread im deutschen Lazarusforum](http://www.lazarusforum.de/viewtopic.php?f=18&t=7676) | |
| 197 | + | - [[Webbrowser]] | |
| 222 | 198 | ||
| 223 | - | ||
| 199 | + | --Michl 22:58, 1 June 2015 (CEST) | |
| 224 | 200 | ||
| 225 | 201 | --- | |
| 226 | - | ||
| 202 | + | *From the Free Pascal wiki, page "fpCEF3/de", as it stood on 2020-02-16 after a change by GAN, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).* | |
| 203 | + | Category: Components/de | |
| 204 | + | Category: Deutsch | |
| 205 | + | Category: LCL/de |