Page 1 of 1

webview - desde FW al navegador como?

PostPosted: Sun Jul 02, 2023 5:16 pm
by leandro
Antonio buenos días como estas?

Logramos montar un ejemplo para poder validar el acceso de los usuarios a la aplicación, podemos recoger la variables desde el navegador y enviarlas a FW para que se haga el proceso de validación mediante una dbf. Aunque ya es funcional, ahora nos gustaría poder enviar información al navegador desde FW, por ejemplo, mostrar un alert desde el navegador, informando que el usuario no esta registrado o la contraseña esta mal. No mediante un msginfo() directo desde fw como esta en el ejemplo.

Espero haberme hecho entender, de antemano gracias

Mirar al final de código

webviewval.prg
Code: Select all  Expand view

#include "FiveWin.ch"

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

function Main()
    local oWebView := TWebView():New()
    local aEstru := {   { "user","C",10,0 },;
                    { "pass","C",10,0 },;
                    { "acti","L", 1,0 } }

    public d_user

    IF !FILE (".\usuarios.dbf")
        FERASE(".\usuarios.dbf")
    ENDIF
   
    DbCreate( ".\usuarios.dbf", aEstru )
   
    USE ".\usuarios.dbf" ALIAS d_user NEW EXCLUSIVE
    SELECT d_user
    dbappend()
    d_user->user := "root"
    d_user->pass := "123"
    d_user->acti := .T.

    oWebView:bOnBind = { | cJson, nCalls | validating( cJson, nCalls ) }
    oWebView:Bind( "SendToFWH" )
    oWebView:Navigate( Html() )
    oWebView:SetTitle( "Validando formulario" )
    Sleep( 200 )
    oWebView:Run()
    oWebView:Destroy()
   
   
    d_user->(DbCloseArea())

return nil

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

function Html()

   local cHtml
   
   TEXT INTO cHtml
      data:text/html,
      <html>
         <head>
         </head>
         <body style="background-color:cyan">
            <h2>Validando Formulario</h2>
            <small><strong>Usuario</strong></small>
            <br>
            <input type="text" id="txt_user" placeholder="root"></input>
            <br>
            <small id="sml_user"></small>
            <br>
            <small><strong>Contrase&ntilde;a</strong></small>
            <br>
            <input type="password" id="txt_pass" placeholder="123"></input>
            <br>
            <small id="sml_pass"></small>
            <br>
            <button onclick="validateInfo();" id="btn_val">Ingresar</button>

         </body>
      </html>
    <script>
    function validateInfo(){
        var aError = new Array();
        if(document.getElementById("txt_pass").value==""){
            document.getElementById("sml_pass").innerHTML = "Ingrese contrase&ntilde;a";
            aError.push("Error usuario");
        }else{
            document.getElementById("sml_pass").innerHTML = "";
        }
        if(document.getElementById("txt_user").value==""){
            document.getElementById("sml_user").innerHTML = "Ingrese usuario";
            aError.push("Error usuario");
        }else{
            document.getElementById("sml_user").innerHTML = "";
        }
        if(aError.length==0){
            var cUse = document.getElementById("txt_user").value;
            var cPas = document.getElementById("txt_pass").value;
            document.getElementById("btn_val").setAttribute("onclick", "SendToFWH( '"+cUse+"','"+cPas+"' );");
            document.getElementById("btn_val").click();
            document.getElementById("btn_val").setAttribute("onclick", "validateInfo();");
        }
    }
    </script>     
     
   ENDTEXT    

return cHtml


function validating(cJson, nCalls)
Local hRspn := hash()
hb_jsondecode(cJson ,@hRspn )

SELECT d_user
Dbgotop()
locate for alltrim(d_user->user)=alltrim(hRspn[1]) .AND. alltrim(d_user->pass)=alltrim(hRspn[2])
if found()
    msginfo("ingreso correcto")
else
    msginfo("usuario o contraseña errados") //LA IDEA ES ENVIAR ESTE ERROR AL NAVEGADOR PARA QUE MUESTRE MEDIANTE UN ALERT
endif
return nil

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

Re: webview - desde FW al navegador como?

PostPosted: Sun Jul 02, 2023 8:19 pm
by Antonio Linares

Re: webview - desde FW al navegador como?

