SlideShare a Scribd company logo
1 of 38
Presentation Patterns
        In ZK
     Simon Massey
   (Revised Q2 2012)
Introduction

First version of this presentation was given to the
  2010 UK ZK Users Group
The "ZK ToDo 2" patterns sample code is in the
 zkforge project svn repository github.com
Sample code has the same screen implimented
 three times; as MVP, MVC and MVVM (MVB)
Published articles document the MVP and MVC
 versions. Article coming soon about MVVM...
See references at the end
Overview

Why Patterns?
Patterns recap of View and Model
Model, View, Who? The third part
Best practices for each layer
Why Patterns? Evolving Software
A business sponsor talks about the screens but
 requires a flexible business solution
Screens are likely to change all the way through
 to go-live and well beyond
Features evolve slowly over time whilst the
 screens can change drastically
Can you easily reskin / re-layout / rearrange your
 app to freshen your user experience?
Making flexible and adaptable solutions is more
 rewarding than making brittle apps
Why Patterns? A Challenge!




Reuse a "buy now" feature of your website in an
 iphone app (as XML over HTTP)
This requires separation of View from Model
Programming In The View
                                        Business state stored in
                                                 view

<label id=”hiddenBookId” value=”${book.id}” visible=”false”/>
<button label=”Buy Book”>
                  View knows 'who' and
    <attribute name=”onClick”><![CDATA[
                         'how'
    MyDao myDao = … ; // get daoand render mixed
                         Update via jndi
    myDao.buyBook(user.id, hiddenBookId.value);
    statusLabel.value = ”Thanks! Buy another book?”;
    ]]></attribute>
</button>
<label id=”statusLabel” value=””/>
Avoid Coding In The View

"Separated Presentation” is a core pattern
Presentation is incidental to what the customer is
 logically doing which is the Use Case / User
 Story (e.g. "customer buys book")
The presentation changes fast and often so
 separate it out from the business logic
Junit testing of the presentation is tricky
Business logic within the View stunts the
 flexibility of your software design
The Triumvirate


        View




Model           who?
Micro vs. Macro

Much of the literature about MVC describes the
 fine grained "micro-MVC" used to implement
 graphical components such as Swing/JSF
When reading articles it helps to think "Is this
 micro-MVC or macro-MVC?"
This century we tend to pick a winning UI
 component framework (ZK!) and focus on
 "macro-MVC" for complex business screens
This presentation talks about the macro world
 unless explicitly stated
The View


          View




Model              who?
View Best Practices

"ZK Desktop == View" so mixing Java business
  logic into ZK code is mixing business logic into
  the View
View components should not become business
  components:
  BuyNowButton extends Button // avoid!
The View should observe the Model using the
 databinder (more on this later):
  org.zkoss.zkplus.databind.AnnotateDataBinder
View Has Micro Models
A BindingModel is an "push through" to update
 the View. Writing to it updates the bound View
These micro models are not business domain
 models which organise application features
ListModelList is binding model class for Listbox
  listModelList = (ListModelList)listbox.getModel();
AnnotateDataBinder uses such micro-models as
 part of its logic to sync data into the View
Intbox and Datebox have "value" property as
  micro-Model as well as "visible" and "disabled"
ZK Micro-Model == View

Listbox                       Composer



      ListModelList
              (view layer)




 Collection<Book> books
          (business domain layer)
The Business Domain (Macro) Model


              View




     Model            who?
Model Best Practices
The Business Domain Model should have no
 compile time dependencies to the presentation
 framework
EL and AnnotateDataBinder should load data
 from the Model into the View (avoid coding)
Ideally the Model should be a rich Domain Model
  have both behaviour as well as state
Beware designs of proceedural code loading and
 saving DTOs as this is weak OO
Try test driven development of encapsulated
  layers ("POJOs In Action" book)
The Other Bit...


        View




Model            who?
Alphabet Soup

MVC: Model-View-Controller
  Often cited but do we really know it as well as we
   believe?
MVP: Model-View-Presenter
  A specialism of MVC with a dominant controller
MVVM: Model-View-ViewModel
  The Microsoft WPF pattern of the Application Model
   but how do we use it with ZK?
MVB: Model-View-Binder
  A clearer moniker for "MVVM" with ZK
MVC Has Many Interpretations
Martin Fowler:
  Different people reading about MVC in different
   places take different ideas from it and describe
   these as 'MVC'.
