-
Notifications
You must be signed in to change notification settings - Fork 0
/
525.txt
125 lines (108 loc) · 17.4 KB
/
525.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
GUI Representation Framework for “Early User Interface Development” Agile Practice
Keywords: Agile methodologies, agile practices, GUI representation and user interface development.
Abstract: The Agile methodologies have shown success over plan-driven methodologies especially in web development due to their ability to adapt to new requirement changes. Because of the importance of the development of Graphical User Interfaces (GUI), we have proposed a new agile practice, “Early User Interface Development” (EUID), for developing GUI at early stages in our previous paper [1,2]. To speed up the process of producing the output of our practice, we propose a framework for representing the GUI structure and behavior. Besides, the framework can be used for automating the development of GUI according to the EUID process.
1 INTRODUCTION
GUI development is an essential part of the software development proess. GUI makes up about half of the code of the whole developed systems [3, 4]. It was shown that defects in GUI give bad impression for the whole system [5] even if all its required functionalities have been successfully completed. One way to reduce the GUI defects is to develop GUI in early stages of the development process. This early development will help in getting earlier customer feedback, thus earlier detection of GUI defects and GUI changes, which in turn results in reduction in the development time.
Because of the importance of the GUI in web-based Information System Application, it was proposed in [1,2] a new practice called “Early User Interface Development” based on agile methodologies which have shown great success in web development over plan-driven methodologies.
The main key behind the success of agile in software development is that it is based on producing small working units to the users without having to wait for the whole system to be developed. Also, in agile, based on adaptability, continuous changes can be handled easier than before which is suitable for the nature of web requirements [6,9].
EUID practice aims at not only designing GUI at an early stage but actually developing and presenting GUI to the customer for feedback, which is one of the most important agile values (manifesto).
However, to be able to achieve the practice objective, there is a need to find a kind of representation for the EUID outputs: GUI structure and its behavior. For that purpose a GUI framework that is suitable to represent these outputs was created. This framework can be used in a tool that can automate the generating process of the EUID outputs. In this paper we give an overview of our EUID practice and explain our proposed GUI framework that accordingly we can represent the output of the EUID practice.
2 Related Work
Different agile methodologies have been discussed in [7-10]. Each agile methodology focuses on certain aspects of development and uses certain practices to achieve these aspects.
Agile Methodologies and practices
Some of these methodologies are:
- Extreme programming [11] which focuses on development aspects through several practices such as pair programming, testing and refactoring and continuous integration.
- Scrum [12,13] focuses on both management and development aspects. In scrum, projects are decomposed into iterations that take 30 days (called sprints).Also, a 15-minute daily team management meeting called a ‘scrum’ is conducted to manage the project progress.
- FDD [14, 15] methodology is based on defining a list of prioritized features. It works through five steps: Develop an overall object model, Build a list of prioritized features, Plan (by feature), Design (by feature) and Build (by feature).
- DSDM [16,17] is based on RAD methodology. In RAD, time and resources are estimated according to the required requirements. However, in agile, time and resources are fixed and requirements are delivered according to the fixed time and resources.
Although each methodology have defined a set of practices to achieve their objectives, researches are conducted to focus on the practices make the best use of them. For example, Paige et al. [18] proposed a combination between selected XP practices, UML and Enterprise Java Beans (EJB) to allow developers to use UML and EJB in a light weight manner.
GUI generation approaches
Due to the importance of GUI, The generation of GUI has been the focus of several researches. Usecases have been used to develop GUI but the problem that whenever a change is occurred the use case must be modified first which in return does not simplify the GUI development [19]. Another option is using XML description to build GUI but that requires building XML database schemas. Based on XML [20], Strelzoff [21], A. has suggested a decision tree that can be translated to GUI. Jelinek, J. and Slavik, P. [22] propose to build GUI directly from source code without the interruption of the designers to reduce the time for creating GUI. However, it will cause a lot of problems with the nature of IS applications which requires consistency in GUI.
3 EUID Practice
The main objective of applying any agile methodology is the ability to respond to continuous changes. To ensure this, a set of agile values and principles have been defined and any agile methodology should meet. However, GUI has not been sufficiently addressed in the current agile methodologies [23].
In order to address the aspect of GUI development in agile methodologies we have proposed the EUID practice [1,2]. The core of the practice is not only designed at an early stage of agile iteration but the GUI is actually developed and presented to the customer for feedback before starting a new iteration with a set of new requirements. Thus, the feedback is not based only on the look of the GUI design but also on the GUI behavior.
The EUID practice supports the agile principles in two ways:
- Early customer feedback which resulted from the early UI development.
- Quick development since part of GUI code will be developed leaving the developers to focus on application logic development.
The EUID process is illustrated on figure 3.
Figure 1: EUID Process.
As shown in figure 1, the process starts by defining a subset of the requirements to produce the relevant GUI to achieve these requirements. According to these requirements, a UI prototype is developed and presented to the customer who in return will approve the new UI or propose new changes to be updated on the prototype. Once the customer agrees on the developed UI, the programmers can start designing and implementing their tasks using the developed “UI prototype” which becomes an actual part of developed code after refactoring. At the end of the process, a release is provided to the customer with the previously accepted UI and complete working functionalities. The customer then evaluates the release and may add or modify new requirements and thereafter a new iteration starts.
Two outputs are produced through “Develop UI prototype” steps and are illustrated in our previous papers [1,2]. These outputs are
GUI Structure
In our practice, the GUI Structure is the first output, represented by HTML. It is the top layer of any application (the visual windows and widgets with their properties).
GUI Behavior Description File
For each window structure produced, a GUI Behavior Description file, represented in XML, is produced describing all the events that should be implemented with a description about each event’s behavior.
4 EUID GUI representation Framework
Based on the scope of our research, Web-based Information System Applications, and our experience in Information System (IS) Applications, we propose a GUI representation framework, represented in figure 2, which will emphasize the production of EUID outputs (GUI Structure and GUI Behavior Description File).
Figure 2: EUID GUI Representation Framework
As shown in figure 2, each web page consists of several components. Each component has a single aim to represent on the page. Later each component is represented as a set of controls defining the structure of its corresponding page. We have proposed four main components that can be found in a web Information system page. These components are explained in section 4.1. By declaring the components for a web page, the GUI Structure will be ready.
For each component the active events and its actions are defined and described (explained in section 4.2). The active events are those events that when triggered will cause at least one action to be executed, resulting in change in page behavior. By defining active event and their corresponding actions, the GUI Behavior Description File can be created.
4.1 Components
From our analysis of Information System Applications, we can find similarities between IS web pages. According to these similarities, we propose four main components that can be found in web IS page. A web page may contain more than one component (may be of the same type). These components are:
1. Search component
One important task in IS applications is to allow the users to search for certain data. This may come in different forms, for example a combobox or a set of editable controls with a button. The search component is the one responsible for that task.
2. One record component
Another important component that can be found in almost all IS applications is one record component that are responsible for adding, editing, or viewing a one record data. One famous form for that component is a set of controls in columnar representation
3. Multi record component
The Multi record component can be referenced to being a Datagrid where data is represented in tabular form. It can be used for viewing data only or for editing or deleting. The most famous form for editing or deleting records in that component is through adding links for each record in the datagrid.
4. Navigator component
There are several actions occurs when a link is clicked. For example, on clicking a link the user can move to another page or making changes on the same page. This link can come in the form of a word, sentence, paragraph, picture or even a button.
Two examples are given to show how a web IS page can consist of these components. The first example as shown in figure 3 consists of two components: 1. Multi record component that shows all the team with edit and delete links for editing or deleting any team. 2. Navigator component “Add new team” that when clicked open a new page for adding a new team.
Figure 3: Example 1.
Second example, as shown in figure 4, consists of four components: 1. One record component that allow the user to add an evaluation template and its questions. 2. Multi record component that shows all questions added in that evaluation template also with delete link to delete questions. 3. Navigator component which is “submit” button that save data into database. 4. Navigator component which is “cancel” button that cancel all changes have been made since last submission.
Figure 4: Example 2.
4.2 Active events and actions
For each control in the component there may be active events that cause a change in page behavior. Active events are those which will trigger actions that will cause behavior changes. For example, suppose we have a navigator component in the form of a word. The events on that control can be OnClick, OnMouseOver, OnMouseUp etc. The event that will contain actions causing behavioral changes is an active event.
Each active event can trigger more than one action. For example, “Onclick” active event for a button that when clicked, two actions will be executed: 1. data is inserted into database and 2. a table in Multi record component is refreshed by the new data.
For each action we need to give a description about what that action really does and specify the input controls and output controls involved in that action.
For instance, in example 2, the active event in the first component (one record component) is Onclick for button (button1) with caption “Add Question”. The action that has to be implemented for that event is adding the user’s questions into the table (table1). The input for that action is the controls in the one record component:
Textbox tempname
Textbox Questiontext
The output for that action will be in the Multi record component Datagrid table1
Through declaring all the active events for each component in the web IS page, we will be able to create the GUI Behavior description File, represented in XML file, for that corresponding page. Figure 5 shows part of the GUI Behavior XML file that should be created for example 2 shown in figure 4. The snippet shows an active event, onclick for button1, for the first component, one record component. When the button is clicked an action occurs and takes the questions as an input from the user, then sends it to the second component to be shown in the datagrid.
<component type=”onerecord” id=”component1”>
<active_event id=”event1” control=”button1” active=”onclick”>
<action id=”action1”>
<desc>
When button1 is clicked the question inserted
by the use will be added in a table for
reviewing.
</desc>
<input> component1.textbox</input>
<output>component2.datgrid1</output>
</action>
</active_event>
…
</component>
<component type=”multirecord” id=”component2”>
…
</component>
...
Figure 5: Part of GUI Behavior Description File
5 Conclusions and Future Work
As shown previously, agile methodologies can show great success in web development through its practices. In this paper we have reviewed our proposed practice (EUID), which aims at developing GUI at early stages. The practice has two main benefits: getting early customer feedback which support the agile values and principles and helping developers to focus on application logic development. To simplify and ensure consistency in the production of the EUID outputs we have proposed a GUI representation framework to represent the GUI Structure and the GUI Behavior Description File.
We are currently working on developing a tool that will automate the EUID outputs generation based on our framework. Another future work we are working on is a tool that provides the common UI templates for each component, described in our framework, which will reduce the time needed to generate the GUI.
References
[1] Labib, C., Hassanein, E., Hegazy, O., Early development of graphical user interface (GUI) in agile methodologies (extended). Journal of Computational Methods in Sciences and Engineering, Volume 9, Issue 1, Netherlands, April 2009.
[2] Labib, C., Hassanein, E., Hegazy, O., Early development of graphical user interface (GUI) in agile methodologies. SEDE, Los Angeles, California, USA, 2008:
[3] Myers, B.A.; Hollan, J.D.; and Cruz, I.F. Strategic directions in human-computer interaction. A CM Computing Surveys, 28, 4, Dec. 1996, p. 794-809.
[4] Memon, A.M.. GUI testing: Pitfalls and process. IEEE Computer, 35, 8, August 2002, p.90–91.
[5] McMaster, S.; and Memon, A. Call Stack Coverage for GUI Test-Suite Reduction. IEEE Transactions on Software Engineering archive, Volume 34 , Issue 1, 2008, Pages 99-115.
[6] Jazayeri, M. Some Trends in Web Application Development. Future of Software Engineering, IEEE, 2007.
[7] Capiluppi, A.; Fernandez-Ramil, J.; Higman, J.; Sharp, H.C.; and Smith, N. An Empirical Study of the Evolution of an Agile-Developed Software System. Proceedings of the 29th International Conference on Software Engineering, May 20-26, 2007, p.511-518.
[8] Serena, 2007, Found at: www.serena.com/docs/repository/solutions/intro-to-agile-devel.pdf
[9] Avison, D.; and Fitzgerald, G. Information Systems Development: methodologies, techniques and tools, MCGraw-Hill Education. Berkshire, 4th edition, 2006.
[10] Abrahamsson, P.; Outi, S.; Ronkainen, J.; and Warsta, J. Agile software development methods - Review and analysis, VTT Electronics. Finland, 2002, P. 112.
[11] Beck, K. Embracing Change With Extreme Programming. IEEE Computer, vol. 32, pp. 70-77, 1999.
[12] Schwaber, K. Scrum Development Process. OOPSLA'95 Workshop on Business Object Design and Implementation, 1995.
[13] Schwaber, K.; and Beedle, M. Agile Software Development With Scrum. Upper Saddle River, NJ: Prentice-Hall, 2002.
[14] Palmer, S.R.; and Felsing, J.M. A Practical Guide to Feature-Driven Development. Upper Saddle River, NJ, Prentice-Hall, 2002.
[15] Coad, P.; LeFebvre, E.; and Luca, J.D. Java Modeling In Color With UML: Enterprise Components and Process. Prentice Hall, 2000.
[16] Ashford, E. Dynamic Systems Development Method, DSDM Consortium, version 3, 1997.
[17] Stapleton, J. Dynamic systems development method -The method in practice. Addison Wesley, 1997.
[18] Paige, R.; Agarwal, P.; and Brooke, P. Combining Agile Practices with UML and EJB: a Case Study in Agile Development. Springer Berlin / Heidelberg, vol. 2675/2003, 2003.
[19] Shirogane, J. and Fukazawa, Y., GUI prototype generation by merging use cases. International Conference on Intelligent User Interfaces, San Francisco, California, USA. pp. 222-223, 2202.
[20] Lay P., L¨uttringhaus-Kappel , S.,Transforming XML Schemas into Java Swing GUIs. GI Jahrestagung (1) 2004 (extended version) 2004.
[21] Strelzoff, A., Petzold, L., Decision Tree Organization for GUI Generation Proceedings, 28th Annual IEEE/NASA Software Engineering Workshop, Dec 2-4 2003, Greenbelt Maryland.
[22] Jelinek, J., Slavic, p. GUI Generation from Annotated Source Code. Prague, Czech Republic, Tamodia 2004
[23] Hamill, P. Agile User Interface Development, 2004. Found at: http://www.w3.org/TR/html4/loose.dtd