63
Java Rich Internet Application Patterns Daniel Pfeifer, Bruno Schäffer – Canoo

RIA Design Patterns Talk at JAX 07

  • Upload
    danielp

  • View
    2.097

  • Download
    2

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: RIA Design Patterns Talk at JAX 07

Java Rich InternetApplication Patterns Daniel Pfeifer, Bruno Schäffer – Canoo

Page 2: RIA Design Patterns Talk at JAX 07

1

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Overview

• Rich Internet Architectures

• Presentation model

• Component factories

• Validation

• Accessing business logic

Page 3: RIA Design Patterns Talk at JAX 07

2

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

• Company• Based in Basel / Switzerland• About 40 employees & contractors

• Business• Services:

• RIA consulting• Custom Rich Internet & Web application development

• Products:• Java RIA library• Web application testing

Page 4: RIA Design Patterns Talk at JAX 07

3

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Rich Fat

BrowserRich UI Execution Environment

Rich Thin HTML Thin

ClientPresentation

LogicHTMLEngine

PresentationLogic

Business Logic

RIA

Server

PresentationLogic

PresentationLogic

Data Data Data

Business Logic Business Logic Business Logic

Data

Rich UIEngine

Page 5: RIA Design Patterns Talk at JAX 07

4

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

RIA – User Interaction Patterns

• Master / Detail view, two panel selector

• Instant enabling / disabling, responsive disclosure

• Type lookahead

• Instant validation (syntactical / semantic)

• Silent error handling

• Drag & Drop

• Multiple (synchronized) windows /views

Page 6: RIA Design Patterns Talk at JAX 07

5

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

GUI-Component

View Controller

Model

Model-View-Controller

data

chan

ge

data access

events

update

notification

PresentationModel

Model

Model-PresentationModel-View-Controller

GUI-Component

View Controller

state

chan

ge

state accessevents

update

notifi

catio

n

dataaccess / changenotification

Separation of Concerns

Page 7: RIA Design Patterns Talk at JAX 07

6

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Presentation Models

• Typical structure of GUI libraries:• Trees of component objects represent GUI• Event notification to react to user activity• E.g. GWT, SWT, Swing, ULC, ...

• Typical software layering:

• This simple layering does not support modular GUI building• Presentation models help

Presentation Logic

Business Logic

Page 8: RIA Design Patterns Talk at JAX 07

7

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Qualities of Complex GUIs (1)

• Hierarchical component structures

• Hierarchy contains so-called application components (ACs)• Application-related, coarse-grained GUI elements• Consist of base components from GUI library• GUI developers invest in ACs

• 1 AC ≅ 1 public (outer) class • Useful granularity for task assignments in team

Page 9: RIA Design Patterns Talk at JAX 07

8

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: ACs of the Online Shop

Page 10: RIA Design Patterns Talk at JAX 07

9

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACApplication

Example: ACs of the Online Shop

Page 11: RIA Design Patterns Talk at JAX 07

10

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACUndo / Redo

Example: ACs of the Online Shop

Page 12: RIA Design Patterns Talk at JAX 07

11

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACWorkspace

Example: ACs of the Online Shop

Page 13: RIA Design Patterns Talk at JAX 07

12

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACProductCatalog

Example: ACs of the Online Shop

Page 14: RIA Design Patterns Talk at JAX 07

13

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACProduct

List

Example: ACs of the Online Shop

Page 15: RIA Design Patterns Talk at JAX 07

14

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACProductDetails

Example: ACs of the Online Shop

Page 16: RIA Design Patterns Talk at JAX 07

15

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

ACShopping

Cart

Example: ACs of the Online Shop

Page 17: RIA Design Patterns Talk at JAX 07

16

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Resulting AC Tree

Application

Undo / Redo Workspace

Product Catalog Product List Product Details Shopping Cart

Page 18: RIA Design Patterns Talk at JAX 07

