#[visual.overhaul]
Table of Contents Goals
2
Existing Studio Issues
Visual Design
4
Usability
5
Workflow
6
XML Editing
7
Proposed Redesign
Visual Design
9
Usability
10
Workflow
11
XML Editing
12
Implementation Plan
13
Risks
14
Appendix
15
#[visual.overhaul.1]
Goals: • Refine existing Studio interface • Diminish Eclipse legacy • Define iconography and style guidelines • Streamline the experience of creating and configuring Mule Applications
#[visual.overhaul.2]
Existing Studio Issues
#[visual.overhaul.3]
Visual Design 1
“Off the hook� 2004 visual styling
2
Lack of visual hierarchy
3
Visual noise
4
Inconsistent iconography
5
Flow layout
6
Vertical space consumed by tabs
7
Properties view formatting
8
Tall flows
3 1
8
5 2
4 6
7
#[visual.overhaul.4]
Usability
7
1
Palette navigation and viewing
2
10% used windows shown 100% of the time
3
Message transparency gap between elements
4
Unintuitive Datamapper choreography
5
Confusing poll vs. streaming inbound
6
Almost as many tabs as connectors
7
Can’t collapse canvas elements
1
5
2
4 6 3
#[visual.overhaul.5]
Workflow 1
Frequent tab switching through development process
2
Drag and drop “clunkiness”
3
Package Explorer
4
Better perspective defaults
5
Global elements aren’t consistent
4
3 2
5
1
#[visual.overhaul.6]
XML Experience
5
1
XML and GUI relationship
2
No visibility into property options
3
No MEL Autocompletion
4
XML highlighting
5
XML collapsing
4 3
1 2
#[visual.overhaul.7]
Proposed Redesign
#[visual.overhaul.8]
Visual Design 1
Modern, clean design aesthetic
2
Clear hierarchy and cascade of detail
3
Restrained palette of icons and tools
4
Platform consistent iconography
5
Improved flow layout
6
Fewer toolbars
7
Properties view formatting
8
Tighter nested elements
3
2 8
1
5 4
7 6
#[visual.overhaul.9]
Usability
7
5
1
1
Tighter palette drawers, large list view
2
Package Explorer auto-expands on hover
3
Message issues are surfaced
4
Datamapper is embedded in each arrow
5
Guidance on poll vs. streaming inbound (see Appendix, pg.16)
6
Fewer tabs, greater focus on application content
7
Collapsible scope elements (see Appendix, pg. 18)
2 4 3 6
#[visual.overhaul.10]
Workflow 1
GUI & XML 2-way editing require less tab switching
2
Improved drag and drop, clear drop targets
3
New project explorer
4
Better perspective defaults
5
Global elements aren’t consistent
4
3
5
2
1
#[visual.overhaul.11]
XML Experience 1
XML and GUI 2-way editing, palette available in XML
2
Message properties are visible for each XML element
3
MEL Autocompletion
4
Improved XML highlighting
5
Improved XML collapsing (See Appendix, pg. 28)
1
2
5 4 3
#[visual.overhaul.12]
Proposed Implementation Timeline
October 11 Release (3.6 M2)
May Release (3.7 GA)
• Migrate to Eclipse 4
• New canvas & palette icons
• Hide unnecessary icons in toolbar
• Smart auto-hide for package explorer tab
December Release (3.6 GA)
July Release (4.0 M1)
• New perspective and package explorer icons
• New palette and message properties design
• New Eclipse view styling and icons
• New flow design and drag and drop improvement
• Improved Flow Layout • Datamapper migrated to arrows February Release (3.7 M1) November Release (4.0 GA) • Unified visual styling with Platform • Real-time XML/GUI 2 way editing • Notifications for Mule message issues
#[visual.overhaul.13]
Risks
• Resource allocation • Priority relative to other features • Implementation uncertainties in Eclipse • Missing CSS support for certain elements • Studio as a plug-in (Icon conflicts) • Shift towards Web Studio • Zombies, earthquakes, and political upheaval
#[visual.overhaul.14]
#[visual.overhaul.appendix]
Inbound flow prompts
#[visual.overhaul.16]
Drag and drop canvas targets
#[visual.overhaul.17]
Collapsed scope element
#[visual.overhaul.18]
Commented-out element
#[visual.overhaul.19]
Arrows as buttons
#[W20]
Datamapper
#[visual.overhaul.21]
Inspector error notification
#[visual.overhaul.22]
Inspector progressive disclosure
#[visual.overhaul.23]
Project Explorer visible
#[visual.overhaul.24]
Change workspace dropdown
#[visual.overhaul.25]
XML block highlighting
#[visual.overhaul.26]
XML line highlighting
#[visual.overhaul.27]
XML collapse
#[visual.overhaul.28]