NORMA DE USO DE LOS EVENTOS:


Cuando se utilice como atributo todo el nombre en minúsculas y sin guiones.
Cuando se utiliza en Script, en función Binding, lowerCamelCase.

Los eventos se aplican a los siguientes objetos “runtime” XOne:

DataApplication (appData)
DataCollection
DataObject
View
<coll name=”MyColl” onbeforeedit=”onBeforeEdit”  ongroupselected=”onGroupSelected”  > 
 
<group id=”1” />
	<prop  name=”USERNAME” type=”T” />
	<prop  name=”BUTONOK” type=”B”  onclick=”onClickOk” />
</coll>
 
function onBeforeEdit (e) {
		….
}
 
function onClickOk (e)  {
		….
}
 
function onGroupSelected (e) {
 
}

También se puede ejecutar un nodo desde el mapping o colección.

<coll name=”MyColl” onbeforeedit=”executeNode(onBeforeEdit)ongroupselected=”executeNode(onGroupSelected)> 
 
<group id=”1” />
	<prop  name=”USERNAME” type=”T” />
	<prop  name=”BUTONOK” type=”B”  onclick=”onClickOk” />
</coll>


Usando la función bind (arg1, arg2, arg3) .

Eventos de Datos

appData.bind( eventName, eventHandler );
 
coll.bind( eventName, eventHandler );
 
obj.bind( propName, eventName, eventHandler );

Eventos ui

ui.getView(obj).bind (controlName, eventName,eventHandler)
 
function onClickOk (e) {
	// some stuff
	...
}
 
function onBeforeEdit (e) {
	// some stuff
	...
}
 
 
function prepareBinding () {
 
	var myColl = appData.getCollection(“MyColl”);	
	var myObject = myColl.createObject();
 
	/* ********************************** */
	//  Asociar eventos a nivel de COLL
	/* ********************************** */
 
	myColl.bind ( “onbeforeedit”,  onBeforeEdit);
	myColl.bind ( “ongroupselected”,  onGroupSelected);
 
	/* ********************************** */
	//  Asociar eventos a Propiedades
	/* ********************************** */
 
	var uiView = ui.getView(myObject);   // uiview sería NULL si el objeto no se está mostrando
 
	uiView.bind (“BUTONOK”, “onclick”,  onClickOk);
	uiView.bind (“BUTONOK”, “onclick”,  function (e) {
	// some stuff
	...
	});
 
	// Si las propiedades a las que queremos referenciar no están en una ventana visible, tendríamos que utilizar:
 
	myColl.bind ( “onbeforeedit”,  function (e) {
 
		currentView.bind (“BUTONOK”, “onclick”,  onClickOk);
		currentView.bind (“BUTONOK”, “onclick”,  function (e) {
		// some stuff
		...
		});
	});
 
	appData.pushValue(myObject);
}
Evento Código XML Descripción
En desarrollo
Evento Código XML Descripción
En desarrollo
Evento Descripción
En desarrollo
Evento Propiedad Descripción
onclick type=“B” Invocado cuando se pulsa un botón.
onTextChanged type=“T” Invocado mientras se va pulsando caracteres en el teclado.
Parámetros: target, objItem, newText, oldText, keyPressed
onFocusChanged type=“T” Invocado cuando pierde o gana foco el campo, en el parámetro isFocused. Parámetros: target, objItem, isFocused

Ejemplo de código de onclick

A la hora de definir un evento, lo haremos como atributo en el XML del prop o con el método bind, NO utilizaremos los 2 al mismo tiempo.

  • Si el evento se declara como atributo en el xml, se escribe en minúsculas (onclick)
  • Si el evento se declara con el método bind, se escribe en lowerCamelCase (onClick)

Como atributo en el XML:

<prop name="MAP_BTN1" type="B" title="Abrir coll" onclick="javascript:jstestClick(e,'collTest1');" width="300p" height="150p" />

En el método bind:

var v=ui.getView(self);  //Así obtenemos una referencia a la ventana actual de la aplicación
v.bind ("MAP_BTN1","onClick","collTest1",jstestClick);

En algún fichero .js externo, tendremos la función javascript a la que se llama desde el atributo onclick o desde el método bind:

function jstestClick(e,data) {
	var c;
	ui.msgBox ("Abre el objeto "+data,"Titulo",0);
	c=appData.getCollection(data);
	var obj=c.createObject();
	c.addItem(obj);
	appData.pushValue(obj);
}
Evento Propiedad Descripción
En desarrollo
Evento Nodo Parámetros de Evento Descripción
onScrollframe target: Distancia que falta por hacer scroll horizontal.
dx: Distancia que falta por hacer scroll horizontal.
dy: Distancia que falta por hacer scroll vertical.
width: ancho del área que se hace scroll.
height: alto del área que se hace scroll.
scrollX: distancia que se ha desplazado en horizontal.
scrollY: distancia que se ha desplazado en vertical.
Permite controlar los desplazamientos verticales y horizontales en los frame que tienen scroll=”true”.

Ejemplo de código del evento onScroll en un frame:

<coll name="ScrollTester" title="ScrollTester"
sql="SELECT t1.ID  FROM ##PREF##ScrollTester t1" 
objname="ScrollTester" updateobj="ScrollTester" progid="ASData.CASBasicDataObj" filter="" notab="true">
  <group name="General" id="1">
    <prop name="ID" type="N" visible="0" />
    <prop name="MAP_SHOWOVERSCROLL" type="N" visible="0" />
    <frame name="froverscroll" floating="true" top="1680" left="960" disablevisible="MAP_SHOWOVERSCROLL=0">
        <prop name="IMGDOWN" title="" type="IMG" path="./icons/overscroll.png" visible="1" width="64px" labelwidth="0" />
    </frame>
    <frame name="top" align="top" height="100%" width="100%" scroll="true">
         <frame name="forscroll" align="center|top" height="200%" width="100%" bgcolor="#CCFFCC">
            <prop name="BTDEMO" title="Click VB" type="B" visible="1" width="480px" height="400px" labelwidth="8" />
        </frame>
    </frame>
    <before-edit>
        <action name="runscript">
          <script language="javascript">
              ui.getView(self).bind("top","onScroll", function (e) {
                  if (e.dy&lt;=10 &amp;&amp; self.MAP_SHOWOVERSCROLL==1) {
                      self.MAP_SHOWOVERSCROLL=0;
                      ui.getView(self).refresh("froverscroll");
                  } else if (e.dy&gt;10 &amp;&amp; self.MAP_SHOWOVERSCROLL==0) {
                      self.MAP_SHOWOVERSCROLL=1;
                      ui.getView(self).refresh("froverscroll");
                  } 
              });
              self.MAP_SHOWOVERSCROLL=1;
          </script>
        </action>
    </before-edit>
  </group>
</coll>