genesis erp system for cloudgenesis erp system for cloud autor carles aubia fecha 17/12/2019...

GENESIS ERP System for Cloud

Autor Carles Aubia Fecha 17/12/2019

Versión 1.0a

Harbour for Web Página 1 de 46



Versión 1.0a


Preámbulo ................................................................................................................................................................. 3

Génesis, Harbour y Harbourianos… ........................................................................................................................... 4

Que és Genesis ? ........................................................................................................................................................ 5

Primeros Pasos. Cambiar password administrador .................................................................................................... 6

Codificación ............................................................................................................................................................... 6

Task ........................................................................................................................................................................ 8

View ..................................................................................................................................................................... 12

Peticiones al servidor. AJAX ..................................................................................................................................... 14

MsgTask() ............................................................................................................................................................. 15

MsgView() ............................................................................................................................................................ 17

Diseñar pantallas – GUI .................................................................................................................................... 18

Controles soportados ....................................................................................................................................... 21

Browse ............................................................................................................................................................. 21

Browse II .......................................................................................................................................................... 29

Process ................................................................................................................................................................. 31

Menus .................................................................................................................................................................. 32

Master Tables .......................................................................................................................................................... 34

Types .................................................................................................................................................................... 34

Roles .................................................................................................................................................................... 36

Users .................................................................................................................................................................... 36

Company .............................................................................................................................................................. 38

Tools ........................................................................................................................................................................ 38

Files ...................................................................................................................................................................... 38

Import Database .................................................................................................................................................. 39

Import Project ...................................................................................................................................................... 39

Export Project ...................................................................................................................................................... 40

Otros ........................................................................................................................................................................ 44

My profile ............................................................................................................................................................ 44

System ................................................................................................................................................................. 45

Setting .................................................................................................................................................................. 46



Versión 1.0a


Preámbulo Genesis es parte de la evolución de Harbour for Web, desarrollado con Mercury y que se ha creado para poder comprobar la potencia del sistema y la capacidad de crear aplicaciones web con Harbour. Es quizas el punto final a este circulo de I+D inicial que nos permite tener la visión de donde podemos llegar. Han estado meses muy duros por que no tenemos referencias de nadie dentro de harbour y se ha tenido que hacer y rehacer todo, un monton de veces, por lo que a veces hemos tenidos bajones y efectos rebote durante el diseño y codificación del sistema. Uno de los sueños…llevar Harbour a la web. Esto ya es una realidad. Por motivos profesionales trabajo en otros lenguajes y entornos, pero Harbour siempre ha estado compañero de viaje durante parte de mi vida profesional y es por esto que queria aportar mi experiencia de estos años a intentar ayudar a todos los colegas a intentar dar el salto. Realmente no se en que va cambiar, pero quizas sirva de idea para ir evolucionando el sistema y animar a los que somos y los que vendran con este viejo compilador, que aunque viejo fuerte y robusto Tardes y tardes hablando con Antonio Linares sobre como abordar muchos temas, un montón…risas, ilusión y ganas de llevar a cabo nuestra última gran aventura con nuestro Harbour. Quiero dar desde aquí gracias por el enorme esfuerzo que ha realizado y por su persistencia en conseguir este gran avance. Hemos intentado durante estos meses de locura frenética no decaer en los ánimos, creando tertulias semanales, dando esperanza a muchos colegas e intentar levantar este proyecto. Muchas visiones, ideas, opiniones, amigos,… No nos van a derrotar porque creo que lo estamos consiguiendo…

Carles Aubia Floresvi, 2019-2020



Versión 1.0a


Génesis, Harbour y Harbourianos… Cuando empezamos a desarrollar Harbour para la web (mod harbour), veiamos tecnicamente que el sistema estaba funcionando, pero quedaba otra de las partes importantes y era la de crear una metodologia o manera para poder crear nuestras aplicaciones para la web. Si bien una “Hello world” como siempre es muy facil, una aplicación web es dificil. Son muchos los conceptos y teclas a tocar para que encaje todo perfectamente y salir airoso en la cruzada. Siempre hago la postilla de que programar es facil pero hacer porgramas es dificil…aquí lo estamos viviendo. Iniciamos la creación de un framework base con la tecnologia y patron MVC (Model/Vista/Controlador) simplemente porque es el modelo que triunfa en el mundo a la hora de crear aplicaciones para la web. Queriamos entrar en el mundo web jugando de la misma manera que los demas. Todo y la libertad que nos ofrece mod harbour en programar libremente como deseemos, intentaba standarizar nuestro sistema mas que para la los harbourianos para la gente de fuera se pudiera sumar a nosotros. Si bien la librería Mercury basada en MVC funciona perfectamente, observamos que aun asi la gente es reacia a dar el salto. Evidentemente son horas que dedicar a unos nuevos conceptos de programación y necesitas muchas horas de vuelo antes de no ver resultados. Los Harbourianos son muy suyos y siempre se han apañado airosamente de mil maneras. Para que dar el cambio ? Asi pues, hablando con Antonio decidimos crear Genesis, un sistema que ayude facilmente a crear aplicaciones para nuestra web usando harbour. El sistema será nuestra plataforma base que nos permita de otra manera poder acceder a este entorno. En resumen, diria que tenemos a dia de hoy hasta 3 niveles para poder crear nuestras aplicaciones harbour para web.

Mod Harbour puro y duro. Crear nuestros prg y listos Mercury MVC. Framework para crear aplicaciones Harbour para la web usando Modelo/Vista/Controller Genesis. Solución para crear facilmente nuestras soluciones empresariales para nuestros clientes.



Versión 1.0a


Que és Genesis ? Genesis es un sistema en la web que nos ayudará fácilmente a desarrollar nuestros sistemas ERP en el cloud. Es un entorno de programación en el que la parte backend, la que desarrollamos nuestros procesos, está basado en Harbour. Para la parte front-end usaremos los lenguajes standard del mercado y los frameworks que deseemos usar: html, css, js, jquery, bootstrap,… pero esto no impide de que podamos usar nuestro Harbour para que nos ayude en ciertas tareas de diseño de la pantalla. El objetivo principal: Crear en tiempo record nuestras aplicaciones web propias o de clientes, usando la capacidad que tiene Genesis. El proceso básico es el siguiente: Genesis nos da la opcion de crear nuestras tasks, views y process, que combinados entre si formará una transacción o procesos que ejecutaremos en la web. Este proceso lo podremos asociar a una opción del menu que tambien lo crearemos, el cual podremos agrupar a nivel grupos/subgrupo/opción menu Daremos de alta los usuarios que pueden usar nuestra aplicación Ya solo nos queda configurar nuestro enlace en la web para que se pueda usar. Y esto es todo !!! Facilmente en cuestion de minutos ya puedes poner tu primer proceso, darlo de alta y que sea visible desde un smartphone y poder operar con el.



Versión 1.0a


Primeros Pasos. Cambiar password administrador El administrador de la cuenta será el encargado de crear los diferentes procesos, menus, datos de empresa, usuarios que podran acceder,…

Lo primero que debemos hacer es cambiar el password de entrada con la opción My Profile

Codificación En este apartado crearemos todo el código de nuestra aplicación. Nosotros podremos dividir en 3 apartados la codificacion de nuestro programa

Concepto Descripción

Task Creado para definir funciones que realizan una determinada tarea y devolver un resultado

View Definición de una Vista en html para devolverla al navegador cuando se solicite, pudiendo usar si se desea datos devuelto de 1 o varias Tasks

Process Proceso formado por llamadas a tasks y view



Versión 1.0a


Independientemente de que cada uno de estas opciones nos permite de manera autonoma crear un miniproceso, la idea es que se puedan complementar entre ellos. Una task puede crear todo el proceso de manipulacion de datos y creacion de codigo html que nos permite crear una view. Al igual que desde la view podemos manipular datos, …. Cuando vayamos adquiriendo dominio sabremos estructurar de manera correcta todos nuestros modulos y el mantenimiento será muy facil. Por ejemplo, imaginemos una tarea que nos abre 3 tablas nos hace una selección de datos y nos los pinta. Esto desde dentro una task lo podemos hacer, pero lo correcto seria crear una task que se encargue de verificar y abrir las tablas. Esta task la podriamos usar en muchos procesos y solo mantendriamos esta task. La idea del Proc es que diseñemos todo el proceso, p.e. Proc Listado de ventas Ejecuta Task Abrir base de datos, tablas,…. Procesamos datos y ponemos resultado p.e. en una tabla Ejecutamos View Le pasamos a la View la tabla de resultados, para que se encargue de pintar Fin Proc Esta seria la manera elegante de crearlo, pero a veces y dada la necesidad es muy facil de ponerlo todo dentro de una task o view y listos. Es por esto que a medida que cada uno vayamos practicando y probando nos iremos adaptando de la mejor manera a nuestro entorno.



Versión 1.0a


Task

Este apartado seria para crear tareas enfocadas al backend, al proceso de datos en la parte del server, independientemente de que se puede usar como guste. Cuando editemos el código de la vista nos aparecerá un editor en lque podremos especificar nuestro code en harbour

En la parte izquierda tenemos el panel del code y en la derecha el resultado. Para ejecutar el código y ver el resultado pulsaremos el button “Run” Podemos inyectar código html de manera sencilla de la siguiente manera BLOCKS VIEW cHtml PARAMS cTime, h

<h3>Ahora son las <$ cTime $></h3>

<$ h $>

ENDTEXT Podemos observar que podemos pasar parámetros al bloque de view y usarlo poniendo los parámetros entre <?$ $>



Versión 1.0a


Asi pues podemos tener un pequeño code mezclando todo de esta manera #include 'genesis.ch'

function main()

local cHtml := ''

local cTime := time()

local h := hb_getenv( 'HB_INCLUDE' )

// a := 'pepe' +123 // Test Error !

BLOCKS VIEW cHtml PARAMS cTime, h

<h3>Ahora son las <$ cTime $></h3>

<$ h $>

ENDTEXT

return cHtml Y el resultado seria

Podemos usar las tasks para crear cualquier proceso. Para ver un ejemplo mas productivo imaginemos que

necesito una task que le pase un “State” y me de todos los registros de la tabla Test. Facilmente lo podriamos

codificar de esta manera

function DbfState( cState )

LOCAL aRows := {}

DEFAULT cState TO '' // NY

IF ! empty( cState )

USE test SHARED NEW VIA 'DBFCDX'

cAlias := Alias()

(cAlias)->( OrdSetFocus( 'STATE') )

(cAlias)->( DbSeek( cState, .T. ) )

