DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers...

103
DESIGN PATTERNS, PRESENTATION DESIGN PATTERNS, PRESENTATION LAYER OF EAA, Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 1

Transcript of DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers...

Page 1: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DESIGN

PATTERNS,

PRESENTATION

DESIGN PATTERNS,

PRESENTATION LAYER OF EAA,

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 1

Page 2: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DESIGN PATTERNS

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 2

Gang of Four (GOF) Java EE Core EAA

Page 3: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DESIGN PATTERNS

Design and implementation without flaws!

We specifically look into Façade, Observer &

Model-View-Controller

More in optional course A7B36ASS

Summer http://bilakniha.cvut.cz/cs/predmet1469406.html

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 3

Page 4: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FAÇADECZECH

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 4

Page 5: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADEZnámý jako

• Facade, Fasáda

Účel

• sjednocené high-level rozhraní pro subsystém

• zjednodušuje použití subsystému

• zapouzdření – skrytí návrhu před uživateli

Motivace

• zjednodušit komunikaci mezi subsystémy

• zredukovat závislosti mezi subsystémy

• neznemožnit používání low-level interfaců• pro použití „na míru“

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 5

Page 6: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - MOTIVACE

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 6

Page 7: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – MOTIVACE

projektorDVD přehrávač

žaluzie

HI-FI soustava

Puštění filmu:

■zatáhnutí žaluzií

■zapnutí projektoru

■zapnutí DVD

přehrávače

■zapnutí ozvučení

Ukončení přehrávání:

■vypnout DVD

přehrávač

■vypnout ozvučení

■vypnout projektor

■vytáhnout žaluzie

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 7

Page 8: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – MOTIVACE

Řešení:

Univerzální ovladač s funkcemi:

■ Přehrát film

■ Ukončit film

■ Přehrát hudbu

■ Vypnout hudbu

■ …

■ zatáhnout

žaluzie

■ zapnout

projektor

■ zapnout DVD

přehrávač

■ zapnout

ozvučení

■ vypnout DVD

přehrávač

■ vypnout

ozvučení

■ vypnout

projektor

■ vytáhnout

žaluzie

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 8

Page 9: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - MOTIVACE

Příklad

• Compiler

• třídy Scanner, Parser, ProgramNodeBuilder, ..

• Facade poskytuje rozhraní pro práci s kompilátorem na high-level úrovni

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 9

Page 10: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – MOTIVACE

Příklad

• transparentnost – třídy subsystému o Facade nevědí

• svoboda volby- neskrývá třídy subsystému (Parser, Scanner)

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 10

Page 11: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - POUŽITÍ

Použití

• když je subsystém složitý na běžné použití

• když existuje mnoho závislostí vně subsystému

• při vytváření vstupních bodů vrstveného systému

Struktura

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 11

Page 12: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Účastníci

• Facade (kompilátor)

• zná třídy uvnitř subsystému

• deleguje požadavky

• třídy subsystému (Scanner, Parser,...)

• nevědí o existenci Facade

• implementují funkčnost

Souvislosti

• klient se subsystémem komunikuje přes Facade

• Facade předává požadavky dál

• může obsahovat vlastní logiku – překlad požadavků na třídy subsystému

• klienti nemusí používat subsystém přímo

FACADE – POUŽITÍ

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 12

Page 13: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - DŮSLEDKY

Výhody použití

• redukuje počet objektů, se kterými klienti komunikují

• snadnější použití subsystému

• zmenšuje počet závislostí mezi klienty a subsystémem

• odstraňuje komplexní a kruhové závislosti

• méně kompilačních závislostí

• neskrývá třídy subsytému

• klient si může vybrat jednoduchost nebo použití na „míru“

• umožňuje rozšířit stávající funkcionalitu

• kombinací subsystémů a jejich metod

• monitorování systému – přístupy, využívání jednotlivých metod

Kdy se vyplatí facade do systému implementovat

• cena za vytvoření fasády menší než je nastudování podsystému uživateli

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 13

Page 14: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – PŘÍKLAD

class Scanner {

public:

virtual Token& Scan();

};

Třída subsystému

class Parser {

public:

virtual void Parse(Scanner&,ProgramNodeBuilder&);

};

Třída subsystému

