Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. 1 Building on Eclipse in interesting ways while still respecting its look and feel Jazz Case Studies Kimberley Peter Jazz UI Design Lead IBM Rational Software

2 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Conceptual themes 1 : Condensed information spaces Extending UI Form editors and surrounding spaces to display rich information in a limited area 2 : Contextual linking Leveraging the immediacy of hypertext links to bring function and related artifacts into context 3 : Pervasive progressive disclosure Staging the UI from simple visual or textual triggers to full views and editors 4 : Adaptable color Rendering interface elements elegantly with simple rules for SWT colors

3 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 1 : Condensed information spaces Extend the UI Form editors and surrounding spaces to display rich information in a limited space Eclipse example: PDE editor forms …… Simple structure Largely two-color Harmonious UI Allows focus on content Assimilates nicely in overall environment …… How do you draw special attention in a UI form?

4 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 1 : Condensed information spaces Jazz example 1 : State and status in the Build Result Editor Show state and status at-a-glance Have prominent location Show additional details …… Upper left location Semantic color Symbol Small multiples for comparing builds

5 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 1 : Condensed information spaces Jazz example 1 : State and status in the Build Result Editor

6 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 1 : Condensed information spaces Jazz example 2 : Quick Information in the Work Item editor Collection of associations to work item Fit with form style, yet not form-like …… Extended gradient makes it darker but visual language is same Icon types Counts Contributor initials Work Item and attachment IDs

7 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 1 : Condensed information spaces Jazz example 3 : Team Central view Central point of continuously updated information Container = Neutral / Content = Rich Content specialized per section, represented in a specialized way using: Font color Font style (bold/normal) Icons Graphs

8 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 2 : Contextual linking Leverage the immediacy of hypertext links to bring function and related artifacts into the context Hyperlinks in form-based views and editors On demand hyperlinks (with modifier keys) in text editors Hyperlinks in preferences Eclipse examples:

9 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 2 : Contextual linking Jazz example 1 : “Getting started” links in Team Artifacts and Work Items views Getting started hyperlinks in the Team Artifacts Navigator Work Items View changes to query links once connected

10 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 2 : Contextual linking Jazz example 2 : Related links in Iteration Plan editor Plan & Related Work Item links run queries that show results in Work Items view Next Plans links open plans

11 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 2 : Contextual linking Jazz example 2 : Quick Information links in Work Item editor Label links go to other pages in editor Content links to person or artifact

12 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 2 : Contextual linking Jazz example 3 : Graphical links in Build Result editor

13 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Layer information to stage the UI from overview to detail Fast Views in trim Breadcrumb navigation in Java editor (3.4) Proposals in Java editor Eclipse examples: Hover & Sticky hover in Java editor Set preference to bypass ‘F2’ and go straight to sticky

14 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 1 : Hover and sticky hover in Build Result editor Status trend hovers -> rich sticky hovers

15 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 2 : Slide out > Open Editor in Team Central & My Work views Slide out in Team Central

16 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 2 : Slide out > Open Inline Browser

17 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 3 : View feeds in Team Central > Open full timeline in Event Log Open full editor from Team Central events section

18 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 4 : Event Log (timeline) editor Time-based sections are limited to last 5 items “Show All Items” toggle expands and collapses sections

19 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 4 : Event Log (timeline) editor Twisties expand individual items

20 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 4 : Event Log (timeline) editor Entries displayed chronologically

21 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 4 : Event Log (timeline) editor Links open full editor

22 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 5 : Quick Information area in Work Item editor Hover or open artifact

23 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 5 : Quick Information area in Work Item editor Hover over attachment ID shows image Other hovers include: - Contributor initials - Work Item IDs

24 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 3 : Pervasive progressive disclosure Jazz example 5 : Quick Information area in Work Item editor Invoke sticky hover with ‘F2’ to scale image

25 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Render interface elements elegantly with simple rules for SWT colors Premise 1: Specifying foreground and background colors based on the matrix pairs will guarantee adaptable, and accessible, results. Premise 2: Blends can use standard or custom pairs. Premise 3: Detecting RGB values allows manipulation of the results per OS theme without hard-coding colors per theme. Eclipse’s SWT System Color Matrix = Color constants that hook into the OS

