Binding dialog

The last area of Studio we need to cover is the binding dialog. This is the graphical tooling for subscripting to topic notifications. The primary topic of interest here being the "has changed" event. Consider the binding in the following screenshot:

Here we have bound the caption of a label named label4 to the name of the department selected in the department grid. This binding causes the label to be notified when the selected department changes. The grid publishes a "has changed" notification when the selected item changes. Upon receiving that notification, the label can then get the new value and update its caption accordingly.

There are four view modes to the binding dialog: Simple, Advanced, Resources, and Expression. A search editor is available to quickly find source components. Type information is also used to provide a green, yellow, or red indicator icon in the top-right corner. Matched types are indicated by the green checkbox, whereas the yellow warning and red X icons indicate decreased confidence and outright distrust of the selection accordingly.

The title of the dialog is the name of the target component. In the footer of the dialog, the source component is indicated by the Bound to: label and the target type is provided as an aid. The source is the component providing the notification and value, as that is the source of the information. The target is the component receiving the information or the target of the binding.

In Simple view mode, a single tree of likely sources is presented. In Advanced mode, all components are listed in either the visual or non-visual tree. The Advanced mode trees quickly become large. Searching is extremely helpful in finding the correct component quickly, especially if you know the component's name or you have utilized a naming convention that allows you to quickly filter the tree down by type or class. Another way to quickly get to the component you seek is by selecting it in the model tree or on the canvas. That's right, with the binding dialog open you can drive the search editor by selecting in the canvas or model tree. Advanced mode also enables you to bind to components on other pages with the page selector in the top-left corner.

The resources view enables us to bind to file resources uploaded to the project's resources folder. The classic use case here is setting the image source of a picture widget to an image file.

Last but certainly not least is the Expression view. Binding expressions as they are called, are JavaScript expressions that are executed in a context where this refers to the window instead of the page. This means we can use logical operators and conditionals in our bindings without needing to code full functions. The lower part of the Expression view allows us to add component references to our expression via selection. Selecting the selected department name of our department grid from the tree adds ${departmentDojoGrid.selectedItem.name} to the expression, for example. The department name string could be concatenated with other component properties or static values as desired. For example, we can change the binding of the label4 label's caption to:

“Viewing “ + ${departmentDojoGrid.selectedItem.name}

This adds the static string Viewing with a space in front of the selected department name.

Binding expressions are an advanced feature and are nicely documented in the product documentation at http://dev.wavemaker.com/wiki/bin/wmdoc_6.5/Binding+Expressions+Display+Expressions.