.. _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 `_. :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`