Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

An Introduction to the Model-View-Controller Pattern


Published on

The only constant in software development is CHANGE. Every piece of software that has been developed and shipped to a customer will be changed numerous times during its lifecycle. A good design pattern can help make changes easy. MVC, an acronym for Model - View - Controller, is becoming THE recommended model for designing frameworks - especially on the Web. This webinar will give an overview of design patterns in general, and in particular, MVC.

Ulrich Krause shows how to use the MVC design paradigm in an XPages application and demonstrate how easy it is to implement changes. Need to read/write your data from/to an XML file instead of using a Notes View? MVC makes software maintenance as easy as 1-2-3!

BONUS! During this webinar, Pete Janzen, IBM Product Manager, provides a short update about what's new and upcoming from IBM for XPages and Domino application development.

Published in: Technology
  • Today, I want to share with you my own "unfair advantage" ... An honest crack at an insider's edge that's so effective it's nothing less than performance enhancing for your own bottom line profits! ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • The Odds of The Lotto Are Changing With These Tricks! ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here

An Introduction to the Model-View-Controller Pattern

  1. 1. An Introduction to the Model-View-Controller Pattern Tweet about this event And mention us: @Teamstudio @TLCCLTD @Eknori and @pjanzen20 September 16, 2015
  2. 2. @Teamstudio @TLCCLTD Courtney Carter Marketing Associate Teamstudio
  3. 3. Who We Are • Manage, modernize, and mobilize your business applications with software and solutions from Teamstudio. o Easy-to-use tools for developers and administrators o Modernization Services to help you mobilize your applications o Mobilization platform for those who want to mobilize using their own internal resources • 1600+ active customers, 53 countries • Offices in US, UK, and Japan
  4. 4. Teamstudio Unplugged • Your mobile Domino server: take your IBM Notes apps with you! • End-users access Notes applications from mobile devices whether online or offline • Leverages the powerful technology of XPages
  5. 5. Unplugged Templates • Continuity Mobile offline access to BCM programs • OneView Approvals Expense approvals; anywhere, anytime • CustomerView Lightweight CRM framework for field sales and field service teams • Contacts – customer information database • Activities – customer activity log • Media – mobile offline file storage and access
  6. 6. • Set of Controls for IBM Domino developers working on XPages applications and on application modernization projects • Re-write of the Teamstudio Unplugged Controls project, but adds full support for PC browser- based user interfaces as well as mobile interfaces • Enables XPages developers to create controls that are responsive • Learn more: XControls
  7. 7. Teamstudio Services • Professional services for modernization, Web enablement, project management, development, and administration o Modernization Services o Developer Assistance Program o Application Upgrade Analysis o Application Complexity Analysis o Application Usage Auditing •
  8. 8. • XControls Business Edition promotion: o Be entered to win an Apple iPad mini when you sign up to demo XControls Business Edition before Oct. 31, 2015. • ICON UK: Sept. 21 and 22 in London
  9. 9. 1 #XPages Your Hosts Today: Howard Greenberg TLCC @TLCCLtd An Introduction to the Model View Controller Architecture Paul Della-Nebbia TLCC @PaulDN
  10. 10. How can TLCC Help YOU! 2 • Private classes at your location or virtual •XPages Development •Support Existing Apps •Administration • Let us help you become an expert XPages developer! • Delivered via Notes • XPages • Development • Admin • User Self- Paced Courses Mentoring Instructor- Led Classes Application Development and Consulting Free Demo Courses!
  11. 11. 3 • Save hundreds and even Thousands of Dollars on the most popular courses and packages: XPages Development Notes and Domino Development Domino Administration • Now extended through October 2nd
  12. 12. Upcoming and Recorded Webinars 4 View Previous Webinars (use url above) • Life in the Fast Lane (XPages Peformance tips) – October 15 • Ask The XPages Experts – November 17
  13. 13. IBM Champion Nominations are Open • Nominations are open for the IBM Champion program – Through October 31st – Go here to complete the nomination form • If you think someone has contributed to the ICS community then nominate them! – Speaks at conferences – Helps out in forums and Stack Overflow, etc. – Hosts videos, blogs, webinars – More about the IBM Champion Program here 5
  14. 14. Asking Questions – Q and A at the end 6 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions pane! We will answer your questions verbally at the end of the webinar
  15. 15. Your Presenters Today: 7 #XPages Pete Janzen IBM @pjanzen20 Update on IBM’s Application Development Plans for XPages, Domino and Notes Ulrich Krause @eknori An Introduction to the Model View Controller Architecture
  16. 16. ©2015 IBM Corporation IBM Domino Application Development Update September 16, 2015 Pete Janzen – Sr. Product Manager, IBM 8
  17. 17. ©2015 IBM Corporation Domino Comes to Bluemix! Experimental services now available Realize the next generation of LOB apps • App.Next  New types of applications that use services like Watson, mobile, social files and more.... • Leverage your investment in Notes & Domino apps • Easier path to modernized applications • Integrate your on-premises applications 9
  18. 18. ©2015 IBM Corporation What Makes up Domino on Bluemix Experimental Bluemix Runtime - IBM XPages • Domino XPages runtime for building web applications Bluemix Service - IBM XPages NoSQL Database • NoSQL database (NSF) service playground Bluemix Boilerplate – IBM XPages Web Starter • Starter kit combines XPages runtime with XPages NoSQL Database and sample app to quickly get up and running on Bluemix Domino Designer extensions • Extensions for building for and deploying to Bluemix Domino Designer Experimental Beta 2H 2015 eGA Roadmap* * Subject to change at IBM’s sole discretion
  19. 19. ©2015 IBM Corporation Getting Started • Get a Bluemix account • If you do not already have one, then you can start a free 30 trial today • • Get IBM Domino Designer 9.0.1 • DL • Install the latest XPages Extension Library into Domino Designer • • 901v00_14.20150831-1301 • Log in to Bluemix and start coding !
  20. 20. ©2015 IBM Corporation Enablement & Feedback Enablement • Articles and videos: • Webcast • An introduction to creating Domino applications in the Bluemix environment 6633f03e5ee8/entry/Webcast_Replay_An_introduction_to_creating_Domino_applications_in_the_Bluemix_environment?lang=en_us Feedback • Free forum support for XPages runtime, XPages NoSQL Database service and XPages Web Starter boilerplate is provided Tag questions with XPages-runtime and/or XPages-service 12
  21. 21. ©2015 IBM Corporation Two Apple Related Updates Technote 1962311: Supportability Q&A about IBM Notes and OS X 10.11.x • • Currently released IBM Notes 9.0.1.x 32-bit versions do not support Apple's OS X 10.11.x El Capitan • IBM Notes 9.0.1 64-bit planned for Fall of 2015 is planned to support OS X 10.11 • IBM Client Application Access (ICAA) will be released at same time as Notes 9.0.1 64-bit and it will also work with El Capitan Technote 1966059: Apple's App Transport Security prevents apps from connecting to a Domino server • • Apple's native apps are not impacted, and IBM's Verse Mobile apps are not impacted. • 3rd party Apps compiled for iOS9 / OSX10.11 will be impacted unless they exclude enforcing App Transport Security (like we do for Verse mobile) • Domino implementing Elliptic Curve cipher support to address by end of month as an interim fix for 901FP4 13
  22. 22. An Introduction To MVC In XPages Ulrich Krause,TLCC Webinar,16-SEP-2015
  23. 23. About:Ulrich Krause • Administrator /Developer since1993 • OpenNTF Contributor – DomBackup,TriggerHappy, !!Help!! • IBM Champion 2011 – 2015 – • Blog • Twitter @eknori • Mail:
  24. 24. What do we want to learn today? • The Constant In Life And Software Development • Change Management Process • Software Maintenance • Code Quality • Design Patterns • MVC Basic • Sample
  25. 25. The only constant in life
  26. 26. The only constant in software development
  27. 27. Change Management Process
  28. 28. SoftwareQuality - Overview
  29. 29. SoftwareQuality– User Perspective
  30. 30. SoftwareQuality – Developer Perspective
  31. 31. SoftwareLife-Cycle Costs
  32. 32. SoftwareQuality / Maintenance • Challenges with „historically grown“ applications – Code can be anywhere in the application • Forms,View Events, Buttons, Hotspots, Script Libraries … – Use of different languages • LotusScript,@Formula,Javascript, Java,LS2Java,LS2CAPI, Simple Actions,HTML … – Redundancies – Different programming styles • One possible solution is to separate the Frontend from the Backend Code. – NotesDocument – NotesUIDocument
  33. 33. Writing Good Code
  34. 34. Code Quality if (state.Code == 4) DoSomething();
  35. 35. Code Quality ‘If we are at the final state, ‘call method DoSomething()" if (state.Code == 4) DoSomething();
  36. 36. Code Quality if (state.IsFinal) DoSomething();
  37. 37. Code Quality - Chaining s$ = session.getDatabase("server" ,"db.nsf").GetView("view").g etAllDocumentsByKey("key", true).getFirstDocument().Get FirstItem("iName").Text
  38. 38. What can we do? Say goodbye to sequential programming
  39. 39. What can we do? More procedurale programming
  40. 40. What can we do? Even better: Object Oriented Programming (OOP)
  41. 41. Design Patterns
  42. 42. What are Design Patterns? • Patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system. • Object-oriented design patterns typically show relationships and interactions between classes or objects, without specifying the final application classes or objects that are involved • GoF Patterns are considered the foundation of all design patterns.
  43. 43. Gang Of Four - GoF
  44. 44. The 23 GoF Design Patterns
  45. 45. Design Patterns - Types • CreationalPatterns These design patterns provide a way to create objects while hiding the creation logic, rather than instantiating objects directly using new operator. This gives program more flexibility in deciding which objects need to be created for a given use case. • Structural Patterns These design patterns concern class and object composition. Concept of inheritance is used to compose interfaces and define ways to compose objects to obtain new functionalities. • Behavioral Patterns These design patterns are specifically concerned with communication between objects.
  46. 46. Design Patterns are NOT • … a finished design that can be transformed directly into source or machine code • … a codesnippet that can be copied into your code.
  47. 47. Brief History Of MVC • 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.
  48. 48. Father Of MVC • TrygveMikkjel HeyerdahlReenskaug (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).
  49. 49. An ExampleProject Case • 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 changes.
  50. 50. However if you used MVC from the start • … you’d notice that some things would have been less painful • … you’d been happier
  51. 51. Benefits of MVC • 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.
  52. 52. MVC Components
  53. 53. Understanding MVC The Model represents your data structure. Typically your model class will contain functions to retrieve, insert, and update information in the datastore
  54. 54. 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"
  55. 55. Understanding MVC The Controller serves as an intermediary between the Model, the View and any other resources needed to process HTTP requests and generate a web page
  56. 56. An easy way to understandMVC • The Modelis the data, • The View is the window on the screen, • And the Controlleris the glue between the two
  57. 57. MVC Interaction
  58. 58. MVC Interaction Sees Updates Manipulates Uses
  59. 59. DEMO 1 – Sample Application
  60. 60. Sample Application
  61. 61. Sample Application – Overview.xsp
  62. 62. Sample Application – hero.xsp
  63. 63. Sample Application Design
  64. 64. Controller - de.eknori.controller.AppController
  65. 65. Controller – How does it work?
  66. 66. faces-config.xml
  67. 67. View Component - Overview.xsp
  68. 68. View Component - Hero.xsp
  69. 69. Model - de.eknori.model.Overview
  70. 70. Model - de.eknori.model.Hero
  71. 71. Data Access Object ( DAO ) • 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 are delegated to DAO. • No other part of the application has direct access to the underlying data store
  72. 72. Data Access Object ( DAO )
  73. 73. Changes - What ManagementWants …
  74. 74. Changes - WhatYouThink …
  75. 75. Changes - WhatYou Need …
  76. 76. Interface - Definition • An interface in the Java programming language is an abstract typethat 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 signatureand constant declarations (variable declarations that are declared to be both static and final).
  77. 77. Create Interface from Existing Class
  78. 78. Create Interface from Existing Class
  79. 79. Create Interface from Existing Class
  80. 80. Create Interface from Existing Class
  81. 81. Needed Changes Designer „automagically“ does the neccessary changes – DaoNsf – Overview
  82. 82. New Class:DaoXml
  83. 83. New Class:DaoXml
  84. 84. XML - DataSource
  85. 85. And Finally … • Depending on which datasource to use, change that one line in your code.
  86. 86. DEMO 2 – Sample Application
  87. 87. Useful Links • Architexa helps you to understand and to document large/complex codebases. • Design Patterns in Java Tutorial • Gang Of Four
  88. 88. Q & A Twitter @eknori Mail
  89. 89. Follow up to the question about beans and managed beans in my sample application. The controller is designed to replace the hero.xsp and overview.xsp with HeroBean and OverviewBean. The bean is then put into the viewScope and can be accessed by using the name "page". This makes it easy to add new objects. people.xsp would be replaced by PeopleBean and it can be accessed by referencing to page.YourMethod(). Using managed beans instead would mean to give each object a separate name and have an additional entry in the faces-config.xml. It is your own decision, which you like more. There is no advantage or disadvantage in doing it my way or using managed beans instead.
  90. 90. Questions???? 14 Use the Orange Arrow button to expand the GoToWebinar panel Then ask your questions in the Questions panel! Remember, we will answer your questions verbally
  91. 91. #XPages @eknori @TLCCLtd @Teamstudio @PaulDNUpcoming Events:  ICON UK, London, England – Sept. 21-22  Connect, Orlando – Jan. 31 to Feb. 3 Question and Answer Time! 15 Teamstudio Questions? 978-712-0924 TLCC Questions? 888-241-8522 or 561-953-0095 Howard Greenberg Paul Della-Nebbia Courtney CarterUlrich Krause Keep in mind: TLCC Fall Sale IBM Champion Nominations are Open