SlideShare ist ein Scribd-Unternehmen logo
1 von 68
Beyond the MVC:  EWD and Design-oriented Web Development  Rob Tweed M/Gateway Developments Ltd
Web Application Development ,[object Object],[object Object]
Web Application Development ,[object Object]
Web Application Development ,[object Object],[object Object],[object Object],[object Object],[object Object]
Web Applications ,[object Object],[object Object],[object Object]
Web Applications ,[object Object],[object Object],[object Object]
Web Applications ,[object Object],[object Object],[object Object],[object Object],[object Object]
Web Applications ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Web Application Development ,[object Object],[object Object],[object Object],[object Object]
Why web development toolsets? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Why web development toolsets? ,[object Object],[object Object],[object Object],[object Object]
Why web development toolsets? ,[object Object],[object Object]
Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button  or link
Web Application: MVC View Web Page 1 Step 2: URL sent to controller Controller
Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to corresponding business logic Controller Business logic URL map
Web Application: MVC View Web Page 1 Step 4: Business logic selects next view Controller Business logic URL map View Database (model)
Web Application: MVC View Web Page 1 Step 5: View is generated Controller Business logic URL map View Web Page 2 Database (model)
Web Application: MVC View ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What’s the problem? ,[object Object]
What’s the problem? ,[object Object]
What’s the problem? ,[object Object],[object Object],[object Object],[object Object],[object Object]
The “Eh?” Team ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What’s the problem ,[object Object]
The “Eh?” Team again ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
The industry solution? ,[object Object],[object Object],[object Object],[object Object],[object Object]
The industry solution? ,[object Object]
What’s the problem again? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Design-oriented development
“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
Web Application Web Page 1 From a designer’s point of view: Database Step 1: Run a method that fetches the data needed for the page fetchData()
Web Application Web Page 1 From a designer’s point of view: Step 2: Display the page
Web Application Web Page 1 From a designer’s point of view: Step 3: User decides what to do: eg clicks button  or link
Web Application Web Page 1 From a designer’s point of view: Database Step 4: Method called that validates and saves data into database saveData()
Web Application Web Page 1 From a designer’s point of view: Step 5: Move to next page Next Page Web Page 2
Web Application From a designer’s point of view: Repeat the process…. Web Page 2 Database fetchData2()
Design-focused Web Applications ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
“ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
Design-focused Web Applications Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save
Great idea but can it be done?
Great idea but can it be done? ,[object Object],[object Object]
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
EWD’s Ajax Framework ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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)
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
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
EWD’s view of a web Application Container Page EWD State & Session Management Cach é/ GT.M  Server
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html>
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Pretty normal web page apart from <ewd:config> tag
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot;  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=&quot;post&quot; action=&quot;ewd“> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will fetch data for this page
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot;  action=&quot;ewd“  > <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Use EWD’s virtual MVC
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot;  value=&quot;*“  ></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Data values automatically populate the forms at run-time No programming in the page
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot;  action=“logMeIn&quot;  nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will validate and save data if this button is clicked
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot;  nextpage=&quot;Page2d“  ></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Next page to display if no errors occur during validation. Equivalent to selecting next view
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a  href=&quot;ewdLogout.ewd &quot;>Log out</a> </body> </html> Next page if  hyperlink clicked
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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
The “A” Team ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Interfacing design and programming ,[object Object],[object Object]
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
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot;  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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Programmer creates session variable in pre-page script setSessionValue()
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Designer uses the session variable in the page
A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot;  name=&quot;username&quot;  focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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
Security Management ,[object Object],[object Object],[object Object],[object Object],[object Object],EWD creates at runtime, eg: <a href=“Example1b.php?ewd_token=U3FPqTKSi6tr7kMtT8bNMhmG2iMnT1&n=qXLT6jwFvlSUhO4ZBRu7Ol1leYVjCp&quot;> Designer just specifies:  <a href=“Example1b.ewd”>
Custom Tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Multi-lingual Deployment ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Design-focused Development ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Conclusions ,[object Object],[object Object],[object Object]
 

Weitere ähnliche Inhalte

Was ist angesagt?

Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Jayant Surana
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web DeveloperEdureka!
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Edureka!
 
