POLICY OF USE OF THE EVENTS:
- When used as attribute the name must be in lowercase and with no hyphen.
- When used in Script, in Binding function, lowerCamelCase.
Events
Events are applied to the following “runtime” XOne object.
- DataApplication (appData)
- DataCollection
- DataObject
- View
Binding
Via 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) { }
Also, a node from the mapping or collection can be executed.
<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
By using the bind function (arg1, arg2, arg3)
Data Events
appData.bind( eventName, eventHandler ); coll.bind( eventName, eventHandler ); obj.bind( propName, eventName, eventHandler );
UI Events
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); }
List of Available Events
Application (appData) System events
Event | XML Code | Description |
---|---|---|
Developing |
DataObject
Event | XML Code | Descripction |
---|---|---|
Developing |
DataCollection, DataObject, UI Events
Event | Description |
---|---|
Developing |
DataObject (props) UI Events
Event | Property | Description |
---|---|---|
onclick | type=“B” | Invoking when pressing a button. |
onTextChanged | type=“T” | Invoking while you are pressing characters on the keyboard. Parameters: target, objItem, newText, oldText, keyPressed |
onFocusChanged | type=“T” | Invoking when the field loses or gains focus, at the isFocused parameter. Parameters: target, objItem, isFocused |
Onclick Code Example
At the time to define an event, we will do it as attribute in the XML of the prop or with the bind method, we DO NOT use both at the same time. l
- If the event is declared as attribute in the XML it will be written in lowercase (onclick)
- If the event is declared with the bind method, it will be written in lowerCamelCase (onClick)
As attribute in the XML:
<prop name="MAP_BTN1" type="B" title="Abrir coll" onclick="javascript:jstestClick(e,'collTest1');" width="300p" height="150p" />
In the bind method:
var v=ui.getView(self); //Así obtenemos una referencia a la ventana actual de la aplicación v.bind ("MAP_BTN1","onClick","collTest1",jstestClick);
In some external .js file, we will have the javascript function to which is called from the onclick attribute or from the bind method:
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) Data Events
Event | Property | Description |
---|---|---|
Developing |
DataObject (frame) UI Events
Event | Node | Event Parameters | Description |
---|---|---|---|
onScroll | frame | target: Distance left to make horizontal scroll. dx: Distance left to make horizontal scroll . dy: Distance left to make vertical scroll. width: width of the area that is scrolled. height: height of the area that is scrolled. scrollX: distance moved horizontally. scrollY: distance moved vertically. | It allows you to control the vertical and horizontal movements in the frames that have Pscroll=”true”. |
Example of code of the onScroll event in a 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<=10 && self.MAP_SHOWOVERSCROLL==1) { self.MAP_SHOWOVERSCROLL=0; ui.getView(self).refresh("froverscroll"); } else if (e.dy>10 && self.MAP_SHOWOVERSCROLL==0) { self.MAP_SHOWOVERSCROLL=1; ui.getView(self).refresh("froverscroll"); } }); self.MAP_SHOWOVERSCROLL=1; </script> </action> </before-edit> </group> </coll>