Anon on c2.com:
  Stuff nearest the User becomes the View, stuff
    nearest the database becomes the Model, stuff in
    between becomes the Controller. Marketects then
    refer to their project's architecture as "MVC",
    borrowing that acronym's impressive lineage(!!!)
Controller Of What?


        View
   ?              ?



Model     ?    Controller
The Controller Revisited

Typically org.zkoss.zk.ui.util.Composer but what
 are it's responsibilities?
Does Controller read/write the Model? Yes
Does Controller read/write the View? Perhaps
Does View read/write the Model? Possibly
Is separation of behaviour (Controller) from state
  (Model) the only game in town? No
Is databinding with AnnotateDataBinder part
  View, part Controller, or a separate thing?
Model-View-ZKComposer
org.zkoss.zk.ui.util.Composer usually used as the
  3rd part of the pattern
Whether it is a Controller or a Presenter depends
 on the interactions with View and Model:
  Presenter – pushes to Passive View
  Controller – updates a model observed by the View
   ("Supervising Controller")
Any mix or match of the above will be called
 MVC. People say "traditional MVC" to mean
 View observes the Model updated by Controller
Model-View-Presenter
                       Legend

                    compiles to
        View
                       events




Model          Presenter
Model-View-Presenter

The View is the fully owned by the Presenter
ZkToDoControllerV1 implements Composer
Pushes all updates into the Passive View
ZkToDoControllerV1 implements ListitemRender

Presenter reacts to View Event notifications and
 updates the Model
ZkToDo2 app example zktodo2_a.zul
For code write-up google "Massey Small Talks/2008/
 November/ZK "
Model-View-Controller
                        Legend

                     compiles to
        View
                        bindings

                         events




Model          Controller
Enter The Binder

View observes the state of the Model using
  databinding
<?init class=”org.zkoss.....AnnotateDataBinderInit”?>
Uses EL annotations within the ZUL page
   <textbox value=”@{person.firstname}”/>
The @{pojo.property} annotations automatically
 reads/write your POJOs (no UI event handling
 code required as ZK Binder does the work
 automatically!)
Google "site:dzone.com mvc zk massey"
Controller Best Practices
Aim to have the Controller and View not
  communicate with one another. Let the binder
  to the work
Have the binder pull the data from the Model with
 load hints rather than having the composer
 push data into the view model
  <textbox value=”@{person.firstname,
   load-after='buyButton.onClick'}”/>
zktodo2_b.zul example should have used
 more 'load-after' hints and less Java code (see
 weather-station-mvvm.zul)
Model-View-ViewModel

ViewModel (Microsoft) is similar to an
  ApplicationModel (Smalltalk)