Develop Mobile App Using Android Lollipop
Develop Mobile App Using Android LollipopDevelop Mobile App Using Android Lollipop
Develop Mobile App Using Android LollipopEdureka!
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopmentdamonras
 
Web Issues
Web IssuesWeb Issues
Web Issuestterrill
 
Design Patterns : Solution to Software Design Problems
Design Patterns : Solution to Software Design ProblemsDesign Patterns : Solution to Software Design Problems
Design Patterns : Solution to Software Design ProblemsEdureka!
 
MCA 6th Sem Project Report
MCA 6th Sem Project ReportMCA 6th Sem Project Report
MCA 6th Sem Project ReportPRADEEP GUPTA
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperEdureka!
 
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporation
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporationStep by-step -visual_basic_2008_express_edition_by__microsoft_corporation
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporationMuhammad Martayuda
 
Automated Testing Of Web Applications Using XML
Automated  Testing Of  Web  Applications Using  XMLAutomated  Testing Of  Web  Applications Using  XML
Automated Testing Of Web Applications Using XMLdiongillard
 
Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJSEdureka!
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web DevelopmentYash Sati
 
Meteor Mobile App Development
Meteor Mobile App DevelopmentMeteor Mobile App Development
Meteor Mobile App DevelopmentSanjay Kumar
 
Java/J2EE & SOA
Java/J2EE & SOA Java/J2EE & SOA
Java/J2EE & SOA Edureka!
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetAdil Mughal
 
Using Android 5.0 Lollipop
Using Android 5.0 LollipopUsing Android 5.0 Lollipop
Using Android 5.0 LollipopEdureka!
 

Was ist angesagt? (20)

Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.
 
A Work Day Of A Web Developer
A Work Day Of A Web DeveloperA Work Day Of A Web Developer
A Work Day Of A Web Developer
 
MYDATA
MYDATAMYDATA
MYDATA
 
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5Webinar: Front End Web Development - Trendy Web Designs Using HTML5
Webinar: Front End Web Development - Trendy Web Designs Using HTML5
 
Develop Mobile App Using Android Lollipop
Develop Mobile App Using Android LollipopDevelop Mobile App Using Android Lollipop
Develop Mobile App Using Android Lollipop
 
Intro to Front-End Web Devlopment
Intro to Front-End Web DevlopmentIntro to Front-End Web Devlopment
Intro to Front-End Web Devlopment
 
Web Issues
Web IssuesWeb Issues
Web Issues
 
Design Patterns : Solution to Software Design Problems
Design Patterns : Solution to Software Design ProblemsDesign Patterns : Solution to Software Design Problems
Design Patterns : Solution to Software Design Problems
 
MCA 6th Sem Project Report
MCA 6th Sem Project ReportMCA 6th Sem Project Report
MCA 6th Sem Project Report
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
 
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporation
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporationStep by-step -visual_basic_2008_express_edition_by__microsoft_corporation
Step by-step -visual_basic_2008_express_edition_by__microsoft_corporation
 
Automated Testing Of Web Applications Using XML
Automated  Testing Of  Web  Applications Using  XMLAutomated  Testing Of  Web  Applications Using  XML
Automated Testing Of Web Applications Using XML
 
Getting Started With AngularJS
Getting Started With AngularJSGetting Started With AngularJS
Getting Started With AngularJS
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Meteor Mobile App Development
Meteor Mobile App DevelopmentMeteor Mobile App Development
Meteor Mobile App Development
 
Java/J2EE & SOA
Java/J2EE & SOA Java/J2EE & SOA
Java/J2EE & SOA
 
Webengineering lecture 6
Webengineering lecture 6Webengineering lecture 6
Webengineering lecture 6
 
DevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp NetDevNext - Web Programming Concepts Using Asp Net
DevNext - Web Programming Concepts Using Asp Net
 
Using Android 5.0 Lollipop
Using Android 5.0 LollipopUsing Android 5.0 Lollipop
Using Android 5.0 Lollipop
 
Real World SharePoint Debacles
Real World SharePoint DebaclesReal World SharePoint Debacles
Real World SharePoint Debacles
 

