ARCH-4: The Presentation Layer in the OpenEdge® Reference Architecture

Frank BeusenbergSenior Technical Consultant

© 2006 Progress Software Corporation2ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side options Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation3ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

What’s this?

PresentationPresentation

Business ServicesBusiness Services

Data AccessData Access

Data SourcesData Sources

Co

mm

on

Infrastru

cture

Co

mm

on

Infrastru

cture

Enterprise ServicesEnterprise Services

© 2006 Progress Software Corporation4ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Problems

User Interface• Options• Implications• Contracts• Considerations

What? How? When?

© 2006 Progress Software Corporation5ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side options Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation6ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Separation of the user interface

Market Pressure• Technology• Look and Feel (‘sizzle’)

Change ‘way of working’• E.g. Form-based to Task-based

Extending Application Reach• E.g. “Webify” a rich client application

What are the business drivers?

© 2006 Progress Software Corporation7ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Separation of the user interface

Presentation Layer Platform changes often

Business Logic Platform does not

What are the business drivers?

© 2006 Progress Software Corporation8ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Separation of the user interface

Business Logic often assumes knowledge of the UI• E.g. coloring a field when given a value

Different Presentation Layers have different inherent capabilities• E.g. can we still color a field when given a value

UI Performance can influence implementation• E.g. gather more data before sending

The problems involved

© 2006 Progress Software Corporation9ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Separation of the user interface

The user experience remains critical!

About Face 2.0 – The Essentials of Interaction Design – Alan Cooper

The problems involved

© 2006 Progress Software Corporation10ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Separation of the user interface

Decouple presentation from business logic• Define service interface & data

requirements

Integrate local and remote data sources prior to display

Enable connected and disconnected use

Requirements for a new presentation layer

© 2006 Progress Software Corporation11ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side options Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation12ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Client-side options

Rich client Thin client Smart client Special devices

Types of clients

© 2006 Progress Software Corporation13ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Client-side options

Client Type Comparison

Rich Client Thin Client Smart Client

Advantage Performance Offline availability High integration Rich UI

Deployment OS independent Reach

Performance Offline availability High integration Rich UI Deployment

Disadvantage Deployment OS dependent

Online availability Simple UI Limited integration Performance

OS dependent

Service Interface

Client based Proxy Late vs Early binding

Server based Proxy or direct Late vs Early binding

Client based Proxy Late vs Early binding

Client Technology

Progress 4GL GUI Microsoft .NET GUI Java™ GUI

Progress WebSpeed® Microsoft ASP.NET Java™ JSP

Progress WebClient™ Microsoft .NET Java™ WebStart

© 2006 Progress Software Corporation14ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side options Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation15ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

Separate modeling of domain, presentation and actions based on user input into three classes [Burbeck92]• Model

– Manages behavior and data of application domain

• Control– Processes user input and informs model and/or view of

change if appropriate

• View– Manages display of information

MVC (Model View Controller) Pattern

© 2006 Progress Software Corporation16ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

Passive Model• Model does not report state changes

Active Model• Model reports state changes to view(s)

– Observer pattern (Publish/Subscribe)

MVC (Model View Controller) Pattern

© 2006 Progress Software Corporation17ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

MVC (Model View Controller) Pattern – Passive Model

© 2006 Progress Software Corporation18ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

MVC (Model View Controller) Pattern – Passive Model

© 2006 Progress Software Corporation19ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

MVC (Model View Controller) Pattern – Active Model

© 2006 Progress Software Corporation20ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

MVC (Model View Controller) Pattern – Active Model

© 2006 Progress Software Corporation21ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Demonstration

© 2006 Progress Software Corporation22ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

Components

UI Elements

UI Controllers

Users Users

Service/Data Access

Mgr Fn()Fn()

Business

Servicing

Layer

Request

Bus Task

Bus Entity Service

DB

Ap

plic

atio

n F

eatu

res

Ap

plic

atio

n F

un

ctio

nal

ity

© 2006 Progress Software Corporation23ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

Update Customer

Save Order

Validate Order

Check Inventory

Nav

igat

ion

Lo

ok

and

Fee

l

Per

son

aliz

atio

