Uso de prompts con Javascripts

http://www.gxtechnical.com/gxdlsp/pub/genexus/internet/technicalpapers...

LLAMADO A WEB PANELS DE SELECCION USANDO JAVASCRIPTS

Objetivo
En este documento se explica como implementar el llamado a un prompt de tal manera de que el formato de la ventana popup que lo contiene se maneje en forma dinmica. Es decir, configurar dinmicamente su tamao, posicin, uso de scrollbars, men bar, status bar, etc.

Implementacin de la solucin
Para el uso de paneles de seleccin, adems de los generados automticamente, GeneXus brinda la posibilidad de tener prompts de usuario, que sern llamados desde web panels o transacciones mediante el uso de la regla prompt [on]. Para personalizar el formato de la ventana popup que contiene al prompt del usuario, la solucin no es mediante el uso de esta regla, sino llamando directamente a un javascript que levante la ventana. El javascript define una funcin que recibe los parmetros (de entrada y salida) que se usan para la invocacin del panel de seleccin. A su vez contiene en la lgica de la apertura de la nueva ventana (ventana popup), algunos parmetros que permiten darle el formato deseado a la misma. La implementacin de la solucin, consiste bsicamente en, una vez obtenido el javascript (por ejemplo leyndolo de una tabla), reemplazar los parmetros que se desea personalizar, por los valores requeridos. Por ejemplo, buscar en el javascript la cadena width=%x y reemplazarla por el valor que se desea, por ejemplo, por width=380. De esta manera el ancho de la ventana que contiene al prompt ser de 380. Esto se logra mediante el uso de la funcin StrReplace de GeneXus. Una vez realizado este cambio, se expande el javascript (por ejemplo igualndolo a la propiedad caption de un textblock), para que sea includo en el cdigo html de la pgina.

Ejemplo
Realizamos un ejemplo sencillo en el que desde un W eb Panel, habiendo ingresado autor (libaut) y editorial (libedit), mediante un W eb Panel de Seleccin el usuario elige el cdigo del libro (libcod) y su descripcin (libdsc). A continuacin se detalla los pasos a seguir para cada uno de los web panels (llamador y prompt), para implementar la solucin. 1. Desde el web panel llamador. Se tendr un objeto desde donde se hace el llamado al prompt (en este ejemplo una imgen). En una variable se asigna el nombre del W eb Panel de seleccin. De esta manera se podr reemplazar este nombre en el cdigo del javascript por el nombre genrico que l contiene. Se lee de la base de datos el javascript, se reemplazan los parmetros deseados en el cdigo del mismo, guardando este nuevo cdigo en una variable intermedia. Luego esta variable ser asignada a la propiedad caption de un textblock para expandir el javascript en el cdigo html de la pgina. El ltimo paso es, mediante la propiedad link de la imagen, hacer el llamado al javascript, pasndole los parmetros correspondientes (de entrada y salida). Para el pasaje de parmetros en la llamada al javascript se usa la propiedad InternalName, de manera de obtener para el control (en este caso una variable), el nombre con el cual se har referencia a ella en cdigo HTML. En el ejemplo, los primeros dos parmetros son los de retorno del prompt. Los otros dos parmetros se pasan al W eb Panel de seleccin como parmetros de entrada. Entonces, el cdigo GeneXus sera: Event Start &prdefault = loadbitmap('prompt.gif') &PgmPrompt = 'hsellibros.exe' //Obtengo el Javascript que necesito for each where jsid = 1 &jscod = jscod endfor //Reemplazo dinmicamente en el cdigo del javascript &jscod = StrReplace(&jscod, 'promptname' , &PgmPrompt ) //Nombre del webpanel prompt &jscod = StrReplace(&jscod , 'width=380' , 'width=480' ) //Ancho con que voy a abrir el prompt &jscod = StrReplace(&jscod , 'top=150' , 'top=50' ) //Posicin donde voy a abrir el prompt &jscod = StrReplace(&jscod , 'scrollbars=no' , 'scrollbars=yes' ) //Si lo quiero con scrollbars o no promptDef.Caption = &jscod //Este es el textblock donde expando el javascript modificado //Asigno el link que invoca al prompt //En este caso los primeros dos parmetros son los de retorno del prompt. &prDefault.Link= 'javascript:HGxPrompt(document.forms[' + '0' + '].' + &libcod.InternalName + ',' + 'document.forms[' + '0' + '].' + &libdsc.InternalName + ',' + 'document.forms[' + '0' + '].' + &libaut.InternalName + '.value,'+ 'document.forms[' + '0' + '].' + &libedit.InternalName + ".value)" EndEvent 2. Desde el Web Panel Prompt Este es un W eb Panel prompt, ya sea de usuario o generado automticamente por GeneXus. En el primero de los casos, es necesario que cumpla con los requerimientos de un prompt. Por detalles ver Uso de W eb Panels en Reglas Prompt (Seccin Programacin de un Web Panel como prompt) . Otra forma de realizar lo mismo, es mediante el llamado a un javascript (que tiene una lgica muy similar al usado por GeneXus en los prompts). La ventaja de esta alternativa es que se puede personalizar el javascript. Por ejemplo, una posibilidad es optar por hacer un submit al servidor a la vuelta del prompt o no hacerlo. En la seccin Javascripts de este documento se detallan ambas posibilidades. En ese caso el cdigo en GeneXus sera: Event Start for each //Obtengo el Javascript que necesito where jsid = 2 //Este es el Javascript (2*) &jscod = jscod endfor volver.Caption = &jscod //Este es el textblock donde expando el JS EndEvent // Start Event Subfile1.Load ......................... &libaut.Link = "javascript:GX_js_return('" + trim(str(&libcod)) +"','" + trim(&libdsc) + "')" ......................... endfor