class ProgramNodeBuilder {

public:

ProgramNodeBuilder();

virtual ProgramNode* NewVariable(…);

virtual ProgramNode* NewAssignment(…);

virtual ProgramNode* NewReturnStatement(…);

virtual ProgramNode* NewCondition(…) const;

ProgramNode* GetRootNode();

};

Třída subsystému

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 14

Page 15: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - PŘÍKLADclass ProgramNode {

public:

// program node manipulation

virtual void GetSourcePosition(int& line, int& index);

// child manipulation

virtual void Add(ProgramNode*);

virtual void Remove(ProgramNode*);

virtual void Traverse(CodeGenerator&);

protected: ProgramNode();

};

class CodeGenerator {

public:

virtual void Visit(StatementNode*);

virtual void Visit(ExpressionNode*);

protected:

CodeGenerator(BytecodeStream&);

protected:

BytecodeStream& _output;

};

Třída subsystému

Třída subsystémuFACADE – PŘÍKLAD

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 15

Page 16: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - PŘÍKLADvoid ExpressionNode::Traverse (CodeGenerator& cg) {

cg.Visit(this);

ListIterator i(_children);

for (i.First(); !i.IsDone(); i.Next()) {

i.CurrentItem()->Traverse(cg);

}

}

class Compiler {

public:

Compiler();

virtual void Compile(istream&,BytecodeStream&);

};

void Compiler::Compile ( istream& input, BytecodeStream& output )

{

Scanner scanner(input);

ProgramNodeBuilder builder; // Návrhový vzor Builder

Parser parser;

parser.Parse(scanner, builder);

RISCCodeGenerator generator(output); // potomek CodeGenerator

ProgramNode* parseTree = builder.GetRootNode();

parseTree->Traverse(generator);

}

Facade

FACADE – PŘÍKLAD

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 16

Page 17: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – IMPLEMENTACE

Konfigurace fasády

• Facade jako abstraktní třída

• konkrétní implementace subsystému je jejím potomkem

• klienti komunikují se subsystémem přes rozhraní abstraktní třídy

• Ideálně propojit s Dependency Injection

• Facade jako jedna konfigurovatelná třída

• výměna komponent subsystému

Viditelnost komponent subsystému

• Zakomponování kontroly přístupu

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 17

Page 18: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE – REÁLNÉ POUŽITÍ

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 18

Page 19: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

FACADE - PŘÍKLADpublic class HotelBookerImpl implements HotelBooker {

public List<Hotel> getHotelNamesFor(Date from, Date to) {

//returns hotels available in the particular date range

}

}

ServicesFACADE – PŘÍKLAD

public class FlightBookerImpl implements FlightBooker {

public List<Flight> getFlightsFor(Date from, Date to) {

//returns flights available in the particular date range

}

}

public class ServiceFacade {

private HotelBooker hotelBooker; // Dependency Injection

private FlightBooker flightBooker;

public void getFlightsAndHotels(Date from, Data to) {

List<Flight> flights = flightBooker.getFlightsFor(from, to);

List<Hotel> hotels = hotelBooker.getHotelsFor(from, to);

//process and return

}

}

Facade

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 19

Page 20: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

public class Client {

public static void main(String[] args) {

ServiceFacade facade = new ServiceFacade ();

facade.getFlightsAndHotels(from, to);

}

}

Client

FACADE – PŘÍKLAD

Facade

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 20

Page 21: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

V mobilních aplikacích

Session Facade v Java EE

• Fasáda pro webové služby

FACADE – REÁLNÉ POUŽITÍ

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 21

Page 22: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JOptionPane ve Swingu

• vytváří různé typy základních dialogových oken a zobrazuje je

• zjednodušuje používání této rozsáhlé knihovny

FACADE – REÁLNÉ POUŽITÍ

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 22

Page 23: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

V byznys světě

FACADE – REÁLNÉ POUŽITÍ

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 23

Page 24: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 24

Page 25: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER

Smysl

• Zavádí možnost sledování změn u objektu tak, že když objekt

změní stav, ostatní objekty na tuto změnu zareagují, přičemž

nedojde k přímé vazbě (coupling) od sledovaného objektu k

těmto objektům.

Potřeba sledování změn objektu a notifikace

• Událostní řízení – řeší observer

Obdoba systému událostí (Java) vlastními prostředky

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 25