Ähnlich wie Beyond The MVC

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptxmalise2997
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satyaSatya Johnny
 
How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...
 How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi... How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...
How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...Aimore Technologies
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | IntroductionJohnTaieb
 
Web Design and Programming
Web Design and ProgrammingWeb Design and Programming
Web Design and Programminggeorge.james
 
WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008Marco Brambilla
 
Continental Airlines 2009 Microsoft SharePoint Conference Presentation
Continental Airlines 2009 Microsoft SharePoint Conference PresentationContinental Airlines 2009 Microsoft SharePoint Conference Presentation
Continental Airlines 2009 Microsoft SharePoint Conference PresentationDenise Wilson
 
AD207 Presentation
AD207 PresentationAD207 Presentation
AD207 Presentationmackejo1
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development PresentationTurnToTech
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC PresentationVolkan Uzun
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of TechnologiesChris Mitchell
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentationbhavesh singh
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23Vivek chan
 
Web development ppt
Web development pptWeb development ppt
Web development pptParasJain222
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxwrite31
 

Ähnlich wie Beyond The MVC (20)

Front End Lecture 1.pptx
Front End Lecture 1.pptxFront End Lecture 1.pptx
Front End Lecture 1.pptx
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Struts natraj - satya
Struts   natraj - satyaStruts   natraj - satya
Struts natraj - satya
 
Struts notes
Struts notesStruts notes
Struts notes
 
How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...
 How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi... How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...
How DotNet, SharePoint, and Azure helps to build a Custom Web Application wi...
 
Front End Development | Introduction
Front End Development | IntroductionFront End Development | Introduction
Front End Development | Introduction
 
Web Design and Programming
Web Design and ProgrammingWeb Design and Programming
Web Design and Programming
 
WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008WebML and WebRatio 5 - TOOLS conference, Zurich 2008
WebML and WebRatio 5 - TOOLS conference, Zurich 2008
 
Continental Airlines 2009 Microsoft SharePoint Conference Presentation
Continental Airlines 2009 Microsoft SharePoint Conference PresentationContinental Airlines 2009 Microsoft SharePoint Conference Presentation
Continental Airlines 2009 Microsoft SharePoint Conference Presentation
 
AD207 Presentation
AD207 PresentationAD207 Presentation
AD207 Presentation
 
Web Development Presentation
Web Development PresentationWeb Development Presentation
Web Development Presentation
 
CODE IGNITER
CODE IGNITERCODE IGNITER
CODE IGNITER
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
Over view of Technologies
Over view of TechnologiesOver view of Technologies
Over view of Technologies
 
Home management WebApp presentation
Home management WebApp presentationHome management WebApp presentation
Home management WebApp presentation
 
16 asp.net session23
16 asp.net session2316 asp.net session23
16 asp.net session23
 
Web development ppt
Web development pptWeb development ppt
Web development ppt
 
COMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docxCOMP6210 Web Services And Design Methodologies.docx
COMP6210 Web Services And Design Methodologies.docx
 
Mvc3 part1
Mvc3   part1Mvc3   part1
Mvc3 part1
 
Food borne human diseases
Food borne human diseasesFood borne human diseases
Food borne human diseases
 

Mehr von george.james

Fosdem 2010 GT.M and OpenStreetMap
Fosdem 2010 GT.M and OpenStreetMapFosdem 2010 GT.M and OpenStreetMap
Fosdem 2010 GT.M and OpenStreetMapgeorge.james
 
Lost In The Clouds
Lost In The CloudsLost In The Clouds
Lost In The Cloudsgeorge.james
 
On a cloudy day you can scale forever
On a cloudy day you can scale foreverOn a cloudy day you can scale forever
On a cloudy day you can scale forevergeorge.james
 
Bad Light Stops Play
Bad Light Stops PlayBad Light Stops Play
Bad Light Stops Playgeorge.james
 
Securing The Cloud
Securing The CloudSecuring The Cloud
Securing The Cloudgeorge.james
 
Out Of The Slipstream Proposal
Out Of The Slipstream ProposalOut Of The Slipstream Proposal
Out Of The Slipstream Proposalgeorge.james
 
