"BPMN e IFML, due standard OMG per realizzare le tue app BPM human centric". Presentazione di Stefano Butti, CEO di WebRatio, al BPM Forum 2013 a Milano, parlando della User Interaction e la nascita dell'Interaction Flow Modeling Language con le sue caratteristiche e vantaggi.

1. due standard OMG per realizzare
le tue app BPM human centric
BPMN e IFML

2. 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

3. 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»

4. 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)

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. Concetti di base di IFML
Container
ViewComponent
Event
Action

12. Concetti di base di IFML
Navigation flow
Data flow
Parameter binding

13. Esempio di notazione IFML
Basic navigation flow between ViewComponents

14. Esempio di notazione IFML
Nesting of ViewContainers
Tagged ViewContainers (XOR, L, D, Modal, Modeless)

15. Esempio di notazione IFML
Actions

16. Esempio di notazione IFML – Dettagli View
ViewComponentParts:
• Data binding
• Parameters
Types of ViewComponents
(<<List>>)

17. Esempio di notazione IFML – Eventi
Selection event
Submit event
… ed è possibile specificare qualsiasi tipo di
evento “custom”

18. Esempio di notazione IFML
ActivationExpression, SubmitEvent, Event generation

19. Un esempio reale: il diagramma IFML di gmail
Messages [L D]
GMAIL top [X]
Mbox
List
<<XOR>> Message Management
MailBox
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: NewTag
IN: ATag
OUT: NewTagName
IN: TagName
OUT: SelectedTag
IN: ATag
OUT: SelectedMessages
IN: MessageSet
Delete
Archive
Report
MoveTo
Create
New
Select
Tag
Create
MarkAll
MarkAll
AsRead
OUT: AllMessages
IN: MessageSet
<<parameter>>
MessageSet
<<XOR>> Message search
<<D>> Search
Message
keyword
search
<<P>> FullSearch
Message
full search
Show search
options
Search mail
OUT: Keyword
IN: SearchKey
<<L>> Message writer
<<form>> Message Writer
Send
Action
{Self.MessageRecipients >1}
OUT: MessageID
IN: 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”
Save
Action
State =”Forward”
OR ”ReplyToAll”
<<parameter>> State
State =
”NewMessage” OR
“Forward”
Forward
Reply
ReplyToAll
Add Bcc
Add Cc
Edit subject
Add attachment
Send Save
Discard
Reply
ToAll
Reply
Forward
State =”Reply” OR
”ReplyToAll”
State =”Reply”
OR ”ReplyToAll”
OUT: Keyword, From,
To., ...
IN: SearchKey,
FromKey, ToKey, ..
*

20. 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

21. Come usare insieme BPMN e IFML

22. Q & A

23. Stefano Butti
stefano.butti@webratio.com
www.webratio.com
Grazie per l’attenzione