2. DataFlex Web Framework Symposium – Part 4 Web Framework Overview II John Tuohy Development Team www.dataaccess.com

3. 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

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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 work A process transmits an initial property value to the client where it is stored Repeat During client processing The client may use this value The client may change this value During a request the property value is sent back to the server where it is synchronized Upon completion of the request, the server transmits the current value of the property back to the client, where it is stored Loop

10. 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

11. Web Properties Set vs. WebSet Object 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_Procedure End_Object 11

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. Handling Events Only published methods (actions and events) may be accessed – This is done at the object level via two commands: WebPublishProcedure methodName WebPublishFunction 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

24. 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 SaveButton Object oButton is a cWebButton Set psCaption to “Save" Procedure OnClick Send Request_Save End_Procedure End_Object Visual DataFlex 2012 – Web Development24

25. Handling Events // This creates a button with an event that requests a client action // Create a Button to load customer view Object oButton is a cWebButton Set psCaption to “Customer View" Procedure OnClick // this will create a client action Send Show of oCustomer End_Procedure End_Object 25

26. Handling Events // Create a Click Counter using a custom web property and events Object 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_Procedure End_Object Harm WibierVisual DataFlex 2012 – Web Development26

27. 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

28. Handling Events // Create a Hello World Button Object oButton is a cWebButton Set psCaption to “Save" Procedure OnClick Send ShowInfoBox of oWebApp "Hello world!" End_Procedure End_Object 28

29. Modal Objects Modality using a windows-like approach Object 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_Procedure End_Object This will not work, can you see why?

30. Modal Objects With web modal dialogs you are going to need an extra client- server round trip 1.OnClick request is sent to server 2.Server tells client to display the modal dialog and disconnects 3.Upon completion client must send a message back to the server with the results 4.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.

31. Modal Objects Modality using the web approach Object 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_Procedure End_Object This works!

32. 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

33. 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

34. 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

35. Lifetime of an Application Finally, as a review here is the lifetime of an application 1. Create application instance Objects created and initialized Process placed in pool 2. Load Web Page Loads initial web page (index.html) which load our JavaScript engine Makes call to server process to load application Displays application 3. Process Event and Actions Loads views and dialogs Shows views and dialogs Manages client requests (server actions and events)

36. The End