Page 26: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER - MOTIVACE

Při změně dat očekávají oznámení od subjektu, že se mají aktualizovat

Udržuje svůj stav a informuje všechny zájemce o jeho změnách

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 26

Page 27: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER - STRUKTURA

Účastníci

• Subject

• Interface pro udržování seznamu zájemců o upozornění a posílání oznámení

• Observer

• Jednoduchý interface pro přijímání upozornění

• ConcreteSubject

• Má vlastní funkčnost a stav, rozesílá oznámení o jeho změnách

• ConcreteObserver

• Implementuje Observer interface a tak udržuje svůj stav konzistentní se stavem

ConcreteSubject

Page 28: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER - INTERAKCE

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 28

Page 29: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 29

Page 30: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

OBSERVER - PŘÍKLAD

class Class Model

Subject

+ Attach(Observer)

+ Detach(Observer) : Observer

+ Notify() : Observer

for all o in observers {

o->Update(this)

}

Observer

+ Update(Subject*)

ClockTimer

+ GetHour()

+ GetMinute()

+ GetSecond()

+ Tick()

Notify()

DigitalClock

- _subject: ClockTimer*

+ Update(Subject*)

if (theChangedSubject ==

_subject) {

Draw()

}

AnalogClock

- _subject: ClockTimer*

+ Update(Subject*)

if (theChangedSubject ==

_subject) {

Draw()

}

-observers

1..*

-subject

+subject

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 30

Page 31: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

public abstract class Subject {

private List<Observer> observers;

public void attach(Observer o) {

observers.add(o);

}

public void detach(Observer o) {

observers.remove(o);

}

public void notify();

for (Observer o : observers) {

o.update()

}

};

PŘÍKLAD - ABSTRAKTNÍ TŘÍDY

public abstract class Observer {

public update();

};

abstraktní třídy,

definují rozhraní

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 31

Page 32: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PŘÍKLAD

Public class DigitalClock extends Observer {

private ClockTimer subject;

public DigitalClock(ClockTimer t);

public void update();

// překrývá operaci třídy Observer

public void draw();

// překrývá operaci třídy Widget

// definuje, jak vykreslit digitální hodiny

public void close();

};

public class ClockTimer extends Subject {

public ClockTimer() {..};

public int getHour();

public int getMinute();

public int getSecond();

public void tick() {

// aktualizovat vnitřní stav udržující čas

// ...

super.notify();

}

};

konkrétní třída,

uchovává čas,

upozorňuje

každou sekundu

konkrétní třída,

zobrazuje čas

jako digitální

hodiny

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 32

Page 33: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PŘÍKLAD

public void close() {

subject.detach(this);

}

DigitalClock(ClockTimer s) {

this.subject = s;

this.subject.attach(this);

}

public void update () {

draw();

}

public void draw() {

// načíst hodnoty ze subjektu

int hour = subject.getHour();

int minute = subject.getMinute();

// etc.

// nakreslit digitální hodiny

}

Public class DigitalClock extends

Observer {

private ClockTimer subject;

public DigitalClock(ClockTimer t);

public void update();

public void draw();

public void close();

};

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 33

Page 34: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PŘÍKLAD

Public class AnalogClock extends Observer {

public AnalogClock(ClockTimer);

public void update();

// překrývá operaci třídy Observer

public void draw();

// překrývá operaci třídy Widget

// definuje, jak vykreslit digitální hodiny

public void close();

};

jako

DigitalClock,

ale zobrazuje

analogové hodiny

public void draw() {

// načíst hodnoty ze subjektu

int hour = subject.getHour();

int minute = subject.getMinute();

int seconds = subject.getSeconds()

// etc.

// nakreslit digitální hodiny

}

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 34

Page 35: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

KDY POUŽÍT

Správné rozdělení systému do vrstev

Odstínění přímého volání sledujícího objektu od sledovaného

Více možných pohledů na jeden model

• chceme je udržovat konzistentní

Objekt, který má informovat nezávislé objekty

• publish-subscribe

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 35

Page 36: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

NEZÁVISLOST MEZI SUBJECT A

OBSERVERS UMOŽŇUJE

Volně zaměňovat jednotlivé observery nebo subjecty

Přidávat observers bez změny subject nebo ostatních observers

Subject a observers můžou patřit do různých vrstev abstrakce

