Kimberley Peter. Copyright © IBM Corp., 2008. All rights reserved. Source code in this presentation...
-
Upload
wilfred-park -
Category
Documents
-
view
215 -
download
2
Transcript of 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
3 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.
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?
4 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.
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
5 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.
Theme 1 : Condensed information spacesJazz example 1 : State and status in the Build Result Editor
6 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.
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
7 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.
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
8 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.
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:
9 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.
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
10 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.
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
11 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.
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
12 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.
Theme 2 : Contextual linkingJazz example 3 : Graphical links in Build Result editor
13 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.
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
14 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.
Theme 3 : Pervasive progressive disclosureJazz example 1 : Hover and sticky hover in Build Result editor
Status trend hovers -> rich sticky hovers
15 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.
Theme 3 : Pervasive progressive disclosureJazz example 2 : Slide out > Open Editor in Team Central & My Work views
Slide out in Team Central
16 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.
Theme 3 : Pervasive progressive disclosureJazz example 2 : Slide out > Open Inline Browser
17 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.
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
18 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.
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
19 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.
Theme 3 : Pervasive progressive disclosureJazz example 4 : Event Log (timeline) editor
Twisties expand individual items
20 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.
Theme 3 : Pervasive progressive disclosureJazz example 4 : Event Log (timeline) editor
Entries displayed chronologically
21 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.
Theme 3 : Pervasive progressive disclosureJazz example 4 : Event Log (timeline) editor
Links open full editor
22 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.
Theme 3 : Pervasive progressive disclosureJazz example 5 : Quick Information area in Work Item editor
Hover or open artifact
23 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.
Theme 3 : Pervasive progressive disclosureJazz 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., 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.
Theme 3 : Pervasive progressive disclosureJazz example 5 : Quick Information area in Work Item editor
Invoke sticky hover with ‘F2’ to scale image
25 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.
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
26 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.
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
27 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.
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
28 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.
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:
29 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.
Theme 4 : Adaptable colorPremise 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., 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.
Theme 4 : Adaptable colorPremise 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., 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.
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
32 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.
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., 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.
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, …
34 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.
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/
35 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.
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.