.. _toscawidgets_cookbook:

ToscaWidgets Cookbook
=====================

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

.. toctree::
   :maxdepth: 1

   Cookbook/AutoComplete
   Cookbook/FlexiGrid
   Cookbook/JQueryAjaxForm
   Cookbook/JQueryTreeView
   Cookbook/Flot
   Cookbook/FlexiGrid
   Cookbook/OpenLayersMap
   Cookbook/PasswordValidation
   Cookbook/ReCaptcha
   Cookbook/DynamicSelect
   Cookbook/JSUnit
   Cookbook/ExtTreeView
   Cookbook/ExtItemSelector
   Cookbook/ExtSingleSelectCombo
   Cookbook/ActiveForm

Javascript Library Specific Widgets
-----------------------------------

ExtJS
~~~~~

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

 :ref:`tw_cookbook_exttreeview`


 .. image:: images/itemselector1.png
   :align: right
   :height: 140

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.

 :ref:`tw_cookbook_extitemselector`


 .. image:: images/singleselectcombo-small.png
   :align: right
   :height: 120

SingleSelectCombo
`````````````````

 Create a ComboBox using Ext which also does autocompletion.

 :ref:`tw_cookbook_extsingleselectcombo`

jQuery
~~~~~~~


 .. image:: images/autocomplete_small.png
    :align: right
    :alt: example AutoComplete Field

AutoComplete Field
``````````````````

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


 :ref:`tw_cookbook_autocomplete`


 .. image:: images/flexigrid.png
   :align: right
   :height: 120

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.

 :ref:`tw_cookbook_flexigrid`

Ajax Form
`````````
 How to use AjaxForm to create a dynamic form.

 :ref:`tw_cookbook_jqueryajaxform`


 .. image:: images/flot1.png
   :align: right
   :height: 89

Flot
````

 How to create dynamic graphs using the powerful Flot library.

 :ref:`tw_cookbook_flot`


 .. image:: images/treeview.png
   :align: right
   :height: 120

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.

 :ref:`tw_cookbook_jquerytreeview`

 .. image:: images/stars.png
   :align: right
   :height: 57

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.

 :ref:`tw_cookbook_ajaxform`


Dojo
~~~~

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

JSUnit
------

 .. image:: images/jsunit.png
    :align: right
    :height: 120
    :alt: example JSUnit Widget

JSUnit and Runner Widget
~~~~~~~~~~~~~~~~~~~~~~~~

 Create a widget for in-browser testing of javascript code using the
 `JSUnit Javascript Unit Testing Framework <http://www.jsunit.net/>`_.


 :ref:`tw_cookbook_jsunit`


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)
~~~~~~~~~~~~~~~~~~~~~~~~~~

 .. image:: images/passwordverify.png
   :align: right
   :height: 80

Password Validation
```````````````````

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

 :ref:`tw_cookbook_passwordvalidation`

 .. image:: images/recaptcha_field.jpg
   :align: right
   :height: 80

ReCaptcha
`````````

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

 :ref:`tw_cookbook_recaptcha`


Database-driven  Select Fields
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

 :ref:`tw_cookbook_dynamicselect`

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..

 :ref:`tw_cookbook_openlayersmap`

