Nuevo FWH 22.06

[Antonio Linares]

viewtopic.php?f=16&t=41906&start=0

[cnavarro]

* New: Please build samples\FiveDbu.prg using the new samples\buildhmt.bat, then right click on the main window
and activate the "WebApp" option, then go to "localhost" from your web browser and you will see the FWH app
running on the web. This is a work on progress, but we wanted to show you this capability that is being built
inside FWH for all FWH apps. You have to be patient as we need your feedback to complete it, but this opens
incredible possibilities that you will see very soon.

Video
https://youtu.be/Cc8C4fZspu8

[elvira]

Amigo Cristóbal,

Por favor, ¿puedes compartir el .exe para poder probarlo?

Muy agradecida!

[Antonio Linares]

Elvira,

Ningún problema en que pruebes el EXE, pero lo que estamos desarrollando va mucho más allá, tecnicamente hablando, de lo que se ve en el video.

No se si conoces el concepto de "Broadway" de GTK. Podemos decir que queremos que FWH tenga el potencial de "Broadway" pero con la capacidad de atender a múltiples clientes. Para esto hay dos conceptos claves:

1. FWH tienes que ser capaz de generar HTML automaticamente para cualquier interfaz de usuario. Se está implementando un método Html() control por control.

2. Gracias a la nueva clase TWebSocketServer, la ejecución modal se mantiene y se usa la web (gracias al HTML generado en el punto 1) como interface de usuario, pero la ejecución de la web app en realidad se ejecuta en la app desktop, usando el "stack" de una "función", gracias a la ejecución multihilo.

Este concepto ya queda demostrado en el nuevo ejemplo samples\websock.prg (ojo, hay que construirlo usando el nuevo buildhmt.bat) en el que el "stack" (la pila de ejecución) de la función se mantiene y es por esto que pasamos de registro a registro (de una DBF, puede ser MySQL, etc) manteniendo la conexión "viva" gracias a los web sockets (es la técnica que usa Broadway).

Esto es revolucionario y logicamente no se va a implementar de un dia para otro. Las piezas estan funcionando y se estan "encajando" para llegar a nuestro objetivo. Si lo conseguimos, y todo apunta a que si, esto permitiria que cualquier aplicación desktop de FWH se pudiese usar via web sin tener que cambiar nada. Quien más se ha acercado a esto es "broadway" y nosotros pretendemos ir más allá

[elvira]

Muy agradecida Antonio, sí, Cristóbal ha apuntado estos objetivos.

Además de portar los diálogos, ¿cuándo se podrá ejecutar las acciones de los controles, es decir, el código interno?

[Antonio Linares]

Elvira,

Tecnicamente se puede hacer ya, pero lo que queremos es que esté disponible de forma "automática" y que no tengais que programarlo

Seria estupendo que esté listo para este año 2022...

[elvira]

¡Excelentes noticias!

Por favor, ¿dónde puedo descargar el .exe de fivedbu?

[cmsoft]

Antonio:
EXCELENTE NOTICIA!
He probado el ejemplo webapp y muestra lo que comentas.
Como para tener un feedback, el mismo si haces click primero en el boton Ok del dialogo desktop, luego al hacer boton derecho en el dialogo, da el siguiente error

Code: Select all | Expand

Application
===========
   Path and name: C:\fwh21\samples\webapp.exe (32 bits)
   Size: 4,839,424 bytes
   Compiler version: Harbour 3.2.0dev (r2008190002)
   FiveWin  version: FWH 22.03
   C compiler version: Borland/Embarcadero C++ 7.0 (32-bit)
   Windows version: 6.2, Build 9200 

   Time from start: 0 hours 0 mins 4 secs 
   Error occurred at: 06/22/22, 09:20:02
   Error description: Error BASE/3012  Argument error: NUMTOHEX
   Args:
     [   1] = U   
     [   2] = N   6