WHILE (cAlias)->state == cState .AND. (cAlias)->( !Eof() )

Aadd( aRows, { '_recno' => (cAlias)->( Recno() ),;

'first' => (cAlias)->first,;

'last' => (cAlias)->last,;

'street' => (cAlias)->street,;

'city' => (cAlias)->city,;

'state' => (cAlias)->state,;

'zip' => (cAlias)->zip,;



Versión 1.0a


'hiredate' => (cAlias)->hiredate,;

'married' => (cAlias)->married,;

'age' => (cAlias)->age,;

'salary' => (cAlias)->salary,;

'notes' => (cAlias)->notes;

} )

(cAlias)->( DbSkip() )

END

(cAlias)->( DbCloseArea() )

ENDIF

return { 'rows' => aRows, 'state' => cState, 'len' => len( aRows) }

Como se puede observar quiero devolver un hash con diferentes valores que despues ya se trataran en otro lado.

El objetivo de esta task es esta: Te paso el State y dame info…

Pero quizás lo mas importante de este punto es que se trata de “Puro código harbour !!!”

Al ejecutar el test, si ponemos que cState == ‘NY’ nos apareceria en el panel de consola el siguiente resultado

{

"rows": [

{

"_recno": 17,

"first": "Francois ",

"last": "Clark ",

"street": "14945 Philadelphia Street ",

"city": "Adelaide ",

"state": "NY",

"zip": "80182-2213",

"hiredate": "19890619",

"married": true,

"age": 44,

"salary": 495100,

"notes": "This is a test for record 17 "

},

{

"_recno": 312,

"first": "Match ",

"last": "Kaltenhauser ",

"street": "11514 Willow Parkway ",

"city": "Niagra Falls ",

"state": "NY",

"zip": "30709-1232",

"hiredate": "19901108",

"married": false,



Versión 1.0a


"age": 73,

"salary": 163800,


},

{

"_recno": 376,

"first": "Shawn ",

"last": "Lanier ",

"street": "28299 Wertzville Road ",

"city": "Worcester ",

"state": "NY",

"zip": "91999-9900",

"hiredate": "19820519",

"married": false,

"age": 94,

"salary": 176900,


},

… ],

"state": "NY",

"len": 16

}



Versión 1.0a


View En esta apartado podremos definir nuestras vistas. Las vistas seran la definición de las pantallas en las que tambien pondremos código javascript para interactuar con los diferentes controles. Las view estaran codificadas en html, pudiendo añadir si quermos ficheros de estilos css y de javascript para gestionar los controles. NOTA: NO es objetivo de este manual enseñar ni Html, js, css, jquery, … sinó de ver como todos estos lenguajes coexistiran en nuestro entorno y nos ayudaran a crear nuestra aplicación Cuando entremos en la sección nos aparecerá el grid de datos asociados a las view

Podremos añadir, editar, eliminar, navegar… Cuando editemos el código de la vista nos aparecerá un editor en el que podremos especificar nuestro code en html y si queremos inyectar código harbour

Versión 1.0a


En la parte izquierda tenemos el panel del code y en la derecha el resultado. Para ejecutar el código y ver el resultado pulsaremos el button “Run” En el código html podemos inyectar pequeñas funciones de harbour que iran encerradas dentro de {$ $}

Now is {$ time() $} Para inyectar code harbour deberemos encerrarlo entre las etiquetas <?prg ?> Dentro del code harbour podremos si deseamos inyectar de nuevo html incluso pasando parámetros que iran encerrados entre <$ $> Nota: Diferenciar entre la macrosustitucion inicial {$ $} que usaremos en el code principal y la que queramos usar dentro de un bloque en el codigo harbour que ira <?prg ?> 

<style>

.main {

margin: 10px;

}

</style>

<h3>Var/Blocks Test</h3>

<hr>

{$ time() $}

<br>

<?prg

#include 'genesis.ch'

local a := dtoc(date())



Versión 1.0a


local c := ''

BLOCKS VIEW c PARAMS a

Value inside blocks <$ a $>

ENDTEXT

retu c

?>

<hr>

El resultado seria este:

Y esto es todo ¡!!. Podemos codificar nuestras de manera sencilla a tan compleja como queramos. Podremos cargar nuestras librerias preferidas o frameworks para crear nuestras views y usarlas como hariamos en cualquier editor de html

Peticiones al servidor. AJAX Una de las características de Genesis es la manera en que interactuará con el servidor. Basicamente las páginas web peden interactuar y hacer peticiones mediante recargas de páginas cuando hacemos por ejemplo un submit o crear una petición Ajax al servidor. Genesis al ser un sistema compacto y un portal de acción no ira recargando todo el sistema a cada petición, es por eso que nos basaremos en jax para crear nuestras peticiones. Independientemente de que teoricamente es mas engorroso el uso de esta tecnología, hoy en dia existen numerosos métodos que nos ayudaran a lidiar facilmente con este objetivo. Cuando diseñemos por ejemplo una view con un button, por ejemplo queremos crear una petición al servidor y que nos devuelva una respuesta. Con la respuesta recibida haremos lo que queramos si necesidad de recargar toda la pagina, sino simplemente pintando ese/os datos.



Versión 1.0a


