FiveTech Support Forums

FiveWin / Harbour / xBase community
Board index FiveWin para Harbour/xHarbour incrustar webview en un TDockPnel - SOLUCIONADO
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
incrustar webview en un TDockPnel - SOLUCIONADO
Posted: Tue Nov 08, 2022 09:03 PM
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 (fw): Select all Collapse
********************************************
*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 (fw): Select all Collapse
   //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.
Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 6755
Joined: Wed Feb 15, 2012 08:25 PM
Re: incrustar webview en un TDockPnel
Posted: Tue Nov 08, 2022 09:52 PM

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

Cristobal Navarro

Hay dos tipos de personas: las que te hacen perder el tiempo y las que te hacen perder la noción del tiempo

El secreto de la felicidad no está en hacer lo que te gusta, sino en que te guste lo que haces
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
Re: incrustar webview en un TDockPnel
Posted: Tue Nov 08, 2022 10:27 PM
jejejejejeje gracias por responder

Es que ese es el problema amigo :oops: no tengo ni idea por donde empezar.
Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
Re: incrustar webview en un TDockPnel
Posted: Fri Dec 09, 2022 04:19 PM
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 (fw): Select all Collapse
//----------------------------------------------------------------------------//
// ( 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
Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Sat Dec 10, 2022 09:27 AM
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 :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Sat Dec 10, 2022 11:03 AM

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

regards, saludos

Antonio Linares
www.fivetechsoft.com
Posts: 6755
Joined: Wed Feb 15, 2012 08:25 PM
Re: incrustar webview en un TDockPnel
Posted: Sat Dec 10, 2022 03:37 PM
Leandro, prueba asi
Code (fw): Select all Collapse
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
Cristobal Navarro

Hay dos tipos de personas: las que te hacen perder el tiempo y las que te hacen perder la noción del tiempo

El secreto de la felicidad no está en hacer lo que te gusta, sino en que te guste lo que haces
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Sat Dec 10, 2022 03:51 PM
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:
regards, saludos

Antonio Linares
www.fivetechsoft.com
Posts: 6755
Joined: Wed Feb 15, 2012 08:25 PM
Re: incrustar webview en un TDockPnel
Posted: Sat Dec 10, 2022 09:20 PM
Antonio
En la function CreaDocks(), cambia la llamada
:SetFont( oFont4 )
Por otro font de los que hay definidos en la function Main
Cristobal Navarro

Hay dos tipos de personas: las que te hacen perder el tiempo y las que te hacen perder la noción del tiempo

El secreto de la felicidad no está en hacer lo que te gusta, sino en que te guste lo que haces
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Sun Dec 11, 2022 08:19 AM
Cristobal,

gracias por el tip

De todas formas si uso estas líneas:
Code (fw): Select all Collapse
   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
regards, saludos

Antonio Linares
www.fivetechsoft.com
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
Re: incrustar webview en un TDockPnel
Posted: Mon Dec 12, 2022 11:54 AM
Excelente amigo, ya funciono de manera correcta en el ejemplo :D

Voy a implementarla en el código de producción y te cuento como nos va.
Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
Re: incrustar webview en un TDockPnel
Posted: Mon Dec 12, 2022 12:17 PM
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

Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Mon Dec 12, 2022 03:16 PM
Leandro,

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

Antonio Linares
www.fivetechsoft.com
Posts: 1818
Joined: Wed Oct 26, 2005 02:49 PM
Re: incrustar webview en un TDockPnel
Posted: Mon Dec 12, 2022 03:30 PM
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.

Saludos
LEANDRO AREVALO
Bogotá (Colombia)
https://hymlyma.com
https://hymplus.com/
leandroalfonso111@gmail.com
leandroalfonso111@hotmail.com

[ Turbo Incremental Link64 6.98 Embarcadero 7.70 ] [ FiveWin 25.01 ] [ xHarbour 64 bits) ]
Posts: 44162
Joined: Thu Oct 06, 2005 05:47 PM
Re: incrustar webview en un TDockPnel
Posted: Mon Dec 12, 2022 04:07 PM
Leandro,

La manera más sencilla de averiguar que le falta es ejecutar este programa:
Code (fw): Select all Collapse
#include "FiveWin.ch"

function Main()

   MsgInfo( LoadLibrary( "webview.dll" ) )

return nil
el EXE al ejecutarse te indicará que DLLs faltan :-)
regards, saludos

Antonio Linares
www.fivetechsoft.com