Herramientas de usuario

Herramientas del sitio


wiki:2.-desarrollo-app:2.3.-codigo:c.-eventos:15.-binding:start

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.

Eventos

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

DataApplication (appData)
DataCollection
DataObject
View

Binding

Vía mapping.xml

<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>

Via Script


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);
}

Lista de Eventos Disponibles

Application (appData) System events

Evento Código XML Descripción
En desarrollo

DataObject

Evento Código XML Descripción
En desarrollo

DataCollection, DataObject, Eventos UI

Evento Descripción
En desarrollo

DataObject (props) Eventos UI

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);
}

DataObject (props) Eventos de Datos

Evento Propiedad Descripción
En desarrollo

DataObject (frame) Eventos UI

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>
wiki/2.-desarrollo-app/2.3.-codigo/c.-eventos/15.-binding/start.txt · Última modificación: 2018/01/31 11:43 por patricia