Wiki code for Variables and Binding

Hide Line numbers
1: 1 Variables and Binding
2: 
3: <div style="background-color:#e5f0fe;
4: padding-top:2px;
5: margin:20px 0px 0px 20px;
6: padding:1px 20px 1px 0px; 
7: width:30%;">
8: #toc("2" "6" "false")
9: </div>
10: 
11: As you build your page, you are going to want to tie specific components, such as widgets, to data objects in your application. For example, you might want to tie a DataGrid widget to a table in a database or you might want to set up an Editor widget to display a result string from a Web service.
12: 
13: To set up a data source for a component, you first need to create a Variable (see [Variables, LiveVariables and Service Variables>#HVariablesLiveVariablesandServiceVariables] below) and then bind your component to that Variable ([Bindings>#HBindings]).
14: 
15: 1.1 Variables LiveVariables and Service Variables
16: 
17: Your WaveMaker project can include the following types of variables:
18: 
19: * Variables: A generic variable that can store data on the page or at the project level.
20: * LiveVariables are special variables that store an instance of a LiveTable or a LiveView. Controls like LiveForm require a LiveVariable as input. See [Creating LiveVariables>#HCreatingLiveVariables] for more information.
21: * Service Variables: This type of variable contains configuration for calling a service and storing the results of that call. See [Creating a Service Variable>CallingServices#HCreatingaServiceVariable] for more information.
22: * Logout Variables: Specialized variable used to logout of the application.  Must be used in concert with Security (See [Authentication>wmdoc.Authentication]).
23: 
24: 1.1 Creating LiveVariables
25: 
26: LiveVariables are special variables that stores the results of a query to a LiveTable or a LiveView. Controls like LiveForm require a LiveVariable as input.  Use a LiveVariable to access a LiveTable or a LiveView.  LiveVariables, LiveTables and LiveViews are all part of WaveMaker Studio’s LiveData feature.
27: 
28: LiveData is a term for WaveMaker Studio’s special set of controls and data objects that let you quickly and easily create database-driven application elements. For example, you get auto-generated Insert/Delete/Update functionality with LiveData.
29: 
30: There are two ways to create a LiveVariable:
31: 1. Select the *Insert* menu then choose *LiveVariable*.
32: 1. From the *Palette*, expand the *Non-Visual Components* then drag *LiveVariable* onto your page.
33: 
34: The properties for the new LiveVariable are displayed in the Property Editor. The LiveVariable’s properties are listed in the table below.
35: {table}
36: Property| Description
37: *name*|The name that WaveMaker Studio uses to reference the widget. This is the name that appears in Model Tree, in the Page Builder, in Binding dialogs, and so on; this is also the name you use to reference the widget in code services.
38: *owner*|Variables are owned by the Application and shared among many pages or owned by a Page and only accessible from the owning page.
39: *autoUpdate*|The component runs automatically. Enables LiveLayout to populate the data directly in the WaveMaker Studio.
40: *startUpdate*|The component is initialized when the page is initially loaded.
41: *operation*|A menu containing the database operations that are available for the LiveVariable (read, insert, update and delete).
42: *liveSource*|This menu contains all objects that you can use for the LiveVariable source (LiveTables and LiveViews).
43: *sourceData*|The meaning of this property changes based on the LiveVariable’s operation: \\For "readData," sourceData specifies a root object for which we are gathering more data. This is useful for getting additional related objects for a given object. For example, if a liveVariable is setup to retrieve Customers with Addresses, then by default it returns a list of all Customers, each with the Address related object. However, if sourceData has been set to an existing Customer object, say retrieved by another liveVariable, then the liveVariable will return that Customer with that Address related object. \\ For the other operations, sourceData specifies the data that will be saved on the server (inserted, updated, or deleted).
44: *filter*|You can filter your live source by setting the *filter* property. You can set up filters on individual fields by selecting the filter object in the Properties Tree.
45: *matchMode*|Determines how to match string values. matchMode can be one of the following values: "anywhere", "start", "end", "exact". Default: start. 
46: *firstRow*|firstRow is useful for setting up paging and works in conjunction with maxResults. firstRow is ignored if maxResults is not set. If a result set has 100 rows and you set maxResults to 10 and firstRow to 11, then you’ll get rows 11-20. 
47: *maxResults*|The number of records that will be returned at runtime.
48: *designMaxResults*|The number of records that will be returned when viewing data at design time.
49: *orderBy*|Specify a property to use for ordering the data. You can order in ascending or descending order:\\*asc: propertyName*\\or\\*desc: propertyName*\\For example:\\*asc: actorId\\desc: item.company*
50: *ignoreCase*|Choose whether to make the results case sensitive or not.
51: *updateNow*|Use to update the LiveVariable (with new input data) while in design mode. \\ 
52: *queue*|Defines a list of Variables to execute, in order, after this LiveVariable executes.
53: *clearInput*| Clears all current input values.
54: {table}
55: 
56: *See Also*: [LiveVariable>PropertyDocumentation.LiveVariable].
57: 
58: 1.1 Bindings
59: 
60: In WaveMaker Studio, the connection between a component (or component property) and a source of data, is called the binding. In order to set up a binding, you need to:
61: 
62: 1. Import the data model ([Importing a Data Model>wmdoc.Database#HImportingDataModelsIntoWaveMaker]), web service ([Web Services>wmdoc.WebServices]), or Java service ([Java Services>wmdoc.Java]) that you want to access.
63: 1. Create a Variable or a LiveVariable that will access the service and store the results of the service call. The difference between a Variable and a LiveVariable is that a LiveVariable must be based on a LiveTable or a LiveView. You should use a LiveVariable rather than a Variable where possible, because LiveVariables give you access to LiveData features ([wmdoc.LiveData]).
64: 1. Bind the widget to the variable you created. You typically bind [LiveForm>PropertyDocumentation.LiveForm] and [DataGrid>PropertyDocumentation.DataGrid] widgets and these two widgets have a dataSet property for easy binding. The dataSet property gives you a drop-down menu of valid data sources. The more generic way to bind any component to any data source is with the binding dialog ([More on Binding>#HMoreonBinding]). 
65: 
66: 1.1 More on Binding
67: 
68: To bind components to data, you use the binding dialog. In the Property Editor, anything that you can bind to is marked with the circular "bind" icon.
69: 
70: {image:BindIcon.png} 
71: 
72: When you click the Bind icon, the Binding dialog appears. Across the top of the data binding dialog, there are three radio buttons that allow you to specify how you want to set up the data source for the operation input.
73: 
74: {image:BindDialog.png} 
75: 
76: The choices are:
77: 
78: * *Simple*: This provides you a list of objects that you would most commonly bind to, such as the currently selected item in a DataGrid, the properties of an Editor widget and so on. 
79: * *Advanced*: This is a list of everything that you can bind to, including all Variables, Widgets and so on. Note that you can bind to components that are defined on the current page or that are defined at the project level. Components defined on other pages do not appear in this list. 
80: * *Resources*: This is a list of resources included in the project.
81: * *Expression*: This can be any JavaScript expression. You can refer to widgets in the page using their name properties. See [Customizing with JavaScript>wmdoc.CustomizeAppsWithJS] for details on how to do this.  Also see [Binding Expressions>Dev.BindingExpressions]. 
82: 
83: <blockquote>
84: *Note*: By default expressions are considered strings. To have an expression evaluated as a number, begin it with %% (two percent signs).  For example %%1 will be evaluated as the number 1.
85: </blockquote>
86: 
87: When you have selected the appropriate data source, click the *Bind* button. This sets up the data source for the selected object. A link icon now replaces the circular bind icon, showing that the object is bound to a data source.
88: 
89: {image:BindingIcons.png}
90: 
91: To delete the binding, click the "delete" (X) icon. You can view the binding in the Bind dialog by clicking the link icon.
92: 
93: 1.1 Bind to displayValue or dataValue
94: 
95: In the Binding dialogs, you can choose bind to an editor’s *displayValue* or its *dataValue*. In many cases displayValue and dataValue are the same. They are different for widgets that display a value differently from the way it is stored in the underlying data.
96: 
97: The most common case in which the two values are different is for dates and times: displayValue is the readable string (1/02/08) whereas the dataValue is the date in milliseconds that is expected by a service.
98: 
99: It is usually best practice to bind to the dataValue. However, when you are binding to another UI element, such as a label, you sometimes need to bind to the *displayValue*. Setting either the *displayValue* or *dataValue* updates the other property.
100: 
101: 1.1 See Also
102: 
103: * [Client Data Manipulation>Dev.Data+Manipulation]
104: * [Client Variables>Dev.Variables]
105: * [Service Variables>Dev.ServiceVariables]
106: * [Setting Data Properties>wmdoc.SettingDataProperties]
Variables and Binding

Top Menu

Wiki code for Variables and Binding

Search

Main Menu