Como podemos hacer esa llamada ?. Podemos recurrir a las peticiones standard por ejemplo usando jquery y sus llamadas via $.ajax, $.post, $.get,… o via una de las extensiones que empezamos a incorporar a Genesis que nos ayude a crear la peticion. Para ello usaremos nuestras funciones mágicas: MsgTask(), MsgView()

MsgTask() function MsgTask( cKey, oValues, fCallback )

Parameters Descripción

cKey ID. del registro de la Task

oValues Parmaetro/s que queremos pasar al servidor. La manera mas fácil de pasarlos sera creando un objeto y añadir clave/valor tantas como necesitemos: var oPar = new Object() oPar[ ‘param1’ ] = ‘John Smith’ oPar[ ‘param2’ ] = 46 oPar[ … ] = …

fCallback Función que se ejecutará cuando recibamos repuesta por parte del servidor. La función recibirán en principio un parámetro de respuesta, que podria ser un array, un hash, string,….

Como quedaria el uso de esta función. Ejemplo ( div6 - Test divs form y MsgTask() ) <html>

<h3>Hi! now is {$ time()$} </h3>

<hr>

<?prg


LOCAL o, oBrw, oCol

LOCAL cHtml := ''

DEFINE WEBFORM o ID 'demo'

o:lDessign := .F.

INIT FORM o

ROW o

COL o GRID 6

ROW GROUP o

GET 'zip' VALUE '51346-8148' LABEL 'ZIP Code' GRID 6 OF o

BUTTON 't4' LABEL 'Get Info' GRID 6 OF o ACTION 'Test()'

END o

END o

END o

END FORM o

?>



Versión 1.0a


<script>

function Test() {

var o = new Object()

o[ 'zip' ] = $('#zip').val()

MsgTask( 'getzip', o, PostTest )

}

function PostTest( dat ) {

if ( dat.success == true )

MsgInfo( dat.value, 'Info' )

else

MsgError( dat.error )

}

</script>

</html> El button tiene asociado la accion Test() (event onclick). Una vez se pulsa ejecuta la funcion que recolecta el valor del campo del get como parametro y via MsgTask() hace una peticion a la task ‘getzip’. Esta task estara en el server de Genesis y una vez reciba la petición, la procesará. La Task definida en el server podria ser algo tan simple como esto: function main( hParam )

LOCAL uValue := ''

LOCAL cZip := ''

IF valtype( hParam ) <> 'H'

RETU ''

ENDIF

cZip := hParam[ 'zip' ] //'51346-8148'

USE TEST SHARED NEW VIA 'DBFCDX'

SET INDEX TO TEST

cAlias := Alias()

(cAlias)->( OrdSetFocus( 'ZIP' ) )

IF DbSeek( cZip, .F. )

uValue := (cAlias)->first + ' ' + (cALias)->last + ' => ' + (cAlias)->street

ENDIF


return uValue No hace falta comentar nada…Cuando tiene el valor del zip simplemente lo devuelve



Versión 1.0a


MsgView() MsgView() nos permitirá llamar a una pantalla (View). function MsgView( cKey, oValues, fCallback )

Parameters Descripción

cKey ID. del registro de la View

oValues Parámetro/s que queremos pasar al servidor. Podemos tambien enviar un objeto y añadir clave/valor tantas como necesitemos: var oPar = new Object() oPar[ ‘param1’ ] = ‘John Smith’ oPar[ ‘param2’ ] = 46 oPar[ … ] = …

fCallback Función que se ejecutará cuando recibamos repuesta por parte del servidor. La función recibirá un parametro de tipo has con los siguientes valores: Success Si la petición a tenido éxito. url (success == true ) url de la vista generada error (success == false ) error al solicitar la view

En el ejemplo T015 hay un ejemplo del manejo de MsgView() con paso de parámetros hacia la otra vista



Versión 1.0a


Diseñar pantallas – GUI

Aún no sabremos como se reaccionará ante este nuevo estilo y cambio de entorno. Una cosa si que es cierta y es que la mayoria de los programadores que vienen de entornos como Win les da pánico el hecho de diseñar las pantallas por su dificultad. La idea de Génesis es que podamos incluir nuestros propios frameworks/libs que nos faciliten la labor. Mientras ya disponemos de un prototipo que nos puede ayudar facilemnte a crear nuestros primeros formularios.

El sistema está basado en el popular framework Bootstrap y simplemente nos apoyamos en la fuerza de nuestro

amigo preprocesador que nos ayudará a crear facilmente nuestras pantallas. Quien quiera puede ir mirándose si

desea el help de Bootstrap para situarse pero básicmente funciona para nosotros de la siguiente manera:

- Dividiremos la pantalla en lineas ROW - Cada linea esta dividida en 12 columnas y podremos agrupar columnas, por ejemplo un grupo de 8 y uno

de 4 . En el caso de crear un grupo de 6 columnas lo hariamos asi COL o GRID 6 - En cada agrupacion podemos volver a insertar lineas Como todos sabeis la pantalla está diseñada con un monton de <div> </div> que son simplemente cajitas. Cada <div> tiene su </div> . En nuestro GUI cada ROW tendra su END y cada COL su END Cuando iniciemos nuestra pantalla siempre le pondremos un Identificador: DEFINE WEBFORM <mivariable> ID “MiIdentificador” Dentro del formulario iniciaremos con INIT FORM <mivariable> Al final del formulario END FORM <mivariable> Ejemplo: DEFINE WEBFORM o ID 'demo'