17

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Qualities of Complex GUIs (2)

• GUIs allow for redundant access to system parts• Different ACs display shared state

• The MVC pattern synchronizes ACs• Common state is represented by a separate object – the model• ACs trigger and observe model changes

and update themselves accordingly

Page 19: RIA Design Patterns Talk at JAX 07

18

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Demo: Example of Shared AC State

Page 20: RIA Design Patterns Talk at JAX 07

19

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Issues with Pure MVC

• MVC only applied to special GUI components (e.g. tables)• Model represents business state

• Presentation state not modelled

• Models and ACs get mixed up• E.g.: AC Product List must reference AC Product Catalog in order

to access the selected categories

• Result: ACs are not decoupled• E.g.: AC Product List cannot be developed / tested / used

without AC Product Catalog

Page 21: RIA Design Patterns Talk at JAX 07

20

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Solution: The Presentation Model

• Idea: Fully apply MVC to every single AC!• Leads to the presentation model as a separate software layer

• But:• How to structure a

related model?• What states to store

in a model?• What further model qualities?• How to structure ACs then?• What framework support

is useful and necessary?

PresentationModel

Model

View ControllerGUILayer

PresentationModelLayer

Business LogicLayer

Page 22: RIA Design Patterns Talk at JAX 07

21

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Structure of Presentation Models

• ACs form trees• A root corresponds to a desktop window

• All (relevant) state of an AC is kept in a single model (instance), but• Models may share referenced submodels

• Presentation model instances form a directed acyclic graph (DAG)• Unique mapping from AC nodes to model graph nodes

(typcically not injective or surjective)

Page 23: RIA Design Patterns Talk at JAX 07

22

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: AC Tree (for Online Shop)

Application

Undo / Redo Workspace

Product Catalog Product List Product Details Shopping Cart

Page 24: RIA Design Patterns Talk at JAX 07

23

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Application

Undo / Redo Workspace

Product Catalog Product List Product Details Shopping CartCatalog Model

Category Selection Model

Product List Model

Product Selection Model

Workspace ModelUndo / Redo Model

Application Model

Product Details Model

.........

Example: AC Tree + Model Graph

Page 25: RIA Design Patterns Talk at JAX 07

24

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Model Graph Only

In reality:• 9 AC classes• 14 model classes

Catalog Model

Category Selection Model

Product List Model

Product Selection Model

Workspace ModelUndo / Redo Model

Application Model

Product Details Model

.........

Page 26: RIA Design Patterns Talk at JAX 07

25

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

States in Presentation Models

• Only mutable GUI states must be reflected, e.g.• A button‘s background color is (typically) immutable• Selection of a check box is (typically) mutable

• Abstracting state model, e.g.• Current windows size is (typically) irrelevant (handled by layout man.)• Selection of check box is relevant

• State representation boils down to• Primitive values for simple GUI states, e.g.

• A boolean for checkbox selection

• Submodel for complex ones, e.g. • For a list of selected elements

Page 27: RIA Design Patterns Talk at JAX 07

26

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Further Qualities of Pres. Models

• Model state must be fully observable• Via event notification

• An AC observes the mapped model and updates itself accordingly (MVC)

• When a model is initially bound to an AC it must synchronize its entire state with the AC• The model triggers a set of events to completely sync the AC

Page 28: RIA Design Patterns Talk at JAX 07

27

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Structure of ACs

• AC obtains the mapped model at construction time

• ACs implement 3 parts:• Code to build its GUI subtree from base components• Controller to propagate base component changes to the

presentation model • Controller to propagate model changes to base components

• Two-way state update between an AC and its model

Page 29: RIA Design Patterns Talk at JAX 07

28

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Two-Way Update

CategorySelection Model

PCsPC AccessoriesWorkstations

Page 30: RIA Design Patterns Talk at JAX 07

29

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Two-Way Update

CategorySelection Model

PCsPC AccessoriesWorkstations

