Page 1
Single-WindowIntegrated Development
Environment
Ivan RuchkinMoscow State University
Faculty of Computational Mathematics and Cybernetics
Computing Systems Lab
[email protected]
Vladimir PrusMoscow State University
Faculty of Computational Mathematics and Cybernetics
Computing Systems Lab
[email protected]
Page 2
Outline• Introduction
• Single-window design
• Implementation
• Results and future work
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 3
IDEs
Combine:• Code editing tools• Build system• Debugger• VCS• …
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Provide:• Syntax highlighting• Code completion• Build management• Refactoring• …
Integrated Development Environments
Page 4
Popularity
• Many developers prefer text editors to IDEs
• Reasons for that are not clear
• One of possible reasons – GUI usability
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 5
Tool views
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 6
Text editor
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 7
Our approach
• Remove all tool views
• Provide tool views’ functions through text editor window
• Introduce additional widgets if necessary
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 8
Steps• Collect tool views from existing IDEs• Compose an IDE tool view model
consisting of abstract tool views• Create a single-window interface design by
removing all abstract tool views• Implement single-window interface in
KDevelop• Do usability testing
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 9
Tool view modelAbstract tool views:• Project view• Files view• Build results view• Code objects view• Tasks view• Call stack view• Threads view• Breakpoints view• Variables view
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 10
Removal approach• We have a list of abstract tool views• Most of them are either tree-like or list-like• Tree-like tool views can be replaced with
breadcrumbs• List-like tool views can be shown in text• Messages and status information can be
shown in status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 11
Additional widgets• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
Page 12
Additional widgets• Inline text widgets
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 13
Additional widgets• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
3 4
Page 14
Removing tool views
• Project view– Show navigation tree in breadcrumbs bar,
mode “Project”
• Files view– Show navigation tree in breadcrumbs bar,
mode “Files”
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 15
Removing tool views
• Build results view– Marks in “Project” and “Files” breadcrumbs
modes– Static element in status bar with number of
errors– Inline widget with Next/Previous buttons– Status bar message “Build complete”
• Code objects view– Navigation with breadcrumbs
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 16
Removing tool views
• Tasks view– Inline Next/Previous buttons– Marks in “Projects” and “Files” breadcrumbs– Static status bar element “Number of tasks”
• Call stack view and threads view– Show navigation tree in breadcrumbs, mode
“Threads and Stacks”
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 17
Removing tool views
• Breakpoints view– Inline widget with Next/Previous buttons– Marks in “Files”, “Project” and “Code Objects”
breadcrumbs– Static status bar element “Number of
breakpoints”– Status bar message “Breakpoint hit”
• Variables view– Inline widget (always on top of text editor)
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 18
Implementation• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
Page 19
Implementation• Build errors in text
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
Page 20
Implementation• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
21
3
Page 21
Results
• Described a tool view model
• Designed a single-window interface
• Implemented single-window interface
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 22
Future work• Finish implementation
• Usability testing of vanilla KDevelop
• Usability testing of single-window KDevelop
• Comparison and conclusion
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Page 23
The end
Thank you for your attention!
Questions?
Single-window IDESYRCoSE 2010
Vladimir [email protected]
Ivan [email protected]