26 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Premise 1: Specifying foreground and background colors based on the standard pairs will guarantee adaptable, and accessible, results. ~ Use for standard foreground-text-on-background combinations. Eclipse example of a standard pair: LIST_FOREGROUND = default view and editor text, typically black, inverts in high contrast LIST_BACKGROUND = default view and editor background, typically white, inverts in high contrast

27 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Premise 2: Blends can use standard or custom pairs. Tabbed Properties view (3.3) Palette (3.4) ~ Use for neutral color blend combinations. Eclipse example of a custom pair blend: WIDGET_NORMAL_SHADOW = custom foreground WIDGET_BACKGROUND = default shell background, typically warm or cool grey, inverts in high contrast

28 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Premise 3: Detecting RGB values allows manipulation of the results per OS theme without hard-coding colors per theme. ~ Use for non-neutral color blend combinations. Eclipse examples include Tabs & UI Forms:

29 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Premise 3: Detecting RGB values allows manipulation of the results per OS theme without hard-coding colors per theme. Eclipse UI Forms adjusts blends of TITLE_BACKGROUND + LIST_BACKGROUND according to the RGB values of TITLE_BACKGROUND

30 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Premise 3: Detecting RGB values allows manipulation of the results per OS theme without hard-coding colors per theme. Eclipse UI Forms adjusted blends: Group 1 (Examples: Vista, XP Silver, Wn High Con #2) If at least 2 of the TITLE_BACKGROUND RGB values are equal to or between 180 and 255, Gradient Top = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 30) Gradient Bottom = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 0) Group 2 (Examples: XP Olive, OSX Graphite, Linux GTK, Wn High Con Black) If at least 2 of the RGB values are equal to or between 121 and 179, Gradient Top = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 20) Gradient Bottom = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 0) Group 3 (Examples: XP Default, Wn Classic Standard, Wn Marine, Wn Plum, OSX Aqua, Wn High Con White, Wn High Con #1) If at least 2 of the RGB values are equal to or between 0 and 120, Gradient Top = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 10) Gradient Bottom = blend(TITLE_BACKGROUND, LIST_BACKGROUND, 0) NOTE: If RGB value ranges do not fit in those specified for Groups 1, 2, and 3, apply Group 3 rules. See FormColors for implementation details.

31 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Theme 4 : Adaptable color Jazz example 1 : Team Central view, My Work view, and Iteration Plan editor Premise 2 custom blends apply to the neutral section headers High Contrast Black Wn Classic Marine XP Silver XP Default

32 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Jazz example 2 : Work Item editor’s Quick Information area Theme 4 : Adaptable color Premise 3 custom blends apply to the UI Form-based Quick Information area

33 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Summary Existing themes and related patterns in Eclipse are excellent sources of inspiration for your own tools or products Themes covered today 1 : Condensed information spaces 2 : Contextual linking 3 : Pervasive progressive disclosure 4 : Adaptable color Watch for new things to build on in Eclipse in 3.4 and beyond Shell transparency, new drag and drop features, …

34 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. References UI Forms SWT JFace Eclipse UI Guidelines Eclipse New & Noteworthies Jazz.net Jazz New & Noteworthies UI Checklist for the Jazz Eclipse Client Jazz Team Blog

35 Kimberley Peter. Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. Legal Notices Copyright © IBM Corp., All rights reserved. Source code in this presentation is made available under the EPL, v1.0, remainder of the presentation is licensed under Creative Commons Att. Nc Nd 2.5 license. IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both. Rational and the Rational logo are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries or both. Java and all Java-based marks, among others, are trademarks or registered trademarks of Sun Microsystems in the United States, other countries or both. Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc. THE INFORMATION DISCUSSED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION, IT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, AND IBM SHALL NOT BE RESPONSIBLE FOR ANY DAMAGES ARISING OUT OF THE USE OF, OR OTHERWISE RELATED TO, SUCH INFORMATION. ANY INFORMATION CONCERNING IBM'S PRODUCT PLANS OR STRATEGY IS SUBJECT TO CHANGE BY IBM WITHOUT NOTICE.