button fun

Forum to discuss the new web client version of Servoy.

button fun

Postby vantesterwalter » Fri Mar 31, 2017 2:28 pm

Hi

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

HTML code:
Code: Select all
<input type="button" value="Generate" ng-click="buttonClick()"></input>


JS code:
Code: Select all
$scope.buttonClick = function() {$scope.handlers.myFunction("GO");}   


Spec code:
Code: Select all
"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:
Code: Select all
<input type="button" id="myNotComponentButton" onclick="myFunction()">
function myFunction() {document.getElementById("myComponentButton").click();}


Thanks,
Walter
vantesterwalter
 
Posts: 16
Joined: Wed Mar 29, 2017 9:46 am

Re: button fun

Postby paronne » Fri Mar 31, 2017 3:49 pm

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
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm

Re: button fun

Postby vantesterwalter » Fri Mar 31, 2017 4:03 pm

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
Code: Select all
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
vantesterwalter
 
Posts: 16
Joined: Wed Mar 29, 2017 9:46 am

Re: button fun

Postby paronne » Fri Mar 31, 2017 4:31 pm

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

Code: Select all
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
Code: Select all
<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.
Code: Select all
"handlers": {"myFunction": {
   "parameters":[
            {
             "name":"event",
             "type":"JSEvent"
            },
            {
             "name":"myParam",
             "type":"string"
            },
      ]
  }
}


Regards,
Paolo
paronne
 
Posts: 202
Joined: Fri Nov 02, 2012 3:21 pm


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 11 guests

cron