Smart Client Program Composite UI Application Block patterns & practices Smart Client Team May 2005.

Smart Client Program

Composite UI Application Block

patterns & practices Smart Client TeamMay 2005

Agenda

Vision

Customer scenarios and requirements

Architecture

Timeline

Call to action

Smart Client ProgramVision

Enterprise customers build high quality, mission critical smart clients as their LOB front-ends using Microsoft platform

Strategy:

Provide an Application Block to help customers implement common smart client UI composition patterns, focusing on business logic and not the infrastructure required to support it

Provide a Baseline Architecture that illustrates the common patterns for LOB front-end scenarios

Enable community of partners & customers to converge on an extensible architecture, following the Community process

Smart Client ProgramCustomer demand

Thompson: Financial Data Portal

Dell: Call Center

Commonwealth Bank of Australia: Teller Application

MSFT Call Centre Framework scenarios

Thomson FinancialsProject Background

Provide integrated Data/Analysis Services To Financial Services Community

Thomson ONE Analytics

Integrated Research and Analysis

Monitoring and Analysis Tools

Access to Research Data

Dual Channel Delivery

Smart Client – Advanced, Premier Users

Integration Of Client-Side Data Sources

Web – Ad Hoc, Casual Users

ThomsonONEGoals

Common Architecture for Next-Gen Apps

Streamline Development Process

Customizable & Extensible

User Composed Solutions

Solution Composed of Pluggable Service Agents

User Defined Views

Portfolio & Research Data

Smart Client Platform Services

Deployment, User Interface, etc.

ThomsonONE - Analytics

Dell Call CentreProject Background

3,000 Telephone Sales Agents

Internal and remote call centers

Integrated View Of The Customer

40+ Disparate Applications

Sales, CRM, Tech Support Tools

Releases of new front-ends took a lot of time

Web based solution +500K lines of javascript

DellGoals

Maximize Agent Productivity

Rich, Responsive and Flexible

Simpler Development Model

Hosted Applications Independently Developed, Tested, Deployed

Solution Profile – Specific Combination Of Hosted Applications

User Role Flexibility

Common Architecture for Next-Gen Apps

Smart Client Platform Services

Integrated Dell Desktop

Composite UI Application BlockBuilding Enterprise Smart Clients

Value for architecture teams: Quality & Consistency Create a common development architecture for smart client applications Have a consistent and predictable way of developing, packaging and rolling out infrastructure

components to enforce architectural standards Scale enterprise-wide guidance on building Enterprise Smart Client solutions

Value for developer teams: Productivity and faster ramp-up A prescriptive environment that hides complexity and boosts productivity Through abstraction & separation of concerns, developers can focus on business logic Increased reusability of infrastructure code

Business goals: increased end-user productivity and agility of business tasks Business owners can roll out new & updated functionality and tasks in a more agile way Building UIs that allow end-users to perform tasks faster and with more precision and data

quality avoiding data exchange through Alt-Tab, Copy-Paste integration style Enhanced productivity through consistent UIs lowering training needs

Smart Client Scenario Family

Smart Client Baseline Architectures

Smart Client Patterns

Smart Client Block Library

• Many “application styles” for LOB front end – Outlook hosted is just one

• Baseline architecture = composition of patterns + blocks

Architecture Scenarios• Smart Client encompasses a family of architecture

scenarios. Customers have prioritized LOB Front End and Mobile scenarios

Tool Extensions• Making an app self-updatable• Adding offline to service agents• Creating MVC skeletons• Configuring Offline Caches

• Collaboration with Siemens• Distributed authoring under Creative Commons

license• Using patternshare.org (pattern-focused Wiki)

• Built on Enterprise Library foundation (logging, caching, etc)

Abstract Code-based

Specialized DevicesSpecialized Devices

MobileMobileLOB Front EndLOB Front End

Outlook-Hosted LOB Front End

…

Smart Client Blocks• Updater AB (ev)

• Offline AB• Composite AB• Service Agents• “Elixir” (OHAB)

Composite LOB Front End

Asset LineageHow did we get here?

UIP1PAG

UIP2PAG

CABPAG

CCFField

ThomsonDPE Customer

DellDPE Customer

CABDPE

Field FX / Prototype

Customer Solution

PAG Asset

…

David Hill