Page 31: RIA Design Patterns Talk at JAX 07

30

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Click!Click!

Example: Two-Way Update

CategorySelection Model

PCsPC AccessoriesWorkstations

Page 32: RIA Design Patterns Talk at JAX 07

31

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Two-Way Update

CategorySelection Model

PCsPC AccessoriesWorkstations

Page 33: RIA Design Patterns Talk at JAX 07

32

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Controller 1 updates selection model

Example: Two-Way Update

CategorySelection Model

PCsPC AccessoriesWorkstations

Page 34: RIA Design Patterns Talk at JAX 07

33

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Two-Way Update

CategorySelection Model

Entry Servers -19‘‘

Page 35: RIA Design Patterns Talk at JAX 07

34

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Controller 2 updates dependent ACs

Example: Two-Way Update

CategorySelection Model

Entry Servers -19‘‘

Page 36: RIA Design Patterns Talk at JAX 07

35

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Example: Two-Way Update

CategorySelection Model

Entry Servers -19‘‘

Page 37: RIA Design Patterns Talk at JAX 07

36

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Framework Support

• A framework is useful!• Templates for model structures:

• To ease / standardize implementation of models• Abstract super classes / interfaces for models• List models, undo / redo models, ...

• Templates for ACs• Abstract classes with standard functionality supporting

• I18N• Factory methods for base components• Factory methods for controllers

Page 38: RIA Design Patterns Talk at JAX 07

37

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Pros & Cons for Developers

• Cons: • Extra work for designing / implementing presentation layer• Extra work for additional controllers

• Pros:• ACs can be implemented / tested / used independently• Very uniform GUI code eases team work and maintenance• Undo / redo almost for free• Dynamic locale changes very easy (via locale model)• Easier to exchange GUI library• Potentially cleaner business layer

Page 39: RIA Design Patterns Talk at JAX 07

38

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

GUI Layer

Business Layer

Presentation Model LayerJunit Tests:Pres. Models +

Business Objects

Jemmy / Webtest :AC + Model

Improved Testability

• Independent testability of ACs and models• Freely choose width of test (according to granularity of ACs)• Test a lot without GUI (less Jemmy and Webtest)• Test a lot without DB layer (dummy models or business objs.)

Page 40: RIA Design Patterns Talk at JAX 07

39

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

What Else Do We Need?

• GUI component creation

• User input validation

• Interacting with business logic

Page 41: RIA Design Patterns Talk at JAX 07

40

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

• Form components don’t map well to GUI components

• GUI components are still too low-level• Consistency is hard to achieve• Changes are a nightmare

