WebView2 for Harbour/Fivewin and VSC 2019

[cnavarro]

Bienvenido a FE_WebView2 ( version preliminar )
He incluido un ejemplo de uso del control para ser usado desde aplicaciones Fivewin.
Al principio del ejemplo, he detallado algunas de las webs en las que he basado mi trabajo o que he considerado interesante para las personas que quieran profundizar en este tema.
Este control WebView2 se puede desarrollar utilizando C o C++
También estoy trabajando desde hace tiempo en otra versión que utiliza C++.
Incluyo las librerías que son necesarias linkar para poder utilizarlo
Sólo están incluídas las librerías para VSC 2019 32 bits.
Se han utilizado las características que os pueden ser más prácticas.
Considero que el ejemplo es, por sí mismo, suficientemente explicativo, pero, cualquier duda o sugerencia, he considerado, que, en lugar de hacer un "manual", será mejor ir comentando en el foro.
He incluido el programa de instalación de Microsoft para que puedas utilizar este control en tu ordenador.

Espero que os guste

English
---------

Welcome to FE_WebView2 (preview version)
I have included an example of the use of the control to be used from Fivewin applications.
At the beginning of the example, I have detailed some of the websites on which I have based my work or that I have considered interesting for people who want to delve into this topic.
This WebView2 control can be developed using C or C ++
I am also working for a long time on another version that uses C ++.
I include the libraries that are necessary to link to be able to use it
Only the libraries for VSC 2019 32 bits are included.
The characteristics that can be more practical have been used.
I consider that the example is, by itself, sufficiently explanatory, but, any doubt or suggestion, I have considered that, instead of making a "manual", it will be better to comment on the forum.
I have included the Microsoft installation program so that you can use this control on your computer.

I hope you like it

Download:
https://bitbucket.org/fivetech/fivewin-contributions/downloads/FEWebViewC.zip

METHODS and DATAs

Code: Select all | Expand

//----------------------------------------------------------------------------//
//  Author  :    Cristobal Navarro Lopez ( c )
//  CLASS   :    TWEBVIEWC
//  Date    :    18/09/2021
//  Version :    0.0918      BETA
//  
//----------------------------------------------------------------------------//
#include "Fivewin.ch"

CLASS TWebViewC

   DATA cVersion      INIT ""
   DATA hWnd
   DATA cUrl          INIT ""
   DATA cUrlInit      INIT "about:blank"
   DATA lMenuPop      INIT .T.
   DATA lToolsDev     INIT .T.
   

   METHOD New( oParent, cUrl ) CONSTRUCTOR
   METHOD Activate()
   METHOD Close()
   METHOD EnableDevTools( lDevTools )
   METHOD EnablePopupMnu( lPopMnu )
   METHOD End()
   METHOD ExecuteScript( cScript )
   METHOD ExecuteScriptOnCreate( cScript )
   METHOD GoBack()
   METHOD GoForward()
   METHOD HWndWebView()
   METHOD Init( lInit )
   METHOD Navigate( cUrl )
   METHOD Reload()
   METHOD ResizeWebView()
   METHOD ShowHtml( cHtml )
   METHOD Stop()
   METHOD Url( cUrl )
   METHOD Version()

ENDCLASS

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

[MarioG]

Espectacular Cristobal!
Muchas gracias!

[leandro]

Felicitaciones Cristóbal, muy buen trabajo.

Por un momento alcance a pensar que podríamos ejecutar una función de fw desde del navegador , me lograste confundir con el panel de superior derecho.

De nuevo felicitaciones, ahora el tema de mi parte pasar por lograr compilar la aplicación con las herramientas MVSC.

De nuevo gracias

[cnavarro]

Leandro
Es una version preliminar
El tema de enviar mensajes entre WebView <--> Fw será la segunda versión
Enviar mensajes al Webview desde Fw está hecho ( al margen de ejecutar javascript, que son dos temas distintos aunque se pueden confundir )
Enviar mensajes desde el webview a la ventana / contenedor de fw estoy con ello ya que seguramente haya que modificar alguna cosilla en Fw.
Ya iré informando.

[Horizon]

Thank you Mr. Navarro,

First, We can open website such as "http://forums.fivetechsupport.com/".

I think we should click the Login button, and enter username and password.

[cnavarro]

Dear Hakan
What you are commenting on is perfectly possible.
I have put the side panels made with Fivewin to use in the later versions that I will publish.

[Horizon]

