DataFlex Web Framework Symposium – Part 4

Web Framework Overview II

John TuohyDevelopment Team

www.dataaccess.com

Understanding the Web Framework

• In this part of the presentation we are going to look at and attempt to understand the Web Framework from the server’s perspective

…That’s the DataFlex perspective

Web Application Server

• The DataFlex Web Application Server manages web applications– The server manages multiple independent web

applications– Each application resides in a workspace consisting of

• A web-share (AppHtml directory that is accessible via a URL• An executable (WebApp.exe) a.k.a the process

– Each application manages a pool of processes

Process Pooling

– Process creation• Upon startup of a web application a pool of identical

processes is created• Each is an instance of WebApp.exe• All objects are created and all data is initialized• During initialization, you are not connected to a client

Process Pooling

• Using a Process– When a browser client makes a request it

• Attaches an available process to the client request• The process services the request, a response is

created and sent to the client• The process is detached and placed back in the pool

Process Pooling

• This means that:– A process is only attached to a client request

for a short time– A single client will use different processes as

they make requests– A single process will be used by multiple clients

Data within a Process• Consider the implications for property data

– A process can maintain static data• Data that is the same for all processes

– A process can maintain temporary data• Data that is initialized and used during a request

– Any data the is unique to the client must be stored elsewhere• the client is a good choice

– Each time a process is used it must first be synchronized to the client

– We use Web Properties to do this

Web Properties

– Web Property• A web property is a regular property that has the ability to

store its current value on the client

– How Web Properties workA process transmits an initial property value to the client where it is storedRepeat

During client processing The client may use this value

The client may change this valueDuring a request the property value is sent back to the server where it is synchronizedUpon completion of the request, the server transmits the current value of the property back to the client, where it is stored

Loop

Web Properties

• How Web Properties are used– A Web property is a regular property with a

special meta-tag{ WebProperty=True }Property Boolean pbMyValue True

– A web property has an initial value and a current value• Get and Set accesses the initial value• WebGet and WebSet accesses the current value

Web Properties

• Set vs. WebSetObject oForm is a cWebForm Set psLabel to "My form"End_Object

Object oButton is a cWebButton Set psCaption to "Click to change label" Procedure OnClick WebSet psLabel of oForm to "My new label" End_ProcedureEnd_Object

11

Web Properties

• When to use Get/Set or WebGet/WebSet– During Initialization

• Get and Set are normally used when the process is being initialized and not connected to a client

– During a request• WebGet and WebSet are used when processing a request

while connected to a client• Get can also be used during a request to obtain the initial

value. You will rarely use Set during a request• Using Get and Set when you should use WebGet and

WebSet will be a common programming error

Web Properties

• The framework automatically optimizes what is actually stored on the client– Only changed web-property data is transmitted back and forth– Only global web properties and web properties within the focus scope

are transmitted• High level explanation:

– Only properties you need are transmitted• Low level explanation:

– With views, the focus scope is the view that contains the focus– With modal dialogs, the hierarchy of focus dialog back to the view is the focus

scope» e.g. prompt list (view<- prompt list<- search dialog)

• Attempting to use a web property that is out of scope will generate a runtime error

Web Properties

– Other special synchronized data• DDOs and their RowIds

– The RowIds of each DDO within the scope-focus are synchronized

– DEO web properties psValue, pbChanged are synchronized

– These are used to rebuild DDO structures during server synchronization

• Session ID– This is used to uniquely identify a client

Web Properties

• Web properties and the client– A client may store the value of a web property or it may use

the the value of a web property– You probably will not need to worry about this distinction

• You are most likely to use the web properties defined in our classes• If you create a custom web property, it will be for storage

– If you do create your own JavaScript classes• You may create web properties that will be used by both the client

and the server objects• This is a powerful capability• This is advanced usage

Web Properties

• Don’t over use web properties– Not all data needs to be web properties– If data is not needed by the client and

• The data is static (never changed by the server or client), there is no need to make it a web property

• Or, the data is temporary and is initialized and modified inside of a request, there is no need to make it a web property

– Security: If data should not be viewed or changed by a client, it should not be stored in a web property• Assume that all data on a client can be viewed and changed• Example: Login access rights (piUserRights) • Storing data in session records is an alternative

Handling Events

• The entire system is event driven• Standard client browser events are triggered by

actions from the user• The JavaScript engine sends the events to the

server– This is uses the 1 to 1 object mapping between the

client object model server object.• example: Pressing a button, fires an event on client which

sends OnClick to the same object on the server

Handling Events

• The client/server event cycle– The client

• Generates an event. If a server event it sends a request to the server

– The server• Attaches process and synchronizes• Sends the event to the corresponding DataFlex object

– Which, might change web property values and queue client actions• Generates a response and detaches from the process

– The client• Handles the response by synchronizing web properties and

executing required client actions

• User interface event

• Send AJAX Call

JavaScript Engine

• Synchronize state• Event procedure• Generate

response

WebApp • Update web properties

• Display errors• Perform client

actions

JavaScript Engine

Handling Events

Handling Events - Before

• Before the event is processed– Take process from pool and attach to it– OnAttachProcess is sent to cWebApp Object– Validate Session– Synchronize all web properties– OnSyncWebApp is sent to cWebApp Object– For each view that needs to be synchronized– Get AllowAccess– Synchronize the main DDO structure (FindByRowId)– Send OnSyncView– Send Rebuild_Constraints to the DDOs

After the Event is Handled

• When the event or events are complete– Build a response

• This response contains– Web property values– A queue of client actions

– OnDetachProcess is sent to cWebAppObject– The process is detached and placed back in the pool

Handling Events

• A single server request may contain one or more server actions

• On the server we refer to actions and events– Action: Actions do complete things

• Pressing find key, sends request_find to the focus object– Event: Events are augmented to do things

• Clicking a button sends OnClick to the button

• During server processes multiple client-actions may be sent to the client– Actually they are all added to a queue and sent as part of the

single response

Handling Events

• Only published methods (actions and events) may be accessed– This is done at the object level via two commands:

WebPublishProcedure methodNameWebPublishFunction methodName

– All of our requests and event handlers are published - this is essentially the web framework’s API

– You may publish your own methods– Mostly you will just augment these existing methods

Handling Events

// This creates a save button with an event that performs a server action// The server action will probably change web properties

// Create a SaveButtonObject oButton is a cWebButton Set psCaption to “Save" Procedure OnClick Send Request_Save End_ProcedureEnd_Object

Visual DataFlex 2012 – Web Development 24

Handling Events

// This creates a button with an event that requests a client action

// Create a Button to load customer viewObject oButton is a cWebButton Set psCaption to “Customer View" Procedure OnClick // this will create a client action Send Show of oCustomer End_ProcedureEnd_Object

25

Handling Events

// Create a Click Counter using a custom web property and eventsObject oButton is a cWebButton { WebProperty=True } Property Integer piClicks 0 Set psCaption to "Click Count" Procedure OnClick Integer iClicks WebGet piClicks to iClicks WebSet piClicks to (iClicks+1) End_ProcedureEnd_Object

Harm Wibier Visual DataFlex 2012 – Web Development 26

Handling Events

• Events can be handled on the server or the client– Server side events are controlled by a Boolean property

• Property: pbServerEventName– Example: pbServerOnShow, pbServerOnBlur

• For the most part we've picked the best setting for you– OnClick is sent, OnBlur is not sent

– Client side events are controlled by a string property• Property: psClientEventName

– Example: psClientOnShow, psClientOnBlur

• Advanced - requires JavaScript• Saves a trip to the server

Handling Events

// Create a Hello World ButtonObject oButton is a cWebButton Set psCaption to “Save" Procedure OnClick Send ShowInfoBox of oWebApp "Hello world!"

End_ProcedureEnd_Object

28

Modal Objects

Modality using a windows-like approachObject oButton is a cWebButton Procedure OnClick Integer eConfirmMode // invoke modal dialog which asks question Get ShowYesNo of oWebApp "Are you sure?" "Confirmation" to eConfirmMode // handle the response If (eConfirmMode =MBR_Yes) Begin Send DoAction End End_ProcedureEnd_Object

This will not work, can you see why?

Modal Objects

• With web modal dialogs you are going to need an extra client-server round trip

1. OnClick request is sent to server2. Server tells client to display the modal dialog and disconnects3. Upon completion client must send a message back to the server with

the results4. The Server processes the results and disconnects

Q: How does the client know what message and object to callback in step 3?

A: A callback object and message must be passed in step 2.

Modal ObjectsModality using the web approachObject oButton is a cWebButton Procedure ConfirmResponse Integer eConfirmMode If (eConfirmMode = cmYes) Begin Send DoAction End End_Procedure // Publish the response method WebPublishProcedure ConfirmResponse Procedure OnClick Integer eAnswer Send ShowYesNo of oWebApp (Self) (RefProc(ConfirmResponse) "Are you sure?"

"Confirmation" End_ProcedureEnd_Object

This works!

Modal Objects

• The Web Framework support modal popup objects by using callbacks

• Supports:– Message Boxes– Modal Dialogs

• Special interfaces are provided to make the callback mechanism easy to use and secure

Modal Objects

• Message Boxes– ShowInfoBox

• Used to show an information box• Single Ok button, no callback

– ShowYes • Used to show a Yes/No dialog• You pass the callback object and callback message

– ShowMessageBox• Used or custom multi-button message boxes• You pass the callback object and callback message

Modal Objects• Modal Dialogs

– Based on cWebModalDialog class– Is invoked by sending Popup passing the callback object– Upon completion the client sends a server requests which sends

OnCloseModalDialog to the callback object

Procedure OnCloseModalDialog Handle hoModalDialog String sAnswer Get GetAnswerName of hoModalDialog to sAnswer Send ShowInfoBox ("Your name is '" + sAnswer + "'!!!") End_Procedure

Procedure OnClick Send InitializeDialog of oDemoQuestionDialog "Question" "What is your name?" Send Popup of oDemoQuestionDialog Self End_Procedure

Lifetime of an Application

Finally, as a review here is the lifetime of an application1. Create application instance

Objects created and initializedProcess placed in pool

2. Load Web PageLoads initial web page (index.html) which load our JavaScript engineMakes call to server process to load applicationDisplays application

3. Process Event and ActionsLoads views and dialogsShows views and dialogsManages client requests (server actions and events)

The End