INIT FORM o

…

END FORM o Pues ahora es cuestion de mezclar y montar las cajitas. Crearemos este diseño a modo de ejemplo DEFINE WEBFORM o ID 'demo'

INIT FORM o

ROW o

COL o GRID 6

ROW GROUP o



Versión 1.0a


GET 'name' VALUE 'Maria de la O' LABEL 'Name' GRID 8 OF o

BUTTON 't3' LABEL 'Search' GRID 2 OF o ACTION 'Test()'

END o

END o

END o

END FORM o Como podeis apreciar ya tenemos 2 controles dentro de nuestro formulario. Observad como cada ROW, COL tiene su END asociado. El resultado de este code seria el siguiente:

Para ayudar a entender y quizas a diseñar podremos especificar despues de la definicion del WEBFORM la propiedad ::lDessing a .T. Esto nos marcará en la pantalla con lineas los diferentes bloques de COLS y ROWS y nos ayudará facilmente a entender por donde nos movemos. Una vez tengamos la pantalla creada simplemente ponemos ::lDessign a .F. y listos. DEFINE WEBFORM o ID 'demo' o:lDessign := .T. El ejemplo anterior con lDessing a .T. nos mostraria la pantalla asi:

Cuando diseñemos pantallas mas complejos esto nos servira de gran ayuda, p.e.



Versión 1.0a


En el primer ejemplo podreis observar como en el button hay asociada una accion Test(). Como codificamos esta accion. Simplemente añadiendo las etiquetas <script></script> y dentro de ellas todas las funciones javascript que necesitemos. En este caso si queremos mostrar un alert() lo codificariamos de la siguiente manera <html>

<h3>Hi! now is {$ time()$} </h3>

<hr>

<?prg


LOCAL o, oBrw, oCol

LOCAL cHtml := ''


o:lDessign := .F.

INIT FORM o

ROW o

COL o GRID 6

ROW GROUP o

GET 'name' VALUE 'Maria de la O' LABEL 'Name' GRID 8 OF o

BUTTON 't3' LABEL 'Search' GRID 2 OF o ACTION 'Test()'

END o

END o

END o



Versión 1.0a


END FORM o

?>

<script>

function Test() {

alert('Test...')

}

</script>

</html>

Ya tenemos nuestra primera view !!! Recomiendo ver todos los ejemplos propuestos que ayudará a entender y experimentar diferentes posibilidades del sistema. La magia de Génesis es que ahora ya podriamos crear en nuestro menu una entrada con una accion que ejecutará nuestra View. En el apartado Menus ya describiremos como se crea este menu

Controles soportados

GET <cId> VALUE <uValue> [ LABEL <cLabel> ] [ ALIGN <cAlign> ] [GRID <nGrid>] [ <ro: READONLY> ] OF <oForm>

BUTTON <cId> [ LABEL <cLabel> ] [GRID <nGrid>] OF <oForm> [ ACTION <cFunc> ]

CHECKBOX <cId> [<check: CHECKED>] [ LABEL <cLabel> ] [GRID <nGrid>] OF <oForm> [ ACTION <cAction> ]

Browse

Se ha creado el primer control para crear un grid. Es uno de los controles mas complejos a a hora de crear un formulario de datos, pero indepedientemente de que podeis usar nativamente todos los que existen en el mercado, proponemos esta manera de trabajar que la vemos muy sencilla y potente a la vez. El sistema tendrá una parte que codificaremos en harbour definiendo las columnas. Posteriormente tendremos que inicializarlo y asignar sus eventos desde javascript Harbour <?prg

…

ROW GROUP o

DEFINE BROWSE oBrw ID 'ringo' HEIGHT 400 OF o

ADD oCol TO oBrw ID 'last' HEADER 'Last' SORT ALIGN 'right'

ADD oCol TO oBrw ID 'first' HEADER 'First' SORT

ADD oCol TO oBrw ID 'street' HEADER 'Street'

ADD oCol TO oBrw ID 'age' HEADER 'Age' WIDTH 70 ALIGN 'center' FORMATTER 'ageFormatter'



Versión 1.0a


END BROWSE oBrw

END o

…

?>

La definición Browse en el fichero de cabecera es la siguiente

#xcommand DEFINE BROWSE <oBrw> ID <cId> [HEIGHT <nHeight>] [ <s: SELECT> ] [ <ms: MULTISELECT> ]; [<click: CLICKSELECT>] [<lPrint: PRINT>] [<lExport: EXPORT>] [<lSearch: SEARCH>] [<lTools: TOOLS>] ; [ OF <oForm> ]

La definición de las columnas

#xcommand ADD <oCol> TO <oBrw> ID <cId> ; [ HEADER <cHeader> ] ; [ WIDTH <nWidth> ] ; [ ALIGN <cAlign> ] ; [ FORMATTER <cFormatter> ] ; [ <lSort: SORT> ]

Con las clausula FORMATTER podemos especificar una funcion que se ejecuta cda vez q se pinta una celda, poder formatear el contenido

En este caso es tan facil como definir la funcion ageFormatter que hemos puesto anteriormente en el code y que podria ser este pequeño code en javascript



Versión 1.0a


function ageFormatter(value, row) { if ( row.age > 50 ) return '<i class="fa fa-star"></i> ' + value else return '<img src="images/ball_green.png"> ' + value }

