An Introduction To Model View Controller In XPages
-
Upload
ulrich-krause -
Category
Software
-
view
2.052 -
download
0
Transcript of An Introduction To Model View Controller In XPages
![Page 1: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/1.jpg)
It’s Just A ViewAn Introduction To Model View Controller In XPages
Ulrich Krause, BCC GmbH
Ghent, Belgium, March 30-31, 2015
![Page 2: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/2.jpg)
• Administrator /Developer since 1993
• Senior Software Architect at BCC, Germany
• OpenNTF Contributor
• IBM Champion (2011 – 2015)
• Blog http://www.eknori.de
• Twitter @eknori
• Mail [email protected]
About: Ulrich Krause
![Page 3: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/3.jpg)
• The constant in live and software development
• Software Quality / Maintenance
• Design Patterns
• The Basics of MVC
• Example
Agenda
![Page 4: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/4.jpg)
• The only constant in live is
CHANGE
Heraclitus (520 - 460 BC)
![Page 5: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/5.jpg)
• The only constant in software development is
CHANGE
Heraclitus (520 - 460 BC)
![Page 6: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/6.jpg)
Softwarequality - Overview
![Page 7: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/7.jpg)
Softwarequality – User Perspective
![Page 8: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/8.jpg)
Softwarequality – Developer Perspective
![Page 9: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/9.jpg)
• Challenges with „historically grown“ applications
– Code can be everywhere in the application• Forms, View Events, Buttons, Hotspots, Script Libraries …
– Use of different languages• LotusScript, @Formula, Javascript, Java, Simple Actions, HTML …
– Redundancies
• One possible solution is to seperate the Frontend from the Backend Code.
– NotesDocument
– NotesUIDocument
Software Quality / Maintenance
![Page 10: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/10.jpg)
Design Patterns
![Page 11: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/11.jpg)
• Recurring solutions to software design problems you find again and again in real-world application development.
• A general reusable solution to a commonly occurring problem in software design.
• It is a description or template for how to solve a problem that can be used in many different situations.
• Are about design and interaction of objects, as well as providing a communication platform concerning elegant, reusable solutions to commonly encountered programming challenges.
• GoF Patterns are considered the foundation of all design patterns.
What are Design Patterns?
![Page 12: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/12.jpg)
• A design pattern is not a finished design that can be transformed directly into source or machine code
• A design pattern is not a code snippet that can be copied into your code.
Design Patterns are NOT
![Page 13: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/13.jpg)
• Ralph Johnson, Erich Gamma, Richard Helm, John Vlissides
Gang Of Four - GoF
![Page 14: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/14.jpg)
The 23 GoF Design Patterns
![Page 15: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/15.jpg)
• MVC was one of the first works to describe and implement software constructs in terms of their responsibilities.
• Trygve Reenskaug introduced MVC in the 1970s
• In the 1980s, Jim Althoff and others implemented a version of MVC .
• MVC was expressed as a general concept, in a 1988 article.
Brief History Of MVC
![Page 16: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/16.jpg)
• Trygve Mikkjel Heyerdahl Reenskaug (born 1930) is a Norwegian computer scientist and professor emeritus of the University of Oslo.
• He formulated the model-view-controller (MVC) pattern for Graphic User Interface (GUI) software design in 1979 while visiting the Xerox Palo Alto Research Center (PARC).
Father Of MVC
http://en.wikipedia.org/wiki/Trygve_Reenskaug
![Page 17: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/17.jpg)
• You created a superhero web application/website for a comic shop owner with a small database table.
• it is a huge success and your client is extremely satisfied.
• They ask you to change the application, they want to use a different database and, according to market demand, they definitely need both iPhone and Android apps.
• Now repeat this five times.
• The client keeps on asking for modifications and expansions.
• These can be UI related changes and even complete backend architecture .
Why MVC? – An Example Project Case
![Page 18: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/18.jpg)
It‘s Official, We‘re In Deep Doo-Doo Now …
![Page 19: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/19.jpg)
• … you’d notice that some things would have been less painful
• And you’d been happier
However if you used MVC from the start
![Page 20: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/20.jpg)
• 90% of the code for the web application and the mobile app will be the same, but instead of saving the user data to a Shared Object or through a web service, you’d be using a local DB for instance.
• Without MVC, chances are pretty high you’ll be making modifications in a bunch of classes.
• The same applies to the UI for instance. Only the way it’s presented to the user is different.
Why ?
![Page 21: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/21.jpg)
MVC Components
![Page 22: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/22.jpg)
Understanding MVC
The Model represents your data structure. Typically your model class will contain functions to retrieve, insert, and update information in the datastore
![Page 23: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/23.jpg)
Understanding MVC
The View is the information that is being presented to the user. A View will normally be a web page, but can be any other type of "page"
![Page 24: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/24.jpg)
Understanding MVC
The Controller servers as an intermediary between the Model, the View and any other resources needed to process HTTP requests and generate a web page
![Page 25: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/25.jpg)
• The Model is the data,
• The View is the window on the screen,
• And the Controller is the glue between the two
An easy way to understand MVC
![Page 26: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/26.jpg)
MVC Interaction
![Page 27: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/27.jpg)
MVC Interaction
Sees
UpdatesManipulates
Uses
![Page 28: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/28.jpg)
![Page 29: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/29.jpg)
Sample Application
![Page 30: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/30.jpg)
Sample Application
![Page 31: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/31.jpg)
![Page 32: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/32.jpg)
Sample Application Design
![Page 33: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/33.jpg)
The Controller
![Page 34: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/34.jpg)
View Component - Overview.xsp
![Page 35: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/35.jpg)
View Component - Hero.xsp
![Page 36: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/36.jpg)
Model Component: Overview
![Page 37: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/37.jpg)
Model Component: Hero
![Page 38: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/38.jpg)
• A data access object (DAO) is an object that provides an abstract interface to some type of database or other persistence mechanism.
• All read / write data operations aredelegated to DAO.
• No other part of the application has direct access to the underlying datastore
Data Access Object ( DAO )
![Page 39: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/39.jpg)
Changes - What Management Wants …
![Page 40: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/40.jpg)
Changes - What You Think …
![Page 41: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/41.jpg)
Changes - What You Need …
![Page 42: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/42.jpg)
• An interface in the Java programming language is an abstract type that is used to specify an interface (in the generic sense of the term) that classes must implement.
• Interfaces are declared using the interface keyword, and may only contain method signature and constant declarations (variable declarations that are declared to be both static and final).
Interface - Definition
![Page 43: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/43.jpg)
• Refactor Extract Interface
Interface - HowTo
![Page 44: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/44.jpg)
Interface – How To
![Page 45: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/45.jpg)
Interface – The Result
![Page 46: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/46.jpg)
New Class: DaoXml
![Page 47: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/47.jpg)
• Stubs for all methods and properties
• ToDo: Write code to work with XML instead of NSF
New Class: DaoXml
![Page 48: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/48.jpg)
• Designer automagically does the neccessary changes
– in class DaoNsf
– in class Overview
Implementation Usage
![Page 49: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/49.jpg)
• Depending on which datasource to use, change that one line in your code.
And Finally …
![Page 50: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/50.jpg)
![Page 51: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/51.jpg)
• Architexa helps you to understand and to document large/complex codebases.
• Design Patterns in Java Tutorial
• Gang Of Four
Useful Links
![Page 53: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/53.jpg)
![Page 54: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/54.jpg)
![Page 55: An Introduction To Model View Controller In XPages](https://reader030.fdocuments.in/reader030/viewer/2022032421/55a80e801a28abfc538b456f/html5/thumbnails/55.jpg)
Software Quality – Use The Right Tools