FiveTech Support Forums

FiveWin / Harbour / xBase community
Board index FiveWin para Harbour/xHarbour Mostrar html local usando webview2
Posts: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 01:04 PM
Buenos d铆as para todos

Queremos mostrar un html local en webview, pero no logramos hacer que funcione, nos basamos en el ejemplo webviewuni.prg, para tratar de halar el archivo desde el disco duro, pero no logramos hacer que funcione.

webview3.prg
Code (fw): Select all Collapse
#include "FiveWin.ch"

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

function Main()

聽 聽local oWebView := TWebView():New()

聽 聽oWebView:bOnBind = { | cJson, nCalls | MsgInfo( cJson, nCalls ) }
聽 聽oWebView:Bind( "SendToFWH" )
聽 聽oWebView:Navigate( Html() )
聽 聽Sleep( 200 )
聽 聽oWebView:Run()
聽 聽oWebView:Destroy()

return nil

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

function Html()
聽 聽local cHtml := memoread(".\index.html")
聽 聽//memoedit(cHtml)
return cHtml

//----------------------------------------------------------------------------//
index.html
Code (fw): Select all Collapse
<html>
聽<head>
聽</head>
聽<body style="background-color:cyan">
聽 聽 <h2>Using WebView from FWH</h2>
聽 聽 <button onclick='SendToFWH( 123 )'>Call FWH app from web browser</button>
聽 聽 <button onclick='SendToFWH( 456 )'>Test 2</button>
聽 聽 <button onclick='SendToFWH( 123, 456, "yes it works!" )'>Test 3</button>
聽</body>
</html>
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: Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 01:31 PM
Leandro, cambia la funcion Html() as铆
Code (fw): Select all Collapse
function Html()

聽 聽local cHtml
聽 聽cHtml 聽:= "data:text/html," + CRLF + hb_MemoRead( ".\index.html" )

Return cHtml
El m茅todo :Navigate, espera una URL
Para que puedas poner codigo HTML, has de "convertirlo" en URL con el prefijo: "data:...." ( el CRLF que he puesto no es estrictamente necesario )
https://developer.mozilla.org/es/docs/Web/HTTP/Basics_of_HTTP/Data_URLs
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: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 02:48 PM
Amigo gracias por responder...

Listo solucionado, pero ahora nos surge otra pregunta, como agregamos los archivos de estilos "css" que est谩n dentro del html?
Por que muestra el c贸digo html, pero no los estilos.
Code (fw): Select all Collapse
<!doctype html>
<html>
<head>

...

聽 聽 <title>HymLyma | Digital Products</title>
聽 聽 聽 
聽 聽 <link href="css/bootstrap.min.css" rel="stylesheet">
聽 聽 <link href="css/style.css" rel="stylesheet">聽 聽 

...

</head>
<body>

</body>
</html>
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: Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 03:40 PM

Busca en google

"not allowed to load local resource"

lo m谩s sencillo es que tengas "levantado" un server ( local o remoto ) y pongas los recursos a partir del htdocs del server

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: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 04:21 PM

Amigo gracias por responder, si as铆 lo tenemos en otra parte de la aplicaci贸n.

Pero lo que nos gustar铆a lograr, es hacer el front de la aplicaci贸n en html y css, tambien usar los recursos de im谩genes locales y el resto de la caja negra con FW.

Es posible esto con WebView2?

Se pueden capturar los datos del html, 贸sea recoger la info de los inputs?

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: Mostrar html local usando webview2
Posted: Fri Feb 10, 2023 06:22 PM
leandro wrote:Amigo gracias por responder, si as铆 lo tenemos en otra parte de la aplicaci贸n.

Pero lo que nos gustar铆a lograr, es hacer el front de la aplicaci贸n en html y css, tambien usar los recursos de im谩genes locales y el resto de la caja negra con FW.

Es posible esto con WebView2?

Se pueden capturar los datos del html, 贸sea recoger la info de los inputs?
A ver si queda claro: lo que no permiten los exploradores por seguridad, la carga de recursos locales ( css, js, etc. ), por lo tanto no es un problema de webview. Es posible que indagando y modificando el tema de la seguridad de los exploradores que us茅is ( Chrome, Edge, etc. ) te permita hacerlo cambiando su configuraci贸n ( ojo con esto por si tuviera efectos colaterales ), googlea un ratillo a ver qu茅 encuentras.
Si levantas un Apache en tu m谩quina, o el uHttpd de Mindaugas de Harbour, es decir, cualquier servidor que est茅 corriendo en la m谩quina, podr谩s usarlos haciendo la llamada a los CSS haciendo referencia a tu localhost.
Por supuesto que el resto puedes meterlo todo dentro del webview, y por lo tanto hacer una aplicaci贸n Fivewin cerrada
En cuanto a tu 煤ltima pregunta, de si se pueden recoger los datos de los inputs que tienes en la p谩gina web desde la aplicaci贸n Fivewin, por supuesto, para eso se invent贸 el Webview. Un poco de Javascript y las funcionalidades del "bind" y listo.
Y al rev茅s: desde un di谩logo de Fw, puedes mandar lo que tengas en tus gets a un input de un formulario Html que tengas en el webview
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: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Sun Feb 12, 2023 12:32 AM
Excelente amigo, muchas gracias por la info