Stack Calls
===========
   Called from:  => NUMTOHEX( 0 )
   Called from: .\source\function\VALBLANK.PRG => FW_CLRTOHTML( 318 )
   Called from: .\source\function\WEBAPP.PRG => CHECKBOXHTML( 389 )
   Called from: .\source\function\WEBAPP.PRG => CTRLSHTML( 410 )
   Called from: .\source\classes\DIALOG.PRG => TDIALOG:HTML( 426 )
   Called from: webapp.prg => (b)MAIN( 24 )
   Called from: .\source\classes\WINDOW.PRG => TDIALOG:RBUTTONDOWN( 2175 )
   Called from:  => TWINDOW:HANDLEEVENT( 0 )
   Called from: .\source\classes\DIALOG.PRG => TDIALOG:HANDLEEVENT( 1219 )
   Called from:  => DIALOGBOXINDIRECT( 0 )
   Called from: .\source\classes\DIALOG.PRG => TDIALOG:ACTIVATE( 306 )
   Called from: webapp.prg => MAIN( 24 )

System
======
   CPU type: Intel(R) Core(TM) i7-6500U CPU @ 2.50GHz 2592 Mhz
   Hardware memory: 7759 megs

   Free System resources: 90 %
        GDI    resources: 90 %
        User   resources: 90 %

   Windows total applications running: 3
      1 ,                                                                                                     
      2 , C:\fwh21\samples\webapp.exe                                                                         
      3 GDI+ Window (webapp.exe), C:\WINDOWS\WinSxS\x86_microsoft.windows.gdiplus_6595b64144ccf1df_1.1.19041.1706_none_d94bc52be10975 

Variables in use
================
   Procedure     Type   Value
   ==========================
   NUMTOHEX
     Param   1:    O    Class: ERROR
   FW_CLRTOHTML
     Param   1:    U    
     Param   2:    N    6
     Local   1:    U    
     Local   2:    U    
   CHECKBOXHTML
     Param   1:    U    
     Local   1:    U    
     Local   2:    S    
     Local   3:    U    
   CTRLSHTML
     Param   1:    N    854592
     Param   2:    O    Class: TDIALOG
     Local   1:    C    "<div style="position:absolute;top:144px;left:96px;width:63px;height:29px;"><input type="checkbox"><label style="color:{{color}};height:29px;font-family:{{fontFaceName}};font-size:{{fontSize}}px">Ok</label></div>"
     Local   2:    A    Len:    4
     Local   3:    A    Len:    2
     Local   4:    N    3
     Local   5:    U    
     Local   6:    N    63
     Local   7:    N    29
     Local   8:    S    
     Local   9:    U    
     Local  10:    C    "<div style="position:absolute;top:144px;left:96px;width:63px;height:29px;"><input type="checkbox"><label style="color:{{color}};height:29px;font-family:{{fontFaceName}};font-size:{{fontSize}}px">Ok</label></div>"
     Local  11:    C    "{{color}}"
   TDIALOG:HTML
     Param   1:    O    Class: TDIALOG
     Local   1:    N    854592
     Local   2:    C    "Button"
     Local   3:    C    "<div style="position:absolute;top:54px;left:72px;color:#00ff00;font-family:Segoe UI;font-size:12px">Your name:</div>
   <style>
      .TGet {
        border-top: 2px inset gray;
         border-left: 2px inset gray;
         border-right: 2px inset white;      
          border-bottom: 2px inset white;
      }
      .TGet:focus-visible {
            border: 2px solid transparent;
       }
   </style>      

<input class="TGet" type="text" style="position:absolute;top:52px;left:160px;width:153px;height:23px;font-family:Segoe UI;font-size:12px;color:#ff0000;background-color:#c0c0c0">                    >
"
     Local   4:    U    
     Local   5:    C    "<div style="position:absolute;top:54px;left:72px;color:#00ff00;font-family:Segoe UI;font-size:12px">Your name:</div>
   <style>
      .TGet {
        border-top: 2px inset gray;
         border-left: 2px inset gray;
         border-right: 2px inset white;      
          border-bottom: 2px inset white;
      }
      .TGet:focus-visible {
            border: 2px solid transparent;
       }
   </style>      