Lightning In The Clouds
Lightning In The CloudsLightning In The Clouds
Lightning In The Cloudsgeorge.james
 
Lost In The Clouds
Lost In The CloudsLost In The Clouds
Lost In The Cloudsgeorge.james
 
Mumps the Internet scale database
Mumps the Internet scale databaseMumps the Internet scale database
Mumps the Internet scale databasegeorge.james
 
Web Development Environments: Choose the best or go with the rest
Web Development Environments:  Choose the best or go with the restWeb Development Environments:  Choose the best or go with the rest
Web Development Environments: Choose the best or go with the restgeorge.james
 
Web Servers: Architecture and Security
Web Servers: Architecture and SecurityWeb Servers: Architecture and Security
Web Servers: Architecture and Securitygeorge.james
 
Report from DEVCON 2008
Report from DEVCON 2008Report from DEVCON 2008
Report from DEVCON 2008george.james
 
Michelle's Wallpaper
Michelle's WallpaperMichelle's Wallpaper
Michelle's Wallpapergeorge.james
 
The experiences of migrating a large scale, high performance healthcare network
The experiences of migrating a large scale, high performance healthcare networkThe experiences of migrating a large scale, high performance healthcare network
The experiences of migrating a large scale, high performance healthcare networkgeorge.james
 
FIS-PIP™ – A high end database application development platform
FIS-PIP™ – A high end database application development platformFIS-PIP™ – A high end database application development platform
FIS-PIP™ – A high end database application development platformgeorge.james
 
Mission-critical Ajax: Making Test Ordering Easier and Faster at Quest Diagno...
Mission-critical Ajax:Making Test Ordering Easier and Faster at Quest Diagno...Mission-critical Ajax:Making Test Ordering Easier and Faster at Quest Diagno...
Mission-critical Ajax: Making Test Ordering Easier and Faster at Quest Diagno...george.james
 

Mehr von george.james (20)

Fosdem 2010 GT.M and OpenStreetMap
Fosdem 2010 GT.M and OpenStreetMapFosdem 2010 GT.M and OpenStreetMap
Fosdem 2010 GT.M and OpenStreetMap
 
M/DB and M/DB:X
M/DB and M/DB:XM/DB and M/DB:X
M/DB and M/DB:X
 
Lost In The Clouds
Lost In The CloudsLost In The Clouds
Lost In The Clouds
 
On a cloudy day you can scale forever
On a cloudy day you can scale foreverOn a cloudy day you can scale forever
On a cloudy day you can scale forever
 
Bad Light Stops Play
Bad Light Stops PlayBad Light Stops Play
Bad Light Stops Play
 
Securing The Cloud
Securing The CloudSecuring The Cloud
Securing The Cloud
 
Out Of The Slipstream Proposal
Out Of The Slipstream ProposalOut Of The Slipstream Proposal
Out Of The Slipstream Proposal
 
Lightning In The Clouds
Lightning In The CloudsLightning In The Clouds
Lightning In The Clouds
 
Lost In The Clouds
Lost In The CloudsLost In The Clouds
Lost In The Clouds
 
Mumps the Internet scale database
Mumps the Internet scale databaseMumps the Internet scale database
Mumps the Internet scale database
 
Web Development Environments: Choose the best or go with the rest
Web Development Environments:  Choose the best or go with the restWeb Development Environments:  Choose the best or go with the rest
Web Development Environments: Choose the best or go with the rest
 
Web Servers: Architecture and Security
Web Servers: Architecture and SecurityWeb Servers: Architecture and Security
Web Servers: Architecture and Security
 
Google's BigTable
Google's BigTableGoogle's BigTable
Google's BigTable
 
Report from DEVCON 2008
Report from DEVCON 2008Report from DEVCON 2008
Report from DEVCON 2008
 
Michelle's Wallpaper
Michelle's WallpaperMichelle's Wallpaper
Michelle's Wallpaper
 
The experiences of migrating a large scale, high performance healthcare network
The experiences of migrating a large scale, high performance healthcare networkThe experiences of migrating a large scale, high performance healthcare network
The experiences of migrating a large scale, high performance healthcare network
 