David Hill, Brenton Webster et al.

[Other field frameworks]

This is not an emergent

pattern!This is not an emergent

pattern!

Composite UI Design

“Shell”“Shell” • Customers build “Modules”

• Modules Contain:

• SmartParts “Widgets”

• Support Services

• Module Configuration

• Whatever else the app needs

• Modules typically will contain:

• Business Logic

• Infrastructure component

• 3rd party vendors

• Community

• Partners

SmartPart 1

Svc1

[Other Components][Other Components]

SmartPart Y

[Other Components][Other Components]

Svc1Svc2Svc3

CAB + Shell

“ SmartParts”“ SmartParts”

Context State

Context State

“ UI Elements”

“ UI Elements”

Workflow & Process

management

Workflow & Process

management

ShellShell

Composite UI Design

CABCAB

Global ContextGlobal Context

• CAB Layering

• Shell

• Visual Styles

• Hosting Model

• CAB “Core”

• Implementation of UI-less host

• Contract of Shells

• Contract of Modules

• Services

• Support Services

• Crosscutting stuff

• Declarative

ShellShell

OtherContext1OtherContext1

HostHostService X

Module Mgmt

Event Broker

Service Y (e.g. UIP)

User Interface ElementsUser Interface Elements

SmartPart ManagersSmartPart Managers

SmartPart X SmartPart Y

Serv

ices

Secu

rity

Managem

ent

Com

munica

tions &

Sta

te M

gm

t

CABCAB

Context “Foo”Context “Foo”

Simple Shell & CAB Together

Global ContextGlobal Context

ShellShell

HostHost

SmartPart 1

Controller 1

User Interface ElementsUser Interface ElementsSmartPart Managers & Base ClassesSmartPart Managers & Base Classes

Hosted Control

Layout

MDI

StatusStrip UI Element

MenuStrip UI Element

ToolStrip UI Element

ServicesServicesModuleCatalog

ModuleLoader

EventBroker

[UI Process?]

Context “Foo”Context “Foo”Shared State Shared State

SmartPart X

Controller X

SmartPart Y

Controller Y

Main Form Main Form

Configuration [Authorization?]

Biz Logic DevsBiz Logic Devs

Infrastructure Devs

Infrastructure Devs

Shell DevsShell Devs

Event Broker

Challenge: Notifications & events one-way are necessary in UI design publishers & subscribers don’t know about each other You may have sources without handlers and viceversa

Solution: Event Broker Events identified by an “Event Topic”

event://MyApp/Updates/UpdateAvailable N publishers and M subscribers Supporting strong-typed EventArgs between publishers and subscribers Two scopes: global and WorkItem-wide events

Event Broker – Design Overview

Event TopicEvent Topic

Publishers

Event Catalog ServiceEvent Catalog Service

event://UpdatesAvailable

1

*