Binder syncs application state into the View
Binder maps View Events onto application
  methods (ICommand types in .Net C#)
Gather both state and behaviour into one
 application model (stronger OO design)
Binder is part of the View world. The application
  model is its model: so called it a "ViewModel"
ViewModel Nirvāna

Josh Smith (msdn.microsoft.com):
"ViewModel classes are easy to unit test … Views and
  unit tests are just two different types of ViewModel
  consumers"
"ViewModel classes can assist in properly designing
  user interfaces that are easy to skin"
"It is easy to just rip one view out and drop in a new view
   to render a ViewModel"
It's all about the Binder. The name Model-View-
   Binder (MVB) highlights the key part
Model-View-Binder (Simplified)
                             Legend
             View            compiles to

                              updates

            Binder             loads


           <<reflection>>



      Application Model
     (has internal layers)
Model-View-Binder

      View
     Binder

    <<reflection>>
                      Legend
   ViewModel         compiles to

                     command

  DomainModel           load
Model-View-ZKBind

Components are bound to ViewModel by the
 Binder:
 <listcell label="@load(reminder.name)"/>

UI Events are dispatched to ViewModel methods
 by the Binder:
      <button label="Save" onClick="@command('save')"/
 >

ViewModel has annotations to inform Binder of
  any properties changed under the covers
     @NotifyChange({"reminders","selectedReminder"})
     public void save() { … }
MVB/MVVM Best Practices

View Model has no references to View Objects
  only @Command and @NotifyChange annotations
Create ViewModel classes which are "naked
 screens" onto which you overlay a zul skin
ViewModel is the Mediator of the Binder to the
  Model; it orchestrates the services
Use Dependency Injection of service interfaces
 into the View Mode
ViewModel uses application services to get
  detached entites which it exposes to the Binder
Summary

Presentation patterns are all about modelling the
 features of our application independently of the
 frequently changing screens
MVC, MVP, MVVM all have in common a
 separated view
Modelling of the Model will lead to internal layers
Labels such as "ViewModel" or "DataModel" or
 "ApplicationModel" are suggestions as to what
 is trying to be organised where
Summary (Cont 1)

"B" is for Binder which plays a big part in MVC
  and major part of MVVM patterns. There is no
  "B" required for MVP
The Microsoft Binder is powerful and a core part
 of their framework. They invented MVVM as the
 best practice to organise a screen Model to
 leverage their Binder
MVB is a moniker that names the new power in
 modern Separated View patterns: long live the
 Binder!
Summary (Cont 2)

ZK has a mature AnnotateDataBinder for rendering
 POJO data values and state (visible/disabled) into ZK
 AJAX RIA Desktop Components
The binding information is embedded into the Page
  (View) as "XML annotations"
Add ZKToDo2 CommandBinder to fire application
 methods on the ViewModel
ViewModel has no compile time dependencies on ZK
  framework; can heavily junit with mock services
Using MVVM / MVB pattern is simply about getting the
 most out of the framework Binder
Summary (Cont 3)

ZkToDo patterns demo code implements the
 same screen in each of MVP (zktodo_a.zul),
 MVC (zktodo_b.zul) and MVVM (zktodo_e.zul)
References

MVC article Desktop MVC Patterns ZK, Spring & JPA
Original MVP article
 SmallTalks 2008 Best MVC Patterns
Book on how to build a layered domain model with
 Spring POJOs In Action
ZK MVC Screen for POJOs In Action book code
 Test Driving ZK FoodToGo
Book on designing ”domain objects first” for supple code
 Evans Domain Driven Design
Martin Fowler GUI Patterns pages UI Architectures
Josh Smith's inspirational Microsoft .Net MVVM Article
Corrections

March 2012: Slide 13 had totally miss attributed Fowler where I
 was using the term "Presentation Model" to mean something
 totally different. Edited to call my concept "BindingModel"
March 212: Slide 21 had miss labelled Passive View as
 Supervising Controller

More Related Content

Viewers also liked

안드로이드 개발자를 위한 스위프트
안드로이드 개발자를 위한 스위프트안드로이드 개발자를 위한 스위프트
안드로이드 개발자를 위한 스위프트병한 유
 
Non-Verbal Communication in Organizations- ZK
Non-Verbal Communication in Organizations- ZKNon-Verbal Communication in Organizations- ZK
Non-Verbal Communication in Organizations- ZKZareen Khan
 
Multi-tenancy in Java
Multi-tenancy in JavaMulti-tenancy in Java
Multi-tenancy in Javaseges
 

Viewers also liked (6)

ZK framework
ZK frameworkZK framework
ZK framework
 
Huong dan dung index_oracle
Huong dan dung index_oracleHuong dan dung index_oracle
Huong dan dung index_oracle
 
안드로이드 개발자를 위한 스위프트
안드로이드 개발자를 위한 스위프트안드로이드 개발자를 위한 스위프트
안드로이드 개발자를 위한 스위프트
 
Non-Verbal Communication in Organizations- ZK
Non-Verbal Communication in Organizations- ZKNon-Verbal Communication in Organizations- ZK
Non-Verbal Communication in Organizations- ZK
 
Multi-tenancy in Java
Multi-tenancy in JavaMulti-tenancy in Java
Multi-tenancy in Java
 
Evaluación de ZK
Evaluación de ZKEvaluación de ZK
Evaluación de ZK
 

Similar to Design Patterns in ZK: Java MVVM as Model-View-Binder

MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009Jonas Follesø
 
Stephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep DiveStephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep DiveMicrosoftFeed
 
SUE AGILE MVVM (English)
SUE AGILE MVVM (English)SUE AGILE MVVM (English)
SUE AGILE MVVM (English)Sabino Labarile
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!Roberto Messora
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecturebitburner93
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobilenaral
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applicationsDivyanshGupta922023
 
Introduction to Knockout Js
Introduction to Knockout JsIntroduction to Knockout Js
Introduction to Knockout JsKnoldus Inc.
 
MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )Ahmed Emad
 
Building Web Application Using Spring Framework
Building Web Application Using Spring FrameworkBuilding Web Application Using Spring Framework
Building Web Application Using Spring FrameworkEdureka!
 
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSSoftware architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSJinkyu Kim
 
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC StructureDipika Wadhvani
 