Javascript 1.- Crear una instancia de la clase Browse() var oBrw = new Browse( <mi_id> ) 2.- Crear eventos que usaremos y funciones asociadas oBrw.bClick = MyClick 3.- Inicializar objeto Browse cuando toda el dontenido de la pagina este preparada y listo

$(document).ready(function () { oBrw.Init() })

Y esto es todo. Cuantos mas eventos queramos controlar, mas code tendremos de especificar. Eventos y metodos soportados:

Events

bClick Asignamos una funcion al metodo click

bDblClick Asignamos una funcion al metodo click

Methods

SetData( <aRows> ) Asignar rows al browse. <aRows> array de hash con los valores de las columnas: { { ‘name’ => ‘Maria’, ‘age’ => 14 } { ‘name’ => ‘Pep’, ‘age’ => 54 } … }

El siguiente ejemplo es de de nivel medio, pero si sigue correctamente vereis que es muy facil entender todo lo que hace. Básicamente tenemos un GET para entrar un campo (State). Cuando ejecutamos la accion del button creamos una peticion al servidor y le enviamos el contenido del campo state, para que nos busque en una tabla todos los registros con ese state. Cuando recibimos la respuesta pintamos el resultado en el browse con SetData() Code del ejemplo:

Versión 1.0a




<html>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"

rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/bootstrap-

table.min.js"></script>

<script src="js/modgui.js"></script>

<style>

.myfooter {

background-color: gray;

}

</style>

<h3>Customer of States at {$ time()$} </h3>

<hr>

<?prg


LOCAL o, oBrw, oCol

LOCAL cHtml := ''


o:lDessign := .F.

INIT FORM o

ROW o

COL o GRID 7

HTML o CODE '<div class="alert alert-dark" role="alert"><h5

style="margin:0px;"><i class="fas fa-flag-checkered"></i> Selecciona Estado</h5></div>'

ROW GROUP o

GET 'state' VALUE 'IL' GRID 2 LABEL 'State' ALIGN 'center' OF o

GET 'total' VALUE '' GRID 2 LABEL 'Total' READONLY ALIGN

'center' OF o

BUTTON 't3' LABEL 'Search' GRID 2 OF o ACTION 'LoadState()'

END o

ROW GROUP o

DEFINE BROWSE oBrw ID 'ringo' HEIGHT 400 OF o

ADD oCol TO oBrw ID 'last' HEADER 'Last' SORT ALIGN

'right'

ADD oCol TO oBrw ID 'first' HEADER 'First' SORT



Versión 1.0a


ADD oCol TO oBrw ID 'street' HEADER 'Street'

ADD oCol TO oBrw ID 'age' HEADER 'Age' WIDTH 70 ALIGN

'center' FORMATTER 'ageFormatter'

END BROWSE oBrw

END o

END o

COL o GRID 5

HTML o CODE '<div class="alert alert-dark" role="alert"><h5

style="margin:0px;"><i class="fas fa-user-check"></i> Data Customer</h5></div>'

ROW GROUP o

GET 'city' VALUE '' GRID 12 LABEL 'City' OF o

END o

ROW GROUP o

GET 'st' VALUE '' GRID 4 LABEL 'State' OF o

GET 'zip' VALUE '' GRID 6 LABEL 'Zip' OF o

END o

ROW GROUP o

GET 'hiredate' VALUE '' GRID 6 LABEL 'Hiredate' OF o

CHECKBOX 'married' LABEL 'Married' GRID 6 OF o

END o

ROW GROUP o

GET 'notes' VALUE '' GRID 12 LABEL 'Notes' OF o

END o

END o

END o

ROW o

COL o GRID 12

HTML o CODE '<div class="myfooter"><strong>FOOTER</strong></div>'

END o

END o

END o

END FORM o

?>

<script>

var oWnd

var oBrw = new Browse( 'ringo' )

oBrw.bClick = MyClick

oBrw.bDblClick = MyDblClick

function LoadState() {



Versión 1.0a


var cState = $( '#state').val()

oWnd = MsgLoading()

MsgTask( 'dbfstate', cState, Post_LoadState )

}

function Post_LoadState( dat ){

oWnd.modal('hide');

var hValue = dat[ 'value' ]

var rows = hValue[ 'rows']

$( '#total' ).val( hValue[ 'len' ] )

oBrw.SetData( rows )

}

function ageFormatter(value, row) {

if ( row.age > 50 )

return '<i class="fa fa-star"></i> ' + value

else

return '<img src="images/ball_green.png"> ' + value

}

function MySelect() {

$('#select').html( '<pre>' + JSON.stringify(oBrw.Select(), undefined, 2 ) +

'</pre>' )

}

function MyClick(e, row) {

$('#city').val( row.city )

$('#st').val( row.state )

$('#zip').val( row.zip )

$('#hiredate').val( row.hiredate )

$('#married').prop('checked', row.married );

$('#notes').val( row.notes )

$('#married').prop('checked', row.married );

}

function MyDblClick(e, row) {

MsgInfo( row.first.trim() + ' ' + row.last, 'Guest' )

}

$(document).ready(function () {

oBrw.Init()

})

</script>

</html>



Versión 1.0a


