-
오재혁
User Interface Modeling
with UML
오재혁
Sequence Diagram
Object
Timeline
Message
Object
Timeline
Message
Sequence Diagram UI Workflow
출처 : http://bitswiz.tistory.com/27
출처 : http://bitswiz.tistory.com/27
View
(UI)
Control
(Logic)
Model
(Class, Object, Data)
Complex UI Workflow
3D Sequence Diagram
2008,
Patent
IBM
Three Dimensional Software Modelling
Joseph (Yossi) Gil*
IBM T.J. Watson Research Center
P.O. Box 704
Yorktown Heights, NY...
3D Visualization of Complex Software Models: Practical Use
and Limitations
Joacim Alvergren∗
IT University of Gothenburg
J...
3D Visualization of Complex Software Models: Practical Use
and Limitations
Joacim Alvergren∗
IT University of Gothenburg
J...
http://www.x3d-uml.org/
http://youtu.be/gcgQajTXVrA
http://www.eclipse.org/gef3d/
https://www.youtube.com/watch?v=fD5QLuPo...
User Interaction and Interface Design with UML
Jesús M. Almendros-Jiménez and Luis Iribarne
Dpto. de Lenguajes y Computaci...
UWE (UML-based Web Engineering Approach)
don’t have a unique and precise notation [Pj94,Sb98]. Our approach provides
metho...
?
Project
Employee
head
projects
ByProjectNameByEmployee
ByProjectName
ByDepartment
ByEmployeeName
ByDepartment
employees
...
object within a guided tour).
«presentation class»
CompanyMenu
«presentation class»
Company
Head
Departments
Projects
Empl...
Head
Departments
Projects
Employees
«client page»
CompanyMenu
«client page»
MainMenu
Head
Departments
Projects
Employees
H...
or they are generated dynamically.
: User
window1 :
Window
: Left : Right
display (CompanyFrameset)
display(CompanyMenu)
d...
2 Pedro F. Campos and Nuno J. Nunes
seamlessly supporting multiple levels of abstraction (in terms of UI detail). The
foll...
(발제) User Interface Modeling with UML +University of Manchester -Paulo Pinheiro da Silva /오재혁 x2012winter
Upcoming SlideShare
Loading in …5
×

(발제) User Interface Modeling with UML +University of Manchester -Paulo Pinheiro da Silva /오재혁 x2012winter

693 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
693
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