Komunikaci low-level subject s high-level observers

Broadcast komunikaci

• Přidávání a odebírání observers za běhu

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 36

Page 37: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JAVA EE 7

@Stateless

public class MemberRegistration {

@Inject

private Logger log;

@Inject

private EntityManager em;

@Inject

private Event<Member> memberEventSrc;

public void register(Member member) throws Exception {

log.info("Registering " + member.getName());

em.persist(member);

memberEventSrc.fire(member);

}

}

Facade

Event

FireNotify

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 37

Page 38: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JAVA EE 7

@RequestScoped

public class MemberListProducer {

@Inject

private MemberRepository memberRepository;

private List<Member> members;

// @Named provides access the return value via the EL variable name

// "members" in the UI (e.g. Facelets or JSP view)

@Produces

@Named

public List<Member> getMembers() {

return members;

}

public void onMemberListChanged(@Observes(notifyObserver =

Reception.IF_EXISTS) final Member member) {

retrieveAllMembersOrderedByName();

}

@PostConstruct

public void retrieveAllMembersOrderedByName() {

members = memberRepository.findAllOrderedByName();

}

}

User Interface binding

Observe

Controller

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 38

Page 39: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JAVA EE 7

@RequestScoped

public class MemberListProducer {

@Inject

private MemberRepository memberRepository;

private List<Member> members;

// @Named provides access the return value via the EL variable name

// "members" in the UI (e.g. Facelets or JSP view)

@Produces

@Named

public List<Member> getMembers() {

return members;

}

public void onMemberListChanged(@Observes(notifyObserver =

Reception.IF_EXISTS) final Member member) {

members.add(member);

}

@PostConstruct

public void retrieveAllMembersOrderedByName() {

members = memberRepository.findAllOrderedByName();

}

}

User Interface binding

Observe

Controller

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 39

Page 40: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION

LAYER

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 40

Page 41: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION LAYER

Presents knowledge captured by below layers

Definition:

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41

User interface (UI) provides the visual part of a computer

application or a system, which can be seen by human user, it

provides mechanisms to control the system through

commands, to submit data to the system or receive them and

influences how information is displayed on the screen. The UI

graphical design aims to make user interaction simple and

efficient regards a particular task.

Page 42: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION LAYER

Usability is the ease of use and learnability of a software application

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 42

Page 43: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION LAYER

Examples:

• JavaServer Faces (JSF) – web-based

• Swing – standalone apps

• Component tree

• Composite Design Pattern

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 43

Component

Container

Panel

Dialog

Button

Checkbox

Choice

List

TextComponent

Window

Frame

TextArea TextField

Page 44: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION LAYER

Examples:

• JavaServer Faces (JSF) – web-based

• Domain specific language to describe UI (DSL)

• Transformation to HTML

• Interpretation by Web Browser

• Component-based

• Weak type safety

• Swing – standalone apps

• General Purpose Language (GPL)

• Interpretation by JVM

• Component-based

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 44

Page 45: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION LAYER

Examples:

• JavaServer Faces – web-based

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 45

<ht ml >. .

<body>

..

<h:inputText../>

..

<h:selectManyCheckbox..>

<f:selectItem../>

<f:selectItem../>

</h:selectManyCheckbox..>

..

</ body>

</ ht ml >

<ht ml >. .

<body>

..

<input type=“text”../>

..

<select..>

<option../>

<option../>

</select..>

..

</ body>

</ ht ml >

Response JSF Page

Static text

Static text

Generated

JSF Tree

Page 46: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

PRESENTATION

LAYER

Examples:

• Swing

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 46