Label Text Field (restricted to integer 1-9999, format: ###0)

Error LabelText Field (read only)

Tooltip

Component Factories

Page 42: RIA Design Patterns Talk at JAX 07

41

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Component Factories

• Component factories can help a lot• Factorize guy creation code• Two levels:

• Domain independent factory, e.g. createDateField()• Domain specific factory, e.g. createCustomerIdField()

• Keeping consistency is way easier• Global changes are a breeze• Builder pattern emulates optional parameters

Page 43: RIA Design Patterns Talk at JAX 07

42

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Validation

• Syntactic validation• Can be handled by• Component component factory configures component• Formatter value objects• Example

• Date: correct format and data according to the Gregorian calendar

• Semantic validation• A lot more challenging!

Page 44: RIA Design Patterns Talk at JAX 07

43

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

• RIAs feature extensive semantic validation in the GUI• Examples

• Challenges• Semantic validation is intrinsic to the business logic layer• Duplication of validation logic in presentation layer is expensive• Delegating validation to the business logic layer is costly• Semantic validation in the GUI needs subset but more• How to communicate validation errors?• Validation for RIA is both on the attribute and object level

Semantic Validation

Page 45: RIA Design Patterns Talk at JAX 07

44

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Semantic Validation

• How to factorize semantic validation?• Business object validates itself

• Is business object available in presentation layer?• Might only be a data transfer object

• Validation class (e.g. Spring validator)• Descriptive validation (e.g. commons validator)• Rule-based validation

• Referential validation best done in the business layer• Requires service access• Can only be done in the presentation layer for small data sets

• Validation method allows to specify attribute to be validated

Page 46: RIA Design Patterns Talk at JAX 07

45

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Semantic Validation

• How to communicate validation errors?

• Exceptions• Validation errors can be modelled by the exception• Flexibility to catch the validation error along the call stack• Any property setter can just throw the exception• Are exceptions the right way to signal common events?

• Error objects• Error object accumulates all validation errors• Must be passed as an additional parameter to the validator• Direct caller must handle it or pass it on

Page 47: RIA Design Patterns Talk at JAX 07

46

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Accessing Business Logic

• Kind of object the presentation logic should work with?• Business objects?• Data transfer objecs?

• Business object model vs. services?

• Service granularity?

Page 48: RIA Design Patterns Talk at JAX 07

47

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Business Objects

• Pros• No need to define data container for presentation logic• Reuse validation logic

• Cons• Extends transaction context into presentation layer

• Detach objects from the DB!

• Lack of encapsulation• Reveals more business logic than is needed

• Transparent lazy loading might be error-prone• Error-prone (if references are resolved in a detached object)• Navigational access might lead to unintended lazy loading

• Must ensure that all required objects are loaded

Page 49: RIA Design Patterns Talk at JAX 07

48

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Data Transfer Objects

• Pros• Decouples from business logic• Deals with incomplete object graphs

• Cons• DTOs are dumb (e.g. no validation)• DTOs have to be implemented / generated / maintained• DTOs implemented as maps

• More convenient to implement and maintain• Less convenient to access and loss of type safety

Page 50: RIA Design Patterns Talk at JAX 07

49

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Service Data Objects

• Addresses common problems of service data

• Disconnected data graphs• Logging changes to the data graph• Generic and statically typed access to properties• Metadata available• Frameworks and tools included• Independent of environment (programming language)

Page 51: RIA Design Patterns Talk at JAX 07

50

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Client

Server

UI Rendering

BusinessLogic

PresentationLogic

Presentation Data

Business Data

Client

Server

Business Data

BusinessLogic

PresentationLogic

UI Rendering

Service Granularity

Page 52: RIA Design Patterns Talk at JAX 07

51

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Service Granularity

• Rich Internet Applications • Need more frequent access to data

• Validation, interaction patterns such as drill down

• Remote clients cannot afford to transfer lots of data

• Coarse granularity promotes reusability

• Solutions:• Implement adapter services tailored to presentation needs• Generic DTOs & filter

Page 53: RIA Design Patterns Talk at JAX 07

52

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Business Service – Caching

• Rich Internet Applications• Need more frequent access to data

• Validation, interaction patterns such as drill down, master-detail

• Try to avoid displaying stale data

• Server-side caching• More useful for server-side presentation logic• Easier to avoid stale data• Cache can be shared

• Client-side caching• Stale data can hardly be avoided• More cache memory available

Page 54: RIA Design Patterns Talk at JAX 07

53

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Handling Service Data

• Service data format may be inconvenient• String is very common for all sorts of types• Different services may return different formats for the same

type (even in the same company!)

• Consider using value objects• Fundamental abstractions in a business domain• Examples: monetary amount, account number, entry date

Page 55: RIA Design Patterns Talk at JAX 07

54

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Value Objects

• Key properties:• Values are abstractions of a problem domain• Values have no lifecycle• Values have no alterable state• Values are referentially transparent (i.e. no side effects)

• Implementation:• Internal representation (logical or canonical format)• Deals with invalid and unknown values• Implements getValue(), toString(), equals(), hashCode(), isValid()• Factory method and private constructor

Page 56: RIA Design Patterns Talk at JAX 07

55

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Infrastructure for Value Objects

• Formatter• Formats value object (according to locale)• Validates (incomplete) string syntactically• Parses string and converts it to logical format

• Converter• Converts proprietary format to logical format and vice versa• Used for service data which does not conform

to the logical format.

Page 57: RIA Design Patterns Talk at JAX 07

56

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Summary

• POWAs (Plain Old Web Applications)• Easy on developers but a hassle for users• Server-side presentation layer simplifies a lot

• RIAs• A lot more challenging to developers• Presentation model is the pivotal concept• Additional infrastructure required• Partitioning has quite some impact

Page 58: RIA Design Patterns Talk at JAX 07

57

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Resources / Links• Presentation model:

http://www.martinfowler.com/eaaDev/PresentationModel.htmlhttp://http://www.jgoodies.com/articles/patterns-and-binding.pdf

• Service Data Objects:http://www.bea.com/dev2dev/assets/sdo/Next-Gen-Data-Programming-Whitepaper.pdf

• Value Objects:http://www.riehle.org/computer-science/research/2006/plop-2006-value-object.pdf

• Validation:https://validation.dev.java.net/http://http://www.springframework.org/docs/reference/validation.html

Page 59: RIA Design Patterns Talk at JAX 07

Backup Slides

For difficult and mean questions

Page 60: RIA Design Patterns Talk at JAX 07

59

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

Component A

CommonModel

ComponentListener for A

ModelListener for A

Component B

ComponentListener for B

ModelListener for B

1. GUI Event2. Method Call

3. Model Event

3. Model Event

5. GUI Event

4. Method Call

Event Broadcasting Problems and Solutions

• Protectors prevent cyclic event flow• Implemented as dynamic proxies on listener interfaces

Page 61: RIA Design Patterns Talk at JAX 07

60

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

public interface Model {// Common environment for all models:public ModelContext getModelContext(); // Basic enabling of being observable:public void addPropertyChangeListener(String propertyName,

PropertyChangeListener listener);public void addPropertyChangeListener(PropertyChangeListener listener);public void removePropertyChangeListener(String propertyName,

PropertyChangeListener listener);public void removePropertyChangeListener(PropertyChangeListener listener);// To visit model graph (required for synchronization):public void visit(ModelVisitor modelVisitor);// To initially synchronize dependend Acs:public void synchronize();...

}

