Integrating Heterogeneous Tools into Model-Centric Development of - - PowerPoint PPT Presentation

▶
integrating heterogeneous tools into model centric
SMART_READER_LITE
LIVE PREVIEW

Integrating Heterogeneous Tools into Model-Centric Development of - - PowerPoint PPT Presentation

Aug 19, 2022 104 likes •436 views

Andreas Pleuss, Arnd Vitzthum, Heinrich Hussmann University of Munich Integrating Heterogeneous Tools into Model-Centric Development of Interactive Applications Integrating Heterogeneous Tools Into Model-Centric Development Introduction

slide-1
SLIDE 1

Integrating Heterogeneous Tools into Model-Centric Development of Interactive Applications

Andreas Pleuss, Arnd Vitzthum, Heinrich Hussmann

University of Munich

slide-2
SLIDE 2

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 2

Introduction

  • MDD: Systematic, well-structured application development, teamwork,

platform-independence, maintainability, etc. …

  • User interface design: Usability of the application, user interface elements

and interaction paradigms for new devices, aesthetics of the user interface, etc. …

  • Common practice in UI design: User-Centered Design
  • Find out user‘s tasks, needs and properties to provide an optimized UI
  • Achieved by permanent user feedback and user tests
  • Based on various prototypes of different granularity
  • Examples:

– Mock-ups for first ideas and basic requirements – Lo-fi prototypes like paper prototypes for first tests of task flow and interaction – Hi-fi prototypes like click-dummies for more detailed interaction

slide-3
SLIDE 3

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 3

Tools Used by User Interface Designers

  • Support creativity
  • Support visual, direct manipulation
  • Various heterogeneous tools for different development

steps

  • Examples:

– Drawing and image editing tools, like Photoshop, Illustrator, etc., e.g. used for creation of Mock-Ups – Authoring tools like Flash, e.g. used for creation of click-dummies

  • Visual tools also used for final implementation; in

particular for complex (non-standard) user interfaces

– Multimedia user interfaces often implemented by authoring tools like Flash

  • r Director

– 3D user interfaces implemented by 3D graphics tools like 3D studio max

slide-4
SLIDE 4

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 4

Problem

  • MDD for efficient high-

quality application development

  • Systematic and abstract
  • Problem: Low acceptance

and understandability for people without technical background

  • User-Centered Design for

high-quality user interface development

  • Creative and concrete
  • Involves graphical

designers, users and customers

Clash of cultures between abstract models of software engineers and concrete and creative tools/artifacts in user interface design

slide-5
SLIDE 5

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 5

Proposed Solution

  • Abstract model adopts role to integrate the heterogeneous

artifacts and tools

  • Extract (automatically) the relevant information from

artifacts from user interface design into the model

  • Create skeletons for creative tools from the models
  • Advantages:

– Integration and coordination of interdisciplinary work – Increased consistency – Efficiency

→Models as “central hub” in the development process

slide-6
SLIDE 6

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 6

Models as “Central Hub” in the Development Process

Model Flash Click-Dummy Photoshop Mock-Up GUI Builder 3D Authoring Tool IDE Multimedia Authoring Tool

slide-7
SLIDE 7

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 7

Automatic Extraction of Information: Conventions

  • Sometimes necessary: Certain basic conventions for

designers to enable automatic analysis of their results

  • Naming conventions to specify the semantics of

elements

  • Simple structure conventions
  • But: User Interface Designers already used to

conventions and guidelines (e.g. usability guidelines)

slide-8
SLIDE 8

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 8

Outline for the Remaining talk: Concrete Examples

  • 1. From Prototypes to Models:

1.Flash Click-Dummies to Models 2.Photoshop Mock-Ups to Models

  • 2. From Models to Code Skeletons

1.From MML Models to Flash 2.From SSIML Models to 3D Authoring Tools

slide-9
SLIDE 9

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 9

Transition: From Tools to Models

Tool/ Artifact Abstract Model 1 Model Transformations

Helper Tool/ Plugin/Script

Abstract Model n PSM corresponding to Artifact

slide-10
SLIDE 10

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 10

From Flash Click-Dummies to Models

Flash Document (FLA File) UI Model 1 Model Transformations (e.g. ATL)

Execution of JSFL file

UI Model x Flash Model

slide-11
SLIDE 11

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 11

Adobe Flash

  • Popular professional multimedia authoring tool
  • Supports integration of different media objects and

creation of 2D graphics and animation

– File format: proprietary, binary FLA files

  • Integrated scripting language ActionScript

– Either embedded within FLA document or as separate class files (*.as)

slide-12
SLIDE 12

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 12

Stage Timeline Drawing Tools

slide-13
SLIDE 13

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 13

slide-14
SLIDE 14

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 14

From Flash Click-Dummies to Models

Flash Document (FLA File) UI Model 1 Model Transformations (e.g. ATL)

Execution of JSFL file

UI Model x Flash Model

slide-15
SLIDE 15

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 15

Flash Metamodel (Simplified Extract)

VideoItem BitmapItem SoundItem FontItem Shape Text Instance ComponentInstance MovieClip Element

depth : Integer height : Double left : Double name : String top : Double width : Double

Layer Frame

0..n 1 +element 0..n +frame 1 0..n 1 +frame 0..n +layer 1

ASScript

0..1 0..1 +actionScript 0..1 +frame 0..1

SymbolI tem SymbolInstance

0..1 0..1 +actionScript 0..1 +symbol 0..1 1 +libraryItem 1

Timeline

1..n 1 +layer 1..n +timeline 1 1 0..1 1 +symbolItem 0..1

FlashDocument

