### Navigation

- index
- modules |
- next |
- previous |
- TurboGears 2.1.5 documentation »
- Search:
- Extended Table of Contents »
- Tips and Recipes »

# ToscaWidgets Cookbook

> Here you will find information about how to do common tasks involving ToscaWidgets.

- JQuery AutoComplete Widget Tutorial
- JQuery FlexiGrid Widget
- JQuery AjaxForm Widget
- JQuery TreeView Widget Tutorial
- JQuery Flot Widget
- JQuery FlexiGrid Widget
- OpenLayers Map Widget
- Creating A Password Verification Field
- Adding Captcha To Your Form
- How To Create A Database-Driven Select Field
- JSUnit Widget
- ExtJS Tree Widget Tutorial
- ExtJS ItemSelector Widget Tutorial
- ExtJS SingleSelectCombo Widget
- Creating Ajax-Enabled Forms Using Prototype

## Javascript Library Specific Widgets

### ExtJS

#### TreeView

> Learn how to use the ext widget library to create a dynamically loading TreeView.

> ExtJS Tree Widget Tutorial

#### ItemSelector

> How to use the ext ItemSelector which allows multiple selection by shuttling items between source and destination lists. It supports full drag and drop and ordering of items.

> ExtJS ItemSelector Widget Tutorial

#### SingleSelectCombo

> Create a ComboBox using Ext which also does autocompletion.

> ExtJS SingleSelectCombo Widget

### jQuery

#### AutoComplete Field

> Create a field which automatically completes the user entry as they type. Based on tw.jquery AutoComplete widget.

> JQuery AutoComplete Widget Tutorial

#### FlexiGrid

> How to create an Ajax Data Grid with support for pagination, sorting, searching and column resizing. This widget is based on the jQuery FlexiGrid Plugin.

> JQuery FlexiGrid Widget

#### Ajax Form

> How to use AjaxForm to create a dynamic form.

> JQuery AjaxForm Widget

#### Flot

> How to create dynamic graphs using the powerful Flot library.

> JQuery Flot Widget

#### Tree View

> How to create a simple tree view of an unordered list where the branches can be expanded or collapsed to present a good view of a document tree structure. This widget is based on the jQuery Treeview Plugin.

> JQuery TreeView Widget Tutorial

#### Ajax Star Rating

> How to add a simple star rating widget to your application.

Todo

Difficulty: Medium to Hard. write a tutorial to add a star rating widget to an application

### Prototype

#### Ajax Form

> How to use AjaxForm to create a dynamic form.

> Creating Ajax-Enabled Forms Using Prototype

### Dojo

Todo

Difficulty: Medium to Hard. Need some basic dojo widgets here.

## JSUnit

### JSUnit and Runner Widget

> Create a widget for in-browser testing of javascript code using the JSUnit Javascript Unit Testing Framework.

> JSUnit Widget

### To Be Done

#### Ajax Related Select Fields

> How to create select fields which change based on the choices made on other select fields.

> Todo

> Difficulty: Medium to Hard. write tutorial to show how to update select fields based on other choices

#### Ajax Progress Bar

> How to create a progress bar with server-side progress indicator

Todo

Difficulty: Medium to Hard. create a tutorial for an ajax enabled progress bar

#### Ajax File Upload with Progress Bar

> How to create a file upload with a progress bar.

Todo

Difficulty: Medium to Hard. create a tutorial for a file upload with progress bar

## tw.forms

### Basic Form usage (no ajax)

#### Password Validation

> How to create a simple registration form with that makes sure the user typed the correct password

> Creating A Password Verification Field

#### ReCaptcha

> A Description on how to add a tw.recaptcha field to your public forms an keep spammers at bay.

> Adding Captcha To Your Form

### Database-driven Select Fields

> How to create a select field which changes based on the entry in a database table.

> How To Create A Database-Driven Select Field

## Other Valuable Widgets (no JS library)

### Css based

#### Tabber

> How to easily add Tabbed Browsing to your website.

Todo

Difficulty: Medium to Hard. create tutorial for adding tabbed browsing to your website

### OpenLayers

#### OpenLayers Map

> How to create a web map using OpenLayers Javascript Toolkit..

> OpenLayers Map Widget