public static void main(String[] args) {

String firstName = JOptionPane.showInputDialog("First Name");

String lastName = JOptionPane.showInputDialog("Family Name");

fullMame = "You are " + first_name + " " + family_name;

JOptionPane.showMessageDialog( null, fullMame);

Page 47: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JAVASERVER FACES

JavaServer Faces (JSF) is a MVC web framework that simplifiesthe construction of user interfaces (UI) for server-basedapplications by using reusable UI components in a page.

JSF provides facility to connect UI widgets with data sources andto server-side event handlers.

The JSF specification defines a set of standard UI componentsand provides an Application Programming Interface (API) fordeveloping components.

JSF enables the reuse and extension of the existing standard UIcomponents.

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 47

Page 48: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JAVASERVER FACES

2 core elements

• Managed Bean

• Controller

• JSF Page

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 48

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JSF Tutorial!</title>

</head>

<body>

#{helloWorld.message}

</body>

</html>

@ManagedBean(name = "helloWorld", eager = true)

public class HelloWorld {

public HelloWorld() {

System.out.println("HelloWorld started!");

}

public String getMessage() {

return "Hello World!";

}

}

Page 49: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

CONTROLLER

- BEAN

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 49

@Model //same as @RequestScoped and @Named

public class MemberController {

@Inject

private FacesContext facesContext;

@Inject

private MemberRegistration memberRegistration;

@Produces

@Named

private Member newMember;

public void register() throws Exception {

try {

memberRegistration.register(newMember);

FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_INFO,

"Registered", "Registration successful");

facesContext.addMessage(null, m);

initNewMember();

} catch (Exception e) {

String errorMessage = getRootErrorMessage(e);

FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_ERROR,

errorMessage, "Registration unsuccessful");

facesContext.addMessage(null, m);

}

}

@RequestScoped

