Changes

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">

<div style="background-color: #FFF; margin-left:auto; margin-right: auto; width: 95%;">

<noinclude>{{Translations}}</noinclude>

<noinclude>{{Translations}}{{GoogleTrans-en}}</noinclude>

{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}

{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}

 

===Controls===

===Controls===

Sugar defines its own set of control widgets that will create the user interface on the laptops.  Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines.  With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.

Sugar defines its own set of control widgets that will create the user interface on the laptops.  Though most of the available controls will match developers' expectations, we've also developed some new controls and altered behaviors of others to better suit the user experience on the machines.  With these new developments comes a new set of guidelines for their usage and placement which both maintains the broader set of goals and metaphors setup within Sugar and aids in the development of collaborative user interface environments.

====Control Regions====

====Control Regions====

In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed.  Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color.  Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.

In sugar, a predefined set of control regions provide the surfaces upon which controls may be placed.  Limiting the background colors that the controls sit on allows for a consistent set of visual rules to define both the type and state of various controls while maintaining sufficient contrast even without the use of color.  Shown to the right, the basic regions are the Canvas, Panel, Toolbar, and Palette.

[[Image:control_regions.jpg|right|500px|Basic control regions]]

[[Image:control_regions.jpg|left|500px|Basic control regions]]

'''Canvas:'''  The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it.  Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities.  The canvas region is specifically for generating content and 'should not' have any controls placed upon it.  As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.

'''Canvas:'''  The canvas is the general purpose "creation" space within any activity &mdash; the region for drawing, writing, or otherwise working within it.  Since creation ranks high among our goals, we also hope that this is the dominant region of the screen in most activities.  The canvas region is specifically for generating content and 'should not' have any controls placed upon it.  As such, the canvas may be any color the activity or the user desires, though Sugar specifies both white and black as the basic defaults.

'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI.  The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states.  More detail about these broader design decisions is discussed in the custom controls section.

'''Controls:''' The remainder of this section focuses largely on the specific controls and guidelines for their usage within your activity's UI.  The designs of all controls presented here follow a basic set of rules regarding colors, line weights, and sizing for each of its various states.  More detail about these broader design decisions is discussed in the custom controls section.

====Buttons====

<div style="position: relative">

<!--<div style="position: absolute; right: 0px; width: 300px; height: 100%; background: #4b4b4b;"></div>-->

[[Image:buttons_text.png]]

====[[Human Interface Guidelines/The Sugar Interface/Controls/Buttons|Buttons]]====

{{:Human Interface Guidelines/The Sugar Interface/Controls/Buttons}}

[[Image:buttons_icon-text.png]]

 

=====Checkboxes=====

[[Image:checkbox.png]]

[[Image:radio.png]]

[[Image:popup_text.png]]

[[Image:popup_menu_text.png]]

[[Image:popup_menu_icon-text.png]]

=====Combination Popup Lists=====

[[Image:combobox.png]]

 

 

====Advanced Selection Controls====

 

[[Image:stepper.png]]

=====Sliders=====

[[Image:slider_color.png]]

 

====Indicator Controls====

====Text Controls====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls|Basic Selection Controls]]====

{{:Human Interface Guidelines/The Sugar Interface/Controls/Basic Selection Controls}}

[[Image:textfield.png]]

[[Image:textfield_suggestions.png]]

=====Search Fields=====

[[Image:searchfield.png]]

====Separator Controls====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Advanced Selection Controls|Advanced Selection Controls]]====

====View Controls====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Adjustment Controls|Adjustment Controls]]====

====Grouping Controls====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Indicators|Indicators]]====

====Custom Controls====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Text Controls|Text Controls]]====

=====When to Use Custom Controls=====

{{:Human Interface Guidelines/The Sugar Interface/Controls/Text Controls}}

====Toolbars====

====[[Human Interface Guidelines/The Sugar Interface/Controls/View Controls|View Controls]]====

====Rollovers and Palettes====

====[[Human Interface Guidelines/The Sugar Interface/Controls/Grouping Controls|Grouping Controls]]====

{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}

{{hig-subnav-intra|p_page=Rollovers|c_section=The Sugar Interface|c_page=Controls|n_page=Cursor}}