<input class="TGet" type="text" style="position:absolute;top:52px;left:160px;width:153px;height:23px;font-family:Segoe UI;font-size:12px;color:#ff0000;background-color:#c0c0c0">                    >
"
   (b)MAIN
     Local   1:    C    "thisisadialog"
     Local   2:    C    "   <style>
      .TDialog {
         box-shadow: rgb(0 0 0 / 78%) 1px 13px 20px 0px;
      }
      .ui-dialog .ui-dialog-content {
         background-color:#000080;
      }
      .ui-dialog .ui-dialog-titlebar {
         height: 13px;
         font-size: 12px;
         border-radius: 7px 7px 0 0;
      }   
      .ui-widget-content {
         border: none !important;
      }
      .ui-dialog-titlebar-close { 
         width: 50px !important; 
         height: 25px !important; 
         top: 40% !important; 
      }  
      .ui-dialog-titlebar-close:hover {
         background-color: #C42B1C;
         color: white;   
      }
      .ui-dialog .ui-dialog-content {
         border-radius: 0 0 7px 7px;
      }
   </style> 
"
     Local   3:    U    
     Local   4:    C    "   <!doctype html>
   <html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>jQuery UI Dialog - Default functionality</title>
     <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
     <link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
     <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
     <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
   </head>
   <body>   
"
     Local   5:    C    "<div class="TDialog" id="thisisadialog" title="This is a dialog";>"
     Local   6:    C    "</body></html>"
     Local   7:    C    "<div class="TDialog" id="thisisadialog" title="This is a dialog";>"
   TDIALOG:RBUTTONDOWN
     Param   1:    N    103
     Param   2:    N    58
     Param   3:    N    2
     Param   4:    O    Class: TDIALOG
     Local   1:    S    
     Local   2:    U    
   TWINDOW:HANDLEEVENT
     Param   1:    N    103
     Param   2:    N    58
     Param   3:    N    2
   TDIALOG:HANDLEEVENT
     Param   1:    N    516
     Param   2:    N    2
     Param   3:    N    6750266
   DIALOGBOXINDIRECT
     Param   1:    N    516
     Param   2:    N    2
     Param   3:    N    6750266
   TDIALOG:ACTIVATE
     Param   1:    N    4194304
     Param   2:    C    "€ È€         É e     T h i s   i s   a   d i a l o g      P    $  K  e S T A T I C   Y o u r   n a m e :     € P    P  L  f E D I T                                                 
P    0 H   g B U T T O N   O k       
P    l H %  h B U T T O N   C a n c e l     "
     Param   3:    N    0
     Param   4:    O    Class: TDIALOG
   MAIN
     Param   1:    U    
     Param   2:    U    
     Param   3:    U    
     Param   4:    L    .T.
     Param   5:    U    
     Param   6:    L    .T.
     Param   7:    U    
     Param   8:    B    {|| ... }
     Param   9:    U    
     Param  10:    U    
     Param  11:    U    
     Param  12:    L    .F.
     Param  13:    O    Class: TDIALOG
     Param  14:    U    
     Local   1:    N    0
     Local   2:    S    
     Local   3:    O    Class: TDIALOG

Linked RDDs
===========
   DBF
   DBFFPT
   DBFBLOB
   DBFCDX
   DBFNTX

DataBases in use
================

Classes in use:
===============
     1 ERROR
     2 HBCLASS
     3 HBOBJECT
     4 TWINDOW
     5 TDIALOG
     6 TBRUSH
     7 TCONTROL
     8 TSAY
     9 TGET
    10 GET
    11 TCLIPGET
    12 TBUTTON
    13 TFONT
    14 TREG32
    15 TRECT
    16 TSTRUCT

Memory Analysis
===============
      699 Static variables

   Dynamic memory consume:
      Actual  Value:     983040 bytes
      Highest Value:     983040 bytes

Mas allá de eso, las noticias son estupendas...
Muchas gracias al equipo Fiviwin

[cnavarro]

¡Excelentes noticias!

Por favor, ¿dónde puedo descargar el .exe de fivedbu?

Aqui tienes el .EXE que aparece en el video
https://bitbucket.org/fivetech/fivewin-contributions/downloads/Fivedbuw.zip

[Antonio Linares]

César,

Muchas gracias por el feedback

[elvira]

Hola,

Para vuestro feedback, los bmps de la ribbon en el navegador no se ven.

Como tampoco los diálogos del tipo cGetfile()

Muy buena dirección, y muy agradecida

[elvira]

Amigos, ¿habéis avanzado en este tema?

Muy agradecida