You may not be authorized to see this content. Please contact Data Access Europe for more information.

Cancel Data Access Europe

You are not authorized to see this content.

Cancel Data Access Europe

Custom Controls

Introduction (0m 30s)

What is a Custom Control (2m 49s)

Setting up the workspace (6m 39s)

Web Properties (6m 39s)

Rendering the Control (13m 07s)

DOM manipulation (9m 10s)

Sending and Receiving Data (6m 05s)

Client Actions (4m 55s)

Server Actions (9m 16s)

Events (6m 50s)

JavaScript Libraries (3m 29s)

Next lesson:

Rendering the Control

Cancel

Custom Controls

Lesson 3: Web Properties

Basic information regarding Web Properties:

They can be used to store things like status information, data and settings for custom controls
A web property is different from a normal property because its value is shared and maintained between the client and the server.
The engine will generate default Get and Set functions if no custom functions are defined.
The functions are called upon whenever a WebGet or WebSet is executed.
A custom getter or setter can be implemented by using…
- set_psPropertyName
- get_psPropertyName

Several property types exist:

Client: value is stored at the client, and sent to the server with each call
Server: value is retrieved on the server when needed, but page scoped. When the page is reloaded the value of the web property is lost.
ServerSession: same as server, but is session scoped. The value is not lost with the page is reloaded.

Some examples:

An example of a property being annotated to make it a web property:
To create enumerations in a property, create a, Enum_List, and then reuse the EnumList, with the same previously defined values, in the web property.
To create a web property in JavaScript, call on this.prop from within the constructor function.
Web property types in DataFlex:
- Boolean: df.tBool
- String: df.tString
- Integer: df.tInt
- Number: df.tNumber
- Struct: df.tAdv

An example of creating a custom setter in JavaScript…

Demonstration:

Open the DataFlex Studio and make sure cWebMsgBuilder.pkg is open.
Create a property integer that will define the maximum length of the message. Set the default to 0 (no limit).
Make it a web property by applying the proper annotation.
{WebProperty = Client}
Property Integer piMaxLength 0
Open WebMsgBuilder.js from within the text editor
Create the same property integer for the JavaScript side of the process.
this.prop(df.tInt, “piMaxLength”, 0);
Add a custom getter that will return a message…
get_psValue : function () {
var sMsg = this.aMsgParts.join(“ “);
return sMsg;
}
Add the message as a private client-side property that is only visible by the client
//Private property
this._aMsgParts=[];