Single-Window Integrated Development Environment

Single-WindowIntegrated Development

Environment

Ivan RuchkinMoscow State University

Faculty of Computational Mathematics and Cybernetics

Computing Systems Lab

ruchkin.ivan@gmail.com

Vladimir PrusMoscow 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 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

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 breadcrumbs

Introduction 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