single-window development environment

Single-Window

Integrated Development Environment

Ivan Ruchkin

Moscow State University

Faculty of Computational

Mathematics and Cybernetics

Computing Systems Lab

ruchkin.ivan@gmail.com

Vladimir Prus

Moscow State University

Faculty of Computational

Mathematics and Cybernetics

Computing Systems Lab

vladimir.prus@gmail.com

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 Prusvladimir.prus@gmail.com

Ivan Ruchkinruchkin.ivan@gmail.com