Main

Events in a Panel

In this video, we will examine the events of a Panel object, including those executed on the client and those executed on the server. Knowing this is essential for programming the behavior of our application.

GeneXus Training

3 days ago

as we know events are messages that the software or the system give at certain moments when the application is running and this allows us to schedule actions to be executed at those moments for example if the user clicks on a button or types something in a text control and exits or if the server is required to send updated information we can schedule a response after the event is triggered suppose that when we view the attraction data we want to have filters so that the displayed data meets The
Chosen constraints to implement this we open the view attractions panel and save it with the name view attractions by country now we go to the variable section and add a variable named country ID which is automatically based on the country ID attribute we drag it to the form after the title text block and before the grid and in its properties we change the country ID label to Country change the controled type property to Dynamic combo and set item descriptions to country name we also set the emp
ty item property to true so that the combo will appear at the start without any default value for the filter to have an effect on the attractions shown in the grid we edit its properties and in the conditions property we write country ID equals Ampersand country ID when not Ampersand country ID do is empty open parentheses close parenthesis and close with a semicolon once we choose a country the panel must be refreshed so that the grid loads only those attractions from that country to do so we u
se the control value changed event of the dynamic combo so we go to the events Tab and in the menu we choose insert event click on the country ID variable and select the event we mentioned we see that the event code opens so we can write what we want to be executed when this event is fired we type refresh this command will cause the grid to get the data again filtered This Time by the chosen country we're going to set the main program property of the panel to true to right click and then run we
see that since we had set the empty item property to true the combo appears without a country selected and all the attractions are shown if we choose France the grid reloads and now shows only the tourist attractions in France let's take a closer look at events in a panel object we have two types of events client side events and server side events server side events are the same as when working with web panels the start refresh and load events these events will always be triggered on the server
in the case of online native mobile applications when implementing offline native mobile applications they'll be triggered internally on the device client side events are client start back user defined events and events associated with the screen controls as well as the events predefined by the work with pattern we'll also have the events associated with the data navigation Styles which depend for example on the type of device and its orientation when the application is started let's take a clos
er look at server side events the first one executed is the start event it's executed only once when the panel is opened as long as it's necessary to go to the server and will not be executed again unless we exit the object and reopen it the refresh event is executed after the start event usually only once but it can be invoked again with the refresh command in that case it'll be executed more than once and it will be the first event since the start event will not be executed again the refresh e
vent will also be triggered if we refresh the browser when the refresh event is invoked the load event will be triggered at the end this will only happen if there's at least one Grid in the panel and the grid is not a collection sdt variable the load event is the last one of the system events to be executed and if it has a base table it'll be executed as many times as records exist in the base table if the grid doesn't have a base table it'll be executed only once if the grid is based on an sdt
the load event will not be executed remember that when we work on a mobile device application the code of the start refresh and load events does not have access to device resources such as the camera GPS and so on now let's see client side events these events are the application's response to user interaction there are several types of client events system events such as client start and back user events onscreen control events and others that we'll see next the code associated with these events
is run on the client unless access to a server resource is requested for example if you want to access the database in this case the client will have to invoke a server service during the execution of a client Side Event serers side events are not executed unless explicitly requested through the refresh command this causes the server's refresh event to be triggered followed by the load event if there's at least one grid as we saw before in Native applications for mobile devices client side even
ts have access to all hardware and software resources of the device such as the camera GPS microphone calendar contacts and so on these client side events will have a specific grammar that's different from that of server side events let's take a brief look at each client Side Event the client start event is the first event to be triggered even before the start event that's triggered on the server and with no need for any user interaction with the application it's used to initialize the home scre
en and UI related aspects the Back event is used only on mobile platforms and allows you to capture that the user has pressed the back button on Android devices or that the back gesture was made on iOS devices and program an appropriate action user events have a name given by the user and allow the developer to associate a certain code that's run when a certain onscreen control is activated by clicking or tapping on it onscreen controls have their own events depending on the control such as clic
k or tap double click or double tap drag swipe control value changed and so on these events are triggered when some of the above actions take place and the developer can program a response of the application to the user's input the work with pattern has predefined events that are triggered depending on the action performed on the data of the entity to which the pattern is applied these include the insert update delete save and cancel events among others the events available will depend on the pa
rt of the work with object being executed list detail and so on in mobile devices depending on the type of device and orientation when we start the application a start event will be triggered depending on the navigation for example if we're using using a tablet by default the application starts in Split mode meaning that the screen is divided into two sections with a list on the left and the details of the selected item on the right in this case when the application starts the split. start event
is triggered in the case of phones for example the screen will show only the list and a separate screen will be open to view the details this mode is called flip and is the default behavior in these devices therefore when starting the application the flip. start event will be triggered although there's a default navigation for each device the main objects of mobile applications have a property that allows changing the way the application starts these start events associated with the type of nav
igation are triggered at the start of the mobile application and immediately after the client start event in the object we saw before we program only an event associated with a control we don't program any user events we program the control value changed event to the on-screen filter variable in order to trigger the Grid's refresh method which in turn will trigger the server's refresh and load events to update the contents of the grid with the entered filter in short let's see what can be done i
n a client Side Event we can invoke another pan panel object we can invoke rest Services when we invoke procedures or data providers they'll be automatically exposed as rest services on the server if those procedures or data providers were invoked only from a serers side event within start refresh or load events they would not be exposed as rest Services because it would not be necessary we can use business components to retrieve or update information in this this case these business components
will also be exposed as rest Services automatically it's also possible to directly invoke any Noe of the work with pattern in mobile applications we can invoke a menu object we can invoke the external objects defined in the genexus module some of these apis only make sense for a particular platform such as mobile devices meanwhile some of them can only be used on web applications and others can be used on both platforms from a client Side Event we can call sub routines in addition we can assign
properties to controls assign simple or sdt variables run for each line and for each selected line on grids use the blocks if else do case and do while if we try to use commands not allowed in a client Side Event we'll see an error in the output screen for those lines that don't comply with the grammar constraints for example if we try to use a for each command a new or any attempt to access or modify information that's only accessed from the server here's a summary of the commands we can use in
the client Side Event code these restrictions are only for client side events not for server side events start refresh and load where we can use all the commands and functions available in genexus the commands accepted at the moment are shown here now let's look at the composite command mentioned before this command is used in client side events on panel objects it's important because if an ER occurs in the call sequence it stops running and the errors are automatically handled and displayed on
the screen with no need to implement any programming this is a great difference with web panels because when a called object in an event causes an error the execution is not interrupted it continues in the following statement and the developer is responsible for handling the errors and programming the actions to take this composite command is optional if not used the operation will be identical to that of web panels now let's see what happens with events when we run a panel object the client st
art event is executed first and it's executed only once on the client in mobile applications the start event corresponding to the type of navigation set in the main object is then triggered using the navigation style property next a data provider is executed that will return the data needed to load the fixed part of the panel this data provider is involved in the execution of the code of the start and refresh events to be executed on the server and returns in a single result the information to l
oad the fixed part the fixed part of the panel is drawn later next a second data provider is run that will retrieve the data required by the grid within the execution of this data provider the load event code is run on the server this load event will be run end times when the grid has a base table once for each record only once if the grid doesn't have a base table and never if the grid was from a collection sdt variable at the end of the execution of the data provider it'll return the informati
on generated by all these executions of the load event in a single result which will be used to load the grid afterwards the grid will be completely drawn we've mentioned that the fixed part of the panel is loaded independently from the loading of the grid different data providers are invoked that are published on the server as services and access the database to retrieve the information of each part when we change the value of a filter the Grid's information needs to be refreshed for this we ne
ed to add the refresh method which will trigger the server's refresh and load events in turn it'll cause the grid to be reloaded applying the programmed conditions and displaying the filtered results as expected since the refresh command must be invoked after we change the value of the filter variable we use the control value changed event of the variable to invoke the method in this way after changing the filter value when leaving the field the corresponding event will be triggered which is exp
ected to refresh the content of the grid but what happens when the refresh command is invoked within a client Side Event in this architecture since the objective is to have the page loaded as few times as possible the data cache is prioritized that is to say we always try to retrieve the information previous ly saved that is depending on the caching configuration it's decided whether or not to go to retrieve data from the server when it's decided to go to the server if there are no changes in th
e server data nothing is returned to the client otherwise the refresh and load events are executed if there's a grid not based on an sdt as in our case and the fixed and variable parts of the panel are updated as expected in the following videos we'll discuss other aspects of the design and implementation of panel objects

Comments