Model View Madness
Model View MadnessModel View Madness
Model View MadnessMike Wilcox
 
MVVM presentation
MVVM presentationMVVM presentation
MVVM presentationInova LLC
 

Similar to Design Patterns in ZK: Java MVVM as Model-View-Binder (20)

MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009MVVM Design Pattern NDC2009
MVVM Design Pattern NDC2009
 
Stephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep DiveStephen Kennedy Silverlight 3 Deep Dive
Stephen Kennedy Silverlight 3 Deep Dive
 
SUE AGILE MVVM (English)
SUE AGILE MVVM (English)SUE AGILE MVVM (English)
SUE AGILE MVVM (English)
 
MVC & backbone.js
MVC & backbone.jsMVC & backbone.js
MVC & backbone.js
 
Fundaments of Knockout js
Fundaments of Knockout jsFundaments of Knockout js
Fundaments of Knockout js
 
MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!MV* presentation frameworks in Javascript: en garde, pret, allez!
MV* presentation frameworks in Javascript: en garde, pret, allez!
 
Code Camp 06 Model View Presenter Architecture
Code Camp 06   Model View Presenter ArchitectureCode Camp 06   Model View Presenter Architecture
Code Camp 06 Model View Presenter Architecture
 
MVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,MobileMVC(Model View Controller),Web,Enterprise,Mobile
MVC(Model View Controller),Web,Enterprise,Mobile
 
MVC in PHP
MVC in PHPMVC in PHP
MVC in PHP
 
jquery summit presentation for large scale javascript applications
jquery summit  presentation for large scale javascript applicationsjquery summit  presentation for large scale javascript applications
jquery summit presentation for large scale javascript applications
 
Introduction to Knockout Js
Introduction to Knockout JsIntroduction to Knockout Js
Introduction to Knockout Js
 
MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )MVVM ( Model View ViewModel )
MVVM ( Model View ViewModel )
 
IntroductionToMVC
IntroductionToMVCIntroductionToMVC
IntroductionToMVC
 
Building Web Application Using Spring Framework
Building Web Application Using Spring FrameworkBuilding Web Application Using Spring Framework
Building Web Application Using Spring Framework
 
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOSSoftware architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
Software architectural design patterns(MVC, MVP, MVVM, VIPER) for iOS
 
Ppt of Basic MVC Structure
Ppt of Basic MVC StructurePpt of Basic MVC Structure
Ppt of Basic MVC Structure
 
MVVM Lights
MVVM LightsMVVM Lights
MVVM Lights
 
Model View Madness
Model View MadnessModel View Madness
Model View Madness
 
MVVM - KnockoutJS
MVVM - KnockoutJSMVVM - KnockoutJS
MVVM - KnockoutJS
 
MVVM presentation
MVVM presentationMVVM presentation
MVVM presentation
 

Recently uploaded

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 

Recently uploaded (20)

Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 

