Single-Window Integrated Development Environment
description
Transcript of Single-Window Integrated Development Environment
![Page 1: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/1.jpg)
Single-WindowIntegrated Development
Environment
Ivan RuchkinMoscow State University
Faculty of Computational Mathematics and Cybernetics
Computing Systems Lab
Vladimir PrusMoscow State University
Faculty of Computational Mathematics and Cybernetics
Computing Systems Lab
![Page 2: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/2.jpg)
Outline• Introduction
• Single-window design
• Implementation
• Results and future work
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
![Page 3: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/3.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/4.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/5.jpg)
Tool views
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
![Page 6: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/6.jpg)
Text editor
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
![Page 7: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/7.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/8.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/9.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/10.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/11.jpg)
Additional widgets• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
![Page 12: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/12.jpg)
Additional widgets• Inline text widgets
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
![Page 13: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/13.jpg)
Additional widgets• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
3 4
![Page 14: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/14.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/15.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/16.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/17.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/18.jpg)
Implementation• Breadcrumbs bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2 3
![Page 19: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/19.jpg)
Implementation• Build errors in text
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
1
2
![Page 20: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/20.jpg)
Implementation• Enhanced status bar
Introduction Design Implementation Results
Single-window IDESYRCoSE 2010
21
3
![Page 21: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/21.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/22.jpg)
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: Single-Window Integrated Development Environment](https://reader035.fdocuments.us/reader035/viewer/2022062305/56816350550346895dd3f010/html5/thumbnails/23.jpg)
The end
Thank you for your attention!
Questions?
Single-window IDESYRCoSE 2010
Vladimir [email protected]
Ivan [email protected]