Embed Size (px)
DESCRIPTION
A presentation for SYRCOSE 2010. Nizhny Novgorod, Russia. This is a work-in-progress report on a single-window approach to the interfaces of development environments: instead of a traditional tool view interface, the authors propose a replacement with a minimum of additional widgets.
Citation preview
Single-Window
Integrated Development Environment
Ivan Ruchkin
Moscow State University
Faculty of Computational
Mathematics and Cybernetics
Computing Systems Lab
Vladimir Prus
Moscow State University
Faculty of Computational
Mathematics and Cybernetics
Computing Systems Lab
Outline
• Introduction
• Single-window design
• Implementation
• Results and future work
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
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
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
Tool views
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Text editor
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
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
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
Tool view model
Abstract 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
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
Additional widgets
• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
Additional widgets
• Inline text widgets
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
Additional widgets
• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
3 4
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
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 breadcrumbsIntroduction Design Implementation Results
Single-window IDESYRCoSE 2010
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
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
Implementation
• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
Implementation
• Build errors in text
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
Implementation
• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
21
3
Results
• Described a tool view model
• Designed a single-window interface
• Implemented single-window interface
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
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
The end
Thank you for your attention!
Questions?
Single-window IDESYRCoSE 2010
Vladimir [email protected]
Ivan [email protected]
![How to build a Single Window Environment, volume 2 · 2014-07-29 · 9 How to Build a Single Window Environment Volume II [DRAFT] 1. OVERVIEW 1.1 Introduction In seeking to reduce](https://img.pdfslide.us/doc/110x75/5e85195b5d01bc460941e751/how-to-build-a-single-window-environment-volume-2-2014-07-29-9-how-to-build-a.jpg)