Estuve buscando en google las funcionalidades "bind", pero no encuentro documentaci贸n, de casualidad podr铆as montar un ejemplo :oops:, que nos muestre el envi贸 y recepci贸n de variables?

De antemano gracias
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: Mostrar html local usando webview2
Posted: Sun Feb 12, 2023 02:19 PM
En tu ejemplo inicial de este hilo, ya usas la function "bind"
Creo que este ejemplo te puede servir
https://fivetechsupport.com/forums/viewtopic.php?p=248110&sid=65fe9ba9c00a26a586f10b5636b63fc3#p248110
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: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Sun Feb 12, 2023 10:05 PM
Amigo gracias de nuevo por responder
Pero es que ese ejemplo es muy limitado, monte este nuevo ejemplo, la idea es poder correr dos funciones diferentes con los botones que est谩n definidos, no logro entender como indicarle al navegador que ejecute las funciones por separado, de momento solo funciona lafuncionacorrer(), tampoco entiendo como se pasan los par谩metros a la funci贸n lafunciondecerrardialogo()

Espero haberme hecho entender, de antemano gracias.
Code (fw): Select all Collapse
#include "FiveWin.ch"

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

function Main()

聽 聽local oWebView := TWebView():New()

聽 聽oWebView:bOnBind = { | cJson, nCalls | lafuncionacorrer() }
聽 聽oWebView:Bind( "lafuncionacorrer" )
聽 聽oWebView:Navigate( Html() )
聽 聽//Sleep( 200 )
聽 聽oWebView:Run()
聽 聽oWebView:Destroy()

return nil

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

function Html()

聽 聽local cHtml

聽 聽TEXT INTO cHtml
聽 聽 聽 data:text/html,
聽 聽 聽 <html>
聽 聽 聽 聽 聽<head>
聽 聽 聽 聽 聽</head>
聽 聽 聽 聽 聽<body style="background-color:cyan">
聽 聽 聽 聽 聽 聽 <h2>Ejecutando Acciones</h2>
聽 聽 聽 聽 聽 聽 <button onclick='lafunciondecerrardialogo( 123 )'>Cerrar Dialogo</button>
聽 聽 聽 聽 聽 聽 <button onclick='lafuncionacorrer()'>Correr funcion</button>
聽 聽 聽 聽 聽</body>
聽 聽 聽 </html>
聽 聽ENDTEXT 聽 聽 聽

return cHtml

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

function lafuncionacorrer()
msginfo("corriendo la funcion")
Return nil

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

function lafunciondecerrardialogo()
msginfo("Cerrando dialogo")
oWebView:Destroy()
Return nil
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: Mostrar html local usando webview2
Posted: Sun Feb 12, 2023 11:41 PM

Crea otro bind para la otra function

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: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Mon Feb 13, 2023 03:20 AM
De nuevo gracias por responder

Deje el c贸digo as铆 pero no funciona :(

En los dos botones corre la funci贸n lafunciondecerrardialogo()
Code (fw): Select all Collapse
#include "FiveWin.ch"

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

function Main()

聽 聽local oWebView := TWebView():New()

聽 聽oWebView:bOnBind = { | cJson, nCalls | lafuncionacorrer() }
聽 聽oWebView:Bind( "lafuncionacorrer" )

聽 聽oWebView:bOnBind = { | cJson, nCalls | lafunciondecerrardialogo() }
聽 聽oWebView:Bind( "lafunciondecerrardialogo" )


聽 聽oWebView:Navigate( Html() )
聽 聽//Sleep( 200 )
聽 聽oWebView:Run()
聽 聽oWebView:Destroy()

return nil

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

function Html()

聽 聽local cHtml

聽 聽TEXT INTO cHtml
聽 聽 聽 data:text/html,
聽 聽 聽 <html>
聽 聽 聽 聽 聽<head>
聽 聽 聽 聽 聽</head>
聽 聽 聽 聽 聽<body style="background-color:cyan">
聽 聽 聽 聽 聽 聽 <h2>Ejecutando Acciones</h2>
聽 聽 聽 聽 聽 聽 <button onclick='lafunciondecerrardialogo()'>Cerrar Dialogo</button>
聽 聽 聽 聽 聽 聽 <button onclick='lafuncionacorrer()'>Correr funcion</button>
聽 聽 聽 聽 聽</body>
聽 聽 聽 </html>
聽 聽ENDTEXT 聽 聽 聽

return cHtml

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

function lafuncionacorrer()
msginfo("corriendo la funcion")
Return nil

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


function lafunciondecerrardialogo()
msginfo("Cerrando dialogo")
Return nil
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: 44158
Joined: Thu Oct 06, 2005 05:47 PM
Re: Mostrar html local usando webview2
Posted: Mon Feb 13, 2023 07:50 AM

Estimado Leandro,

Solo puedes usar una funci贸n "bind"

regards, saludos

Antonio Linares
www.fivetechsoft.com
Posts: 1816
Joined: Wed Oct 26, 2005 02:49 PM
Re: Mostrar html local usando webview2
Posted: Mon Feb 13, 2023 08:15 PM

Antonio gracias por responder, pero entonces como podemos hacer la programaci贸n de varios eventos, como en el ejemplo, programar los dos botones?

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) ]

Continue the discussion