(발제) User Interface Modeling with UML +University of Manchester -Paulo Pinheiro da Silva /오재혁 x2012winter

  1. 1. - 오재혁
  2. 2. User Interface Modeling with UML 오재혁
  3. 3. Sequence Diagram Object Timeline Message
  4. 4. Object Timeline Message Sequence Diagram UI Workflow
  5. 5. 출처 : http://bitswiz.tistory.com/27
  6. 6. 출처 : http://bitswiz.tistory.com/27 View (UI) Control (Logic) Model (Class, Object, Data)
  7. 7. Complex UI Workflow 3D Sequence Diagram
  8. 8. 2008, Patent IBM
  9. 9. Three Dimensional Software Modelling Joseph (Yossi) Gil* IBM T.J. Watson Research Center P.O. Box 704 Yorktown Heights, NY 10598, USA yogi@cs.technion.ac.il Stuart Kent† School of Computing and Math Sciences University of Brighton Lewes Road, Brighton, UK Stuart.Kent@brighton.ac.uk ABSTRACT Traditionally, diagrams used in software systems modelling have been two dimensional (2D). This is probably because graphical notations, such as those used in object-oriented and structured systems modelling, draw upon the topological graph metaphor, which, at its basic form, receives little benefit from three dimensional (3D) rendering. This paper presents a series of 3D graphical notations demonstrating effective use of the third dimension in modelling. This is done by e.g., connecting several graphs together, or in using the Z co-ordinate to show special kinds of edges. Each notation combines several familiar 2D diagrams, which can be reproduced from 2D projections of the 3D model. 3D models are useful even in the absence of a powerful graphical workstation: even 2D stereoscopic projections can expose more information than a plain planar diagram. Keywords Modelling, visual formalism, object-oriented software development, CASE tools, formal methods, state charts. 1 INTRODUCTION The advent of powerful and cheap graphical workstations, enables the use of 3D modelling in many software applications. This trend is amplified with the introduction of standards such as OpenGL [13] and VRML [3]. There are also several systems for visualising software execution, for debugging and other purposes [22], [15]. Yet, perhaps surprisingly, 3D modelling has not yet made its way into the domain of specification and design of software and information systems. Diagrams of various sorts are used extensively in this domain. These include data flow diagrams, state charts, flow charts, entity-relationship diagrams, and the diagrams in OPEN [8] and UML [21], which are all essentially 2D. It is only natural to ask: How can the introduction of 3D contribute to software and systems modelling? This paper presents an alternative to current 2D diagrams in the form of a series of 3D graphical notations. It should The notations presented here complement and are compatible with existing 2D notations such as those making up UML. In fact, each of our 3D models can be thought of as a seamless combination of several 2D diagrams. Conversely, the 2D diagrams can be extracted from the 3D model by its geometric projection onto a plane. 3D software models enable visualisation of richer semantics than those of 2D models. For example, there are 3D models that encompass both a static and a dynamic description of a system. Although we envisage a set of 3D CASE tools which support the creation, editing and manipulation of models, 3D models are useful even in the absence of such tools. A stereoscopic projection of such a model is semantically richer than a 2D diagram, since the 3D visual cues that the projection delivers, also carry a semantic meaning. Section 2 explains why many of the notations in current use are inherently 2D and elaborates on the rationale and techniques of 3D modelling. Section 3 reviews a number of 2D notations, mostly taken from UML, the latest standard in graphical languages for the modelling of software systems. Section 4 reviews constraint diagrams [14], a newly proposed 2D notation, which plays a pivotal role in our 3D models. Section 5 introduces the 3D notations: contract boxes, 3D sequence diagrams, nested box diagrams, and a 3D extension of flow charts. The relationship between the 3D and 2D notations is also discussed, using the metaphor of geometric projection. Finally, Section 6 concludes the paper with a summary and outline of future work, focusing on semantics and tool support. 2 FROM 2D TO 3D MODELS The immediate reason that diagrams used for software modelling are 2D rather than 3D might seem to be that drawing on paper is much easier than sculpturing. A graphs [10] in the domain of specification of object- oriented systems, with several important extensions, the main ones being the ability to show set membership, and the ability to quantify both universally and existentially over set members, in addition to set plain containment. This is achieved in part by introducing notation for showing singletons (and sets of other cardinalities). The notation is summarised here, using the example in Figure 5 for illustration. Figure 5 documents an invariant which can not be expressed using the diagrammatic notations of UML, even enhanced with ideas from other OO notations such as [6]. The only other way to express these precisely is through the use of a textual, mathematical language, such as that suggested for [4], [5], or [19] User Copy coll Active OnShelfavailableTo OnHold Reservation availableTo Library registered collection onHoldFor x y z Figure 5 - Constraint Diagram diagrams - one for the pre-condition and one for the post condition. Making this layering explicit might be necessary for complex specifications. The constraint diagram notation is extended slightly with a special symbol for input parameters of the operation. In this stereoscopic projection a diamond symbol has been used* . In Figure 6, two parameters of the actions are shown, a copy and a user. The pre-condition constraint represented by this diagram is that the copy, which must be an available one in the collection of the library on which the operation is being invoked, must be available to a set of users including the parameter to the operation, which in this model is the one borrowing the copy. The object on which the operation is being invoked is shown by a message send which is depicted by a “lightning bolt” to that object, labelled with operation being invoked. The post-state diagram shows the change in state that the operation has caused. Object lifelines are used to show that an object taking part in the post-state is the same as another depicted in the pre-state. In general, lifelines can be used to connect sets. Here, the effect of the operation is to: • change the state of the input copy object to Out, which is shown by moving the object from the projection of the Available state to the projection of the Out state; • ensure that the set of objects the copy is availableTo is empty ( ); • create a new loan object in the OnGoing state (indicated by a ); and • associate the loan object with the user and the copy. This illustrates a further extension to the constraint diagram notation, specifically to indicate the creation of objects. The creation of a single object is indicated through the use of a , of a set with 0 or 1 objects by , and of a set with an arbitrary number of objects by . Some of this behaviour, namely the pre condition that the copy object must be in the available state and the fact that it changes state during the operation could be shown by a state diagram in UML. Indeed a projection of this diagram would be a part of the state diagram for Copy given in Figure 2. It would be constructed as follows. Focus on the guard on the transition to the effect that the copy (this) must be available for lending to u. A textual (informal or formal) version of the contract could also be derived from the diagram in a similar way to the derivation of invariants from constraint diagrams. 5.2 3D Sequence Diagrams C o p y Available Library User Loan a v a i l a b l e T o Borrow c o l l e c t i o n addLoan addUser takeOut Figure 7 - 3D sequence diagram + sequence diagram =
  10. 10. 3D Visualization of Complex Software Models: Practical Use and Limitations Joacim Alvergren∗ IT University of Gothenburg Jonatan Granqvist† IT University of Gothenburg ABSTRACT Model Driven Development is becoming a popular method- ology when developing large software systems. 3D visualiza- tions has been proposed as an aid for the developers trying to comprehend large amounts of complex diagrams present in model driven development. But how effective is it in practice, and how will it scale when applied on large complex system? The purpose of this study is to validate if 3D visualization in- creases comprehensibility of large, complex diagrams and to explore what limitations there are to the technique. A tool that can visualize diagrams was constructed and validated through a technical validation and a qualitative interview study at Ericsson AB. The results show that 3D aids the user to get a better understanding of the structure and compo- nent relationships of the diagrams, something that is a highly complex task when using the present 2D tools. The 3D visu- alization makes it more intuitive for the user to see how dif- ferent parts in the model relate to each other. The study also shows that 3D has potential to be used as an alternative to the file tree-browser present in most modeling tools: the user can find diagram parts easier, see interconnections and nav- igate faster between different sections of the model. Several limitations that are needed to be solved before the technique can be put in to use in production were identified and these include issues relating to information overload and problems distinguishing relationships between hierarchies. Keywords: 3D Visualization, UML, RSART, Model Com- prehension, Software Visualization, MDD aims to increase productivity and make the software more comprehensible (Selic 2003). However, with ever larger and more complex software sys- tems the present visualization of the model diagrams have been found to have problems with comprehensibility. When developing large software systems it is vital to have a men- tal model: a comprehension of the structure of the system’s different components and their relations to each other. Work- ing with the complex hierarchical models present in MDD, gaining such a mental model has become a highly challeng- ing task (Krolovitsch & Nilsson 2009). The way the present MDD modeling tools allow for the user to comprehend the structure is by traversing between the different components in the model represented by 2- dimensional diagrams. This is a complex task that demands memorizing large parts of the model to gain an understand- ing of the hierarchic structure and that puts a high cognitive load on the user trying to comprehend the model. To increase the comprehensibility and reduce the cognitive load of the user, a suggested solution has been to also visual- ize the models in 3-dimensional diagrams (McIntosh et al. 2005, von Pilgrim & Duske 2008, Krolovitsch & Nilsson 2009). The increased spatial expressiveness in a 3D visual- ization compared to 2D allows the user to view and explore large amounts of information at once and could therefore in- crease the comprehensibility of the model, something previ- ous studies in this area have found evidence for (Lange & Chaudron 2007). tions has been proposed as an aid for the developers trying to comprehend large amounts of complex diagrams present in model driven development. But how effective is it in practice, and how will it scale when applied on large complex system? The purpose of this study is to validate if 3D visualization in- creases comprehensibility of large, complex diagrams and to explore what limitations there are to the technique. A tool that can visualize diagrams was constructed and validated through a technical validation and a qualitative interview study at Ericsson AB. The results show that 3D aids the user to get a better understanding of the structure and compo- nent relationships of the diagrams, something that is a highly complex task when using the present 2D tools. The 3D visu- alization makes it more intuitive for the user to see how dif- ferent parts in the model relate to each other. The study also shows that 3D has potential to be used as an alternative to the file tree-browser present in most modeling tools: the user can find diagram parts easier, see interconnections and nav- igate faster between different sections of the model. Several limitations that are needed to be solved before the technique can be put in to use in production were identified and these include issues relating to information overload and problems distinguishing relationships between hierarchies. Keywords: 3D Visualization, UML, RSART, Model Com- prehension, Software Visualization, MDD tems the present visualization of the mo been found to have problems with comp developing large software systems it is v tal model: a comprehension of the struc different components and their relations t ing with the complex hierarchical mode gaining such a mental model has become ing task (Krolovitsch & Nilsson 2009). The way the present MDD modeling user to comprehend the structure is by the different components in the model dimensional diagrams. This is a complex memorizing large parts of the model to g ing of the hierarchic structure and that p load on the user trying to comprehend th To increase the comprehensibility and r load of the user, a suggested solution has ize the models in 3-dimensional diagram 2005, von Pilgrim & Duske 2008, Kro 2009). The increased spatial expressiven ization compared to 2D allows the user t large amounts of information at once and crease the comprehensibility of the mode ous studies in this area have found evid Chaudron 2007). However the studies that have made fu in this area have not validated the protot Figure 2: Comparison between 2D and 3D view 3.3 User validation 3.3.2 Information overload
  11. 11. 3D Visualization of Complex Software Models: Practical Use and Limitations Joacim Alvergren∗ IT University of Gothenburg Jonatan Granqvist† IT University of Gothenburg ABSTRACT Model Driven Development is becoming a popular method- ology when developing large software systems. 3D visualiza- tions has been proposed as an aid for the developers trying to comprehend large amounts of complex diagrams present in model driven development. But how effective is it in practice, and how will it scale when applied on large complex system? The purpose of this study is to validate if 3D visualization in- creases comprehensibility of large, complex diagrams and to explore what limitations there are to the technique. A tool that can visualize diagrams was constructed and validated through a technical validation and a qualitative interview study at Ericsson AB. The results show that 3D aids the user to get a better understanding of the structure and compo- nent relationships of the diagrams, something that is a highly complex task when using the present 2D tools. The 3D visu- alization makes it more intuitive for the user to see how dif- ferent parts in the model relate to each other. The study also shows that 3D has potential to be used as an alternative to the file tree-browser present in most modeling tools: the user can find diagram parts easier, see interconnections and nav- igate faster between different sections of the model. Several limitations that are needed to be solved before the technique can be put in to use in production were identified and these include issues relating to information overload and problems distinguishing relationships between hierarchies. Keywords: 3D Visualization, UML, RSART, Model Com- prehension, Software Visualization, MDD aims to increase productivity and make the software more comprehensible (Selic 2003). However, with ever larger and more complex software sys- tems the present visualization of the model diagrams have been found to have problems with comprehensibility. When developing large software systems it is vital to have a men- tal model: a comprehension of the structure of the system’s different components and their relations to each other. Work- ing with the complex hierarchical models present in MDD, gaining such a mental model has become a highly challeng- ing task (Krolovitsch & Nilsson 2009). The way the present MDD modeling tools allow for the user to comprehend the structure is by traversing between the different components in the model represented by 2- dimensional diagrams. This is a complex task that demands memorizing large parts of the model to gain an understand- ing of the hierarchic structure and that puts a high cognitive load on the user trying to comprehend the model. To increase the comprehensibility and reduce the cognitive load of the user, a suggested solution has been to also visual- ize the models in 3-dimensional diagrams (McIntosh et al. 2005, von Pilgrim & Duske 2008, Krolovitsch & Nilsson 2009). The increased spatial expressiveness in a 3D visual- ization compared to 2D allows the user to view and explore large amounts of information at once and could therefore in- crease the comprehensibility of the model, something previ- ous studies in this area have found evidence for (Lange & Chaudron 2007). Cons. Visualization of abstract information : 2D UML 에 익숙한 사람들에게 3D 를 제공하기 위해 적용한 상징들을 이해시키기 어려 웠다. Information overload : 복잡한 대상을 단계적으로 이해해 갈 수 있도록 적정한 Level of Detail 조정, 손쉬운 부분 선택 등의 기능이 필요하다. Visual coherence : color, position, shape, relative size 등으로 긴밀하게 연동된 2D, 3D view 를 함께 보여주는 것이 필요하다. 새로운 3DView 가 전체 시스템에 대한 이해를 넓히는데 도움을 줄 수 있지만, 아직 기존 일선의 사람들에게 직접 적용하기에는 넘어야할 단계들이 많다.
  12. 12. http://www.x3d-uml.org/ http://youtu.be/gcgQajTXVrA http://www.eclipse.org/gef3d/ https://www.youtube.com/watch?v=fD5QLuPo-uE
  13. 13. User Interaction and Interface Design with UML Jesús M. Almendros-Jiménez and Luis Iribarne Dpto. de Lenguajes y Computación. Universidad de Almería {jalmen,liribarne}@ual.es stract is chapter is devoted to show how to use and specialise UML diagrams for describing the u erfaces of a software system. In order to accomplish the description of user interfaces, the propos hnique considers three specialised UML diagrams called user-interaction, user-interface and GU ss diagrams, which will be built following a model-driven development (MDD) perspective. Th grams can be seen as the UML-based UI models of the system. In addition, this paper concerns w de-generation to implement the user interfaces of the system by using GUI-class diagrams and us eraction diagrams. A case study of an Internet book shopping system is introduced in this chapter oof and illustrate the proposed user interaction and interface design technique. y words: UML 2.0, Use Cases, Model-Driven Development, Visual Languages, Interact mputing, Interaction Design. TRODUCTION UML-based User Interface modeling 의 장점 1) rapid prototyping 2) model validation and refinement 3) model-based code generation 4) start-point for implementers
  14. 14. UWE (UML-based Web Engineering Approach) don’t have a unique and precise notation [Pj94,Sb98]. Our approach provides methodological guidelines and modeling elements for storyboarding. The next step of our method goes towards an implementation (Figure 1). Based on the storyboard model the designer can decide whether he wants to choose a multiple- window technique and/or whether he wants to use frames and/or dynamic page generation. The objective of the presentation model is to show where the user interface views of the storyboard model are presented to the user, i.e. in which frame or window they are displayed. This also shows which contents are replaced when the user interacts with the system. In addition to the client pages, constructed in accordance with the user interface views, server pages in the sense of Conallen are identified when they are required for the dynamic generation of client pages. Conceptual Model Navigation Model Presentation Model «trace» «trace» Fig. 1: Models of the UWE design process Modeling the User Interface of Web Applications with UML Rolf Hennicker1 , Nora Koch 1,2 1 Institute of Computer Science Ludwig-Maximilians-University of Munich Oettingenstr. 67 D-80538 München, Germany {kochn,hennicke}@informatik.uni-muenchen.de 2 F.A.S.T. Applied Software Technology GmbH Arabellastr. 17 D-81925 München, Germany koch@fast.de Abstract. Today's User Interfaces (UIs) are complex software components, which play an essential role in the usability of an application. The development of UIs requires therefore, not only guidelines and best practice reports, but also a development process including the elaboration of visual models and a standardized notation for this visualization.
  15. 15. ? Project Employee head projects ByProjectNameByEmployee ByProjectName ByDepartment ByEmployeeName ByDepartment employees ByProyect Name departments projects employees ByEmployee Name ByDepartment Name projects 1 1..* 1 1..* 1..* 1 1..* 1 1..* 1 1 1 1 1..* searchEmployees searchBy EmployeeName ByDepartment {xor} 1 Company Department 1 1 0..1 CompanyMenu DepartmentMenu EmployeeMenu 1 Fig. 5: Navigation Model
  16. 16. object within a guided tour). «presentation class» CompanyMenu «presentation class» Company Head Departments Projects Employees «UI view» CompanyView Employee «UI view» HeadView Department Index «UI view» DepartmentIndex «UI view» DepartmentView HeadMenu Head Departments Projects Employees Home Head Departments Projects Employees Home «presentation class» DepartmentMenu «presentation class» DepartmentMenu Head Departments Projects Employees Home «anchored collection» * ... Department «presentation class» «presentation class» «presentation class» «presentation class» 1 1 1 Fig. 8: Storyboard Scenario for Head and Department
  17. 17. Head Departments Projects Employees «client page» CompanyMenu «client page» MainMenu Head Departments Projects Employees Home «window» TopWindow «frameset» CompanyFrameset «frame» Left «frame» Right «client page» Company «frameset» MainFrameset «frame» Main Left «frame» Main Right «links» «displays» «links» «client page» Employee «server page» DeptartmentIndex «client page» DepartmentIndex «builds» «links» «displays» «displays» «displays» «displays» «displays» «displays» {xor} «targets» «targets» Fig. 10: View of the Presentation Model of the Company Web Site
  18. 18. or they are generated dynamically. : User window1 : Window : Left : Right display (CompanyFrameset) display(CompanyMenu) display(Company) select(Head) display(MainMenu) select(Department Índex) display(DepartmentIndex) display(MainFrameset) display(Employee) Fig. 11: Presentation Flow for a Scenario of the Company Web Site
  19. 19. 2 Pedro F. Campos and Nuno J. Nunes seamlessly supporting multiple levels of abstraction (in terms of UI detail). The following section describes the languages and the semantic model of our tool. Section 3 briefly explains some of the tool’s features and Section 4 draws some conclusions and future lines of research. Figure 1: Prototyping techniques from inception to construction (adapted from [1]). 2. CanonSketch: the Languages A UML-Based Tool for Designing User Interfaces Pedro F. Campos and Nuno J. Nunes University of Madeira – Dep. of Mathematics and Engineering Campus Universitário da Penteada 9000-930 Funchal – Portugal Abstract. Existing software modeling tools are widely recognized to be hard to use and, hence, to adopt. We believe those usability problems are related to a legacy of formalism-centric tools that don’t promote the new challenges of modern software development. In this short paper, we briefly describe a new tool, under development, that tries to promote usability in modeling tools to support collaborative development of interactive software. It focuses on usable, real-world languages and a developer-centered design. . Introduction Task models Detailed prototypes 이를 극복하기 위해,Task model 에 대응하는 Detail 의 규범을 정의하는 언어를 적용하기도 하지만, 자연스럽지 않다.

×