| output: github_document | output: github_document | ||||
| --- | --- | ||||
| [shiny-debounce]: https://shiny.rstudio.com/reference/shiny/latest/debounce.html | |||||
| [updateText-shiny-input-binding]: https://github.com/rstudio/shiny/blob/a2a4e40821b9811a40e461f67e3622196d8aa726/srcjs/input_binding_text.js#L31-L41 | |||||
| [checkboxInput-shiny-input-binding]: https://github.com/rstudio/shiny/blob/a2a4e40821b9811a40e461f67e3622196d8aa726/srcjs/input_binding_checkbox.js | |||||
| ```{r setup, include=FALSE} | ```{r setup, include=FALSE} | ||||
| knitr::opts_chunk$set(eval = FALSE) | knitr::opts_chunk$set(eval = FALSE) | ||||
| ## Add a dependency to the typing input | ## Add a dependency to the typing input | ||||
| `r github_sha_link("0be8efb83bef664f707b8716eab1d5478de933c7")` | |||||
| To have `typing.js` included with our input, | To have `typing.js` included with our input, | ||||
| we use `htmltools::htmlDependency()` inside our input function. | we use `htmltools::htmlDependency()` inside our input function. | ||||
| This guarantees that `typing.js` is loaded once per page | This guarantees that `typing.js` is loaded once per page | ||||
| Now when you run the app, | Now when you run the app, | ||||
| you'll see `"FIXME"` as the output of `input$typing`. | you'll see `"FIXME"` as the output of `input$typing`. | ||||
| That's our next step. | That's our next step. | ||||
| ## Explore the input binding | |||||
| Read through the comments of the input binding template. | |||||
| They explain the role of each function. | |||||
| In a nutshell, | |||||
| as a Shiny input author, | |||||
| your job is to tell Shiny a few key things: | |||||
| 1. **`.find()`** — How to find your input elements on the page | |||||
| 1. **`.subscribe()`** — What browser events will trigger an update from your input. | |||||
| The template show how to listen `'change'` events, | |||||
| but you may want to listen for a different event (or multiple events!), | |||||
| like a button `'click'` or a `'keydown'` or `'keyup'` event. | |||||
| 1. **`.getRatePolicy()`** — How often to send updates back to the server. | |||||
| There are three options here: `'debounce'`, `'throttle'`, and `'direct'`. | |||||
| See the [shiny debounce documentation][shiny-debounce] and my slides | |||||
| for more info. | |||||
| 1. **`.getValue()`** — What is the value of your input? | |||||
| This method is called whenever a subscribed event happens, and if the value | |||||
| of the input has changed it is reported back to Shiny. It's up to you, | |||||
| though, in this function, to read the HTML to determine the current value of | |||||
| the input and to construct the data that's sent back to the server. | |||||
| 1. **`.receiveMessage()`** - Let the input receive messages from the server. | |||||
| This works just like custom message handles, except that you call | |||||
| `shiny::sendInputMessage(inputId, data)` on the server side. | |||||
| This method receives the data and can be used to update the state of the | |||||
| input from values sent by the server. | |||||
| Ideally you would write an `update<InputName>()` function that wraps | |||||
| `shiny::sendInputMessage()`. This is how [`updateTextInput()`][updateText-shiny-input-binding] and others | |||||
| works. | |||||
| If you want the updated values to flow through the reactive graph | |||||
| (you probably do), then you need to trigger a subscribed event after | |||||
| you make the changes. This calls `.getValue()` which sets the input values | |||||
| and reports back to the server. | |||||
| 1. **`.setValue()`** — This method takes a value sent from your input and | |||||
| updates your HTML to match. | |||||
| This method is required to be able to restore the input from a bookmarked | |||||
| state. It also allows you to set the input's value without triggering | |||||
| reactivity. | |||||
| ### Read the input binding for `checkboxInput()` | |||||
| The input binding JavaScript for `checkboxInput()` is available | |||||
| in the [Shiny GitHub repository][checkboxInput-shiny-input-binding]. | |||||
| Read through it and discuss what each method does. |