of 28 /28
UI/UI PROTOTYPE GENERATION Sum Pham

UI/UI prototype generation

  • Author
    lysa

  • View
    46

  • Download
    1

Embed Size (px)

DESCRIPTION

UI/UI prototype generation. Sum Pham. Contents. Framework overview Current approaches Introduce a model-driven user interface generation. Framework overview. Declarative models?. Contents. Framework overview Current approaches Introduce a model-driven user interface generation. - PowerPoint PPT Presentation

Text of UI/UI prototype generation

UI/UI prototype generation

UI/UI prototype generationSum PhamContentsFramework overviewCurrent approachesIntroduce a model-driven user interface generationFramework overview

Declarative models?ContentsFramework overviewCurrent approachesIntroduce a model-driven user interface generationContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)The XIS approachModel-to-model generationSeparates modelling of different system into sub-models:Entities viewUse Case viewUser Interface viewHas two approachesDummy approachSmart approach

The XIS approach - DummyEntities View: Composes only domain modelUse case view: only defines an actors hierarchy (actors view)User interface view: must be fully specified comprising an Interaction Spaces View:Abstract screens Navigation Space ViewThe XIS approach - SmartEntities View:Domain View: models the domain entities by using a UML class model + XIS-profile stereotypedBusiness Entities View: group domain entitiesUse-Cases View:Actors View: defines the hierarchy of actorsUseCases View: identifies use cases and relates each actor with the use casesUser-Interfaces View: can be generated from other modelsA XIS model may, then, be inputted to a model to code (M2C) generation processThe UseCases View - also associates each use case to the business entity on which the actors related to that use case can perform operations- The XIS profile does not support OCL nor the full specification of operations' syntax. It only allows the declaration of operations' name, not its signature, nor semantics (body or pre-/post-conditions) (Saraiva & Silva, 2008; Silva et al., 2007)8ContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)The OO-Method approachProducing a formal specification of a software system using OASIS(the execution model.).Graphically model a system at a conceptual level OASIS specification:Object Model(UML class diagram): capturing domain classes and classes associated to user roles.Dynamic Model: Used to specify valid object lifecycles and interaction between objects.Object lifecycles: state transition diagram/classObject interactions: interaction diagramFunctional Model: the semantics of change of statePresentation Model: How users will interact with the systemOASIS : executable formal object-oriented language namedAvoid the complexity traditionally associated to the use of formal methods- Object Model: For each class, the object model captures information about its attributes, services (operations triggered by message events with the same name), derived attributes, constraints and relationships (aggregation and inheritance)interaction diagram: (non-UML) interaction diagram for the whole system- Functional Model: For that, it is declaratively specified how each service changes the object state depending on the arguments of the involved service and the current object state- OlivaNova transformation engines provide a well-defined software representation of the conceptual modelling patterns in the solution space10ContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)The ZOOM approachZOOM: Z-based OO modelling notationSeparates an application into three parts:Structure: ZOOM for structural modelsBehaviour: ZOOM-FSMUser-interface: ZOOM-UIDLJava-like textual syntax for structural and behavioural modelsXML-based language for the User-Interface modelZOOM provides a graphical representation of models consistent with UML diagrams

Z-based OO modelling notation, is an object-oriented (OO) extension to the formal specification language Zand provides three separate, but related, notations to describe each of those partsZOOM-FSM: specifying behavioural models through finite state machinesUIDL, a user interface description language for UI modelsJava-like textual syntax for structural and behavioural models and an XML-based language for the User-Interface model12ContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)Martinez methodologyExtracting use cases and actors from the business process modelBuild sequence diagrams for each use caseEnriched sequence diagrams with UI related information.Generating application forms and state transition diagrams for the interface objects and control objects present in the sequence diagramsContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)Elkoutbi approachStart with system domain structural model and a use case modelFormalizing each use case through a set of UML collaboration diagrams

Elkoutbi approachCollaboration diagram message is manually labelled with UI constraints (inputData and outputData)

Elkoutbi approachA statechart is created for each distinct class in a collaboration diagram

Elkoutbi approachGenerate UI prototypes for every interface object defined in the class diagram

ContentsXIS approach (Silva et al., 2007; Silva & Videira, 2008; Silva, 2003)The OO-Method approach (Pastor & Molina, 2007; Pastor et al., 2004; Molina, 2004; Molina & Hernndez, 2003)The ZOOM approach (Jia et al., 2005)Martinez methodology (Martinez et al., 2002)Elkoutbi approach(Elkoutbi et al., 2006)Forbrig approach (Wolff et al., 2005a; Wolff et al., 2005b; Javahery et al., 2007; Radeke et al., 2007; Forbrig et al., 2004; Reichart et al., 2004)Interactively generates an abstract UI model, and then a concrete UIStart with:Task modelBusiness objects modelUser modelDevice modelCreate more concrete models by modeller(computer assisted: DiaTask tool, PIM Tool)ContentsFramework overviewCurrent approachesIntroduce a model-driven user interface generationmodel-driven UI generation and developmentFrom Domain and Use Case ModelsGeneral approach

model-driven UI generation and developmentDomain model: UML class diagram, with classes (base domain entities), attributes and relationshipsSimple domain model (DM):first iterationsExtended domain model (EDM): domain model is extended with additional features.Use case model (UCM): integrated with the EDMOn each iteration, the generated UI may be tuned by a UI designerOutput UI is in a XML-based UI description languagethe generated UI may be tuned by a UI designer in two points of the process: after having generated an abstract UIM, but before generating a concrete UI; and after generating a concrete UI in a XML-based UI description language24model-driven UI generation and development

model-driven UI generation and development - Example

model-driven UI generation and development - Example