PostPosted: Sun Jul 02, 2023 9:48 pm
by cnavarro
Para eso es para lo que existe WebView_Return

Re: webview - desde FW al navegador como?

PostPosted: Mon Jul 03, 2023 6:25 am
by Antonio Linares
Estimado Leandro,

Resuelto! :-)

oWebView:Eval( "alert( 'from javascript' )" )

Ya lo teniamos, pero lo olvidé :-)

Aqui tienes un ejemplo:
Code: Select all  Expand view
// Please install https://developer.microsoft.com/en-us/m ... /webview2/ x86 version before using it

#include "FiveWin.ch"

static oWebView

function Main()

   local oWnd

   DEFINE WINDOW oWnd TITLE "Using a webview from an existing window" MENU BuildMenu()

   oWnd:Center()
   oWebView = TWebView():New()
   owebView:SetParent( oWnd )

   oWebView:Navigate( "http://www.google.com" )
   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" )

   ACTIVATE WINDOW oWnd CENTER ;
      ON RESIZE SetWindowPos( oWebView:GetWindow(), 0, 20, 20, oWnd:nWidth - 40, oWnd:nHeight - 40 )

   oWebView:Destroy()

return nil

function BuildMenu()

   local oMenu

   MENU oMenu
      MENUITEM "Eval ." ACTION oWebView:Eval( "alert( 'from javascript' )" )
      MENUITEM "About ." ACTION MsgAbout()
   ENDMENU
   
return oMenu  

Re: webview - desde FW al navegador como?

PostPosted: Mon Jul 03, 2023 7:50 am
by Antonio Linares
oWebView:Return() se usa para devolver un valor desde el oWebView:bOnBind

Nuevo ejemplo webviewuni2.prg
Code: Select all  Expand view
#include "FiveWin.ch"

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

function Main()

   local oWebView := TWebView():New()

   oWebView:Center()
   oWebView:bOnBind = { | cJson, cCalls | MsgInfo( cJson, cCalls ),;
                        oWebView:Return( cCalls, 0, "{ 'result': 'Hello from PRG' }" ) }
   oWebView:Bind( "SendToFWH" )
   oWebView:Navigate( Html() )
   Sleep( 200 )
   oWebView:Run()
   oWebView:Destroy()

return nil

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

function Html()

   local cHtml

   TEXT INTO cHtml
      data:text/html,
      <head><body>
      <button id='btn-test' >Click Me</button>
      <script>
      function test(evt) {  
          var someData = { 'param1': 'Hello from JS' };  
          var s = SendToFWH( evt.target.id, evt.type, someData )
          .then(s => {  
              alert(s.result);  
          })  
      }  
      document.getElementById('btn-test').addEventListener('click', test);  
      </script>
      </head></body>
   ENDTEXT      

return cHtml

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


En la clase TWebView() es preciso añadir este nuevo método:
Code: Select all  Expand view
  METHOD Return( cRequest, nBindResult, cFromPrgToJS ) INLINE ;
      WebView_Return( ::hWebView, cRequest, nBindResult, cFromPrgToJS )

nBindResult debe ser cero para indicar que no hay error y 1 para indicar error

Re: webview - desde FW al navegador como?

PostPosted: Mon Jul 03, 2023 3:57 pm
by leandro
Excelente Antonio, muchas gracias por el ejemplo :D, hace lo que queremos.
oWebView:Eval( "alert( 'from javascript' )" )


Por otro lado, será que nos puedes actualizar las lib para xharbour 2304 y enviármelas, con el cambio de clase que acabas de hacer :oops: , para revisar el compartemiento de webview.return(). De paso si nos puedes explicar cual es la diferencia entre los dos métodos, y en que momento es mas conveniente usar uno u otro.

De antemano gracias

Re: webview - desde FW al navegador como?

PostPosted: Mon Jul 03, 2023 4:25 pm
by Antonio Linares
Estimado Leandro,

Por favor envíame un email para asegurarme que te las envío al correcto, gracias

Re: webview - desde FW al navegador como?

PostPosted: Tue Jul 04, 2023 3:18 am
by Antonio Linares

Re: webview - desde FW al navegador como?

PostPosted: Tue Jul 04, 2023 11:46 am
by leandro
Librerías recibidas.

Voy a compilar el ejemplo y te molesto si salen dudas.