button fun

Classic Servoy
1

Hi

I made a component which has a button.
On this button I binded a function like this:

HTML code:

<input type="button" value="Generate" ng-click="buttonClick()"></input>

JS code:

$scope.buttonClick = function() {$scope.handlers.myFunction("GO");}

Spec code:

"handlers": {"myFunction": "function"}

When i press this button, the function does what I want it to do.
Everything works fine.

Now for my question:
On my form, I placed the component where the button is.
Next to this component I placed a button.
So you have component | button.

Is it possible that I press the button (not in my component) and this button invokes a click on the button in my component?
In Javascript you would do something like this:

<input type="button" id="myNotComponentButton" onclick="myFunction()">
function myFunction() {document.getElementById("myComponentButton").click();}

Thanks,
Walter

2

Hi Walter,

If i am correct what you are trying to achieve is intra-components interaction, when you do something from one component something else would happen in a different component.

The idea of web components is that they are a well separated layer which defines the UI behavior of indipendent UI elements (for example how a simple button does it look). The interactions between elements are instead orchestrated by the forms logic: you click on the component, the handler will execute form’s logic and from there you can interact with the other button.

I am not sure forcing the click of the second button is a proper example, you normally don’t “force” a button to be clicked; if you want to execute the same function bundle to the button you simply call the same function from your’s component event (within the form).

Regards,
Paolo

3

Hi paolo

The reason I wanted to do this is because tried to call the same function on the other button.
This results in a different result.
I get “GO” from the button in my component, which is what I want.
But I get

JSEvent(type = action, source = com.servoy.j2db.server.ngclient.component.RuntimeWebComponent@21d555b, formName = test, elementName = <no name>, timestamp = 2017-03-31 16:00:52.125,modifiers = 0,x =770,y = 594,data = null)

when Invoke the button on my form.

Am I doing something wrong?

Thanks,
Walter

4

Hi Walter,

depending of the type of event and from the type of element you may get different arguments; these arguments are quite normalized, you may not find many differences looking at the Servoy events; every event triggered from a Servoy’s element has a JSEvent as argument. The JSEvent provide you context information about the event triggering the action (elementName triggering the action, formName within the action has been triggered, xy location…).

In your component you have hardcoded the value “GO”, i cannot see why you need the hardcoded value “GO”. However you can add optional parameters to the function of the default button; in the form designer, select the button, bind a method to the onClick event and in the properties view you can expand the parameters of the function and you can set at design time the value “GO” to be included in the params of the button’s onClick

function onAction(event, myCustomParam) {
	// TODO set valye of myCustomParam from the form designer
}

If you want to be normalized with the Servoy’s elements and you want to include a JSEvent as argument of your handler you can simply provide the triggered JQuery event to the handler.

// as shortcut you can call your handler directly from ng-click, which i changed to our optimized svy-click directive

<input type="button" value="Generate" svy-click="handlers.myFunction($event, 'GO')"></input>

// you can specify type of parameters so they are autogenerated when creating a function from the form designer.

"handlers": {"myFunction": {
	"parameters":[
				{
				 "name":"event",
				 "type":"JSEvent"
				},
				{
				 "name":"myParam",
				 "type":"string"
				},
		]
  }
}

Regards,
Paolo