ToolBar Component

Description

The toolBar component allows developers to easily add toolbars containing diffenrent components

The toolBar Component has the following capabilities :

  • IInitEventCapability
  • IVerticalAlignmentCapability
  • IBorderTypeCapability
  • IImageAccessorsCapability


The default toolBar renderer is linked to the f_toolBar javascript class. f_toolBar extends f_component


Table of component style classes:

Style Name Description
f_toolBar Defines styles for the wrapper DIV element

Screen Shot

Syntax

Basic ToolBar 
		<v:toolBar itemPadding="1" 
					separatorImageURL="$context/ecran/demo/images-toolbar/separator.gif" 
					separatorImageWidth="1" 
					separatorImageHeight="34"  
					
					>
				<v:itemsToolFolder id="tf" 
						height="34"
						itemHiddenMode="phantom"
						selectionListener="showEvent(event);">
					<v:toolItem 
						disabled="true"
						imageURL="$context/ecran/demo/images-toolbar/b-lister.gif" 
						inputType="check"
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="$context/ecran/demo/images-toolbar/b-lister-b.gif" 
						itemValue="lister" 
						itemDescription="Lister des éléments" />
					<v:toolItemSeparator />
					<v:toolItem 
						disabled="false"
						imageURL="$context/ecran/demo/images-toolbar/b-lister.gif" 
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="$context/ecran/demo/images-toolbar/b-lister-b.gif" 
						itemValue="lister2" 
						visible="true"
						itemDescription="Lister des éléments" />
					<v:toolItem 
						imageURL="$context/ecran/demo/images-toolbar/b-quit.gif" 
						inputType="check"
						visible="true"
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="$context/ecran/demo/images-toolbar/b-quit-b.gif" 
						itemValue="quit" 
						itemDescription="Pour quitter l'application" />
					<v:toolItem 
						imageURL="$context/ecran/demo/images-toolbar/b-quit.gif" 
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="selected::" 
						itemValue="pop">
						<f:selectItem itemLabel="Item 1" itemValue="item1" />
						<f:selectItem itemLabel="Item 2" itemValue="item2" />
						<f:selectItem itemLabel="Item 3" itemValue="item3" />
						<f:selectItem itemLabel="Item 4" itemValue="item4" />
					</v:toolItem>
					<v:toolItem 
						imageURL="$context/ecran/demo/images-toolbar/b-quit.gif" 
						inputType="submit"
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="$context/ecran/demo/images-toolbar/b-quit-b.gif" 
						itemValue="submit" 
						itemDescription="Test du submit" />
					<v:toolItem 
						imageURL="$context/ecran/demo/images-toolbar/b-quit.gif" 
						hoverImageURL="hover::"
						disabledImageURL="disabled::"
						selectedImageURL="$context/ecran/demo/images-toolbar/b-quit-b.gif" 
						itemValue="submitImmediate" 
						immediate="true"
						itemDescription="Test du submit Immediate" />
				</v:itemsToolFolder>

				<v:toolFolder id="tf2" >
						
					<v:combo />
				</v:toolFolder>
			</v:toolBar>

Instructions