Cada vez que selecciones una row cambiará el contenido de los datos de detalle de la parte derecha. Si hacemos un DblClick mostrara un info,… Es un ejemplo completillo para entender el funcionamiento. Podeis ver como utilizamos tambien la MsgTask() para crear una petición al server. Ya tenemos creada toda la parte Cliente o lo que se ejecuta en el client-side. Solo faltaria ver como podriamos crear la server-side, es decir lo que se ejecuta en el backend de nuestro servidor que escuchara la petición. Podemos observar que la funcion que crea la petición es LoadState() y que usa la funcion MsgTask( 'dbfstate', oParam, Post_LoadState ). Como ya vimos esto crea una peticion a Genesis que ejecute la task ‘dbfstate’ . /* ----------------------------------------------


Description : Task Genesis

Date : 04-11-2019 17:49:28

--------------------------------------------- */

function DbfState( cState )

LOCAL aRows := {}

DEFAULT cState TO '' // NY

IF ! empty( cState )



Versión 1.0a


USE test SHARED NEW VIA 'DBFCDX'

cAlias := Alias()

(cAlias)->( OrdSetFocus( 'STATE') )

(cAlias)->( DbSeek( cState, .T. ) )

WHILE (cAlias)->state == cState .AND. (cAlias)->( !Eof() )

Aadd( aRows, { '_recno' => (cAlias)->( Recno() ),;

'first' => (cAlias)->first,;

'last' => (cAlias)->last,;

'street' => (cAlias)->street,;

'city' => (cAlias)->city,;

'state' => (cAlias)->state,;

'zip' => (cAlias)->zip,;

'hiredate' => (cAlias)->hiredate,;

'married' => (cAlias)->married,;

'age' => (cAlias)->age,;

'salary' => (cAlias)->salary,;

'notes' => (cAlias)->notes;

} )

(cAlias)->( DbSkip() )

END


ENDIF

return { 'rows' => aRows, 'state' => cState, 'len' => len( aRows) } Podemos observar que devolvemos un hash que trataremos en la funcion Post_LoadState( dat ) Esto es todo el circuito !!!. El sistema va muy rapido porque trabajamos via Ajax y todo esta preparado para encajar las piezas. Es un ejmplo muy completo y un “poco” extenso pero podeis obersevar asi que tenemos de tener en cuenta o como se dimensiona este tipo de procesos.



Versión 1.0a


Browse II

Existe un plan B para los programadores que no quieren muchos problemas a la hora de montar un browse. Se trata de abrir una dbf y simplemente hacer un Xbrowse( <cDbf> ). Listos ¡!!! <html>

<link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css"

rel="stylesheet">

<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.js"></script>

<script src="js/modgui.js"></script>

<h3>Hello XBrowse !!!</h3>

<hr>

<div class="col-sm-10">

<?prg


LOCAL oBrw := XBrowse( ‘test’ ) //test,diario,clientes

return oBrw:Activate()

?>

</div>

</html> 2 Lineas de code Harbour == 1 Browse



Versión 1.0a


Podemos añadir otras funcionalidades al Xbrowse

#xcommand XBROWSE <oBrw> DBF <cDbf> ; [ <lAdd: ADD> ]; [ <lNoPagination: NOPAGINATION> ]; [ <lPrint: PRINT> ]; [ <lTools: TOOLS> ]; [ <lExport: EXPORT> ];

O a nivel de code usando las datas XBROWSE oBrw DBF 'test' ADD PRINT TOOLS EXPORT

oBrw:cLang := 'es-ES' // es-ES, de-DE, en-EN

oBrw:nRows := 100

oBrw:nHeight := 600

oBrw:aFields := { 'first', 'last', 'state', 'married' }

XBROWSE oBrw ACTIVATE Con la opcion de importación podemos subir nuestros dbfs a nuestro entorno (ver Importacion)



Versión 1.0a


Process Esta opción la usaremos a medida que nuestros procesos se vayan haciendo grandes y nos servirá para agrupar tasks, procesos y view. Básicamente el concepto es el siguiente /* ----------------------------------------------


Description : Proccess Genesis

Date : 04-11-2019 11:30:25

--------------------------------------------- */

function main()

local hTask

local hView

// Ejecutamos una task que abrirará la tabla que le pasemos como parámetro.

// Una Task nos devolverá un hash con los siguientes claves

// 'success' => Si el proceso ha ido bien

// 'value' => Respuesta de la task. En este caso devuelve un hash

// con 2 claves:

// 'rows' => registros de la tabla

// 'struct' => estrctura de la tabla

//

// La Task 'opendbf' recibirá 2 parámetros: tabla y num. de registros

hTask := RunTask( 'opendbf', 'test', 100 )

// Podemos ver su resultado haciendo:

// return hTask

// Podriamos ejecutar mas Tasks() para crear nuestras acciones y muestros

// procesos...

// Llamaremos a una vista llamada 'viewdbf' y le pasaremos de parametro el

// valor devuelto de la task con la key 'value'. Las view nos devolveran un

// hash con 2 claves

// 'success' => Si el proceso ha ido bien

// 'html' => La view

hView := RunView( 'viewdbf', hTask['value'] )

// En este ejemplo nuestro Proceso devolvera una View, pero podemos devolveer

// lo que necesitemos...

return hView[ 'html' ]



Versión 1.0a


Menus En este apartado crearemos nuestros menus asociados a nuestras Task, Views o Proc. El menu estara formado de un Grupo, SubGgrupo y un Menu con una acción. Esto nos permitira realizar diferentes agrupaciones, quedando por ejemplo de esta manera

