INF5120 Modelbased System development Lecture 11: 09.04.2018 Arne-Jørgen Berre arneb@ifi.uio.no and Arne.J.Berre@sintef.no 1
2 Course parts (16 lectures) - 2018 Part I-a -(Introduction to Modeling): 15/1 - Start 1-15/1: Introduction to INF5120 Part I-b -(Introduction to Business Architecture and Business Modeling 2-22/1: Modeling structure and behaviour (UML and UML 2.0 and metamodeling) 3-29/1: Business Modeling BMC, LSC, VDML/VDMBee, (w/meta model) - (Business Model Canvas, Value Proposition, Lean Canvas Part II - (Modeling Server side Node-RED + THingML + Sensors/IoT/Cloud - and the Smart X project): ) 4-5/2: BPMN process - UML Activ.Diagram + Flow modelling Node-RED - establish Oblig groups (3-4 persons) 5-12/2: Node-RED/IBM Bluemix/Cloud getting started + Individual Oblig + VDMBee/VDML 6-19/2: Cognitive Services/AI Watson services example (for Oblig 1 and 2) (IBM Cloud presentation from IBM Norway) 7-26/2: ArchiMate 3.0 Modeling, TOGAF 9.0 + Design Thinking 8-5/3: Smart Office - Design Thinking workshop IBM new office, Lakkegata 33, Oslo 5/3 - Oblig 1: Individual - Node-RED 9-12/3: Service Modeling with UML 2.X Collaboration Models and Composite Models and SoaML Extra: 13/2: TJBot workshop at IBM, Lakkegata 53, 1600-1900 10-19/3: UML 2.x Sequence Diagrams, UML 2.x State Machines. ArchiMate ArchIsurance, ArhiMetal examples, 19/3 - Oblig 2: Specification Models Smart Office Business Architecture Business Canvases, ++, ArchiMate + IBM ChatBot Conversation (Individual) Introduction Oblig 3 for 23/4 ArchiMate + UML + BPMN EASTER 26/3 and 2/4 Part IIi - (Modeling Apps + EA/ArchiMate) 11-9/4 UI Server, UI Start lecture incl. IFML EA with ArchiMate - Oblig 2 (3) discussion/presentation Oblig 3: Smart Office Realisation with Node-RED, IBM Watson/IoT services + ArchiMate/UML++ Application, Technology, Physical models 10% Part IV - (MDE Creating Your own Domain Specific Language Eclipse, Xtext/SIRIUS): 12-16/4: MDE with Xtext and SIRIUS 16/4 - Oblig 3 - progress: Group presentations - discussions 13-23/4: MDE transformations, Non Functional requirements 23/4 Oblig 3 - progress: Group presentations discussions, Oblig 4 introduction 14-30/5 Guest lecture 30/5 Oblig 3 - Delivery 15-7/5 Guest lecture 14/5 - Oblig 4 Delivery- Your own Domain Specific Language (DSL-x) - 10% 16-14/5: Summary of the course Mandag 21/5 PINSE 17-28/5: Conclusions, Previous exams group collaborations Preparations for the Exam by old exams (+ 4/6, + 11/6) 15/6: Exam (4 hours), Friday June 15 th, 1430-1830 - ) - 60%
Content EIRA European Interoperability Reference Model - with example use of ArchiMate IFML Interaction Flow Modeling Language (a domain specific (UI) modeling language) WebRatio as an example IFML tool 3
Book references "IFML", Brambilla, Fraternali, Elsevier, 2015 Model Driven Software Engineering in Practice. Brambilla, Cabot, Wimmer, Morgan&Claypool, 2012 (new version 2017)
This lecture, April9th, 2018 IFML and WebRatio (https://www.webratio.com/site/content/en/home) IFML Example IFML Metamodel IFML Tooling WebRatio 5
http://www.ifml.org/ http://www.ifml.org/
IFML Objectives Content Navigation Path Event Binding to Business Logic Binding to Persistence Layer
IFML Objectives: Content Content
IFML Objectives: Navigation Path
IFML Objectives: Navigation Path
IFML Objectives: Events Mouse Over
IFML Objectives: Events
IFML Objectives: Binding to business logic
IFML Objectives: Binding to business logic
IFML Objectives: Binding to persistence Book Title: string Cover: file List Price: currency Price: currency Save: currency Rating: integer Content
IFML Overview
IFML Essentials
IFML by example Basic navigation flow between ViewComponents
IFML by example
IFML by example Nesting of ViewContainers Tagged ViewContainers (XOR, L, D, Modal, Modeless)
IFML by example Actions
IFML adding details to ViewComponents ViewComponentParts: Data binding Parameters Types of ViewComponents (<<List>>)
Data binding Joint use of IFML and other modeling languages: DataBinding to classes and attributes of UML Class Diagrams Upcoming: also with other content models, such as: Entity- Relationship, Ontologies,
Dynamic Behaviour Joint use of IFML and other modeling languages Connection of Actions to back-end business logic as UML methods of classes whole UML dynamic diagrams activity diagram, sequence diagram, state chart diagram,
IFML subtyping components and events Selection event Submit event.. And as many others as you want!
IFML by example ActivationExpression, SubmitEvent, Event generation
IFML concrete syntax by example intra-component events and flows
Covered aspects Multiple views for the same application Mobile and multi-device applications Visualization and input of data, and production of events Components independent of concrete widgets and presentation Interaction flow, initiated by the user or by external events User context: the user status in the current instant of the interaction (position, history, machine, platform, ) Modularization of the model (design-time containers for reuse purpose) User input validation, according to OCL or other existing constraint languages
IFML example online payment
Multiple aspects modeling 1 (business and requirements) UML Use Case Handle Rental BPMN process <<Include>> <<Extend>> Sales Clerk Handle Renter Handover Car UML Sequence <<UML Actor>> Sales Clerk new rental change days accept payment <<UML Model>> IT system UML Statechart IFML
Integration with UML Use Cases Handle Rental <<Include>> <<Extend>> Sales Clerk Handle Renter Handover Car Each use case can be described by A business process A plain UI description in IFML Some UML dynamic diagrams (e.g., activity, sequence, )
Integration with BPMN The UI of each activity can be described by An IFML module Some UML dynamic diagrams (e.g., activity, sequence, )
IFML concrete syntax by example IFML Modules - definition
xuml Use Case Diagram Example of UML - IFML mapping Handle Rental <<UML Actor>> Sales Clerk <<UML Model>> IT system new rental change dates IFML Model accept payment xuml Sequence Diagrams << Use Case>> Handle Rental <<Include>> <<Extend>> IFML models can be reworked or refined after being generated <<xuml Actor>> Sales Clerk << Use Case>> Handle Renter << Use Case>> Handover Car
Multiple aspects modeling 2 (implementation and architecture) IFM L UML Sequence UML Deployment UI Mockup models
Integration with UML Description of deployment architecture UI is just one facet of system design Often need to position it in a broader architectural vision UML deployment diagram
UML Seque nce Diagra ms Tiers and calls Explicit description of interactions between tiers 37
Model-driven Development Process Manual specification of BPMN process model Automatic transformation of BPMN to WebML Possible manual refinement of WebML models Automatic running code generation on J2EE platform Virtuous development cycle
The generated model artifacts
How does it work? IFML metamodel (1) IFML is defined through a metamodel
IFML metamodel (2): Content Binding Data binding to Classes and Attributes Dynamic Behavior to Methods and Diagrams
Practical results of having a standard An official metamodel of the language which describes the semantics of and relations between the modeling constructs A graphical concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer A UML Profile consistent to the metamodel An interchange format between tools using XMI All this, specified through standard notations themselves
Also: interchange with profile-based diagrams. The UML Profile for IFML Static aspects «page» AlbumSearch «page» Albums «page» Album Album Search Album Index Album Detail Dynamic aspects «index» MBox List SelectMailMessages(mBox) «index» Message Index
Model integration and interchange Tight and seamless integration between different modeling tools Thanks to XMI interchange format, UML profiles, vendor-specific notation implementations Thanks to model to model transformations IFML modeling and industrialstrenght UI generation Other Domainspecific modeling tool XMI model exchange Model to model transformatio n UML tool implementing IFML profile BPMN and/or UML editor
Tool support for MDE/MDD Drawing vs. modeling
What is WebRatio An Eclipse-based development environment allowing: Modeling: ER + IFML + BPMN 100% code generation of standard JEE applications Clear separation between design time and run time No proprietary runtime Quick and agile development cycles Extending the generation rules Defining new presentation styles Defining new components Versioning, teamwork, full lifecycle mgt Results Verification Truly multi-role model-driven development Requirement Analysis Solution Modeling Prototype Generation
Some numbers WebRatio is now at 7 th release on the market since 2001 WebRatio customers 130+ companies and 500+ commercial users mainly Italy, USA, Europe and Latin America WebRatio adoption 15,000+ users of the free edition Used in hundreds of universities all over the world WebRatio partners 40+ software houses and system integrators 300+ universities worldwide, 13.000+ students
WebRatio Step 1 You capture business requirements in abstract, technology independent models Business User WebRatio Modeller BPMN + IFML
WebRatio Step 3 You get a tailored, yet standard, Java Web application with no proprietary runtime WebRatio Modeller Business User Code generation
Get the application Browser Standard execution environment Web App Standard Java Application Server DBMS Custom Information System SOA
Agile, quick prototyping Involve business users in the development process and converge quickly to the target Requirement Analysis Results Validation Solution Modelling Application Generation
Our innovation environment
Evolution of tool (and language)
The final picture
Agility + MDD Iterative, agile development? Model Zero-cost, 1- click, prototype generation Generation Engine Generatio n Rules Different deployment configurations Development / Testing environment Developme nt Prototype Final Application Final execution environment Test User Final App User
The MDE Virtuous Cycle Do not change the generated application code Touch the generation rules instead? Model Generation Engine Generatio n Rules Generated Application
Examples of application areas Document Management Knowledge Management Learning Management Project Management Web Front-End of accounting sys. Payment Services Orchestration Front-Office Process Mgt Knowledge Support Business Intelligence Financial Services Product Life Cycle Management Web Content Managemen t Human Capital Management Customer Relationshi p Managemen t Supply Chain Managemen Enterprise Resource Planning Recruitment Training Workforce Management t Corporate Operations Customer Information Mgt Sales and Lead Management Partner Relationship Mgt Marketing Resources Mgt Supplier Relationship Mgt Enterprise Governance Risk and Compliance Order Mgt Web Customer Services B2C/B2B E-Commerce
https://www.webratio.com/site/content/en/mobile-app-development 58