backgroundColor : String frameRate : Double height : Integer width : Integer 1..n 0..1 +timeline 1..n +document 0..1

Library

1 1 +library 1 +document 1

Class Item

name : String 0..n 1 +item 0..n +library 1 0..1 +actionScript 0..1 timeline

slide-16
SLIDE 16

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 16

From Flash Click-Dummies to Models

Flash Document (FLA File) UI Model 1 Model Transformations (e.g. ATL)

Execution of JSFL file

UI Model x Flash Model

slide-17
SLIDE 17

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 17

Extracting information

  • How to extract information from proprietary, binary Flash files?
  • Available: Flash authoring tool provides a plug-in mechanism:

– Plug-ins are scripts written in JSFL (Java Script for Flash) – JSFL provides kind of document object model for Flash documents

  • Solution for our purpose: JSFL script browses through document and
  • utputs XML for each found element
  • Result: “Flash model” conform to the Flash metamodel which we have

specified (implemented with EMF)

  • In addition: Parser for ActionScript code (implemented with JavaCC)
slide-18
SLIDE 18

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 18

From Flash Click-Dummies to Models

Flash Document (FLA File) UI Model 1 Model Transformations (e.g. ATL)

Execution of JSFL file

UI Model x Flash Model

slide-19
SLIDE 19

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 19

Abstract Models

  • Must include information on the user interface
  • E.g. modeling languages for model-driven user interface development,

like UsiXML, DynamoAid, TERESA, and many others

– See e.g. MODELS workshops on “Model Driven Development of Advanced User Interfaces“

  • Main concepts of such languages:

– Presentation Units (i.e. „screens“ in case of a visual UI) – Abstract user interface elements, like input component, output component, selection component, etc. – Interaction, Navigation – Relationships to domain model (i.e. application logic)

slide-20
SLIDE 20

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 20

From Flash Click-Dummies to Models

Flash Document (FLA File) UI Model 1 Model Transformations (e.g. ATL)

Execution of JSFL file

UI Model x Flash Model

slide-21
SLIDE 21

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 21

Transformation (Sketch)

  • Frames from timeline mapped to presentation units
  • Widgets mapped to corresponding abstract UI

elements

  • Jumps between screens (action script command

gotoAndStop()) mapped to navigation

slide-22
SLIDE 22

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 22

Outline for the Remaining talk: Concrete Examples

  • 1. From Tools to Models:

1.Flash Click-Dummies to Models 2.Photoshop Mock-Ups to Models

  • 2. From Models to Code Skeletons:

1.From MML Models to Flash 2.From SSIML Models to 3D Authoring Tools

slide-23
SLIDE 23

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 23

Transition: From MML Models to Flash Code Skeletons

MML Model Execution of JSFL file

Model Transformation

Flash/ ActionScript Flash Model

slide-24
SLIDE 24

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 24

Example: Blockout Gaming Application

Bricks Ball Paddle Hit Brick Additional Information

slide-25
SLIDE 25

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 25

Application Logic: MML Structure Diagram (extract)

<<ApplicationEntity>> Ball

  • x : int
  • y : int
  • direction : int
  • speed : int

+startMoving() +move() +init() +rebound() <<ApplicationEntity>> Level

  • number : int

+countBricks() : int <<ApplicationEntity>> Paddle

  • leftRight : int

+reboundBall() +move( x : int ) <<ApplicationEntity>> Brick +hit() 1 +level 1 1 +ball +level 1

  • bricks

0..* 1

  • level
slide-26
SLIDE 26

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 26

MML Scenes

Menu

<<Scene>>

Game

<<Scene>>

HighScore

<<Scene>>

Help

<<Scene>>

Score

<<Scene>> startState endState <<history>> <<history>> <<history>> <<history>> resumeMenu() startGame( p : Player, hasSound : Boolean ) resumeMenu() resumeMenu() initialMenu() levelFinished( p : Player ) nextLevel() [p.lives>0] resumeMenu() showHelp() gameOver( p : Player )

slide-27
SLIDE 27

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 27

MML Abstract UI of Scene ”Game”

<<PresentationUnit>>

Game

<<UIContainer>>

Level

<<OutputComponent>> PlayerScore <<OutputComponent>> LevelNumber <<OutputComponent>> PlayerLives <<OutputComponent>> Brick <<OutputComponent>> Ball <<ActionComponent>> Start <<ActionComponent>> Quit <<InputComponent>> PaddleLeftRight

slide-28
SLIDE 28

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 28

Abstract UI: Partially Realized by Media Components

<<PresentationUnit>>

Game

<<UIContainer>>

Level

<<OutputComponent>> PlayerScore <<OutputComponent>> LevelNumber <<OutputComponent>> PlayerLives <<OutputComponent>> Brick <<OutputComponent>> Ball <<ActionComponent>> Start <<ActionComponent>> Quit <<InputComponent>> PaddleLeftRight <<Image>> LevelBackground <<Animation2D>> PaddleAnimation <<Animation2D>> BallAnimation <<Animation2D>> BrickAnimation <<Audio>> BrickSound

slide-29
SLIDE 29

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 29

slide-30
SLIDE 30

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 30

slide-31
SLIDE 31

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 31

slide-32
SLIDE 32

October 4, 2007

  • A. Pleuss, A. Vitzthum, H. Hussmann

Integrating Heterogeneous Tools Into Model-Centric Development 32

Summary and Conclusion

  • Model as “Central Hub” to integrate creative user

interface design and MDD

  • Long-term goal: Seamless transitions across different

abstraction levels and different tools

  • Two-step approach for transitions
  • Similar tendencies in commercial tools (e.g. Microsoft

Expression)

  • Still much work to be done…