[EventPublication(“event://UpdatesAvailable”)]event EventHandler<SomeArg> UpdatesAvailable;

…if (UpdatesAvailable != null) { UpdatesAvailable(this, new SomeArg(3) )}

[EventSubscription(“event://UpdatesAvailable”)]Public void NewUpdates(object sender, SomeArg numUpdates){ MessageBox.Show(numUpdates.ToString(), “updates available”);}

Method Event

Publication

Publication

Subscription

Background Worker

BackgroundSubscription

Subscribers

Features of the Event Broker

Strong Typing – EventHandler<T> lets you pass your own eventArgs type (e.g. MyType : EventArgs)

[EventSubscription(“event://foo”,EventScope.Global)]public void DoSomething(object source, MyType stuff){ … }

Subscribe to receive on different Threads Using the Background worker:

[EventSubscription(“event://foo/bar/baz”,EventScope.Global ,isBackground=true)]

Event Scoping Global Events and WorkItem-Wide Events

[EventSubscription(“event://foo/bar/baz”,EventScope.Global)][EventSubscription(“event://foo/bar/baz”,EventScope.WorkIteml)]

Works on components, normal classes and static types Components and objects get “inspected” when added to a Context or Host Static types need to be manually registered

Can publish, subscribe to, and fire events programmatically as well as declaratively

Event Broker Background Subscriptions

Subscribers can declare the intent to run the subscription in a background worker

No change to publisher or subscriber code!

If the publisher or some other class wants fine-grained control of the background workers, it can EventTopic eventTopic = EventCatalogService[“event://myEvent”];

Examples of control functions

eventTopic.RunningBackgroundWorkers.Count;

eventTopic.RunningBackgroundWorkers[2];

eventTopic.RunningBackgroundWorkers[subscriberInstance].Cancel;

eventTopic.RunningBackgroundWorkers.Cancel();

State Persistence

Example Scenarios:

Suspend-And-Continue

Delegate work items

“Checkpoint” and rollback work item state

Problem:

Work Items have shared state elements that may need to be saved

Solution:

Provide a simple mechanism to store & load WorkItem state

Essentially apply memento to the WorkItem (which is an application controller) to allow having a separate State object instead of just member variables and providing a service which acts as a repository for this State object

State Persistence

State persistence managed via a service

Provided Implementations: SQL

Isolated File

File

Optional DPAPI Encryption

Invoking persistence: Programmatically:

Q: Should we add the Save & Load method to the WorkItem class?

Coming Soon: At “persist points” in UIP schema (onEnter, onExit states & transitions)

When WorkItems get suspended

public interface IStatePersistenceService{ void Save(State state); State Load(Guid id); void Remove(Guid id);}

//your WorkItem

[ServiceDependency]Public IStatePersistenceService persistence;

public void SomeMethod(){ persistence.Save(this.State);}

CABCAB

Context “Foo”Context “Foo”

Acquiring Services

Global ContextGlobal Context

HostHost

SmartPart 1

Controller 1

ServicesServicesModuleCatalog

ModuleLoader

EventBroker

[UI Process?]

Context “Foo”Context “Foo”Shared State Shared State

SmartPart X

Controller X

Configuration [Logging]

Services are singleton components that provide access to infrastructure Think EventBroker, Authorization, Logging,

Any module may include services Services can be obtained programmatically or via an IoC declaration from any component Override - Contexts can have services as well – when a component asks for it it precedes the host service Services can use other services. Services can declare CompositeUIEvents Only basic bootstrap services are included in the CAB main assembly: Catalog, Loader, Registry, and EventBroker

[Logging]

UI Elements

UI Element Controls are portions of UI that modules have to “Share” Toolbars, menu bars, status bars, notification areas

UI Elements are the ‘ things’ these controls know how to handle Toolbar Items, menu items, Status Panel, Balloon, “Action Panes”

Shell developers: 1) decide what UIElements their shell will provide

Write implementations of IUserInterfaceElementControl

Write implementations of IUserInterfaceElement

Module Developers: 1) Decide what UI element instances they need (“ Add new customer…” menu)

2) Build Metadata and/or code to add those UIElements May include ‘hints’ for relative layout, but in the end the shell control implementations decides where things get shown

3) Write code to respond to events from, or display text in, those UI Elements (or whatever the UI Element does)

This means a Module Developer will reference a specific shell, 99% of the time! To mitigate this, CAB will provide two basic UIElement interfaces all shells should implement:

One for “ Action Commands” – Which a shell may display as menus, command bars, taskbars, etc

One for “Status Display” – Shell may display as status, notification, etc

Very basic UI Elements but lets module developers build shell-agnostic code

Demo

CAB is not… A product

It is an Application Block from Microsoft patterns & practices that helps you implement common patterns in development

A library of UI controls useful for Smart Client

It is a set of components to help you structure what lies beneath the UI and the display

A metadata language to define UIs

The interaction between code components could be specified declaratively but you will not find schemas to define forms, fields, etc.

For that look to XAML Avalon & all that

We do intend to help component design that migrates easily to those architectures as they become available

Schedule

MARMAR APR MAY JUN JUL AUG APR MAY JUN JUL AUG … …

V&S Feat

ureFreeze

Dev Start

Internal

Community

M0

.NET Beta 2

Expert Advisor Conference Calls

Code Drop

Content Complete

Tech Preview on Beta 2

RTM on .NET 2.0

Code Drop

Code Drop

Call to action!

Join the CAB community: http://workspaces.gotdotnet.com/cab

Download the Code Drop

Tell us what you think!

Stay tuned to the team blogs: http://blogs.msdn.com/edjez

http://www.peterprovost.com

http://blogs.msdn.com/eugeniop

Thanks!