41. EWD’s view of a web Application Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save
42.
43. EWD’s view of a web Application Container Page Fetch data Pre-page Script EWD State & Session Management Cach é/ GT.M Server Front-end technology (WebLink, PHP, CSP etc)
44. EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script Pre-page Script EWD State & Session Management Cach é/ GT.M Server XMLHttpRequest
45. EWD’s view of a web Application Container Page Fetch Page Fragment Page Fragment Fetch data Event Replaces DOM content Pre-page Script EWD State & Session Management Cach é/ GT.M Server
46. EWD’s view of a web Application Container Page EWD State & Session Management Cach é/ GT.M Server
47. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html>
48. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Pretty normal web page apart from <ewd:config> tag
49. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd“> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Method that will fetch data for this page
50. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd“ > <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Use EWD’s virtual MVC
51. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*“ ></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Data values automatically populate the forms at run-time No programming in the page
52. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Method that will validate and save data if this button is clicked
53. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d“ ></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Next page to display if no errors occur during validation. Equivalent to selecting next view
54. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd ">Log out</a> </body> </html> Next page if hyperlink clicked
55. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Note: No coding in the page No language-specific constructs apart from call-outs to pre-page and action scripts
56. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData”> <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>This is a simple EWD form</p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> EWD will compile this page to the technology of your choice (eg PHP, JSP etc) EWD will look after handling the appropriate MVC run-time environment for your selected technology
57.
58.
59. The EWD Session EWD Page EWD Session Database Provides the interface between the designer and the programmer Programmer Using APIs provided By EWD Designer Using special syntax to refer to Session values or EWD custom tags
60. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Programmer creates session variable in pre-page script setSessionValue()
61. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> Designer uses the session variable in the page
62. A simple form in EWD <ewd:config isFirstPage="true" prepageScript=“fetchFormData” > <html> <head> <title>EWD Workshop: Simple Form</title> </head> <body> <p>Today’s date and time is <?= #dateTime ?> </p> <h3>Please enter your username and password:</h3> <form method="post" action="ewd"> <table border=0> <tr> <td>Username: </td> <td><input type="text" name="username" focus="true" value="*"></td> </tr> <tr> <td>Password: </td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" name="Submit" value="Login" action=“logMeIn" nextpage="Page2d"></td> </tr> </table> </form> <br><br> <a href="ewdLogout.ewd">Log out</a> </body> </html> When form is submitted EWD will automatically persist username as a session variable. Value will be whatever was typed by the user <?= #username ?> can be used by designer in any other page
![Web Application Development ,[object Object],[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)