incrustar webview en un TDockPnel - SOLUCIONADO

[leandro]

Hola buenas tardes para todos

Queremos iniciar con el uso de la clase webview, ya logramos compilar el ejemplo webview.prg y webviewuni.prg, funcionaron correctamente.

Ahora necesitamos empezar a integrar estas opciones dentro de nuestra aplicación.

En este momento al inicio del programa, mostramos información de interés para nuestros usuarios, la cual halamos directamente desde nuestro sitio web y la incrustamos dentro de un panel de la clase TDockPnel, ahora necesitamos convertir ese código para que se pueda mostrar con la clase webview.
En este momento lo estamos haciendo de la siguiente manera:

Code: Select all  Expand view  RUN

********************************************
*Mostramos la información interes pagina web
********************************************
Function MuetraInfoWeb(oP, nT, nL, nH, nW )
Local cUrl := "https://hymplus.com/publi/"
Local oActiveX, oHttp, oActiveXdo

DeleteUrlCacheEntry( cUrl )
oActiveX := TActiveX():New( oP, "Shell.Explorer.2", nT, nL, nW, nH )
oActivex:Silent := .T.
oActiveX:lVisible := .T.
//oActiveX:Do( "Navigate", cUrl )
oActiveX:Navigate2( cUrl )
oActivex:SetFocus()
WHILE oActivex:Busy
  SysWait(.2)
  //Sleep( 30 )
ENDDO
oActiveXdo := oActiveX:Document()
oHttp := oActiveX:GetProp( "Document" )
IF Empty( oHttp )
    MsgInfo( "Problemas al cargar la info", ;
             "Problemas al cargar la info" )
    RETURN( .F. )
ENDIF
Return oActiveX    
 

Como hacemos lo mismo pero usando la clase webview?

Code: Select all  Expand view  RUN

   //Este es el ejemplo que viene en el directorio de samples
   local oWebView := TWebView():New()

   oWebView:Navigate( "https://hymplus.com/publi" )
   oWebView:SetTitle( "Microsoft Edge WebView working from FWH" )
   oWebView:SetSize( 1200, 800 )
   oWebView:SetUserAgent( "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Mobile Safari/537.36" )
   sleep( 300 )
   oWebView:Run()
   oWebView:Destroy()
 

Hemos buscando información en el foro, pero parece que este tema es muy nuevo.

[cnavarro]

Hazte un ejemplo incrustándolo en un TPanel normal, y lo demás será coser y cantar

[leandro]

jejejejejeje gracias por responder

Es que ese es el problema amigo no tengo ni idea por donde empezar.

[leandro]

Buenos días para todos

Siguiendo el consejo de nuestro amigo Cristobal, monte un ejemplo para incrustar el webview en un tdockpnel, pero nada que lo logramos.

Alguien sabe que falta?

Este ejemplo fue compilado con xharbour y fwh2210

Code: Select all  Expand view  RUN

//----------------------------------------------------------------------------//
// ( C ) Cristobal Navarro - 2020
// TDockPnel with ActiveX
//----------------------------------------------------------------------------//

#include "Fivewin.ch"
#include "colores.ch"

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Static oWindow
Static nWAncho
Static nWAlto
Static nCol  
Static nRow  

Static oFont
Static oFontB
Static oFontD
Static oFont1
Static oFont2
Static oFont3
Static oFont4
Static oFontE
Static oFontS
Static oFontCtrl
Static cPathApp

Static oDock1
Static oDock2
Static oDock3
Static oDock4
Static oDock5

Static cText := ""

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Function Main()

   local cFont         := "Segoe UI Symbol" //TAHOMA   //CALIBRI

   DEFINE FONT oFont  NAME cFont SIZE 0,-11
   DEFINE FONT oFontB NAME cFont SIZE 0,-14 BOLD     //ARIAL NARROW
   DEFINE FONT oFont1 NAME cFont SIZE 0,-11 BOLD
   DEFINE FONT oFontE NAME cFont SIZE 0,-14
   DEFINE FONT oFont2 NAME cFont SIZE 0,-16
   DEFINE FONT oFont3 NAME cFont SIZE 0,-20 //BOLD
   DEFINE FONT oFont4 NAME "CALIBRI" SIZE 0,-16
   DEFINE FONT oFontCtrl NAME cFont SIZE 0, -9 BOLD
   DEFINE FONT oFontS NAME "FIXEDSYS" SIZE 0,-12

   TestDockPnel()

   oFont:End()
   oFont1:End()
   oFont2:End()
   oFont3:End()
   oFont4:End()
   oFontB:End()
   oFontE:End()
   oFontCtrl:End()
   oFontS:End()

