Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Field Decorators and Validation"

(37 intermediate revisions by one other user not shown)
Line 1: Line 1:
 +
<pre>
 +
This document describes design ideas pursued during the development of Eclipse 3.2 that were never fully implemented.
 +
</pre>
 +
 +
[https://bugs.eclipse.org/bugs/show_bug.cgi?id=237372 Bug 237372] tracks this issue.
 +
 +
 
This document describes Use Cases and Solutions for field decorators of (1) Content Assist, (2) Required Fields, and (3) Errors/Warnings.  Each of these indicators are shown in various UI contexts, such as Dialog Boxes, Wizards, and Forms, in order to describe the design issues and apply a consistent solution where possible.  The main techniques that are described in the Blueprint Specifications and Solutions refer to icon/text treatment (size and position) at the Control-level, as well as messages at the UI-level. <br />
 
This document describes Use Cases and Solutions for field decorators of (1) Content Assist, (2) Required Fields, and (3) Errors/Warnings.  Each of these indicators are shown in various UI contexts, such as Dialog Boxes, Wizards, and Forms, in order to describe the design issues and apply a consistent solution where possible.  The main techniques that are described in the Blueprint Specifications and Solutions refer to icon/text treatment (size and position) at the Control-level, as well as messages at the UI-level. <br />
  
{| class="indent" border="1" cellpadding="3"
+
 
| '''Indicator (cue)'''
+
<table border="1" cellpadding="2" cellspacing="2" width="100%">
| '''UI Context'''
+
    <tr>
| '''UI Controls or Area'''
+
      <th width="10%">Indicator (cue)</th>
|-
+
      <td>
| Content Assist
+
      <ul>
| Dialog Boxes
+
        <li>Content Assist</li>
| Text Field
+
        <li>Required Input</li>
|-
+
        <li>Errors & Warnings</li>
| Required Fields
+
      </ul>
| Wizards
+
      </td>
| Combo Box
+
    </tr>
|-
+
    <tr>
| Errors & Warnings
+
      <th width="10%">UI Controls or Area</th>
| Forms
+
      <td>
| Drop-Down List Box
+
      <ul>
|-
+
        <li>Text Field</li>
|
+
        <li>Combo Box</li>
|
+
        <li>Drop-Down List Box</li>
| List Box
+
        <li>List box</li>
|-
+
        <li>Table</li>
|
+
        <li>Table Cell</li>
|
+
        <li>Header</li>
| Table
+
        <li>Body</li>
|-
+
        <li>Tab</li>
|
+
      </ul>
|
+
      </td>
| Table Cell
+
    </tr>
|-
+
    <tr>
|
+
      <th width="10%">UI Context</th>
|
+
      <td>
| Header
+
      <ul>
|-
+
        <li>Dialog Boxes</li>
|
+
        <li>Wizards</li>
|
+
        <li>Forms</li>
| Body
+
      </ul>
|-
+
      </td>
|
+
    </tr>
|
+
 
| Tab
+
</table>
|}
+
 
  
  
Line 47: Line 54:
  
  
 +
'''''Figure 1.1''''' Find/Replace Dialog - Combo Box<br/>
 +
Lightbulb overlay is middle-aligned vertically with the combo box and text labels, when the field has focus
 +
<br/>
 +
 +
[[Image:FindReplace2.gif]]
 +
 +
 +
'''''Figure 1.2''''' JDT New Java Interface Dialog - List Cell Editor<br/>
 +
Lightbulb overlay is placed to the left of the list box, when the list item has focus.<br/>
 +
 +
[[Image:NewJavaInterface2.gif]]
 +
 +
 +
'''''Figure 1.3''''' JDT Change Method Signature Dialog - Table Cell Editor<br/>
 +
Lightbulb overlay is placed to the left of the table, when the row has focus.<br/>
 +
 +
[[Image:ChangeMethod.gif]]
  
 
== Required Input ==
 
== Required Input ==
  
  
 +
'''''Figure 2.1''''' Save As Dialog: Parent folder and file name fields - Text Field<br/>
 +
Asterisk is placed after the text label and colon.
 +
 +
[[Image:SaveAs.gif]]
 +
 +
 +
'''''Figure 2.2''''' Save As Dialog: Input error - Text Field, Header (banner)<br/>
 +
Asterisk is placed after the text label and colon; Error icon with message replaces the description in the top banner info area;  Large error icon provides association with the text field indicator inside the dialog page. 
 +
 +
[[Image:SaveAsError.gif]]
 +
 +
 +
'''''Figure 2.3''''' PDE Form - Text Field<br/>
 +
Asterisk is placed after the text label and colon; Lightbulb overlay is middle-aligned vertically with the combo box and text labels.
 +
 +
[[Image:PDE.gif]]
  
 
== Error and Warning Messages ==
 
== Error and Warning Messages ==
 +
 +
 +
'''''Figure 3.1''''' Native Library Folder Configuration Dialog: Input error - Text field, Body of dialog<br/>
 +
Warning indicator is placed to the left of the text field.
 +
 +
[[Image:NativeLibrary.gif]]
 +
 +
 +
'''''Figure 3.2''''' New Package Wizard - Text Field, Header<br/>
 +
Error icon with message replaces the description in the top banner info area; Large error icon provides association with the text field indicator inside the dialog page.
 +
 +
[[Image:NewPackage.gif]]
 +
 +
 +
'''''Figure 3.3''''' New Class Wizard - Text Field, Header<br/>
 +
Asterisk is placed after the text label and colon; Content assist icon is placed to the left of text field; indicator inside the dialog page.  Warning icon with message replaces the description in the top banner info area; Large error icon provides association with the text field
 +
 +
[[Image:NewClass.gif]] [[Image:NewClassB.gif]]
 +
 +
== Blueprint Specifications ==
 +
Note: Fields (and the dialog space surrounding the field) are not to grow/shrink due to presence/absence of the decorator, so it is the responsibility of the dialog designer to allocate space for it.
 +
 +
[[Image:BlueprintSpecifications.gif]]

Revision as of 18:07, 17 November 2009

This document describes design ideas pursued during the development of Eclipse 3.2 that were never fully implemented.

Bug 237372 tracks this issue.


This document describes Use Cases and Solutions for field decorators of (1) Content Assist, (2) Required Fields, and (3) Errors/Warnings. Each of these indicators are shown in various UI contexts, such as Dialog Boxes, Wizards, and Forms, in order to describe the design issues and apply a consistent solution where possible. The main techniques that are described in the Blueprint Specifications and Solutions refer to icon/text treatment (size and position) at the Control-level, as well as messages at the UI-level.


Indicator (cue)
  • Content Assist
  • Required Input
  • Errors & Warnings
UI Controls or Area
  • Text Field
  • Combo Box
  • Drop-Down List Box
  • List box
  • Table
  • Table Cell
  • Header
  • Body
  • Tab
UI Context
  • Dialog Boxes
  • Wizards
  • Forms


Content Assist

Figure 1.1 Find/Replace Dialog - Combo Box
Lightbulb overlay is middle-aligned vertically with the combo box and text labels, when the field has focus

FindReplace2.gif


Figure 1.2 JDT New Java Interface Dialog - List Cell Editor
Lightbulb overlay is placed to the left of the list box, when the list item has focus.

NewJavaInterface2.gif


Figure 1.3 JDT Change Method Signature Dialog - Table Cell Editor
Lightbulb overlay is placed to the left of the table, when the row has focus.

ChangeMethod.gif

Required Input

Figure 2.1 Save As Dialog: Parent folder and file name fields - Text Field
Asterisk is placed after the text label and colon.

SaveAs.gif


Figure 2.2 Save As Dialog: Input error - Text Field, Header (banner)
Asterisk is placed after the text label and colon; Error icon with message replaces the description in the top banner info area; Large error icon provides association with the text field indicator inside the dialog page.

SaveAsError.gif


Figure 2.3 PDE Form - Text Field
Asterisk is placed after the text label and colon; Lightbulb overlay is middle-aligned vertically with the combo box and text labels.

PDE.gif

Error and Warning Messages

Figure 3.1 Native Library Folder Configuration Dialog: Input error - Text field, Body of dialog
Warning indicator is placed to the left of the text field.

NativeLibrary.gif


Figure 3.2 New Package Wizard - Text Field, Header
Error icon with message replaces the description in the top banner info area; Large error icon provides association with the text field indicator inside the dialog page.

NewPackage.gif


Figure 3.3 New Class Wizard - Text Field, Header
Asterisk is placed after the text label and colon; Content assist icon is placed to the left of text field; indicator inside the dialog page. Warning icon with message replaces the description in the top banner info area; Large error icon provides association with the text field

NewClass.gif File:NewClassB.gif

Blueprint Specifications

Note: Fields (and the dialog space surrounding the field) are not to grow/shrink due to presence/absence of the decorator, so it is the responsibility of the dialog designer to allocate space for it.

BlueprintSpecifications.gif

Copyright © Eclipse Foundation, Inc. All Rights Reserved.