The Model Interface

Page 62: RIA Design Patterns Talk at JAX 07

61

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

public class SimpleModel extends GenericPropertyModel {public static final String MY_FLAG_PROPERTY = "myFlag";

public SimpleModel(ModelContext modelContext) {super(modelContext);defineProperty(MY_FLAG_PROPERTY, boolean.class);

}

public boolean isMyFlag() {return (Boolean)getProperty(MY_FLAG_PROPERTY);

}

public void setMyFlag(boolean value) {setProperty(MY_FLAG_PROPERTY, value);

}}

Pres. Model Code Sample

• A model with a single boolean state• Observation and synchronization feature covered in super class

Page 63: RIA Design Patterns Talk at JAX 07

62

Java Rich Internet Application PatternsDaniel Pfeifer, Bruno Schäffer – Canoo

public class SimpleAK extends ModeledJComponent<SimpleModel> {private JCheckBox checkBox;

public SimpleAK(SimpleModel model) {super(model);

}

protected JComponent createComponent(SimpleModel model, ...) {return checkBox = new JCheckBox("My Flag");

}

protected void createComponentChangeListeners(final SimpleModel model, ...) {checkBox.addChangeListener(new ChangeListener() {

public void stateChanged(ChangeEvent e) {model.setMyFlag(checkBox.isSelected());

}});

}

protected void createModelChangeListeners(SimpleModel model, ...) {model.addPropertyChangeListener(new PropertyChangeListener() {

public void propertyChange(PropertyChangeEvent evt) {checkBox.setSelected((Boolean)evt.getNewValue());

}});

}}

Code Sample: Associate AC