{"id":2179,"date":"2023-05-12T00:32:48","date_gmt":"2023-05-12T03:32:48","guid":{"rendered":"https:\/\/gladiston.net.br\/?page_id=2179"},"modified":"2023-05-12T00:41:09","modified_gmt":"2023-05-12T03:41:09","slug":"usando-o-componente-cef4","status":"publish","type":"page","link":"https:\/\/gladiston.net.br\/en\/programacao\/lazarus-ide\/usando-o-componente-cef4\/","title":{"rendered":"Usando o componente CEF4Delphi"},"content":{"rendered":"

Chromium \u00e9 um projeto de c\u00f3digo aberto (com contribui\u00e7\u00f5es do Google e outras empresas) para criar um navegador que suporte v\u00e1rias plataformas diferentes. Navegadores como Chrome e Edge s\u00e3o baseados nele.<\/p>\n\n\n\n

O Chromium Embedded Framework (CEF) \u00e9 uma estrutura de c\u00f3digo aberto para incorporar o Chromium em aplicativos do usu\u00e1rio. Pode ser usado em Linux, macOS e Windows nas vers\u00f5es de 32 e 64 bits. Originalmente havia muitas vers\u00f5es do CEF, mas boa parte deles n\u00e3o s\u00e3o mais mantidos, h\u00e1 apenas duas vers\u00f5es vigentes: CEF4 e fpCEF3, esta \u00faltima somente compat\u00edvel com o Lazarus, \u00e9 uma vers\u00e3o mais simples e pr\u00e1tica, por\u00e9m desatualizada tamb\u00e9m e em vers\u00f5es mais recentes do Lazarus nem compila, assim, para este artigo iremos usar o CEF4Delphi, que apesar do nome tem suporte para Delphi e tamb\u00e9m o Lazarus.<\/p>\n\n\n\n

Para Lazarus-IDE ou Delphi, o m\u00e9todo de instala\u00e7\u00e3o \u00e9 basicamente o mesmo, atrav\u00e9s de pacotes. Se voc\u00ea j\u00e1 instalou pacotes antes, n\u00e3o ter\u00e1 problemas em faz\u00ea-lo, basta baix\u00e1-los do reposit\u00f3rio oficial. Os passos a seguir ser\u00e3o para Lazarus, mas com pouca adapta\u00e7\u00e3o voc\u00ea tamb\u00e9m o instalar\u00e1 no Delphi.<\/p>\n\n\n\n

Instalando-o no Lazarus-IDE<\/h2>\n\n\n\n

Primeiro vamos instalar o CEF, n\u00e3o se preocupe, s\u00e3o poucos passos.<\/p>\n\n\n\n

(1) V\u00e1 at\u00e9 a p\u00e1gina:<\/p>\n\n\n\n

https:\/\/github.com\/salvadordf\/CEF4Delphi<\/a><\/p>\n\n\n\n

E leia o processo de instala\u00e7\u00e3o, se algo der errado, isto \u00e9, diferente das instru\u00e7\u00f5es que irei passar, provavelmente o projeto foi atualizado e \u00e9 preciso descobrir o que est\u00e1 faltando.<\/p>\n\n\n\n

(2) Via terminal, v\u00e1 at\u00e9 a pasta onde o seu Lazarus esta instalado, e l\u00e1 procure pela pasta “components” e dispare o comando git:<\/p>\n\n\n\n

cd C:\\lazarus\\components\ngit clone https:\/\/github.com\/salvadordf\/CEF4Delphi.git\ncd CEF4Delphi<\/code><\/pre>\n\n\n\n
Se voc\u00ea usar ‘git branch -r<\/strong>‘, notar\u00e1 que o projeto n\u00e3o est\u00e1 nomeado e nem h\u00e1 versionamento, ou seja, estar\u00e1 sempre na ‘master’. Isso \u00e9 apenas um detalhe, vamos prosseguir.<\/p>\n\n\n\n
(3) Usando a IDE do Lazarus, v\u00e1 Pachage|Open Package File(.lpk) e ent\u00e3o selecione o(s) arquivo(s):<\/p>\n\n\n\n
C:\\lazarus\\components\\CEF4Delphi\\packages\\cef4delphi_lazarus.lpk<\/pre>\n\n\n\n
E ent\u00e3o com o pacote aberto, clique em Compile<\/strong> e se n\u00e3o houver erros ent\u00e3o depois v\u00e1 em Use|Install<\/strong>:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Eventualmente, a pr\u00f3pria IDE sugerir\u00e1 a inclus\u00e3o do pacote DCPCrypt<\/strong>, pois ele \u00e9 requerido n\u00e3o apenas por este pacote, mas muitos outros tamb\u00e9m. \u00c9 imperativo aceitar tal inclus\u00e3o.<\/p>\n\n\n\n
Ap\u00f3s a instala\u00e7\u00e3o, notar\u00e1  a presen\u00e7a de novos componentes na sua IDE:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
O processo de instala\u00e7\u00e3o est\u00e1 agora completo. Mas como us\u00e1-lo? Vamos para o t\u00f3pico seguinte:<\/p>\n\n\n\n
Criando o primeiro projeto:<\/h2>\n\n\n\n
(1) Crie uma pasta vazia, por exemplo, c:\\Projetos-fpc\\Demos<\/p>\n\n\n\n
(2) Agora copie a pasta “C:\\lazarus\\components\\CEF4Delphi\\demos\\Lazarus_Wind”ows\\SimpleBrowser”<\/strong> para dentro de “c:\\Projetos-fpc\\Demos”<\/strong>:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
(3) Abra este demo chamado “SimpleBrowser”, depois v\u00e1 em Project|Project Options, depois em Compiler Options|Configs and Target e seja espec\u00edfico na plataforma que ir\u00e1 usar, neste exemplo, usaremos como Target ‘Win32’ o que significa aplica\u00e7\u00f5es compiladas para Windows 32bits:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u00c9 importante saber isso porque iremos escolher no pr\u00f3ximo passo qual runtime do CEF baixar e ela ter\u00e1 de ser compat\u00edvel com o execut\u00e1vel que ser\u00e1 gerado.<\/p>\n\n\n\n
(4) Ainda em Project|Project Options, v\u00e1 agora em Compiler Options e notar\u00e1 que este projeto esta assim:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Vamos modific\u00e1-lo para ficar assim:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Agora clique em ‘OK’ e nosso projeto est\u00e1 ajustado, vamos agora baixar o runtime apropriado.<\/p>\n\n\n\n
Baixando o runtime apropriado<\/h2>\n\n\n\n
<\/p>\n\n\n\n
Visite novamente a p\u00e1gina do projeto CEF, a saber:<\/p>\n\n\n\n
https:\/\/github.com\/salvadordf\/CEF4Delphi<\/a><\/p>\n\n\n\n
Rolando a tela, ver\u00e1 que voc\u00ea precisa baixar o runtime que s\u00e3o pacotes comprimidos (tarballs) que variam conforme o sistema operacional usado (windows, linux, macos) e arquitetura (32 ou 64bits):<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ent\u00e3o baixe o pacote apropriado para a vers\u00e3o que pretende compilar no Lazarus, no nosso exemplo, \u00e9 Windows 32bits (Win32).<\/p>\n\n\n\n
Recomendo que baixe-o na pasta de Downloads e depois descompacte-o ali mesmo.<\/p>\n\n\n\n
Em Downloads voc\u00ea ter\u00e1 uma subpasta “cef_binary(…)” um nome de pasta bem grande, mas seu conte\u00fado inteiro n\u00e3o nos \u00e9 importante, apenas a subpasta “Release” e “Locales”:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
De todos arquivos e subpastas, iremos precisar apenas das duas grifadas na imagem acima.<\/p>\n\n\n\n
V\u00e1 at\u00e9 a subpasta “Resources”, ent\u00e3o selecione todos os arquivos e subpastas que houverem:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Ent\u00e3o copie-os para a pasta do nosso SimpleProject.<\/p>\n\n\n\n
Agora entre na pasta “Release”, selecione todos os arquivos dentro dela e copie-os para a pasta do SimpleProject:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
No final, sua pasta ficar\u00e1 mais ou menos assim:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
A partir desse momento, voc\u00ea j\u00e1 tem um runtime vi\u00e1vel para seu SimpleProject compilar e rodar, fa\u00e7a o teste e d\u00ea um F9:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Como preparar a cama<\/h2>\n\n\n\n
Muitas vezes, o c\u00f3digo do CEF \u00e9 alien\u00edgena para mim, isto acontece porque trata-se dum port para object pascal a partir de bibliotecas externas para Windows, Linux e MacOS, da\u00ed ent\u00e3o n\u00e3o \u00e9 um c\u00f3digo trivial, assim como voc\u00ea tem que preparar a cama para dormir, neste caso tem inicializar objetos e valores antes de consumir o componente e depois liber\u00e1-los, caso contr\u00e1rio ser\u00e1 um show de ‘access viollation’. Por isso, se voc\u00ea almeja fazer algo intrigante com o CEF, parta dos exemplos que acompanham ele. Usei como referencia o SimpleProject porque ele \u00e9 o mais minimalista que existe e que voc\u00ea pode levar para outras aplica\u00e7\u00f5es com pouca adapta\u00e7\u00e3o.<\/p>\n\n\n\n
Neste simples projeto, voce ir\u00e1 notar em SimpleProject.lpi:<\/p>\n\n\n\n
program SimpleBrowser;\n\n{$I cef.inc}\n\nuses\n  Forms, Interfaces,\n  uCEFApplication,\n  uSimpleBrowser in 'uSimpleBrowser.pas' {Form1};\n\n{$IFDEF WIN32}\n  \/\/ CEF3 needs to set the LARGEADDRESSAWARE flag which allows 32-bit processes to use up to 3GB of RAM.\n  \/\/ If you don't add this flag the rederer process will crash when you try to load large images.\n  {$SetPEFlags $20}\n{$ENDIF}\n\nbegin\n  GlobalCEFApp := TCefApplication.Create;\n\n  \/\/ In case you want to use custom directories for the CEF3 binaries, cache and user data.\n  \/\/ If you don't set a cache directory the browser will use in-memory cache.\n{\n  GlobalCEFApp.FrameworkDirPath     := 'c:\\cef';\n  GlobalCEFApp.ResourcesDirPath     := 'c:\\cef';\n  GlobalCEFApp.LocalesDirPath       := 'c:\\cef\\locales';\n  GlobalCEFApp.EnableGPU            := True;      \/\/ Enable hardware acceleration\n  GlobalCEFApp.cache                := 'c:\\cef\\cache';\n  GlobalCEFApp.UserDataPath         := 'c:\\cef\\User Data';\n}\n\n  \/\/ You *MUST* call GlobalCEFApp.StartMainProcess in a if..then clause\n  \/\/ with the Application initialization inside the begin..end.\n  \/\/ Read this https:\/\/www.briskbard.com\/index.php?lang=en&amp;pageid=cef\n  if GlobalCEFApp.StartMainProcess then\n    begin\n      Application.Initialize;\n      Application.CreateForm(TForm1, Form1);\n      Application.Run;\n    end;           \n\n  GlobalCEFApp.Free;\n  GlobalCEFApp := nil;\nend. <\/pre><\/div>\n\n\n\n
Alguns par\u00e2metros ali s\u00e3o muito interessantes de serem modificados, por exemplo:<\/p>\n\n\n\n
GlobalCEFApp.LocalesDirPath := 'c:\\cef\\locales';<\/code><\/pre>\n\n\n\n
que tal remover o coment\u00e1rio e definir uma pasta para ‘locales’ como:<\/p>\n\n\n\n
GlobalCEFApp.LocalesDirPath := UTF8Decode(GetCurrentDir + PathDelim + 'locales');\t<\/code><\/pre>\n\n\n\n
Assim podemos definir um local mais conveniente para nossas aplica\u00e7\u00f5es.<\/p>\n\n\n\n
E agora?<\/h2>\n\n\n\n
Use os exemplos, eles cont\u00e9m um universo de aplica\u00e7\u00f5es diferentes com estes componentes, os exemplos est\u00e3o em:<\/p>\n\n\n\n
components\/cef4Delphi\/demos\/<\/strong><\/p>\n\n\n\n