Javascripts
Los javascripts usados en la solucin son los siguientes. (1*) Javascript para el llamado al prompt. <script language="JavaScript" type="text/javascript"> var GXPARAMETERS = new Array(); var wPrompt=null; function HGxPrompt(P0, P1, P2, P3,P4,P5,P6,P7,P8,P9,P10) { GXPARAMETERS[0] = P0; GXPARAMETERS[1] = P1; GXPARAMETERS[2] = P2; GXPARAMETERS[3] = P3; GXPARAMETERS[4] = P4; GXPARAMETERS[5] = P5; GXPARAMETERS[6] = P6; GXPARAMETERS[7] = P7;

1 de 3

15/06/2011 17:29

Uso de prompts con Javascripts

http://www.gxtechnical.com/gxdlsp/pub/genexus/internet/technicalpapers...

GXPARAMETERS[8] = P8; GXPARAMETERS[9] = P9; GXPARAMETERS[10] = P10; if (wPrompt== null || wPrompt.closed) { sParms = "?"; sParms = sParms + escape( typeof(P0) == "string"?P0:P0.value) +","; if ( typeof(P1) != "undefined") {sParms = sParms + escape( typeof(P1) == "string"?P1:P1.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P2) != "undefined") {sParms = sParms + escape( typeof(P2) == "string"?P2:P2.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P3) != "undefined") {sParms = sParms + escape( typeof(P3) == "string"?P3:P3.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P4) != "undefined") {sParms = sParms + escape( typeof(P4) == "string"?P4:P4.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P5) != "undefined") {sParms = sParms + escape( typeof(P5) == "string"?P5:P5.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P6) != "undefined") {sParms = sParms + escape( typeof(P6) == "string"?P6:P6.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P7) != "undefined") {sParms = sParms + escape( typeof(P7) == "string"?P7:P7.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P8) != "undefined") {sParms = sParms + escape( typeof(P8) == "string"?P8:P8.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P9) != "undefined") {sParms = sParms + escape( typeof(P9) == "string"?P9:P9.value) + ","; } else {sParms = sParms + "undefined,";} if ( typeof(P10) != "undefined") {sParms = sParms + escape( typeof(P10) == "string"?P10:P10.value); } else {sParms = sParms + "undefined";} wPrompt=open("promptname"+sParms,"","toolbar=no,location=no,directories=no,status=no,menubar=no,width=380,height=420,left=150,top=150,scrollbars=no,resizable=no,copyhistory=no"); } wPrompt.focus(); } </script> (2*) Javascripts de retorno. A. Al volver no se hace un submit del llamador.

<script language="JavaScript" type="text/javascript"> function GX_js_return(vCode, vDescription) { if (opener != null) { if (opener.GXPARAMETERS != null) { { opener.GXPARAMETERS[0].value = vCode; opener.GXPARAMETERS[1].value = vDescription; } if (opener.GXPARAMETERS[0].type != "hidden") { opener.GXPARAMETERS[0].focus(); } } self.close(); } } </script> B. Al volver se hace un submit del llamador <script language="JavaScript" type="text/javascript"> function GX_js_return(vCode, vDescription) { if (opener != null) { if (opener.GXPARAMETERS != null) { { opener.GXPARAMETERS[0].value = vCode; opener.GXPARAMETERS[1].value = vDescription; } if (opener.GXPARAMETERS[0].type != "hidden") { opener.GXPARAMETERS[0].focus(); } } self.close(); opener.document.forms[0].submit(); } } </script> Se puede obtener este ejemplo en la siguiente URL: http://www.gxopen.com/main/hdownloa.aspx?163,1 NOTA: Observar que puede suceder que en distintas versiones de Genexus, los javascripts usados sean diferentes. El ejemplo citado anteriormente es con javascripts para la versin 8.0. La forma de saber la estructura del JS a usar para el llamado al prompt, es programar provisoriamente la regla prompt en el webpanel. En ejecucin, haciendo View Source del cdigo HTML, se puede ver el JS que GeneXus usa para la invocacin al prompt. Ese JS se puede usar como modelo para llamarlo directamente como se muestra en el ejemplo. A manera de ejemplo, el javascript para llamar al prompt, en la versin 9.0 sera: <script language="JavaScript" type="text/javascript"> var GXPARAMETERS = new Array(); var wHSelLibros=null; function onCloseHSelLibros() { } function HSelLibros(P0, P1, P2, P3) {

2 de 3

15/06/2011 17:29

Uso de prompts con Javascripts

http://www.gxtechnical.com/gxdlsp/pub/genexus/internet/technicalpapers...

GXPARAMETERS[0] = {Ctrl:P0,isKey:false}; GXPARAMETERS[1] = {Ctrl:P1,isKey:false}; GXPARAMETERS[2] = {Ctrl:P2,isKey:false}; GXPARAMETERS[3] = {Ctrl:P3,isKey:false}; if (wHSelLibros== null || wHSelLibros.closed) { window.GXPromptCloseHandler = onCloseHSelLibros; sParms = "?"; sParms = sParms + (gxurlvalue(P0)) + ","; sParms = sParms + (gxurlvalue(P1)) + ","; sParms = sParms + (gxurlvalue(P2)) + ","; sParms = sParms + (gxurlvalue(P3)); wHSelLibros=open("hsellibros" + sParms, '', 'toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes,copyhistory=no');} wHSelLibros.focus(); } </script>

3 de 3

15/06/2011 17:29