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

Bpm forum 2013 web ratio - BPMN e IFML

  • 1.
    due standard OMGper 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 appBPM 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” nellastandardizzazione 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 ModelingLanguage §  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 ModelingLanguage 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 formaledi 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 basedi 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 basedi IFML Container ViewComponent Event Action
  • 12.
    Concetti di basedi IFML Navigation flow Data flow Parameter binding
  • 13.
    Esempio di notazioneIFML Basic navigation flow between ViewComponents
  • 14.
    Esempio di notazioneIFML Nesting of ViewContainers Tagged ViewContainers (XOR, L, D, Modal, Modeless)
  • 15.
  • 16.
    Esempio di notazioneIFML – Dettagli View ViewComponentParts: •  Data binding •  Parameters Types of ViewComponents (<<List>>)
  • 17.
    Esempio di notazioneIFML – Eventi Selection event Submit event … ed è possibile specificare qualsiasi tipo di evento “custom”
  • 18.
    Esempio di notazioneIFML 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 dellastandardizzazione 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 insiemeBPMN e IFML
  • 22.
  • 23.