Design Patterns in ZK: Java MVVM as Model-View-Binder

  • 1. Presentation Patterns In ZK Simon Massey (Revised Q2 2012)
  • 2. Introduction First version of this presentation was given to the 2010 UK ZK Users Group The "ZK ToDo 2" patterns sample code is in the zkforge project svn repository github.com Sample code has the same screen implimented three times; as MVP, MVC and MVVM (MVB) Published articles document the MVP and MVC versions. Article coming soon about MVVM... See references at the end
  • 3. Overview Why Patterns? Patterns recap of View and Model Model, View, Who? The third part Best practices for each layer
  • 4. Why Patterns? Evolving Software A business sponsor talks about the screens but requires a flexible business solution Screens are likely to change all the way through to go-live and well beyond Features evolve slowly over time whilst the screens can change drastically Can you easily reskin / re-layout / rearrange your app to freshen your user experience? Making flexible and adaptable solutions is more rewarding than making brittle apps
  • 5. Why Patterns? A Challenge! Reuse a "buy now" feature of your website in an iphone app (as XML over HTTP) This requires separation of View from Model
  • 6. Programming In The View Business state stored in view <label id=”hiddenBookId” value=”${book.id}” visible=”false”/> <button label=”Buy Book”> View knows 'who' and <attribute name=”onClick”><![CDATA[ 'how' MyDao myDao = … ; // get daoand render mixed Update via jndi myDao.buyBook(user.id, hiddenBookId.value); statusLabel.value = ”Thanks! Buy another book?”; ]]></attribute> </button> <label id=”statusLabel” value=””/>
  • 7. Avoid Coding In The View "Separated Presentation” is a core pattern Presentation is incidental to what the customer is logically doing which is the Use Case / User Story (e.g. "customer buys book") The presentation changes fast and often so separate it out from the business logic Junit testing of the presentation is tricky Business logic within the View stunts the flexibility of your software design
  • 8. The Triumvirate View Model who?
  • 9. Micro vs. Macro Much of the literature about MVC describes the fine grained "micro-MVC" used to implement graphical components such as Swing/JSF When reading articles it helps to think "Is this micro-MVC or macro-MVC?" This century we tend to pick a winning UI component framework (ZK!) and focus on "macro-MVC" for complex business screens This presentation talks about the macro world unless explicitly stated
  • 10. The View View Model who?
  • 11. View Best Practices "ZK Desktop == View" so mixing Java business logic into ZK code is mixing business logic into the View View components should not become business components: BuyNowButton extends Button // avoid! The View should observe the Model using the databinder (more on this later): org.zkoss.zkplus.databind.AnnotateDataBinder
  • 12. View Has Micro Models A BindingModel is an "push through" to update the View. Writing to it updates the bound View These micro models are not business domain models which organise application features ListModelList is binding model class for Listbox listModelList = (ListModelList)listbox.getModel(); AnnotateDataBinder uses such micro-models as part of its logic to sync data into the View Intbox and Datebox have "value" property as micro-Model as well as "visible" and "disabled"
  • 13. ZK Micro-Model == View Listbox Composer ListModelList (view layer) Collection<Book> books (business domain layer)
  • 14. The Business Domain (Macro) Model View Model who?
  • 15. Model Best Practices The Business Domain Model should have no compile time dependencies to the presentation framework EL and AnnotateDataBinder should load data from the Model into the View (avoid coding) Ideally the Model should be a rich Domain Model have both behaviour as well as state Beware designs of proceedural code loading and saving DTOs as this is weak OO Try test driven development of encapsulated layers ("POJOs In Action" book)
  • 16. The Other Bit... View Model who?
  • 17. Alphabet Soup MVC: Model-View-Controller Often cited but do we really know it as well as we believe? MVP: Model-View-Presenter A specialism of MVC with a dominant controller MVVM: Model-View-ViewModel The Microsoft WPF pattern of the Application Model but how do we use it with ZK? MVB: Model-View-Binder A clearer moniker for "MVVM" with ZK
  • 18. MVC Has Many Interpretations Martin Fowler: Different people reading about MVC in different places take different ideas from it and describe these as 'MVC'. Anon on c2.com: Stuff nearest the User becomes the View, stuff nearest the database becomes the Model, stuff in between becomes the Controller. Marketects then refer to their project's architecture as "MVC", borrowing that acronym's impressive lineage(!!!)
  • 19. Controller Of What? View ? ? Model ? Controller
  • 20. The Controller Revisited Typically org.zkoss.zk.ui.util.Composer but what are it's responsibilities? Does Controller read/write the Model? Yes Does Controller read/write the View? Perhaps Does View read/write the Model? Possibly Is separation of behaviour (Controller) from state (Model) the only game in town? No Is databinding with AnnotateDataBinder part View, part Controller, or a separate thing?
  • 21. Model-View-ZKComposer org.zkoss.zk.ui.util.Composer usually used as the 3rd part of the pattern Whether it is a Controller or a Presenter depends on the interactions with View and Model: Presenter – pushes to Passive View Controller – updates a model observed by the View ("Supervising Controller") Any mix or match of the above will be called MVC. People say "traditional MVC" to mean View observes the Model updated by Controller
  • 22. Model-View-Presenter Legend compiles to View events Model Presenter
  • 23. Model-View-Presenter The View is the fully owned by the Presenter ZkToDoControllerV1 implements Composer Pushes all updates into the Passive View ZkToDoControllerV1 implements ListitemRender Presenter reacts to View Event notifications and updates the Model ZkToDo2 app example zktodo2_a.zul For code write-up google "Massey Small Talks/2008/ November/ZK "
  • 24. Model-View-Controller Legend compiles to View bindings events Model Controller
  • 25. Enter The Binder View observes the state of the Model using databinding <?init class=”org.zkoss.....AnnotateDataBinderInit”?> Uses EL annotations within the ZUL page <textbox value=”@{person.firstname}”/> The @{pojo.property} annotations automatically reads/write your POJOs (no UI event handling code required as ZK Binder does the work automatically!) Google "site:dzone.com mvc zk massey"
  • 26. Controller Best Practices Aim to have the Controller and View not communicate with one another. Let the binder to the work Have the binder pull the data from the Model with load hints rather than having the composer push data into the view model <textbox value=”@{person.firstname, load-after='buyButton.onClick'}”/> zktodo2_b.zul example should have used more 'load-after' hints and less Java code (see weather-station-mvvm.zul)
  • 27. Model-View-ViewModel ViewModel (Microsoft) is similar to an ApplicationModel (Smalltalk) Binder syncs application state into the View Binder maps View Events onto application methods (ICommand types in .Net C#) Gather both state and behaviour into one application model (stronger OO design) Binder is part of the View world. The application model is its model: so called it a "ViewModel"
  • 28. ViewModel Nirvāna Josh Smith (msdn.microsoft.com): "ViewModel classes are easy to unit test … Views and unit tests are just two different types of ViewModel consumers" "ViewModel classes can assist in properly designing user interfaces that are easy to skin" "It is easy to just rip one view out and drop in a new view to render a ViewModel" It's all about the Binder. The name Model-View- Binder (MVB) highlights the key part
  • 29. Model-View-Binder (Simplified) Legend View compiles to updates Binder loads <<reflection>> Application Model (has internal layers)
  • 30. Model-View-Binder View Binder <<reflection>> Legend ViewModel compiles to command DomainModel load
  • 31. Model-View-ZKBind Components are bound to ViewModel by the Binder: <listcell label="@load(reminder.name)"/> UI Events are dispatched to ViewModel methods by the Binder: <button label="Save" onClick="@command('save')"/ > ViewModel has annotations to inform Binder of any properties changed under the covers @NotifyChange({"reminders","selectedReminder"}) public void save() { … }
  • 32. MVB/MVVM Best Practices View Model has no references to View Objects only @Command and @NotifyChange annotations Create ViewModel classes which are "naked screens" onto which you overlay a zul skin ViewModel is the Mediator of the Binder to the Model; it orchestrates the services Use Dependency Injection of service interfaces into the View Mode ViewModel uses application services to get detached entites which it exposes to the Binder
  • 33. Summary Presentation patterns are all about modelling the features of our application independently of the frequently changing screens MVC, MVP, MVVM all have in common a separated view Modelling of the Model will lead to internal layers Labels such as "ViewModel" or "DataModel" or "ApplicationModel" are suggestions as to what is trying to be organised where
  • 34. Summary (Cont 1) "B" is for Binder which plays a big part in MVC and major part of MVVM patterns. There is no "B" required for MVP The Microsoft Binder is powerful and a core part of their framework. They invented MVVM as the best practice to organise a screen Model to leverage their Binder MVB is a moniker that names the new power in modern Separated View patterns: long live the Binder!
  • 35. Summary (Cont 2) ZK has a mature AnnotateDataBinder for rendering POJO data values and state (visible/disabled) into ZK AJAX RIA Desktop Components The binding information is embedded into the Page (View) as "XML annotations" Add ZKToDo2 CommandBinder to fire application methods on the ViewModel ViewModel has no compile time dependencies on ZK framework; can heavily junit with mock services Using MVVM / MVB pattern is simply about getting the most out of the framework Binder
  • 36. Summary (Cont 3) ZkToDo patterns demo code implements the same screen in each of MVP (zktodo_a.zul), MVC (zktodo_b.zul) and MVVM (zktodo_e.zul)
  • 37. References MVC article Desktop MVC Patterns ZK, Spring & JPA Original MVP article SmallTalks 2008 Best MVC Patterns Book on how to build a layered domain model with Spring POJOs In Action ZK MVC Screen for POJOs In Action book code Test Driving ZK FoodToGo Book on designing ”domain objects first” for supple code Evans Domain Driven Design Martin Fowler GUI Patterns pages UI Architectures Josh Smith's inspirational Microsoft .Net MVVM Article
  • 38. Corrections March 2012: Slide 13 had totally miss attributed Fowler where I was using the term "Presentation Model" to mean something totally different. Edited to call my concept "BindingModel" March 212: Slide 21 had miss labelled Passive View as Supervising Controller