Podemos observar los 3 niveles de agrupacion:

Transporte RutaSalidas

Estos 3 niveles estarn representados en el sistema de la siguiente manera

Para definir el nivel Grupo entraremos los siguientes datos



Versión 1.0a


Para definir el Subgrupo de finieremos los siguientes campos

Podemos observar como podemos añadir un icono



Versión 1.0a


Y finalmente para definir le campo Item/menu añadiremos:

Ya tenemos nuestro menu preparado y listos para ejecutar ¡!! En cualquier momento podremos desactivar el grupo, subgrupo o item menu mediante el campo active. En un nivel un poco mas avanzado podemos definir un Grupo,SubGrupo,Item poniendo un role/s . Esto indicará al sistema que solo se mostrará el menu al usuario que tenga definido ese rol. Se pueden poner en cada Grupo/Subgrupo/Item varios roles separados por ; adm;sales

Master Tables Definición de datos maestros de la aplicación

Types Esta tabla nos servira para crear “Tipos” que usaremos para clasificar una Task, View, Process. Cada type ira asociado a si lo usaremos en una Task, view, process. Esto nos ayudará cuando tengamos muchos regsitros poder filtrar por types ayudandonos en la selección y para poder catalogar por ejempo proyectos



Versión 1.0a


En este caso si yo estoy en lista de Tasks y deseo solo trabajar con las que he catalogado como wilson, el sistema nos la filtra al momento siendo mas amigable el trabajo.



Versión 1.0a


Roles Con esta table podremos definir los distintos roles que usaremos cuando definamos un usuario

Es decir, todos los usarios con un rol adm , podran acceder a todos los menus que NO tengan rol asignado y aquellos que tengan un rol = adm . Es un sistema fácil y que ayuda facilmente a resolver este tipo de situaciones.

Users Finalmente esta tabla es la que daremos de alta a los usarios que queramos que tengan acceso a nuestra aplicación.

Cuando definamos a un usuario especificaremos los siguientes datos



Versión 1.0a


Siempre podremos con un simple clic desactivar/activar a un usuario. Como se puede apreciar tambien podemos indicar el rool si es necesario para poder acceder a ciertos items del menu



Versión 1.0a


Configuration

Company Básicamente definiremos el nombre de la empresa y el logo a usar para cuando usemos nuestra aplicación.

Podremos con 2 clicks cambiar el nombre de nuestra App Web

Tools

Files Esta opción nos da un listado de los ficheros que tenemos en nuestra area de trabajo

Podremos facilmente marcar y eliminar aquellos que no nos interesen



Versión 1.0a


Import Database

Para subir cualquier fichero podemos usar esta opcion en la que simplemente elegimos desde el navegador el

fichero. Estos ficheros se suben a nuestra area de trabajo. Si subimos por ejemplo una tabla customer.dbf, luego

desde la task podremos abrirla con un simple USE CUSTOMER

El sistema ofrece la posibilidad de subir un zip que automaticamente se descomprimira una vez subido.

Import Project

A la hora de diseñar un prototipo empezamos a definir distintos códigos: Tasks, Views,… Es posible que tengamos

la necesidad de enviarle a un cliente, de subir a nuestro propio sistema,…parte o todo este proyecto. Con esta

opción podremos importar el proyecto que previamente habremos exportado.

La unica precaucion importante a tener en cuenta es que si se sube un codigo que ya esta definido en nuestro

sistema, se susituira. Por ejemplo si hemos definido las task T001 y en el poryecto se encuentra un T001 se

sustituirá en el sistema. Genesis avisa antes de realizar la importacion



Versión 1.0a


En el siguiente apartado se explica como exportar un proyecto

Export Project

Con esta opcion facilmente podremos exportar esos codigos que forman parte de un proyecto. Basicamente se

trata de seleccionar aquellas views,task, procs que queramos exportar



Versión 1.0a


Iremos seleccionado si queremos seleccionar Task, View,… y el sistema nos mostrará todos los codigos.

Imaginemos que estoy diseñando un proyecto que previamente ya he ido catalogando con el type wilson. Con

solo especificar en la entrada buscar, wilson, el sistema ya nos propone todos los codigos de este tipo

Simplemente los marcaremos y pulsaeremos el button Add Register. Los registros pasaran al panel de la derecha.

Buscaremos tambien en este caso las Views catalagogadas como wilson

Y pulsaremos Add Register. En nuestro panel de la derecha apareceran todos los registros seleccionados hasta el

momento.



Versión 1.0a


Podremos marcar y deseleccionar de la lista si lo deseamos. Una vez depurada la lista pulsaremos el button

Download Project y exportaremos el proyecto. El sistema nos pedira un nombre de proyecto y se exportara todo

en un fichero zip



Versión 1.0a


Una vez exportada nos aparece esta pantalla

En estos momentos ya dispondremos del fichero para importarlo desde Genesis.



Versión 1.0a


Otros

My profile

En esta opción podremos definir nuestros datos como usuario, asi como resetear nuestro password



Versión 1.0a


System

Esta pantalla nos ayudará a verificar los datos de nuestra instalación



Versión 1.0a


Setting

Parametrización y comportamiento de nuestro menu

genesis erp system for cloudgenesis erp system for cloud autor carles aubia fecha 17/12/2019...

Documents