"These widgets can be used to choose between multiple alternatives. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, and `Select` only allow one selection."
"These widgets can be used to choose between multiple alternatives. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, `SelectionSlider` and `Select` only allow one selection. `SelectionRangeSlider` returns exactly two selections.\n",
"\n",
"Every widget, except the sliders, can return `Nothing` as it selected index."
]
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 1,
"metadata": {
"collapsed": true
"tags": []
},
"outputs": [],
"outputs": [
{
"data": {
"text/html": [
"<style>/* Styles used for the Hoogle display in the pager */\n",
" setField w Options (OptionLabels [\"sin\", \"cos\"])\n",
" return w\n",
" \n",
"init tgbs\n",
"init dropdown\n",
"init radio\n",
"init select\n",
"init slider"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The cell below requires `Chart` and `Chart-cairo` to be installed."
"We can create a `SelectionHandler` function that will be run every time the value is changed. Let's synchronize them so all the selectors always display the same value."
"setHandler w = setField w SelectionHandler $ do\n",
" x <- getField w Index\n",
" setField dropdown OptionalIndex $ Just x\n",
" setField tgbs OptionalIndex $ Just x\n",
" setField radio OptionalIndex $ Just x\n",
" setField select OptionalIndex $ Just x\n",
" setField slider Index x\n",
" \n",
"-- Add event handlers to make widgets work\n",
"setField msel SelectionHandler refresh\n",
"setField tgbs SelectionHandler refresh\n",
"\n",
"-- Trigger event to show empty grid initially\n",
"triggerSelection msel"
"setHandlerOpt tgbs\n",
"setHandlerOpt dropdown\n",
"setHandlerOpt radio\n",
"setHandlerOpt select\n",
"setHandler slider"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Multiple Selection Widgets\n",
"\n",
"In the multiple selection widget, you can select multiple items by doing Shift+Click. Let's do an example for selecting provinces (maybe for filtering later)."
"We can also set the items selected with the `Indices` attribute (which is an Integer list)."
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {},
"outputs": [],
"source": [
"-- Display the widgets\n",
"msel\n",
"tgbs\n",
"i"
"setField msel Indices [0,2]\n",
"setField msel Indices [-1,3]"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"The `Dropdown`, `RadioButtons` and `Select` widgets behave just like the `ToggleButtons` widget. They have the same properties, and the same functionality."
"But maybe we to scroll a lot because we don't have enough space, which is a bit tiring. We can fix this setting the `Rows` attribute. If we set it to `Nothing`, we are letting the frontend decide the number of rows."
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {},
"outputs": [],
"source": [
"setField msel Rows $ Just 10"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now let's create a slider. This one also returns an array of `Indices`, but it's always of size 2."
