GeneXus - Integrar código JS

Integrar código JS

Publicado por Alida (11 intervenciones) el 12/10/2016 21:57:18

Buenas tardes, quiero saber como puedo integrar código Javascript en genexus, también si éste por el simple hecho de estar integrado ya se esta ejecutando (llamando) o que es lo que se debe de hacer para poder ejecutarlo una vez que se haya integrado?
Lo que tengo actualmente es un textblock con formato HTML y en Event Star, estoy metiendo código javascript al textblock mediante la propiedad Caption, no se si estoy en lo correcto y de ser así como hago para que este código se ejecute? Si alguien pudiera poner un ejemplo de como hacerlo correctamente, se agradece.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Integrar código JS

Publicado por DIEGO (12 intervenciones) el 14/10/2016 22:49:29

Hola, yo estuvo buscando mucho y los recursos que estan en la web son pocos, en definitiva hice un User Control. Te recomiendo el libro de https://www.amazon.com/User-Control-Desenvolvendo-controles-Portuguese-ebook/dp/B01LZT1NX7/ref=sr_1_1?ie=UTF8&qid=1476475597&sr=8-1&keywords=user+control+genexus

Por ahora, puedo explicarte en parte que hice y como http://genexus-mancilla.blogspot.com.co/2012/08/mi-primer-user-control.html]:

1 Con la herramienta de Genexus UserControlEditor, debes crear un Usercontrol, con los atributos que vas a enviar desde genexus y los que vas a recibir. Yo nombre a estos DataIn y DataOut. Tambien cree un evento llamado GetCoordinates que se usara mas adelante

2 Despues debes importar el UC a un panel.

3 Luego debes llamar la funcion que va a recibir la data (en mi caso DataIn )

Event LlamarJs

MiUserControl.DataIn = &MiSDT.ToJson()

EndEvent

4 Esta es la funcion show que se genera por defecto al hacer un UC

this.show = function()

		///UserCodeRegionStart:[show] (do not remove this comment.)

            console.log(this.DataIn);

           Data = jQuery.parseJSON(this.DataIn);

	   CreateCanvas(Data.PlanePath,Data.PlaneWidth, Data.PlaneHeigth,Data.Areas);

		///UserCodeRegionEnd: (do not remove this comment.)

Como puedes notar, una vez recibo el DataIn la transformo en un json con jQuery.parseJSON

5 Una vez tengo esta data, activo mis funciones de js y proceso los datos.

6 Te muestro como obtengo la data yo

if (element !== null) {

		x2 = Math.round((e.clientX-rect.left)/(rect.right-rect.left)*canvas.clientWidth);

		y2 = Math.round((e.clientY-rect.top)/(rect.bottom-rect.top)*canvas.clientHeight);

                canvas.style.cursor = "cursor";

                CreateArea(x1,y1,x2, y2);

		/*Fijate aca */MapCanvas.DataOut = JSON.stringify(mouse, null, 2);;

                /*Fijate aca */MapCanvas.GetCoordinates();

		console.log("Box Size: X1: " + x1 + " Y1: " + y1 + " X2: " +x2+ " Y2: " + y2);

		 element = null;

Es asi como devuelvo toda la info procesada.

Apenas esrtoy terminando la construccion del Uc, me he tardo por que entender el flujo fue complejo, pero una vez lo entiendes, hacer uc es muy facil y mucho mas rapido que implementar procesos en gx.

Te cuento que hace mi UC, recibe un imgpath, crea un canvas de html5, coloca esa imagen de background, activa el mouse para crear areas con el click, devuelve estos puntos o coordenadas y guardo estos datos en un transaccion Point.

Espero haberte dado al menos una luz de como abordarlo, cualquier cosa, estare muy atento. Muchos exitos

Te envio unas capturas del Uc en funcionamiento.

funcionando.zip(2,5 MB)

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar