| @@ -2,6 +2,10 @@ | |||
| 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} | |||
| knitr::opts_chunk$set(eval = FALSE) | |||
| @@ -233,6 +237,8 @@ you need to find and replace all: | |||
| ## Add a dependency to the typing input | |||
| `r github_sha_link("0be8efb83bef664f707b8716eab1d5478de933c7")` | |||
| To have `typing.js` included with our input, | |||
| we use `htmltools::htmlDependency()` inside our input function. | |||
| This guarantees that `typing.js` is loaded once per page | |||
| @@ -252,3 +258,62 @@ htmltools::htmlDependency( | |||
| Now when you run the app, | |||
| you'll see `"FIXME"` as the output of `input$typing`. | |||
| 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. | |||