Return nil

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Static Function TestDockPnel()

   local nCol
   local nRow
   
   nWAncho   := Int( GetSysMetrics( 0 ) * 0.95 )
   nWAlto    := Int( GetSysMetrics( 1 ) * 0.95 )
   nCol      := Int( ( GetSysMetrics( 0 ) - nWAncho ) / 2 )
   nRow      := Int( ( GetSysMetrics( 1 ) - nWAlto  ) / 2 ) // + 2

   DEFINE WINDOW oWindow FROM nRow, nCol TO nWAlto + nRow, nWAncho + nCol ; //MDI ;
      PIXEL TITLE "Test TDockPnel Control - " + FWVERSION ;
      COLOR CLR_WHITE, Rgb( 182, 182, 182 )

      CreaDocks()

   ACTIVATE WINDOW oWindow

Return nil

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//


Function CreaDocks()

   local cUrl  := "www.google.es"

   oDock1  := TDockPnel():New( oWindow )
   WITH OBJECT oDock1
      :SetHeightCaption( 40 )
      :SetCoors( { | o | 10 }, { | o | 10 }, ;
                 { | o | Int( o:oWnd:nHeight ) + 54 }, ;
                 { | o | Int( o:oWnd:nWidth ) - XEVal( o:nLeft, o ) * 3 } )
      :SetCaption( { | o | cUrl } )
      :SetColors( CLR_WHITE, METRO_RED, Rgb( 88, 88, 88 ), CLR_WHITE )
      //:SetColors( METRO_RED, CLR_WHITE, Rgb( 88, 88, 88 ), CLR_HGRAY )
      :SetFont( oFont4 )
      :SetBorderSize( 1 )
      :SetImgsFiles( { { "..\bitmaps\16x16\options.bmp", { | o | MyPopupMnu( o ) }, "ToolTip" } } )
      :SetCtrlsPnel( { | o, nT, nL, nH, nW, oB | oB := ShowPageWeb( o, cUrl ), ;
                                                 SetParent( oB:hWnd, o:hWnd ) } )
      :Activate()
   END

Return nil

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Function MyPopupMnu( o )

   local oMnu
   local nRow  := o:nTop  + Int( o:nHeight / 2 )
   local nCol  := o:nLeft + Int( o:nWidth / 2 )

   MENU oMnu POPUP 2013 ;
      COLORSELECT METRO_STEEL, METRO_STEEL, CLR_WHITE ;
      COLORMENU CLR_WHITE, CLR_BLUE ;
      COLORSEPARATOR METRO_STEEL ;
      COLORLEFT CLR_WHITE ;
      FONT oFont4

      MENUITEM "Info" ACTION MsgInfo( "Class TDockPnel" )
      SEPARATOR
      MENUITEM "Exit" ACTION o:oWnd:oWnd:End()

   ENDMENU
   ACTIVATE MENU oMnu AT nRow, nCol OF o:oWnd

Return oMnu

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Function ShowPageWeb( oParent, cUrl )
    /*
   local oActX

   oActX := CreateObject( "InternetExplorer.Application" )
   WITH OBJECT oActX
      :Visible    := .t.
      :ToolBar    := .f.
      :StatusBar  := .f.
      :MenuBar    := .f.
      :FullScreen := .t.
      :Invoke( "Navigate", cURL )
   END*/
   
     local oWebView := TWebView():New()

   oWebView:Navigate( "http://www.google.com" )
   oWebView:SetParent( oParent )
   oWebView:SetTitle( "Microsoft Edge WebView working from FWH" )
   oWebView:SetSize( 1200, 800 )
   oWebView:SetUserAgent( "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Mobile Safari/537.36" )
   sleep( 300 )
   oWebView:Run()
   oWebView:Destroy()  

Return oWebView

 

[Antonio Linares]

Estimado Leandro,

La clase TWebView no tiene la DATA hWnd sino que tienes que usar este método GetWindow():

SetParent( oB:GetWindow(), o:hWnd )

Aún asi, se queda como congelado, sin poder moverlo con el ratón. Estoy revisándolo por si veo algo más

