Scrollbar Design

There are 3 different options to indicate possible scrolling:

Default: In the default mode, scroll indicators are drawn in the middle of the menubar.
ScrollBar: You can activate the scrollbar mode, in which the scrollbar will be shown on the right side of the screen.
None: You can also deactivate the indication of possible scrolling completely.

Design

Default Scroll Indicators

By default scroll arrows are painted in the menubar to indicate possible scrolling. You can specify the color or the images used for the indicators:
Default Scroll Indicators

The example above is realized with two images and following CSS code:

.mailForm {
	padding: 5;
	padding-left: 5;
	padding-right: 5;
	background {
		type: horizontal-stripes;
		top: title;
		bottom: menubar;
		first-top-color: screenColorTop1;
		first-bottom-color: screenColorBottom1;
		second-top-color: screenColorTop2;
		second-bottom-color: screenColorBottom2;
	}
	layout: horizontal-expand | horizontal-center | top;
	//#if !polish.useScrollBar
		scrollindicator-up-image: url( arrowUp.png );
		scrollindicator-down-image: url( arrowDown.png );
	//#endif
}

Specific design attributes:

color

CSS Attribute	Default	Values	Applies To	Explanation
scrollindicator-color	black		screen styles	The color of the scrolling indicators. .myForm { scrollindicator-color: #a00; }
scrollindicator-up-image	-	image-URL	screen styles	The image indicating that the user can scroll upwards.
scrollindicator-down-image	-	image-URL	screen styles	The image indicating that the user can scroll downwards.

ScrollBar

You can activate the ScrollBar by setting the variable "polish.useScrollBar" to "true" in your build.xml script. The scrollbar is then drawn at the right side of the screen and can operate in different modes:

page: In the "page" mode the position and height of the currently visible area is shown relative to the complete height of that screen.
area: In the "area" mode the slider represents the position of the current selection relativ to the complete width and height.
item: In the "item" mode the index of currently selected item is taken into account relative to the number of items.

This example shows the ScrollBar in the default "page" scrollmode:

You can design the scrollbar by using the scrollbar CSS selector:

scrollbar {
	scrollbar-slider-color: #333;
	scrollbar-slider-width: 3;
	/* You can also define background, border, padding, etc */
}

You can also automatically hide the scrollbar so that it does not occopy screen space. The scrollbar will then be made visible each time the user scrolls on the screen:

scrollbar {
	scrollbar-slider-color: #2d2;
	scrollbar-slider-width: 6;
	scrollbar-fadeout: true;
	opacity: 180;
	background-color: white;
}

Specific design attributes:

CSS Attribute	Default	Values	Explanation
scrollbar-fadeout	false	true, false	Defines if the scrollbar should automatically fade out. Additionally you have to define the opacity attribute.
scrollbar-slider-color	black	color	The color of the slider, is ignored when a slider-image is defined.
scrollbar-slider-down-image	-	imageurl	The image used for signaling that the user can scroll downwards. By default nothing is painted.
scrollbar-slider-image	-	imageurl	The URL of image used for the slider.
scrollbar-slider-image-repeat	false	true, false	Either "true" or "false". When "true" is given, the slider image is repeated vertically, if necessary.
scrollbar-slider-mode	page	area, item, page	The mode of the slider, either "area", "item" or "page". In the "area" mode the slider represents the position of the current selection relative to the complete width and height. In the "item" mode the index of the currently selected item is taken into account relative to the number of items. In the "page" mode the height of the currently visible area will be set relative to the complete height of the screen. The default mode is "page".
scrollbar-slider-up-image	-	imageurl	The image used for signaling that the user can scroll upwards. By default nothing is painted.
scrollbar-slider-width	2	integer	The width of the slider in pixels, is ignored when a slider-image is defined.
scrollbar-style	scrollbar	style	The name of the style for the scrollbar of the corresponding Screen.
Further CSS Attribute	Default	Values	Explanation
after	-	imageurl	The URL of the image that should be shown after the item in question.
always-include	false	true, false	Defines if a style should always be included, even if not used.
background	-	background definition	The background of an item or screen. The default background for items is "none", the default background for screens is a simple white background.
before	-	imageurl	The URL of the image that should be shown before the item in question.
complete-border	-	border	A border reference from the borders section. The border includes the label of the item and is independent of the item's normal border.
complete-background	-	background	A background name from the backgrounds section. The background includes the label of the item and is independent of the item's normal background.
border	-	border definition	The border of an item or screen. The default border is "none".
complete-background-padding	-	integer	The padding that is added to the complete-background and/or complete-border. Note that this does not change the size of the item, so you might need to adapt margins or normal paddings for your design.
focused-style	focused	style	The name of the style for the currently focused item, usually applied with a [style-name]:hover construct.
inherit	true	true, false	Defines if a style that extends this style should inherit all attributes.
label-style	label	style	The name of the style for the label of the corresponding Item.
max-height	-	integer	The maximum height of an item.
max-width	-	integer	The maximum width of an item.
min-height	-	integer	The minimum height of an item.
min-width	-	integer	The minimum width of an item.
table-selected-background	-	background	The background for selected cells of a table.
colspan	1	integer	The number of columns wich are used by the item within a table.
table-selected-row-background	-	background	The background for selected rows of a table.
include-label	false	true, false	Usually the label of an item is rendered separately of the item's content. You can expand the background and border over the label as well using this attribute.
opacity	255	integer	The opacity of an item between 0 (fully transparent) and 255 (fully opaque).
pressed-style	-	style	The style which indicates that an item is being pressed, usually applied with a [style-name]:pressed construct.
table-selected-column-background	-	background	The background for selected columns of a table.
view-type	-	fade-in, fade-out, particle, size-decrease, size-increase	Defines another visualization for an Item or a Screen.
visible	true	true, false	Toggles the visibility of an item. When an item is invisible, it will not occupy any space.
x-adjust	0	integer	The horizontal position adjustment.

Deactivate Scroll Indicators

You can deactivates scroll indicators completely by setting the variable "polish.deactivateScrollIndicator" to "true" in your build.xml script.

When using the scrollbar, you can also hide the scrollbar for specific screens by using the show-scrollbar CSS attribute within the corresponding screen's style:

.screenMain {
	show-scrollbar: false;
}

Configuration

To activate the scrollbar:

<variable name="polish.useScrollBar" value="true" />

To deactivate all scrollindicators:

<variable name="polish.deactivateScrollIndicator" value="true" />

JavaDoc

ScrollBar.

Username:
Password: