Ayuda Mercury TWeb y TWebBrowse

[RSalazarU]

Para Carles,

Carles, estimado amigo.

En base al ejemplo, con bootstrap, de mercury estoy armando mi aplicacion. Pero no logro mostrar el Browse.

El ejemplo de tweb:

http://localhost/tweb/browse

funciona perfecto.

Ahora bien, copie "practicamente" todo el codigo del ejemplo (browse.prg) y tengo un archivo .view:

Code: Select all  Expand view  RUN

<!-- Page Content  -->
<div id="content">

    {{ View( 'content_btn.view' ) }}

    <h2>Users</h2>

    <?prg
    #include {{ TWebInclude() }}
    //#include {% TWebInclude() %}

    //function main()
        local o, oCol, oBrw
        local aRows := {}
       
        Aadd( aRows, { 'id' => 1, 'name' => 'Charly Aubia', 'abr' => 'CA' } )
        Aadd( aRows, { 'id' => 2, 'name' => 'Maria de la O', 'abr' => 'MO'  } )
        Aadd( aRows, { 'id' => 3, 'name' => 'John Kocinsky', 'abr' => 'JK'  } ) 
   
        DEFINE WEB oWeb TITLE 'Basic Browse' TABLES INIT
       
        DEFINE FORM o
   
            HTML o INLINE '<h3>Basic Browse</h3><hr>'
           
        INIT FORM o            
   
            DEFINE BROWSE oBrw ID 'ringo' HEIGHT 400 OF o
   
                ADD oCol TO oBrw ID 'id'    HEADER 'Id.'
                ADD oCol TO oBrw ID 'name'  HEADER 'Name'                  
                //ADD oCol TO oBrw ID 'abr' HEADER 'abr'                   
   
            INIT BROWSE oBrw DATA aRows 
   
    END FORM o RETURN   
    //retu nil
    ?>
</div>
 

y no muestra el browse.

en la pestaña consola del impector de la pagina web me muestra:

tweb.js:900 Uncaught TypeError: oBrowse.bootstrapTable is not a function
at new TWebBrowse (tweb.js:900)
at usrbrowse:249

tambien tengo el resultado de tweb:

<script>
var _ringo = new TWebBrowse( "ringo", null, false );
_ringo.SetCfgCols( JSON.parse( '{"id":{"id":"id","head":"Id.","width":"","sortable":false,"align":"","formatter":"","class":"","edit":false,"edit_type":"C","edit_with":"","edit_escape":false,"class_event":""},"name":{"id":"name","head":"Name","width":"","sortable":false,"align":"","formatter":"","class":"","edit":false,"edit_type":"C","edit_with":"","edit_escape":false,"class_event":""}}' ) );$(document).ready(function () {
_ringo.Set( 'edit', false );
_ringo.Init();
var aRows = JSON.parse( '[{"id":1,"name":"Charly Aubia","abr":"CA"},{"id":2,"name":"Maria de la O","abr":"MO"},{"id":3,"name":"John Kocinsky","abr":"JK"}]' );
_ringo.SetData( aRows );
})
</script>

y dice que hubo un error aca:

//console.trace()

if ( lInit ) {
this.Init( aData )
} else { // Instancia
oBrowse = $('#' + this.cId )
oBrowse.bootstrapTable( { ignoreClickToSelectOn: TWebBrowseIgnoreClickToSelectOn } )
}

}

Carles, de antemano, muchas gracias por la ayuda.

Rolando
Cochabamba, Bolivia.

[Carles]

Rolando,

1.- Definicion de Ruta en el index.prg

Code: Select all  Expand view  RUN

DEFINE ROUTE 'twebbrowse'       URL 'twebbrowse'        CONTROLLER 'browse@test_tweb.prg'   OF oApp

Como puede observar definimos la ruta "twebbrowse" que mercury enrutará hacia el controlador test_tweb.prg y ejecutará el método browse


2.- Definimos el controlador \controller\test_tweb.prg y el metodo browse()

Code: Select all  Expand view  RUN

//  {% LoadHRB( '/lib/tweb/tweb.hrb' ) %}

CLASS Test_TWeb

    METHOD New()    CONSTRUCTOR
   
    METHOD Browse() 
   
ENDCLASS

METHOD New( oController ) CLASS Test_TWeb   

RETU SELF

METHOD Browse( oController ) CLASS Test_TWeb

    local aRows := {}
   
    Aadd( aRows, { 'id' => 1, 'name' => 'Charly Aubia', 'abr' => 'CA' } )
    Aadd( aRows, { 'id' => 2, 'name' => 'Maria de la O', 'abr' => 'MO'  } )
    Aadd( aRows, { 'id' => 3, 'name' => 'John Kocinsky', 'abr' => 'JK'  } )

    oController:View( 'tweb/browse.view', aRows )
   
RETU NIL

Puntos a comentar:

a) Podemos tener varios controladores que dispararan views que podran o no usar TWeb. En este caso, yo cargo la libreria desde este controlador, pero se puede cargar directamente desde el index.prg. En cualquier caso, para cargar la libreria:

Code: Select all  Expand view  RUN

//  {% LoadHRB( '/lib/tweb/tweb.hrb' ) %}

b) Despues definimos el metodo Browse() y el método realiza la tarea que ha de hacer un controllador: recuperar parametros, abrir modelos de datos, manejar datos, ... En este caso simplemente cargamos un array

c) Una vez finaliza el proceso de datos, ejecutamos una salida: repuesta json, xml, una view. En este caso le deciemos al controlador que ejecute la view "tweb/browse.view" y le pasa de parámetro los datos, en este caso el array aRows

Code: Select all  Expand view  RUN

oController:View( 'tweb/browse.view', aRows )

3.- Definimos la vista view\tweb\browse.view

Code: Select all  Expand view  RUN

<h3>Test View with browse</h3><hr>

<?prg
    #include {{ TWebInclude() }}
   
    local aRows := pvalue(1)
   
    DEFINE WEB oWeb TITLE 'MyBrowse' TABLES INIT

    DEFINE FORM o          

    INIT FORM o  

        ROWGROUP o
            DEFINE BROWSE oBrw ID 'ringo' SEARCH HEIGHT 400 OF o

                ADD oCol TO oBrw ID 'id'    HEADER 'Id.'
                ADD oCol TO oBrw ID 'name'  HEADER 'Name'                  
                ADD oCol TO oBrw ID 'abr'   HEADER 'Abr.'                  

            INIT BROWSE oBrw DATA aRows 
        END o              
                   
    END FORM o RETURN   
?>

Aqui solo recalcar que la view ejecuta por defecto codigo html puro y duro. Cualquier codigo harbour lo tenemos de poner entre las etiquetas <?prg ... ?>

Observad que:

a) Hacemos un include del tweb.ch para poder preprocesar los comandos tweb

Code: Select all  Expand view  RUN

#include {{ TWebInclude() }}

b) Recuperamos los parametros del controlador

local aRows := pvalue(1)

c) El resto es código TWeb puro y duro


Si ejecutamos ahora --> localhost/master/mercury/twebbrowse obtenemos el siguiente resultado



Como veis el proceso es fácil: definir un camino->un proceso->una pantalla o lo que es lo mismo: router->controller->view . Hecho uno, hechos todos...(casi )

[RSalazarU]

Carles,

Muchas gracias por responder y por tu dedicacion, gran TRABAJOOO!!!

Respecto a la consulta, mirando el ejemplo 'boot' que viene con mercury:

1.Copie la carpeta: tweb\lib\tweb a la carpeta mercury\lib\

2. Modifique el archivo mercury\index.prg, para añadirle:

Code: Select all  Expand view  RUN

//  {% LoadHrb( 'lib/tweb/tweb.hrb' ) %}        //Loading TWEB lib
 

3. Modifique el archivo mercury\src\view\boot\content_test1.view, añadiendo/copiando el codigo de tweb\browse.prg con algunos comentarios

Code: Select all  Expand view  RUN

<!-- Page Content  -->
<div id="content">

    {{ View( 'boot/content_btn.view' ) }}

    <h2>Test 1</h2>

    <div class="line"></div>

    <?prg
        #include {{ TWebInclude() }}
        //#include {% TWebInclude() %}
        //function main()
       
            local o, oCol, oBrw
            local aRows := {}
           
            Aadd( aRows, { 'id' => 1, 'name' => 'Charly Aubia', 'abr' => 'CA' } )
            Aadd( aRows, { 'id' => 2, 'name' => 'Maria de la O', 'abr' => 'MO'  } )
            Aadd( aRows, { 'id' => 3, 'name' => 'John Kocinsky', 'abr' => 'JK'  } ) 
       
            //DEFINE WEB oWeb TITLE 'Basic Browse' TABLES INIT
           
            DEFINE FORM o
       
            //  HTML o INLINE '<h3>Basic Browse</h3><hr>'
               
            INIT FORM o            
       
                DEFINE BROWSE oBrw ID 'ringo' HEIGHT 400 OF o
       
                    ADD oCol TO oBrw ID 'id'    HEADER 'Id.'
                    ADD oCol TO oBrw ID 'name'  HEADER 'Name'                  
                    //ADD oCol TO oBrw ID 'abr' HEADER 'abr'                   
       
                INIT BROWSE oBrw DATA aRows 
       
           
            END FORM o 
           
        //retu nil         
        END FORM o RETURN   
    ?>

</div>
 

Lo ejecute

http://localhost/master/mercury/boot/test1

...y no muestra el Browse.

Carles, disculpa la molestia.

De antemano, gracias por la ayuda.

Rolando

[Carles]

Rolando,

Lo que quieres es complicadillo, por el simple hecho de que el proyecto boot es un proyecto ajeno a TWeb y el se carga sus propias librerias de bootstrap, con sus correspondientes versiones y usa pluggins como el del menu que funcionan exclusivamente para estas versiones de librerias ya cargadas.

TWeb se carga su propio entorno de librerias y versiones necesarias para usar, pero tu quieres mezcla todo en un pote y no funcionará. Se habria de tracear que se carga en un lado, que no carga en el otro, o que molesta en un lado que no molesta en el otro...

El ejemplo detallado que he puesto anteriormente se describe como usar la lógica de Mercury para la arquitectura del programa y como poder usar TWeb para crear pantallas. En boot tu quieres usar toda una funcionalidad que funciona con unas librerias que seguro colisionan con las de TWeb