Dear Hakan
What you are commenting on is perfectly possible.
I have put the side panels made with Fivewin to use in the later versions that I will publish.

I think we should find the elementName that we will interact to variable.

[cnavarro]

Dear Hakan
What you are commenting on is perfectly possible.
I have put the side panels made with Fivewin to use in the later versions that I will publish.

I think we should find the elementName that we will interact to variable.

I am sorry, I do not understand
It is different from sending javascript code from Fw to be executed in the Webview, than sending messages from the Fw window / container to the Webview window.
Can you explain your comment better?

[Horizon]

Hi, Mr. Navarro,

I tought old IE way like DOM Element.

For example.

We open the "http://forums.fivetechsupport.com/" link. (I assume that this site is not mine control)
We want to double click "Login" to enter login username and password.

How can I find the login element and simulates double-click? This is I meant.

[Horizon]

Hi Mr. Navarro,

Any progress?

[cnavarro]

Excuse me, but I didn't understand that you were asking me a question.
The issue you raise is not a problem with the webview and its capabilities, but with your knowledge of javascript.
You should use the browser's inspector and view the source code of the page. Once you have the 'id' of the button, or of the element that you want to use, it is as simple as executing the corresponding javascript commands from your code

Code: Select all | Expand

// id of button is "btt1"
oWeb:ExecuteScript( 'document.getElementById( "btt1" ).focus();' + ;
                                'document.getElementById( "btt1" ).click()' ) )
 

[Horizon]

Thank you Mr. Navarro,

I am also newby of javascript. I want to start somewhere. Can you help me to focus a get element and enter something to it.

My link is "https://vatandas.uyap.gov.tr/main/vatandas/giris.jsp". I clicked "E-Şifre Aracılığıyla Giriş" button as you describe. but I can not focus and enter something
to the "T.C. Kimlik No" get element.

My code is below.

Code: Select all | Expand

PROCEDURE Main()
  local oWnd, oWeb, cLink, oWnw
    cLink := "https://vatandas.uyap.gov.tr/main/vatandas/giris.jsp"
    
   DEFINE WINDOW oWnd TITLE "FiveWin" ;
      FROM 3, 1050 TO 750, 1550 PIXEL

   DEFINE MESSAGE BAR OF oWnd PROMPT FWVERSION + " " + FWCOPYRIGHT // Strings defined
                                                                   // inside FiveWin.ch
   ACTIVATE WINDOW oWnd ;
      ON INIT ONINIT_Girisi( oWnd, cLink, @oWeb ) ;
      ON RESIZE ( if( Valtype( oWeb ) = "O", oWeb:ResizeWebView(), ) ) ;
      VALID ( if( Valtype( oWeb ) = "O", oWeb:End(), ), .T. )

RETURN     

PROCEDURE ONINIT_Girisi(oWnd, cLink, oWeb)
    oWeb := TWebViewC():New( oWnd:hWnd, cLink )
  IF Empty( oWeb:Version())
        MsgStop( "No installed runtime of webview2 was detected", "WebView2 Error" )
        oWindow:End()
    ELSE
        oWeb:Activate()
        oWeb:EnableDevTools()
        
        cTCNo := "12345678901"
        cPass := "2222"

        SysWait(2)              // This is a temporary solution. I must check the idle. like .. Do While IE:Busy
                                                                                    //             SysWait(1)
                                                                                    //             SysRefresh() // To Refresh
                                                                                    //             Loop
                                                                                    //          Enddo
                                                                                  
        
        oWeb:ExecuteScript( 'document.getElementsByClassName( "btn red-flamingo" )[0].focus();' + ;
                            'document.getElementsByClassName( "btn red-flamingo" )[0].click();')
      
        SysWait(2)
        oWeb:ExecuteScript( 'document.getElementById( "tridField" ).focus();' + ;
                        'document.getElementById( "tridField" ).textContent = '+cTCNo+'' )          

        
    ENDIF
RETURN
 

[Horizon]

double. sorry.

[cnavarro]

you can also directly execute the action that the button has

Code: Select all | Expand

oWeb:ExecuteScript( "location.href=Application.getEDevletESifreEntryURL();")
 

[Horizon]

Thank you Mr. Navarro,

What about this code.

Code: Select all | Expand

        oWeb:ExecuteScript( 'document.getElementById( "tridField" ).focus();' + ;
                        'document.getElementById( "tridField" ).textContent = '+cTCNo+'' )