n

Sec

uri

ty

Abstract your Functions

Be Consistent with Your Features

© 2006 Progress Software Corporation24ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Design of the Presentation Layer

Session/Context Management

Security

Localization

Customization/Productization

Personalization

Rights and accessibility attributes are determined

Context is determined and made accessible to the presentation layer

Language and cultural features are applied/enabled

Company or product features are applied/enabled

User-specific attributes are applied/enabledThink in terms of layers

Managing the Presentation Layer

© 2006 Progress Software Corporation25ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side options Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation26ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Connecting to the Business Servicing Layer

Early Binding

Late Binding

Presentation Layer/s Integration Layer/s

Data Access Layers

Managed Unmanaged

In Out

Service Interface

BusinessWorkflow

Business Tasks

BusinessEntities

Alert

STOP

Service Interface

© 2006 Progress Software Corporation27ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Connecting to the Business Servicing Layer

Define input parameter pcParam1 as character.Define input parameter pcParam2 as character.Define output parameter piResult as integer.

Define variable hEntity as handle.

hEntity = dynamic-function( ‘getEntityHandle’, input ‘theBE’ ).

Run internalproc in hEntity ( input pcParam1, input pcParam2, output piResult ).

Early Binding Service Interface example

© 2006 Progress Software Corporation28ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Connecting to the Business Servicing Layer

Define input parameter pcEntity as character.Define input parameter pcOperation as character.Define input-output parameter table-handle phContext.Define output parameter dataset-handle phOutDataset.Define input-output parameter dataset-handle phIODataset.

Define variable hEntity as handle.

hEntity = dynamic-function(‘getEntityHandle’, input pcEntity).Case pcOperation: when “fetchWhere” then run fetchWhere in hEntity ( input phContext, output phOutDataset ). when …End case.Return.

Late Binding Service Interface example

© 2006 Progress Software Corporation29ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Agenda

Introduction Separation of the user interface Client-side and user interface logic Design using MVC pattern Connecting to the Business Servicing Layer Looking ahead Q&A

The Presentation Layer in the OpenEdge RA

© 2006 Progress Software Corporation30ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Looking Ahead

Design for flexibility (MVC)

UI technology will change!• Easy replacement of graphical specifics (View)

Be prepared!

© 2006 Progress Software Corporation31ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Summary

OpenEdge Reference Architecture provides flexibility for alternative UIs

Architect the presentation layer and business layer appropriately

Target your business logic to the most appropriate device and user

Design for change!

© 2006 Progress Software Corporation32ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Presentation Layer Resources

About Face 2.0: The Essentials of Interaction Design• By Alan Cooper• ISBN: 0764526413

Java and MVC• http://java.sun.com/blueprints/patterns/MVC-detailed.html

.NET and MVC• http://www.devx.com/dotnet/Article/10186/0/page/1

Interface Hall of Fame/Shame• http://homepage.mac.com/bradster/iarchitect/shame.htm

UI Patterns & Techniques• http://time-tripper.com/uipatterns/Introduction

© 2006 Progress Software Corporation33ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

For More Information, go to…

OpenEdge Reference Architecture

Enhancing the OpenEdge GUI

PSDN

© 2006 Progress Software Corporation34ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

For More Information, go to…

ARCH-5: Service Interfaces in Practice ARCH-9: Systems that Don't Work and Why ARCH-13: Multiple "Views" with WebSpeed

DEV-13: Super Resize Me!!

MOVE-5: Improving the Look and Feel of Your Application

INNOV-2: Build a Better Web Interface using AJAX INNOV-8: Demystifying Windows Vista INNOV-9: OpenEdge Development Products Roadmap INNOV-14: A Look Inside the OpenEdge UI Research Lab INNOV-16: Rich User Interface for the Web? AJAX to the

Rescue

Relevant Exchange Sessions

© 2006 Progress Software Corporation35ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Questions?

© 2006 Progress Software Corporation36ARCH-4: Presentation Layer in the OpenEdge Reference Architecture

Thank you foryour time

© 2006 Progress Software Corporation37ARCH-4: Presentation Layer in the OpenEdge Reference Architecture