[Antonio Linares]

Hay un efecto muy curioso,

al crear el WebView la ventana principal y el dockpanel se muestran muy pequeños.

Si no se crea el WebView se ve normal. No entiendo, de momento, por que sucede esto

[cnavarro]

Leandro, prueba asi

Code: Select all  Expand view  RUN

Function CreaDocks()

   local cUrl  := "www.google.es"

   oDock1  := TDockPnel():New( oWindow )
   WITH OBJECT oDock1
      :SetHeightCaption( 40 )
      :SetCoors( { | o | 10 }, { | o | 10 }, ;
                 { | o | Int( o:oWnd:nHeight ) + 54 }, ;
                 { | o | Int( o:oWnd:nWidth ) - XEVal( o:nLeft, o ) * 3 } )
      :SetCaption( { | o | cUrl } )
      :SetColors( CLR_WHITE, METRO_RED, Rgb( 88, 88, 88 ), CLR_WHITE )
      //:SetColors( METRO_RED, CLR_WHITE, Rgb( 88, 88, 88 ), CLR_HGRAY )
      :SetFont( oFont4 )
      :SetBorderSize( 1 )
      :SetImgsFiles( { { "..\bitmaps\16x16\options.bmp", { | o | MyPopupMnu( o ) }, "ToolTip" } } )
      :SetCtrlsPnel( { | o, nT, nL, nH, nW, oB | oB := ShowPageWeb( o, cUrl ) } )
      :Activate()
   END

Return nil

.../...

//----------------------------------------------------------------------------//
//
//----------------------------------------------------------------------------//

Function ShowPageWeb( oParent, cUrl )
 
   local oWebView := TWebView():New( 0, 0 )
   oWebView:Navigate( "http://www.google.com" )
   oWebView:SetTitle( "Microsoft Edge WebView working from FWH" )
   oWebView:SetSize( 1200, 800 )
   oWebView:SetUserAgent( "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.5060.53 Mobile Safari/537.36" )
   oWebView:SetParent( oParent )
//   sleep( 300 )
 
Return oWebView
 

La llamada al method Destroy, te recomiendo que pruebes a hacerla en la llamada de la salida de la aplicacion ( MENUITEM "Exit", por ejemplo o en el valid de la ventana principal ) por lo que tendrás que hacer el objeto oWebView "visible" ( una variable estática ) y de paso te ahorras tener que devolverlo en la function ShowPageWeb

[Antonio Linares]

Querido Cristobal,

Tu código funciona muy bien, muchas gracias

Lo que no entiendo es por qué el título del dock se ve tan pequeño:

[cnavarro]

Antonio
En la function CreaDocks(), cambia la llamada

:SetFont( oFont4 )

Por otro font de los que hay definidos en la function Main

[Antonio Linares]

Cristobal,

gracias por el tip

De todas formas si uso estas líneas:

Code: Select all  Expand view  RUN

  CreaDocks()

   ACTIVATE WINDOW oWindow MAXIMIZED

La ventana no aparece maximizada. Si comento la llamada a CreaDocks() entonces si se maximiza.

Hay un efecto extraño en el pintado, no se si será por la tarjeta gráfica. Cuando inicia la aplicación los botones de la ventana se ven muy pequeños y el alto del titulo de la ventana aparece mas pequeña de lo normal

[leandro]

Excelente amigo, ya funciono de manera correcta en el ejemplo

Voy a implementarla en el código de producción y te cuento como nos va.

[leandro]

Bueno, colocamos el mismo código en producción, compila de manera correcta, pero al intentar cargar la pagina web, sale un error que dice que no puede cargar webview.dll

La dll esta en el mismo directorio del ejecutable

[Antonio Linares]

Leandro,

Tienes que instalar esto además de la DLL de webview:
https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section

[leandro]

Antonio gracias por responder...

esa instalación ya esta hecha, es el mismo computador en donde SI funciona el ejemplo que acabamos de compilar exitosamente con la ayuda de Cristobal.

[Antonio Linares]

Leandro,

La manera más sencilla de averiguar que le falta es ejecutar este programa:

Code: Select all  Expand view  RUN

#include "FiveWin.ch"

function Main()

   MsgInfo( LoadLibrary( "webview.dll" ) )

return nil
 

el EXE al ejecutarse te indicará que DLLs faltan