public class MemberListProducer {

@Produces

@Named

public List<Member> getMembers() {

return members;

}

Page 50: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JSF PAGE

Header

Body

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 50

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

template="/WEB-INF/templates/default.xhtml">

<ui:define name="content">

..

</ui:define>

</ui:composition>

<ui:define name="content">

<h:form id="reg">

<h:outputLabel for="name" value="Name:”/>

<h:inputText id="name”

value="#{newMember.name}" />

<h:message for="name”/>

...

<h:commandButton id="register”

action="#{memberController.register}”

value="Register" styleClass="register" />

<h:messages globalOnly="true" />

</h:form>

<h:dataTable var="_member"

value="#{members}”

rendered="#{not empty members}”>

<h:column>

<f:facet name="header">Id</f:facet>

#{_member.id}

</h:column> ...

<h:column>

<a href="#{request.contextPath}

/rest/members/#{_member.id}">

/rest/members/#{_member.id}</a>

</h:column>

</h:dataTable>

</ui:define>

Page 51: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JSF PAGE

Header

Body

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 51

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

template="/WEB-INF/templates/default.xhtml">

<ui:define name="content">

..

</ui:define>

</ui:composition>

<ui:define name="content">

<h:form id="reg">

<h:outputLabel for="name" value="Name:”/>

<h:inputText id="name”

value="#{newMember.name}" />

<h:message for="name”/>

...

<h:commandButton id="register”

action="#{memberController.register}”

value="Register" styleClass="register" />

<h:messages globalOnly="true" />

</h:form>

<h:dataTable var="_member"

value="#{members}”

rendered="#{not empty members}”>

<h:column>

<f:facet name="header">Id</f:facet>

#{_member.id}

</h:column> ...

<h:column>

<a href="#{request.contextPath}

/rest/members/#{_member.id}">

/rest/members/#{_member.id}</a>

</h:column>

</h:dataTable>

</ui:define>

Page 52: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JSF PAGE

Header

Body - components

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 52

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

template="/WEB-INF/templates/default.xhtml">

<ui:define name="content">

..

</ui:define>

</ui:composition>

<ui:define name="content">

<h:form id="reg">

<h:outputLabel for="name" value="Name:”/>

<h:inputText id="name”

value="#{newMember.name}" />

<h:message for="name”/>

...

<h:commandButton id="register”

action="#{memberController.register}”

value="Register" styleClass="register" />

<h:messages globalOnly="true" />

</h:form>

<h:dataTable var="_member"

value="#{members}”

rendered="#{not empty members}”>

<h:column>

<f:facet name="header">Id</f:facet>

#{_member.id}

</h:column> ...

<h:column>

<a href="#{request.contextPath}

/rest/members/#{_member.id}">

/rest/members/#{_member.id}</a>

</h:column>

</h:dataTable>

</ui:define>

Page 53: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JSF PAGE

Header

Body - components

http://www.jsftoolbox.com/documentation/help/12-

TagReference/core/index.jsf

http://www.jsftoolbox.com/documentation/help/12-

TagReference/html/index.jsf

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 53

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

template="/WEB-INF/templates/default.xhtml">

<ui:define name="content">

..

</ui:define>

</ui:composition>

<ui:define name="content">

<h:form id="reg">

<h:outputLabel for="name" value="Name:”/>

<h:inputText id="name”

value="#{newMember.name}" />

<h:message for="name”/>

...

<h:commandButton id="register”

action="#{memberController.register}”

value="Register" styleClass="register" />

<h:messages globalOnly="true" />

</h:form>

Page 54: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

JSF PAGE

Header

Body - binding

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 54

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

xmlns:ui="http://java.sun.com/jsf/facelets"

xmlns:f="http://java.sun.com/jsf/core"

xmlns:h="http://java.sun.com/jsf/html"

template="/WEB-INF/templates/default.xhtml">

<ui:define name="content">

..

</ui:define>

</ui:composition>

<ui:define name="content">

<h:form id="reg">

<h:outputLabel for="name" value="Name:”/>

<h:inputText id="name”

value="#{newMember.name}" />

<h:message for="name”/>

...

<h:commandButton id="register”

action="#{memberController.register}”

value="Register" styleClass="register" />

<h:messages globalOnly="true" />

</h:form>

<h:dataTable var="_member"

value="#{members}”

rendered="#{not empty members}”>

<h:column>

<f:facet name="header">Id</f:facet>

#{_member.id}

</h:column> ...

<h:column>

<a href="#{request.contextPath}

/rest/members/#{_member.id}">

/rest/members/#{_member.id}</a>

</h:column>

</h:dataTable>

</ui:define>

Page 55: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

CONTROLLER

- BEAN

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 55

@Model // same as @RequestScoped and @Named

public class MemberController {

@Inject

private FacesContext facesContext;

@Inject

private MemberRegistration memberRegistration;

@Produces

@Named

private Member newMember;

public void register() throws Exception {

try {

memberRegistration.register(newMember);

FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_INFO,

"Registered", "Registration successful");

facesContext.addMessage(null, m);

initNewMember();

} catch (Exception e) {

String errorMessage = getRootErrorMessage(e);

FacesMessage m = new FacesMessage(FacesMessage.SEVERITY_ERROR,

errorMessage, "Registration unsuccessful");

facesContext.addMessage(null, m);

}

}

@RequestScoped

public class MemberListProducer {

@Produces

@Named

public List<Member> getMembers() {

return members;

}

Page 56: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

MODEL-VIEW

CONTROLLER

(MVC)

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 56

Page 57: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

INTENT

Separate out User Interfaces its logic and from data

3 main components

• Model

• View

• Controller

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 57

Page 58: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

INTENT

Separates out User Interfaces its logic and from data/knowledge

3 main components

• Model

• Represents knowledge

• View

• Visual representation of model

• Controller

• Link between User and the system

• Provides User with input – relevant views, menu, commands

• Takes input from user

• Extended version hierarchical MVC

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 58

Page 59: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Captures system data

• Knowledge

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 59

Model

Passive /

Active model

Input Output

Page 60: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Captures system data

• Knowledge

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 60

Where are

business

rules?

Where are

services?Model

Input Output

Page 61: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Captures system data

• Knowledge

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 61

Where are

business

rules?

Multiple views

can exist on

the same

model

Model

Input Output

Page 62: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Captures system data

• Knowledge

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 62

Model

Where are

business

rules?

Observer Pattern

Page 63: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 63

Model (Active)View2

View1

Input Output

Page 64: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 64

View2

View1

Input Output

Person

PersonDAO

RacerCarService

<<uses>>

<<uses>>

Page 65: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 65

Model (Active)View2

View1 Input Output

Page 66: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 66

Model (Active)View2

View1 Input Output

Page 67: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 67

Model (Active)View2

View1 Input Output

Add

Page 68: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 68

Model (Active)View2

View1 Input Output

Add

????

Page 69: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 69

Model (Active)View2

View1 Input Output

Add

GRASP??

Page 70: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

View

• Visualization of model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 70

Model (Active)View2

View1 Input Output

Add

Controller

Page 71: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Controller

• Interaction / mediation

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 71

Model (Active)View2

View1

Input Output

Add

Controller

Page 72: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Controller

• Interaction / mediation

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 72

Model (Active)View2

View1

Input Output

Add

Controller

Not valid

Page 73: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Controller

• Interaction / mediation

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 73

Model (Active)View2

View1

Input Output

Add

Controller

Valid

Page 74: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Notification mechanism

• Observer Design Pattern

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 74

Model (Active)View2

View1

Input Output

Add

Controller

Change

notification

Page 75: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Notification mechanism

• Notify of changes

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 75

Model (Active)View2

View1

Input Output

Add

Controller

Notification

Observable

Observable

Page 76: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Model

• Notification mechanism

• Observe and redraw

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 76

Model (Active)View2

View1

Input Output

Add

Controller

Notification

Observable

Observable

Page 77: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 77

Page 78: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

COMPONENTS

Active model vs Passive model

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 78

Page 79: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

LARGE SYSTEM

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 79

Page 80: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

ALTERNATIVES FOR VIEW

Many other design patterns for view handling

• Hierarchical MVC

• Presentation Abstraction Control (PAC)

• Model View Presenter

• Model View ViewModel

• Small variants

• Page Controller

• Front Controller

• Template View

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 80

Page 81: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC

ANALYSIS OF

THE CODE

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 81

Page 82: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC CODE

ANALYSIS

Java, C++, C#, etc. are GPL with strong type safety!

• Finding errors by the type safety

• Easy to refactor

PHP, Ruby, Python, etc. “

• Weak type safety

• Error-prone

• Tests needed for refactoring!

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 82

$x = 5;

$x = $x + 1;

$b = “PHP rocks!“;

echo $x + $b;

int x = 5;

x = x + 1;

String b = “Java rocks!“;

println(x + b);

Page 83: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC CODE

ANALYSIS

Java, C++, C#, etc. are GPL with strong type safety!

• Finding errors by the type safety

• Easy to refactor

PHP, Ruby, Python, etc. “

• Weak type safety

• Error-prone

• Tests needed for refactoring!

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 83

$x = “Five“;

$x = $x + 1;

$b = “PHP rocks!“;

echo $x + $b;

int x = “Five“;

x = x + 1;

String b = “Java rocks!“;

println(x + b);

Compile

Error

Runtime

Error

Page 84: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC CODE ANALYSIS

• Analysis of computer software

• Performed without actually executing programs

• Highlighting possible coding errors

• Formal methods to mathematically prove properties of a program

• Software metrics and reverse engineering can be described as

forms of static analysis.

• Verification of properties of software used in safety-critical

computer systems and locating potentially vulnerable code

• Nuclear power plant, Aviation, Medical software

• Code audit

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 84

Page 85: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC CODE ANALYSIS

• PMD

• PMD is a source code analyzer.

• It finds common programming flaws like unused variables, empty

catch blocks, unnecessary object creation, and so forth.

• It supports Java, JavaScript, XML, XSL.

• Additionally it includes the copy-paste-detector.

• Finds duplicated code in Java, C, C++, C#, PHP, Ruby, Fortran,

JavaScript.

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 85

Page 86: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

STATIC CODE ANALYSIS

• FindBugs

• Uses static analysis to look for bugs in Java code.

• Based on the concept of bug patterns.

• A bug pattern is a code idiom that is often an error.

• Difficult language features

• Misunderstood API methods

• Misunderstood invariants when code is modified during

maintenance

• Garden variety mistakes: typos, use of the wrong boolean

operator

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 86

Page 87: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

SOFTWARE TESTING

investigation conducted to provide investor with information about the quality of the product

Classification:

• Static vs Dynamic

• Code audit vs Program Execution

• White vs Black box

• We know vs We do not know what is inside

• Alpha vs Beta

• SW Constructions vs Transition to deployment

• Functionality vs Perfomance vs Security vs Reliability

• Validation vs Verification

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 87

Page 88: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

SOFTWARE TESTING

Rule 40/20/40 Planning/Implementation/Testing

Scale

• Unit Testing – independent

• Component testing

• Integration tests

• System test

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 88

Page 89: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

SOFTWARE TESTING

Other categories

• Regressive testing

• Alpha

• Development testing

• Beta

• It scales and provides all advertised functionality

• Acceptance

• Verifies it meets customers expectations

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 89

Page 90: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

SOFTWARE TESTING

Other categories

• Stress test

• JMeter, Selenium

• User Interface testing

• Selenuim, TestComplete

• Performance, Usability, Compatibility, Error handling, load,

volume, security, installation, maintenance, accessibility..

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 90

Page 91: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague,

2016

91

JUNIT -

HTTP://JUNIT.SOURCEFORGE.NET/

JUnit is a simple framework to write repeatable tests.

For graphical feedback, most IDE's support JUnit 4.

Implementace

Annotate a method with @org.junit.Test

To check a value, import org.junit.Assert.* statically

call assertTrue() and pass true if the test succeeds

@Test

public void simpleAdd() {

Money m12CHF= new Money(12, "CHF");

Money m14CHF= new Money(14, "CHF");

Money expected= new Money(26, "CHF");

Money result= m12CHF.add(m14CHF);

assertTrue(expected.equals(result));

}

Page 92: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague,

2016

92

JUNIT

What if you have two or more tests that operate on the same or similar sets of objects?

Test Fixture

Before or After

public class MoneyTest {

private Money f12CHF;

private Money f14CHF;

private Money f28USD;

@Before

public void setUp() {

f12CHF= new Money(12, "CHF");

f14CHF= new Money(14, "CHF");

f28USD= new Money(28, "USD");

}

}

Page 93: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague,

2016

93

JUNIT

Run test

Console

org.junit.runner.JUnitCore.runClasses(TestClass1.class, ...);

Command line

java org.junit.runner.JUnitCore TestClass1 [...other test classes...]

TestRunner

public static junit.framework.Test suite() {return new JUnit4TestAdapter(Example.class);

}

Expected Exceptions

@Test(expected= IndexOutOfBoundsException.class) public void empty() {

new ArrayList<Object>().get(0);}

Page 94: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague,

2016

94

JUNIT

Run test

Do not expect test order execution

If you must then use

@FixMethodOrder(MethodSorters.NAME_ASCENDING)

Page 95: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

Tomas Cerny, Software Engineering, FEE, CTU in Prague,

2016

95

JUNIT Feed with Parameters

@RunWith(Parameterized.class)

public class FibonacciTest {

@Parameters(name = "{index}: fib({0})={1}")

public static Iterable<Object[]> data() {

return Arrays.asList(new Object[][] {

{ 0, 0 }, { 1, 1 }, { 2, 1 }, { 3, 2 },

{ 4, 3 }, { 5, 5 }, { 6, 8 }

});

}

private int input;

private int expected;

public FibonacciTest(int input, int expected) {

this.input = input;

this.expected = expected;

}

@Test

public void test() {

assertEquals(expected, Fibonacci.compute(input));

}

}

Many loops

Different

data

Page 96: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

The games just begin

• Get ready to be available next 48 hours in the row!

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 96

Page 97: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

The games just begin

• Get ready to be available next 48 hours in the row!

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 97

Page 98: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

At any time you must know what is happening

• Program Log

• Logger

• Access log

• Who is there doing what

• System monitoring

• CPU load, Memory, Harddrive use, Backups

• Error reporting

• Where? JIRA? Email?

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 98

Page 99: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

Automated monitoring systems

• Verify CPU/Load/Mem/Disk and issues

• Notify by email or SMS

• Zabbix

• Nagios

• … many others.

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 99

Page 100: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

Get user experience

• Register your app at Google Analytics to see how it performs

• HTML5 allows you to see the statistics

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 100

Page 101: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

DEPLOYMENT, MAINTENANCE

AND REPORTS

Get user experience

• Register your app at Google Analytics to see how it performs

• HTML5 allows you to see the statistics

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 101

Page 102: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

EVIL THINGS TO HAPPEN

System crash!

• Memory leak

• Resource leak

• New closing loop

• Cannot survive the load

• Heap analysis

• Profiler

• Reports from web server

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 102

Page 103: DESIGN PATTERNS, PRESENTATION · PRESENTATION LAYER Presents knowledge captured by below layers Definition: Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 41 User interface

MAINTENANCE

The king is dead, long live the king!

Success of the long live depends on the design, scalability,

ability to fix bugs and many many other factors!!

Prevent bugs, leaks, flaw design

Use Design Patterns!

A7B36ASS – STM Architektura SW systémů

http://www.fel.cvut.cz/education/bk/predmety/14/69/p1469406.html

Tomas Cerny, Software Engineering, FEE, CTU in Prague, 2016 103