DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects
description
Transcript of DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects
![Page 1: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/1.jpg)
![Page 2: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/2.jpg)
DataFlex Web Framework Symposium – Part 7.5
Web Framework Modal Objects
John TuohyDevelopment Team
www.dataaccess.com
![Page 3: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/3.jpg)
Modal Objects
• The web framework supports Modal objects• Supports:
– Message Boxes– Modal Dialogs
• We provide the classes and interface to make this all work
• There are special web considerations
![Page 4: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/4.jpg)
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
![Page 5: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/5.jpg)
Modal Objects
// Create a Hello World ButtonObject oButton is a cWebButton Set psCaption to “Save" Procedure OnClick Send ShowInfoBox of oWebApp "Hello world!"
End_ProcedureEnd_Object
5
![Page 6: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/6.jpg)
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?
![Page 7: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/7.jpg)
• 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
![Page 8: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/8.jpg)
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.
![Page 9: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/9.jpg)
Modal ObjectsModality using the web approach – this worksObject 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
![Page 10: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/10.jpg)
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
![Page 11: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/11.jpg)
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
![Page 12: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/12.jpg)
Modal DialogsThe Invoking Object
Object oAskQuestion is a cWebButton
Set psCaption to "Ask Name"
Procedure OnCloseModalDialog Handle hoModalDialog
String sAnswer Get GetAnswers of hoModalDialog to
sAnswer Send ShowInfoBox ("Your name =" +
sAnswer) End_Procedure
Procedure OnClick Send InitializeDialog of
oDemoQuestionDialog "What is your name?" Send Popup of oDemoQuestionDialog Self End_Procedure
The Modal Dialog
Object oDemoQuestionDialog is a cWebModalDialog
// user inteface goes here Function GetAnswers Returns String String sReponse WebGet psValue of oResponseFrm to
sResponse Function_Return sReponse End_Function
Procedure InitializeDialog String sQuestion WebSet psCaption of oQuestionLbl to
sQuestion WebSet psValue of oResponseFrm to "" End_ProcedureEnd_Object
![Page 13: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/13.jpg)
Modal Objects
• To summarize– The web framework support modal popup objects by
using callbacks– Supports:
• Message Boxes• Modal Dialogs
– An extra request/response cycle is required– A callback mechanism is required to make this work– Special interfaces are provided to make the callback
mechanism easy to use and secure
![Page 14: DataFlex Web Framework Symposium – Part 7.5 Web Framework Modal Objects](https://reader038.fdocuments.in/reader038/viewer/2022110212/56813ee0550346895da95614/html5/thumbnails/14.jpg)
The End