due standard OMG per realizzare le tue app BPM human centric

BPMN e IFML

Recap: perché modellare?

Astrazione = riduzione della complessità

Più semplice da comunicare §  A patto che il linguaggio sia conosciuto

Da modello a esecuzione §  A patto che il modello sia sufficientemente espressivo

Parliamo di app BPM human centric

In pratica §  BPM §  App §  Human Centric §  User Task in BPMN

Domanda §  Con un tool di BPMS come faccio a specificare ciò che succede

all’interno di uno User Task? •  Form •  List •  Details •  Events •  … «interaction»

Il problema è generalizzato

Perché modellare la UI non è semplice §  La complessità della UI è cresciuta nel tempo

•  Nuovi eventi, device, casi d’uso, tipi di interazioni

§  L’approccio alla UI di molti tool di programmazione è troppo legata all’esecuzione

§  Molti linguaggi di programmazione e approcci disponibili (vedi ad esempio il mondo javascript)

§  Nessun tentativo finora di affrontare il tema da parte di vendor e organizzazioni (con eccezione del linguaggio proprietario WebML)

Un “gap” nella standardizzazione

Nel comitato di standardizzazione si è percepito finora un “gap” §  Il tema della “User Interaction” è stato trascurato dai “classici”

standard di ingegneria del software •  Dedicati invece all’architettura del software (UML), all’orchestrazione

dei servizi (SoaML), alla progettazione di sistemi (SysML) o alla definizione dei processi di business (BPMN)

§  I pochi tentativi precedenti sono falliti perchè: •  Proponevano l’uso di linguaggi generici •  Poca usabilità ed espressività della notazione proposta •  Mancanza di implementazioni “solide” da parte dei vendor

Interaction Flow Modeling Language

§  Ecco perché è nato

§  Ispirato da WebML e di fatto la sua generalizzazione dal dominio Web a qualsiasi dominio applicativo

Interac(on  Flow  Modeling  Language  

Interaction Flow Modeling Language

Un linguaggio di modellazione per esprimere §  i contenuti visualizzati §  i possibili cammini di navigazione §  gli eventi generate dagli utenti e le interazioni §  i collegamenti con la business logic §  i collegamenti con i dati

di applicazioni di front-end §  indipendentemente dal dominio applicativo

Vantaggi

§  specifica formale di tutte le diverse “prospettive” sul front-end §  evitare di cadere in problematiche legate all’implementazione §  netta separazione della UI dalla business logic §  linguaggio comune e condiviso tra tecnici e business per progettare

la UI insieme §  consentire la generazione automatica del codice anche per

applicazioni di front-end

Campo di espressione

§  distinguere User Interaction da User Interface

IFML esprime §  la struttura logica dei componenti di visualizzazione (finestre e/o pagine)

e i loro contenuti §  l’organizzazione dei componenti in gerarchie e/o moduli §  i punti di interazione tra utente e applicazione (eventi) §  l’interazione tra componenti §  il collegamento tra componenti di visualizzazione e dati, logica, processi

di business

e invece NON esprime §  la posizione degli oggetti §  proprietà grafiche come colori e font §  il rendering degli oggetti

Concetti di base di IFML

§  molteplici “viste” della medesima applicazione §  possibilità di modellare applicazioni multi-device §  visualizzazione, inserimento e validazione di dati §  definizione di eventi §  definizione di componenti indipendenti dalla loro implementazione §  flussi di interazione («interaction flow») iniziati dall’utente o da eventi

esterni §  definizione del «contesto» (posizione, storico, device, ecc.) §  modularizzazione e riuso

Concetti di base di IFML

Container ViewComponent Event Action

Concetti di base di IFML

Navigation flow Data flow Parameter binding

Esempio di notazione IFML

Basic navigation flow between ViewComponents

Esempio di notazione IFML

Nesting of ViewContainers

Tagged ViewContainers (XOR, L, D, Modal, Modeless)

Esempio di notazione IFML

Actions

Esempio di notazione IFML – Dettagli View

ViewComponentParts: •  Data binding •  Parameters Types of ViewComponents (<<List>>)

Esempio di notazione IFML – Eventi

Selection event Submit event … ed è possibile specificare qualsiasi tipo di evento “custom”

Esempio di notazione IFML

ActivationExpression, SubmitEvent, Event generation

Un esempio reale: il diagramma IFML di gmail

Messages [L D]

GMAIL top [X]

Mbox List

<<XOR>> Message ManagementMailBox

Message notification

<<XOR>> Message Reader

<<D>>

Message Index

Message details

<<L>> Settings

<<P>> Tag chooser

Report

Archive

Delete

Tag/Folder Index

Associate to tag / Move to folder

<<M>> Tag creator

New Tag/Folder

Create Tag/

Folder

Message toolbar

OUT: NewTagIN: ATag

OUT: NewTagNameIN: TagName

OUT: SelectedTagIN: ATag

OUT: SelectedMessagesIN: MessageSet

DeleteArchive

Report

MoveTo

Create New

Select Tag

Create

MarkAll

MarkAllAsRead

OUT: AllMessagesIN: MessageSet

<<parameter>>MessageSet

<<XOR>> Message search<<D>> Search

Message keyword search

<<P>> FullSearch

Message full search

Show search options

Search mail

OUT: KeywordIN: SearchKey

<<L>> Message writer

<<form>> Message Writer

Send Action

{Self.MessageRecipients >1}

OUT: MessageIDIN: MessageID

<<field>> To

<<field>> Cc

<<field>> Bcc

<<field>> Subject

<<field>> Body

<<field>> Attachment

OUT: Subject, From, Cc, Body, “ReplyAll”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, From, “”, Body, “Reply”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, “”, “”, Body, “Forward”IN: “Fw:”+ Subject, To, Cc, Body, State

State =”Reply” OR ”Forward”

SaveAction

State =”Forward” OR ”ReplyToAll”

<<parameter>> State

State = ”NewMessage” OR“Forward”

Forward

Reply

ReplyToAll

Add Bcc

Add Cc

Edit subject

Add attachment

Send Save

DiscardReplyToAll

Reply

Forward

State =”Reply” OR ”ReplyToAll”

State =”Reply” OR ”ReplyToAll”

OUT: Keyword, From, To., ...IN: SearchKey, FromKey, ToKey, ..

*

Risultati pratici della standardizzazione di IFML

§  un metamodello ufficiale del linguaggio che descrive gli elementi base del modello e le loro relazioni

§  un profilo UML consistente con il metamodello §  una sintassi grafica della notazione che permette una visione e

definizione molto più intuitive §  un formato di interscambio basato su XMI

Come usare insieme BPMN e IFML

Q & A

Stefano Butti stefano.butti@webratio.com

www.webratio.com

Grazie per l’attenzione