"+ `Box` is always horizontal, whereas `FlexBox` has a configurable `Orientation`.\n",
"+ `Box` is always horizontal, whereas `FlexBox` has a configurable `Orientation`.\n",
"+ `FlexBox` is flexible, and the flexibility is determined by its `Flex` field (0 to 2).\n",
"+ `FlexBox` is flexible, and the flexibility is determined by its `Flex` field (0 to 2).\n",
"+ `FlexBox` also has explicit `Pack` and `Align` fields."
"+ `FlexBox` also has explicit `Pack` and `Align` fields.\n",
"\n",
"Let's see these differences in action:"
]
]
},
},
{
{
"cell_type": "markdown",
"cell_type": "code",
"metadata": {},
"execution_count": 5,
"source": [
"metadata": {
"#### `Accordion` and `TabWidget`"
"collapsed": false,
]
"scrolled": true
},
},
"outputs": [
{
{
"cell_type": "markdown",
"data": {
"metadata": {},
"text/html": [
"source": [
"<style>/*\n",
"These widgets are useful for displaying a variety of content in a small amount of space."
"Custom IHaskell CSS.\n",
"*/\n",
"\n",
"/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
" display: block;\n",
" padding-bottom: 1.3em;\n",
" padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
" display: block;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
"}\n",
".hoogle-text {\n",
" display: block;\n",
"}\n",
".hoogle-name {\n",
" color: green;\n",
" font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
" display: block;\n",
" margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
" font-weight: bold;\n",
" font-style: italic;\n",
"}\n",
".hoogle-module {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"/* Styles used for basic displays */\n",
".get-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" display: block;\n",
" white-space: pre-wrap;\n",
"}\n",
"\n",
".show-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" margin-left: 1em;\n",
"}\n",
"\n",
".mono {\n",
" font-family: monospace;\n",
" display: block;\n",
"}\n",
"\n",
".err-msg {\n",
" color: red;\n",
" font-style: italic;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
" display: block;\n",
"}\n",
"\n",
"#unshowable {\n",
" color: red;\n",
" font-weight: bold;\n",
"}\n",
"\n",
".err-msg.in.collapse {\n",
" padding-top: 0.7em;\n",
"}\n",
"\n",
"/* Code that will get highlighted before it is highlighted */\n",
".highlight-code {\n",
" white-space: pre;\n",
" font-family: monospace;\n",
"}\n",
"\n",
"/* Hlint styles */\n",
".suggestion-warning { \n",
" font-weight: bold;\n",
" color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
" font-weight: bold;\n",
" color: red;\n",
"}\n",
".suggestion-name {\n",
" font-weight: bold;\n",
"}\n",
"</style><span class='err-msg'>No instance for (Data.Vinyl.Lens.RElem 'Orientation '[] (Data.Vinyl.TypeLevel.RIndex 'Orientation '[])) arising from a use of ‘setField’<br/>In the expression: setField box SOrientation VerticalOrientation<br/>In an equation for ‘it’: it = setField box SOrientation VerticalOrientation</span>"
],
"text/plain": [
"No instance for (Data.Vinyl.Lens.RElem 'Orientation '[] (Data.Vinyl.TypeLevel.RIndex 'Orientation '[])) arising from a use of ‘setField’\n",
"In the expression: setField box SOrientation VerticalOrientation\n",
"In an equation for ‘it’: it = setField box SOrientation VerticalOrientation"
]
]
},
},
{
"metadata": {},
"cell_type": "code",
"output_type": "display_data"
"execution_count": 9,
}
"metadata": {
],
"collapsed": true
},
"outputs": [],
"source": [
"source": [
"acc <- mkAccordion\n",
"-- Trying to set orientation for Boxes\n",
"tab <- mkTabWidget"
"setField box SOrientation VerticalOrientation"
]
]
},
},
{
{
"cell_type": "markdown",
"cell_type": "markdown",
"metadata": {},
"metadata": {},
"source": [
"source": [
"Let's add some children and see what the result looks like."
"The errors means that the widget doesn't possess the `Orientation` property."
]
]
},
},
{
{
"cell_type": "code",
"cell_type": "code",
"execution_count": 13,
"execution_count": 6,
"metadata": {
"metadata": {
"collapsed": false
"collapsed": false
},
},
...
@@ -503,59 +595,57 @@
...
@@ -503,59 +595,57 @@
},
},
"metadata": {},
"metadata": {},
"output_type": "display_data"
"output_type": "display_data"
}
],
"source": [
"-- Trying to set orientation for FlexBox\n",
"setField flx SOrientation VerticalOrientation"
]
},
},
{
{
"data": {},
"cell_type": "markdown",
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"output_type": "display_data"
},
{
"data": {},
"metadata": {},
"metadata": {},
"output_type": "display_data"
"source": [
"#### `Accordion` and `TabWidget`"
]
},
},
{
{
"data": {},
"cell_type": "markdown",
"metadata": {},
"metadata": {},
"output_type": "display_data"
"source": [
"These widgets are useful for displaying a variety of content in a small amount of space."
]
},
},
{
{
"data": {},
"cell_type": "code",
"metadata": {},
"execution_count": 7,
"output_type": "display_data"
"metadata": {
"collapsed": true
},
},
{
"outputs": [],
"data": {},
"source": [
"metadata": {},
"acc <- mkAccordion\n",
"output_type": "display_data"
"tab <- mkTabWidget"
]
},
},
{
{
"data": {},
"cell_type": "markdown",
"metadata": {},
"metadata": {},
"output_type": "display_data"
"source": [
"Let's add some children and see what the result looks like."
]
},
},
{
{
"data": {},
"cell_type": "code",
"metadata": {},
"execution_count": 8,
"output_type": "display_data"
"metadata": {
"collapsed": false
},
},
"outputs": [
{
{
"data": {},
"data": {
"metadata": {},
"text/plain": []
"output_type": "display_data"
},
},
{
"data": {},
"metadata": {},
"metadata": {},
"output_type": "display_data"
"output_type": "display_data"
}
}
...
@@ -576,7 +666,7 @@
...
@@ -576,7 +666,7 @@
"cell_type": "markdown",
"cell_type": "markdown",
"metadata": {},
"metadata": {},
"source": [
"source": [
"Both the widgets are similar, the only difference is in the orientation. `Accordion` is vertical, whereas `TabWidget` is horizontal."
"Both the widgets are similar, the only major difference is in the orientation. `Accordion` is vertical, whereas `TabWidget` is horizontal."
"The following example downloads an xkcd comic and displays it in an image widget."
"The following example downloads an xkcd comic and displays it in an image widget. The example below requires the HTTP package. If you don't have it then you can either install it and restart the ihaskell kernel, or just skip to the next example."
]
]
},
},
{
{
"cell_type": "code",
"cell_type": "code",
"execution_count": 4,
"execution_count": 3,
"metadata": {
"metadata": {
"collapsed": false
"collapsed": false
},
},
"outputs": [
"outputs": [
{
{
"data": {
"data": {
"text/plain": []
"text/html": [
"<style>/*\n",
"Custom IHaskell CSS.\n",
"*/\n",
"\n",
"/* Styles used for the Hoogle display in the pager */\n",
".hoogle-doc {\n",
" display: block;\n",
" padding-bottom: 1.3em;\n",
" padding-left: 0.4em;\n",
"}\n",
".hoogle-code {\n",
" display: block;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
"}\n",
".hoogle-text {\n",
" display: block;\n",
"}\n",
".hoogle-name {\n",
" color: green;\n",
" font-weight: bold;\n",
"}\n",
".hoogle-head {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-sub {\n",
" display: block;\n",
" margin-left: 0.4em;\n",
"}\n",
".hoogle-package {\n",
" font-weight: bold;\n",
" font-style: italic;\n",
"}\n",
".hoogle-module {\n",
" font-weight: bold;\n",
"}\n",
".hoogle-class {\n",
" font-weight: bold;\n",
"}\n",
"\n",
"/* Styles used for basic displays */\n",
".get-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" display: block;\n",
" white-space: pre-wrap;\n",
"}\n",
"\n",
".show-type {\n",
" color: green;\n",
" font-weight: bold;\n",
" font-family: monospace;\n",
" margin-left: 1em;\n",
"}\n",
"\n",
".mono {\n",
" font-family: monospace;\n",
" display: block;\n",
"}\n",
"\n",
".err-msg {\n",
" color: red;\n",
" font-style: italic;\n",
" font-family: monospace;\n",
" white-space: pre;\n",
" display: block;\n",
"}\n",
"\n",
"#unshowable {\n",
" color: red;\n",
" font-weight: bold;\n",
"}\n",
"\n",
".err-msg.in.collapse {\n",
" padding-top: 0.7em;\n",
"}\n",
"\n",
"/* Code that will get highlighted before it is highlighted */\n",
".highlight-code {\n",
" white-space: pre;\n",
" font-family: monospace;\n",
"}\n",
"\n",
"/* Hlint styles */\n",
".suggestion-warning { \n",
" font-weight: bold;\n",
" color: rgb(200, 130, 0);\n",
"}\n",
".suggestion-error { \n",
" font-weight: bold;\n",
" color: red;\n",
"}\n",
".suggestion-name {\n",
" font-weight: bold;\n",
"}\n",
"</style><span class='err-msg'>connect: does not exist (Connection refused)</span>"
],
"text/plain": [
"connect: does not exist (Connection refused)"
]
},
},
"metadata": {},
"metadata": {},
"output_type": "display_data"
"output_type": "display_data"
}
}
],
],
"source": [
"source": [
"-- Uncomment the line below to install HTTP if you don't have it\n",
"-- :!cabal install HTTP\n",
"import Network.HTTP\n",
"import Network.HTTP\n",
"import IHaskell.Display (encode64)\n",
"import IHaskell.Display (encode64)\n",
"\n",
"\n",
...
@@ -288,7 +407,7 @@
...
@@ -288,7 +407,7 @@
},
},
{
{
"cell_type": "code",
"cell_type": "code",
"execution_count": 5,
"execution_count": 4,
"metadata": {
"metadata": {
"collapsed": false
"collapsed": false
},
},
...
@@ -392,14 +511,10 @@
...
@@ -392,14 +511,10 @@
".suggestion-name {\n",
".suggestion-name {\n",
" font-weight: bold;\n",
" font-weight: bold;\n",
"}\n",
"}\n",
"</style><span class='err-msg'>Couldn't match type ‘String’ with ‘B.ByteString’<br/>Expected type: B.ByteString -> IHaskell.Display.Base64<br/> Actual type: String -> IHaskell.Display.Base64<br/>In the second argument of ‘(.)’, namely ‘encode64’<br/>In the second argument of ‘(>>=)’, namely ‘setField i SB64Value . encode64’</span>"
" Actual type: String -> IHaskell.Display.Base64\n",
"In the second argument of ‘(.)’, namely ‘encode64’\n",
"In the second argument of ‘(>>=)’, namely ‘setField i SB64Value . encode64’"
]
]
},
},
"metadata": {},
"metadata": {},
...
@@ -410,325 +525,13 @@
...
@@ -410,325 +525,13 @@
"imgpath = undefined\n",
"imgpath = undefined\n",
"\n",
"\n",
"import qualified Data.ByteString as B\n",
"import qualified Data.ByteString as B\n",
"import IHaskell.Display (encode64)\n",
"import IHaskell.Display (base64)\n",
"\n",
"\n",
"i <- mkImageWidget\n",
"i <- mkImageWidget\n",
"B.readFile imgpath >>= setField i SB64Value . encode64"
"B.readFile imgpath >>= setField i SB64Value . base64\n",
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The `Selection` Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"These widgets can be used to select one from many. The `SelectMultiple` widget allows multiple selections, whereas `Dropdown`, `RadioButtons`, `ToggleButtons`, and `Select` only allow one selection."
]
},
{
"cell_type": "code",
"execution_count": 23,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"-- Allows single selection\n",
"tgbs <- mkToggleButtons\n",
"\n",
"-- Allows multiple selections\n",
"msel <- mkSelectMultiple"
]
},
{
"cell_type": "code",
"execution_count": 24,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField msel SDescription \"Functions to show (One or more)\"\n",
"The `Dropdown`, `RadioButtons` and `Select` widgets behave just like the `ToggleButtons` widget. They have the same properties, and the same functionality."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### The Numeric Widgets"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**NOTE**: The following examples use widgets with `Int` in their names. There are also analogous widgets with `Float` in their names.\n",
"\n",
"As the widgets are the same operationally, only the `Int` widgets are shown."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntText` and `BoundedIntText`"
]
},
{
"cell_type": "code",
"execution_count": 27,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"int <- mkIntText\n",
"bit <- mkBoundedIntText"
]
},
{
"cell_type": "code",
"execution_count": 28,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"int\n",
"bit"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Both the widgets are similar, but the second one possesses some additional properties."
]
},
{
"cell_type": "code",
"execution_count": 29,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": []
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"setField bit SMaxInt 20\n",
"setField bit SMinInt 10\n",
"setField bit SChangeHandler (getField bit SIntValue >>= print)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Now, the first widget will accept arbitrary input whereas the second one wil accept input the the 10-20 range. For example, try entering large values and hitting return/enter in the second widget."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntSlider` and `IntRangeSlider`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Both these widgets are sliders (duh!). `IntSlider` represents a single value, whereas `IntRangeSlider` represents a pair (range) of values."
]
},
{
"cell_type": "code",
"execution_count": 30,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"ins <- mkIntSlider\n",
"irs <- mkIntRangeSlider"
]
},
{
"cell_type": "code",
"execution_count": 31,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"ins\n",
"irs"
]
},
{
"cell_type": "code",
"execution_count": 32,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/plain": [
"(25,75)"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"getField irs SIntPairValue"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"#### `IntProgress`"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This widget is meant to be used as a progress bar."