Amazon S3 and EC2
Amazon S3 and EC2Amazon S3 and EC2
Amazon S3 and EC2
 
FIS-PIP™ – A high end database application development platform
FIS-PIP™ – A high end database application development platformFIS-PIP™ – A high end database application development platform
FIS-PIP™ – A high end database application development platform
 
Querying the Web
Querying the WebQuerying the Web
Querying the Web
 
Mission-critical Ajax: Making Test Ordering Easier and Faster at Quest Diagno...
Mission-critical Ajax:Making Test Ordering Easier and Faster at Quest Diagno...Mission-critical Ajax:Making Test Ordering Easier and Faster at Quest Diagno...
Mission-critical Ajax: Making Test Ordering Easier and Faster at Quest Diagno...
 

Kürzlich hochgeladen

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsNanddeep Nachan
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...Zilliz
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfOverkill Security
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDropbox
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoffsammart93
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Zilliz
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024The Digital Insurer
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKJago de Vreede
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Jeffrey Haguewood
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businesspanagenda
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfOverkill Security
 

Kürzlich hochgeladen (20)

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Ransomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdfRansomware_Q4_2023. The report. [EN].pdf
Ransomware_Q4_2023. The report. [EN].pdf
 

Beyond The MVC

  • 1. Beyond the MVC: EWD and Design-oriented Web Development Rob Tweed M/Gateway Developments Ltd
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13. Web Application: MVC View Web Page 1 Step 1: User decides what to do: eg clicks button or link
  • 14. Web Application: MVC View Web Page 1 Step 2: URL sent to controller Controller
  • 15. Web Application: MVC View Web Page 1 Step 3: URL analysed and mapped to corresponding business logic Controller Business logic URL map
  • 16. Web Application: MVC View Web Page 1 Step 4: Business logic selects next view Controller Business logic URL map View Database (model)
  • 17. Web Application: MVC View Web Page 1 Step 5: View is generated Controller Business logic URL map View Web Page 2 Database (model)
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 29. “ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
  • 30. Web Application Web Page 1 From a designer’s point of view: Database Step 1: Run a method that fetches the data needed for the page fetchData()
  • 31. Web Application Web Page 1 From a designer’s point of view: Step 2: Display the page
  • 32. Web Application Web Page 1 From a designer’s point of view: Step 3: User decides what to do: eg clicks button or link
  • 33. Web Application Web Page 1 From a designer’s point of view: Database Step 4: Method called that validates and saves data into database saveData()
  • 34. Web Application Web Page 1 From a designer’s point of view: Step 5: Move to next page Next Page Web Page 2
  • 35. Web Application From a designer’s point of view: Repeat the process…. Web Page 2 Database fetchData2()
  • 36.
  • 37. “ Static” web sites Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page
  • 38. Design-focused Web Applications Web Page 1 Next Page Web Page 2 Next Page Web Page 3 Next Page Database fetch fetch fetch save save save
  • 39. Great idea but can it be done?
  • 40.
  • 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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html>
  • 48. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Pretty normal web page apart from <ewd:config> tag
  • 49. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd“> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Method that will fetch data for this page
  • 50. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd“ > <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Use EWD’s virtual MVC
  • 51. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*“ ></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d“ ></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd &quot;>Log out</a> </body> </html> Next page if hyperlink clicked
  • 55. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Programmer creates session variable in pre-page script setSessionValue()
  • 61. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>Log out</a> </body> </html> Designer uses the session variable in the page
  • 62. A simple form in EWD <ewd:config isFirstPage=&quot;true&quot; 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=&quot;post&quot; action=&quot;ewd&quot;> <table border=0> <tr> <td>Username: </td> <td><input type=&quot;text&quot; name=&quot;username&quot; focus=&quot;true&quot; value=&quot;*&quot;></td> </tr> <tr> <td>Password: </td> <td><input type=&quot;password&quot; name=&quot;password&quot;></td> </tr> <tr> <td><input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;Login&quot; action=“logMeIn&quot; nextpage=&quot;Page2d&quot;></td> </tr> </table> </form> <br><br> <a href=&quot;ewdLogout.ewd&quot;>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
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.