Kimberley Peter. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation...

Kimberley Peter. Copyright © IBM Corp., 2008. 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 feelJazz Case Studies

Kimberley PeterJazz UI Design Lead

IBM Rational Software

2 Kimberley Peter. Copyright © IBM Corp., 2008. 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 spacesExtending UI Form editors and surrounding spaces to display rich information in a limited area

2 : Contextual linkingLeveraging the immediacy of hypertext links to bring function and related artifacts into context

3 : Pervasive progressive disclosureStaging the UI from simple visual or textual triggers to full views and editors

4 : Adaptable colorRendering interface elements elegantly with simple rules for SWT colors


Theme 1 : Condensed information spacesExtend 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 inoverall environment

……

How do you draw specialattention in a UI form?


Theme 1 : Condensed information spacesJazz 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 forcomparing builds


Theme 1 : Condensed information spacesJazz example 1 : State and status in the Build Result Editor


Theme 1 : Condensed information spacesJazz example 2 : Quick Information in the Work Item editor

Collection of associations to work item

Fit with form style, yet not form-like

……

Extended gradientmakes it darkerbut visual languageis same

Icon types

Counts

Contributor initials

Work Item and attachment IDs


Theme 1 : Condensed information spacesJazz 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


Theme 2 : Contextual linkingLeverage 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:


Theme 2 : Contextual linkingJazz 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


Theme 2 : Contextual linkingJazz 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


Theme 2 : Contextual linkingJazz example 2 : Quick Information links in Work Item editor

Label links go to other pages in editor

Content links to person or artifact


Theme 2 : Contextual linkingJazz example 3 : Graphical links in Build Result editor


Theme 3 : Pervasive progressive disclosureLayer 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


Theme 3 : Pervasive progressive disclosureJazz example 1 : Hover and sticky hover in Build Result editor

Status trend hovers -> rich sticky hovers


Theme 3 : Pervasive progressive disclosureJazz example 2 : Slide out > Open Editor in Team Central & My Work views

Slide out in Team Central


Theme 3 : Pervasive progressive disclosureJazz example 2 : Slide out > Open Inline Browser


Theme 3 : Pervasive progressive disclosureJazz example 3 : View feeds in Team Central > Open full timeline in Event Log

Open full editor from Team Central events section


Theme 3 : Pervasive progressive disclosureJazz example 4 : Event Log (timeline) editor

Time-based sections are limited to last 5 items

“Show All Items” toggle expands and collapses sections



Twisties expand individual items



Entries displayed chronologically



Links open full editor


Theme 3 : Pervasive progressive disclosureJazz example 5 : Quick Information area in Work Item editor

Hover or open artifact



Hover over attachment ID shows image

Other hovers include:- Contributor initials- Work Item IDs



Invoke sticky hover with ‘F2’ to scale image


Theme 4 : Adaptable colorRender 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


Theme 4 : Adaptable colorPremise 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 contrastLIST_BACKGROUND = default view and editor background, typically white, inverts in high contrast


Theme 4 : Adaptable colorPremise 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 foregroundWIDGET_BACKGROUND = default shell background, typically warm or cool grey, inverts in high contrast


Theme 4 : Adaptable colorPremise 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:



Eclipse UI Forms adjusts blends of TITLE_BACKGROUND + LIST_BACKGROUND according to the RGB values of TITLE_BACKGROUND



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.


Theme 4 : Adaptable colorJazz 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


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


Summary

Existing themes and related patterns in Eclipse are excellent sources of inspiration for your own tools or products

Themes covered today1 : Condensed information spaces2 : Contextual linking3 : Pervasive progressive disclosure4 : Adaptable color

Watch for new things to build on in Eclipse in 3.4 and beyond

Shell transparency, new drag and drop features, …


ReferencesUI Forms

http://www.eclipse.org/articles/Article-Forms/article.htmlhttp://www.eclipse.org/articles/article.php?file=Article-Forms33/index.htmlhttp://help.eclipse.org/help33/index.jsp?topic=/org.eclipse.platform.doc.isv/guide/forms.htm

SWThttp://www.eclipse.org/swt/http://help.eclipse.org/help33/topic/org.eclipse.platform.doc.isv/guide/swt.htm

JFacehttp://wiki.eclipse.org/index.php/JFace

Eclipse UI Guidelineshttp://wiki.eclipse.org/User_Interface_Guidelines

Eclipse New & Noteworthieshttp://www.eclipse.org/downloads/

Jazz.nethttps://jazz.net/index.jsp

Jazz New & Noteworthieshttps://jazz.net/downloads/downloads.jsp

UI Checklist for the Jazz Eclipse Clienthttps://jazz.net/learn/LearnItem.jsp?href=content/docs/ui-checklist/index.html

Jazz Team Bloghttps://jazz.net/blog/


Legal Notices

Copyright © IBM Corp., 2008. 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.

Kimberley Peter. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation...

Documents

Transcript of Kimberley Peter. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation...