View
139
Download
0
Category
Tags:
Preview:
DESCRIPTION
Vefurinn hefur á undanförnum árum náð fótfestu sem sjálfgefið viðmót á hugbúnaði. Enterprise lausnir hafa gjarnan vefviðmót, bæði fyrir viðskiptavini og starfsmenn. Á síðari árum hafa snjallsímalaunsir bæst við. Við það hefur orðið skýrari skil milli viðmóts og bakenda, með forritaskilum - API. Í þessum fyrirlestri skoðum við framsetningarlagið - Presentation Layer Design og hvernig við getum hannað forrit fyrir þetta lag. Skoðuð eru ýmis munstur og það helsta er eitt það frægasta í hugbúnaðargerð: Model View Controller. Við skoðum einnig Play framework en það er ramminn sem við notum til að forrita.
Citation preview
Lecture 17Presentation Layer Design
2
Reading Patterns
– Model View Controller– Page Controller– Front Controller– Template View– Application Controller
3
Agenda The Web Layer
– Model-View-Controller Input controller patterns
– Page Controller– Front Controller– Application Controller
View patterns– Template View
Play! Framework We will be using Play! framework
– Based on MVC
The Web Layer
5
6
The Challenge How to design web applications? How to separate user interface from the
business logic?– User Interface is an HTML string
How to provide OO design?– Code reuse
How can we abstract underlying system– For example data base
7
Presentation and Web Layers Embedded and Desktop clients
Web Browser is a different type of client
Web Applications
8
9
The Three Layers Presentation
– User’s interface to the system– User can be another system– Accepts input, displays views
Domain– The Application of the system– The “Business logic”– Has the tendency to creep into presentation
and data source Data Source
– Connection to the database
10
Web Layer Design How to design Web Applications
Two approaches– Script based – Code using HTML– Server Page based – HTML page with code
Web Browser WebServer
HTML/HTTP
Web Application
??DB
Server
11
Web Applications Client is a web Browser
– All interface is HTML with graphics Server is configured to map URLs to
applications– The web application can be script or page
12
Script Based Useful when the logic and the flow is important
– Request is not easily mapped to a single page
Examples– CGI, ISAPI, Java Servlets
13
Server Page Based Useful where there are lots of pages
– Flow is not as important– Each request can easily be mapped to a page
Examples– PHP, JSP, ASP
14
Web Design Web Layer must handle the request and
the response
API Based User Interface is HTML5 or Native App
– Server side is just API– Information format in XML or Json
HTML5
JavaScript Web Server
DB
Controllers
Service Layer
Domain Model
Data Source LayerNative App
HTTP Request
HTTP Request
Json/XML
Json/XML
Model-View-Controller
16
17
Model View ControllerSplits user interface interactions
into three distinct roles Separates the user interface from the logic
– Originally from 70s Smalltalk– Similar to Doc/View in MFC
MVC considers three roles– Clear separations of concerns– Model: The domain layer handles state– View: Presentation logic– Controller: Connects the model and the view
18
Model View Controller How It Works
– Model: The domain layer handles state– View: Presentation logic– Controller: Connects the model and the view
19
Model View Controller Benefits
– Separation of the view from the domain logic in the model
– This is key in any presentation design Importance of MVC
– View and model are different concerns– View can change, usually the model is the
same– Easy to test the model without the view
Coupling Dependencies– View depends on the model, but the model is
not depending on the view
20
Model View Controller When to Use It
– The value is in the separation of concern– Separating the model and the view– As this separation is so fundamental in any
software design, any non-trivial system should use MVC in some form
21
MVC in Web Design Web Applications are request/response
based Input Controller
– Takes the request– Examines the input parameters– Calls the Model– Decides how to
handle the response– Sends the control
to the View for rendering
22
MVC in Web Design
23
MVC Patterns Input controller patterns
– Page Controller– Front Controller– Application Controller
View patterns– Template View– Transform View – Transforms view to some
format– Two Step View – Logical Screen and final UI
What design principle is the most important in Model View Controller?
A) Separation of different concernsB) All request go the same placeC) Easy to test different componentsD) Easy to change the view
QUIZ
What design principle is the most important in Model View Controller?
A) Separation of different concernsB) All request go the same placeC) Easy to test different componentsD) Easy to change the view
QUIZ
✔
26
MVC Patterns Input controller patterns
– Page Controller– Front Controller– Application Controller
View patterns– Template View– Transform View – Transforms view to some
format– Two Step View – Logical Screen and final UI
27
Page ControllerAn object that handles a request for a specific page or action on a Web site
One input controller for each logical page of the web site
28
Page Controller How It Works
– One Page Controller for each logical page Page controller as Script
– Servlet or CGI program– Useful for web application that need some logic and
data Page controller as a server page
– ASP, PHP, JSP– Combines the Page Controller and Template View– Helpers used to get data from the model– Works fine if the logic is simple or none
29
Page Controller pattern
30
Page Controller The basic responsibility of a Page
Controller are– Decode the URL and extract any form data to
figure out all data for the action– Create and invoke any model objects to
process the data.• All relevant data from the HTML request should be
passed to the model so that the mode objects don’t need any connection to the HTML request
– Determine which view should display the result page and forward the information to it
31
Page Controller When to Use It
– Works well in a site where the controller logic is simple
– When the controller logic is simple the Front Controller adds too much overhead
Examples– Simple Display with a Servlet Controller and a
JSP View– Using a JSP as a Handler– Page Handler with Code Behind
32
Front ControllerA controller that handles all requests for
a web site
One controller handles all requests– The handler dispatches to command objects
for behaviour particular to the request
33
Front Controller How It Works
– Takes care of common tasks, for example security, authentication, i18n, and so on
– Built on Commands– Usually implemented as script, not page
Two phases– Request handling – Web Handler– Command handling – Command classes
34
Front Controller Request handling – Web Handler
– Any common logic – Authentication, Web Security etc.– Changes in one place apply for the whole site– Handler creates the requested command
Command handling – Command classes– Specific functionality– Command classes extend abstract classes and
implements process method– Can be separated form the web infrastructure
35
Front Controller Handler takes the request
– Examines the URL– Creates command and calls the command
36
Front Controller Web handler can have commands
statically or dynamically– Static case has the advantage of explicit
logic and compile time error checking– Dynamic case has some property file to map
request URL to command classes– Dynamic case has more flexibility to add new
commands
37
Front Controller When to Use It
– Front controller is more complicated design than the Page Controller
– Only one controller needs to be configured in the web server, the handler takes care of the dispatching
– With dynamic commands, you can easily add new commands
– Single point of entry allowing centralized logic
38
Application ControllerA centralized point for handling screen
navigation and the flow of an application
Applications that have significant amount of logic about the screens to use at different points– For example Wizard style applications– Screens depend on the state
39
Application Controller How it works
– Two responsibilities: Decide which domain logic to use and deciding the view
40
Application Controller Can be used with Command pattern
– Commands execute the domain logic– Not easy to determine what is domain logic
and what is the application logic State machine
– The Controller must maintain a state When to Use It
– If the flow and application logic is complex and simple controllers need to share code
41
MVC Patterns Input controller patterns
– Page Controller– Front Controller– Application Controller
View patterns– Template View– Transform View – Transforms view to some
format– Two Step View – Logical Screen and final UI
We are designing an application for corporate tax reduction which have multiple of screens and various conditions and exceptions. What controller pattern might be useful?
A) Input ControllerB) Page ControllerC) Front ControllerD) Application Controller
QUIZ
We are designing an application for corporate tax reduction which have multiple of screens and various conditions and exceptions. What controller pattern might be useful?
A) Input ControllerB) Page ControllerC) Front ControllerD) Application Controller
QUIZ
✔
44
MVC Patterns Input controller patterns
– Page Controller– Front Controller– Application Controller
View patterns– Template View– Transform View – Transforms view to some
format– Two Step View – Logical Screen and final UI
45
Template ViewRenders information into HTML by
embedding markers in an HTML page
Place markers in HTML page that can be resolved into calls to get dynamic information
46
Template View How it Works
– Embed markers into static HTML page when it’s written
– When the page is used to service a request, the markers are replaced by the results of some computation
Server Pages for presentation– ASP, PHP, JSP– Page receives data to work with– Allow scriptlets
47
Template View Embedding the markers
– Markers are used for dynamic data– <% and %> JSP, ASP– Tags such as JSTL and customized– Data is sent with the request
Helper Objects– Provide helper object that give the results– Avoids scriptlets and keeps the code in classes
48
Template View Conditional display
– Most Server Pages support conditional tags– Provides some presentation logic
– Can lead to bad code and should be avoided if possible
– Try to move the condition into helper object or tags
<c:if test="${!empty cookie.userName}"> Welcome back <c:out value="${cookie.userName.value}" /> </c:if>
49
Example<jsp:include page="top.jsp" flush="true" /><table cellpadding="4" cellspacing="4" border="0" width="100%"><tr><td><%@ page import="is.ru.honn.domain.User" session="true" %>
<% User user = (User)request.getSession().getAttribute ("user"); if (user == null) {%><h1>Sportvefurinn</h1>Ef þú ert nýr notandi getur þú skráð þig með því að smella á <b>Nýskrá</b> í valmyndinni hér til vinstri.Annars, smelltu á <b>Innskrá</b> til að skrá þig inn á vefinn.<% } else { %><h1>Halló <%= user.getName() %></h1>Smelltu á <b>Leikir</b> til að sjá næstu leiki.<% } %></td></tr></table>
<%-- bot.jsp síðan inniheldur restina af HTML síðunni --%><jsp:include page="bot.jsp" flush="true" />
50
Example
Template Velocity template example
Template Scala template example
@(customer: Customer, orders: Seq[Order]) <h1>Welcome @customer.name!</h1>
<ul> @orders.map { order => <li>@order.title</li>} </ul>
Template Template Engine will execute the view and
create HTML
Template Engine HTMLView TemplateLanguage
reads generates
ModelParameters
What pattern is described like this?
A) Template ViewB) Transform ViewC) Model ViewD) Two Step View
QUIZ
What pattern is described like this?
A) Template ViewB) Transform ViewC) Model ViewD) Two Step View
QUIZ
✔
MVC Design
56
57
MVC Design
2. Call the model
58
MVC Design
59
Domain and Presentation Data from the model need to be accessed
by the view– Data is simple classes– Controller handles the flow and decides which
view to call– View needs access to data
Two methods– Use Request if lifetime of
the data is the request– Use Session if the data
must span many requests
60
Domain and Presentation Single Request
– Same request object is used– Use getParameter to get input– Store the data in request
using setAttribute– JSP can access the
data using therequest
Combining Model and View
Input ControllerHTTP/HTML handling
ModelDomain Layer
ViewTemplate
ModelParameters
API Design
62
Trends Mobile is bigger than Desktop
– Mobile is the most important platform for many applications
The Programmable Web– If you want to be in the game, you have an API
When Good Enough is Not Enough– Rise Apps– Single purpose programs
Rise of the API Separating UI from code
– Model View Controller patterns User Interface is HTML5 or Native App
– Server side is just API– Information format in XML or Json
API Based User Interface is HTML5 or Native App
– Server side is just API– Information format in XML or Json
HTML5
JavaScript Web Server
DB
Controllers
Service Layer
Domain Model
Data Source LayerNative App
HTTP Request
HTTP Request
Json/XML
Json/XML
API Design HTTP is designed to be simple
– GET, POST, PUT, DELETE Trends was to build on top of this
– SOAP SOAP does not use any of the HTTP built in
functionality– Adds a complexity layer on top
REST Explained Briefly REST over HTTP leverages HTTP
– Uses HTTP request methods: GET, POST, PUT, DELETE
GET is safe – does not have side effects– Possible to cache client side– 80% or more of the requests are GET
PUT and DELETE are idempotent
REST Explained Briefly GET to get resource POST to add resource PUT to update resource DELETE to delete resource
Getting
Adding
Updating
GET someservice.com/api/customer/3829
POST someservice.com/api/customer/
REST examples
PUT someservice.com/api/customer/3829
Play Framework
71
73
Play Framework Open source web application framework
– Written in Java– Build and deployment is all handled by scripts
Follows the model-view-controller architectural pattern
Goals– Optimize developer productivity by using
convention over configuration, hot code reloading and display of errors in the browser
74
Play MVC Model
– Domain specific Java classes View
– User Interface– HTML, XML, JSON– Scala template language
Controller – Java classes that take requests and operate on
the model– Results are rendered by the view
75
Play MVC
76
The Request Life Cycle1. An HTTP Request is received by the framework2. The Router component tries to find the most
specific route able to accept this request. The corresponding action method is then invoked
3. The application code is executed4. If a complex view needs to be generated, a
template file is rendered5. The result of the action method (HTTP Response
code, Content) is then written as an HTTP Response
77
78
Creating a Play app Unzip typesafe-activator-1.2.10-
minimal.zip Open CMD or Terminal Run activator
– This will download and install Play Framework$activaor
Add activator to PATH
79
Creating a Play app Open CMD or Terminal
>activator new RuBook Creates a new appliction
>cd RuBook>play run
Runs the Web App Open a browser and goto localhost:9000
80
81
83
84
Play in IntelliJ
86
Application.java input controller
– controllers.Application– Requests will go to this Java class
public class Application extends Controller{
public static Result index() { return ok(index.render("Fagra veröld")); }
87
index.html View is a Scala template
views/index.scala.html
Compiles in to classviews/html/index.class
@(message: String)
@main("Welcome to Play") {
@message
}
88
Routing conf/routes contains the routing
information# Routes# This file defines all application routes (Higher priority routes first)# ~~~~
# Home pageGET / controllers.Application.index()
# Map static resources from the /public folder to the /assets URL pathGET /assets/*file controllers.Assets.at(path="/public", file)
89
Errors Play displays errors
– CMD has more information
90
Summary Web Presenation Patterns
– Model View Controller– Page Controller– Front Controller– Template View– Application Controller
Play framework
Recommended