mirror of
https://github.com/rstudio/shiny.git
synced 2026-01-29 16:58:11 -05:00
tutorial tweaks
This commit is contained in:
@@ -64,4 +64,4 @@ shinyServer(function(input, output) {
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
The next example will show the use more input controls as well as the use of reactive functions to generate textual output.
|
||||
The next example will show the use of more input controls as well as the use of reactive functions to generate textual output.
|
||||
@@ -10,7 +10,7 @@ The HTML UI application demonstrates defining a Shiny user-interface using a sta
|
||||
|
||||
### Defining an HTML UI
|
||||
|
||||
The previous examples in this tutorial used a ui.R file to build their user-interfaces. While this is fast and convenient way to build user-interfaces, some appliations will inevitably require more flexiblity. For this type of application, you can define your user-interface directly in HTML. In this case there is no ui.R file and the directory structure looks like this:
|
||||
The previous examples in this tutorial used a ui.R file to build their user-interfaces. While this is a fast and convenient way to build user-interfaces, some appliations will inevitably require more flexiblity. For this type of application, you can define your user-interface directly in HTML. In this case there is no ui.R file and the directory structure looks like this:
|
||||
|
||||
<pre><code><<em>application-dir</em>>
|
||||
|-- www
|
||||
@@ -18,7 +18,7 @@ The previous examples in this tutorial used a ui.R file to build their user-inte
|
||||
|-- server.R
|
||||
</code></pre>
|
||||
|
||||
In this example we re-write the front-end of the Tabsets application using HTML directly. Here is the source code for the new user-interface:
|
||||
In this example we re-write the front-end of the Tabsets application using HTML directly. Here is the source code for the new user-interface definition:
|
||||
|
||||
#### www/index.html
|
||||
|
||||
@@ -64,7 +64,7 @@ There are few things to point out regarding how Shiny binds HTML elements back t
|
||||
* HTML form elmements (in this case a select list and a number input) are bound to input slots using their `name` attribute.
|
||||
* Output is rendered into HTML elements based on matching their `id` attribute to an output slot and by specifying the requisite css class for the element (in this case either shiny-text-output, shiny-plot-output, or shiny-html-output).
|
||||
|
||||
With this technique you can create highly customized user-interfaces using whatever HTML, CSS, and JavaScript you can dream up.
|
||||
With this technique you can create highly customized user-interfaces using whatever HTML, CSS, and JavaScript you like.
|
||||
|
||||
### Server Script
|
||||
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
### Adding Inputs to the Sidebar
|
||||
|
||||
The application we'll be building uses the mtcars data from the R datasets package, and allows users to see a box-plot that explores the relationship between miles-per-gallon and three other variables (Cylinders, Transmission, and Gears).
|
||||
The application we'll be building uses the mtcars data from the R datasets package, and allows users to see a box-plot that explores the relationship between miles-per-gallon (MPG) and three other variables (Cylinders, Transmission, and Gears).
|
||||
|
||||
We want to provide a way to select which variable to plot mpg against as well as provide an option to include or exclude outliers from the plot. To do this we'll add two elements to the sidebar, a `selectInput` to specify the variable and a `checkboxInput` to control display of outliers. Our ui.R file looks like this after adding these elements:
|
||||
We want to provide a way to select which variable to plot MPG against as well as provide an option to include or exclude outliers from the plot. To do this we'll add two elements to the sidebar, a `selectInput` to specify the variable and a `checkboxInput` to control display of outliers. Our user-interface definition looks like this after adding these elements:
|
||||
|
||||
#### ui.R
|
||||
|
||||
@@ -43,7 +43,7 @@ If you run the application again after making these changes you'll see the two u
|
||||
Next we need to define the server-side of the application which will accept inputs and compute outputs. Our server.R file is shown below, and illustrates some important concepts:
|
||||
* Accessing input using slots on the `input` object and generating output by assigning to slots on the `output` object.
|
||||
* Initializing data at startup that can be accessed throughout the lifetime of the application.
|
||||
* Using a reactive function to compute a value shared by more than one output function.
|
||||
* Using a reactive function to compute a value shared by more than one output.
|
||||
|
||||
The basic task of a Shiny server script is to define the relationship between inputs and outputs. Our script does this by accessing inputs to perform computations and by assigning reactive functions to output slots.
|
||||
|
||||
@@ -91,7 +91,7 @@ The use of `reactiveText` and `reactivePlot` to generate output (rather than jus
|
||||
|
||||
The server script assigned two output values: `output$caption` and `output$mpgPlot`. To update our user interface to display the output we need to add some elements to the main UI panel.
|
||||
|
||||
In the updated ui.R source file below you can see that we've added the caption as an h3 element (level 3 header) and filled in it's value using the `textOutput` function, and also rendered the plot by calling the `plotOutput` function:
|
||||
In the updated user-interface definition below you can see that we've added the caption as an h3 element and filled in it's value using the `textOutput` function, and also rendered the plot by calling the `plotOutput` function:
|
||||
|
||||
#### ui.R
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||

|
||||
|
||||
The More Widgets application demonstrates the helpText and submitButton widgets as well as the use of embedded HTML elements to customized formatting. To run the example type:
|
||||
The More Widgets application demonstrates the help text and submit button widgets as well as the use of embedded HTML elements to customize formatting. To run the example type:
|
||||
|
||||
<pre><code class="console">> library(shiny)
|
||||
> runExample("07_widgets")
|
||||
@@ -14,7 +14,7 @@ In this example we update the Shiny Text application with some additional contro
|
||||
|
||||
* We added a `helpText` control to provide additional clarifying text alongside our input controls.
|
||||
* We added a `submitButton` control to indicate that we don't want a live connection between inputs and outputs, but rather to wait until the user clicks that button to update the output. This is especially useful if computing output is computationally expensive.
|
||||
* We added `h4` elements (heading level 4) into the output pane. Shiny includes a variety of functions for including HTML elements directly covering headings, paragraphics, links, and more.
|
||||
* We added `h4` elements (heading level 4) into the output pane. Shiny offers a variety of functions for including HTML elements directly in pages including headings, paragraphics, links, and more.
|
||||
|
||||
Here is the updated source code for the user-interface:
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ The Reactivity application is very similar to Hello Text, but goes into much mor
|
||||
> runExample("03_reactivity")
|
||||
</code></pre>
|
||||
|
||||
The previous examples have given you a good idea of what the code for Shiny applications looks like. We've explained a bit about reactivity, but mostly glossed over the finer details. In this section, we'll explore these concepts more deeply.
|
||||
The previous examples have given you a good idea of what the code for Shiny applications looks like. We've explained a bit about reactivity, but mostly glossed over the details. In this section, we'll explore these concepts more deeply.
|
||||
|
||||
### What is Reactivity?
|
||||
|
||||
@@ -38,7 +38,7 @@ It's simple to create reactive functions: just pass a normal function definition
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
The transformation of reactive values into outputs is then by assignments to the `output` object. Here is an example of an assignment to an output that depends on both the `datasetInput` reactive function we just defined as well as `input$obs`:
|
||||
To turn reactive values into outputs that can viewed on the web page, we assigned them to the `output` object (also passed to the `shinyServer` function). Here is an example of an assignment to an output that depends on both the `datasetInput` reactive function we just defined as well as `input$obs`:
|
||||
|
||||
<pre><code class="r">output$view <- reactiveTable(function() {
|
||||
head(datasetInput(), n = input$obs)
|
||||
@@ -49,7 +49,7 @@ This function will be re-executed (and it's output re-rendered in the browser) w
|
||||
|
||||
### Back to the Code
|
||||
|
||||
Now that we've taken a deeper loop at some of the core concepts, let's revised the source code and try to understand what's going on at a bit finer level of detail. The user interface definition has been updated to include a text-input field that defines a caption. Other than that it's very similar to the previous example:
|
||||
Now that we've taken a deeper loop at some of the core concepts, let's revisit the source code and try to understand what's going on in more depth. The user interface definition has been updated to include a text-input field that defines a caption. Other than that it's very similar to the previous example:
|
||||
|
||||
#### ui.R
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
## Run & Debug
|
||||
|
||||
Throughout the tutorial you've been calling `runApp` to run examples and the MPG application. This function starts the Shiny application and opens up your default web browser to view it. The call to runApp is blocking, meaning that it prevents traditional interaction with the console while the applciation is running.
|
||||
Throughout the tutorial you've been calling `runApp` to run the example applications. This function starts the application and opens up your default web browser to view it. The call is blocking, meaning that it prevents traditional interaction with the console while the applciation is running.
|
||||
|
||||
To stop the application you simply interupt R -- you can do this by pressing the Escape key in all R front ends as well as by clicking the stop button if your R environment provides one.
|
||||
|
||||
@@ -15,22 +15,24 @@ If you don't want to block access to the console while running your Shiny applic
|
||||
|
||||
By default `runApp` starts the application on port 8100. If you are using this default then you can connect to the running application by navigating your browser to [http://localhost:8100](http://localhost:8100).
|
||||
|
||||
Note that below we discuss some techniques for debugging Shiny applications, including the ability to stop execution and inspect the current environment. In order to combine these techniques with running your applications in a separate terminal session you need to run R interactively (that is, first type "R" to start an R session then execute `runApp` from within the session).
|
||||
|
||||
### Live Reloading
|
||||
|
||||
When you make changes to your underlying user-interface defintiion or server script you don't need to stop and restart your application to see the changes. Simply save your changes and then reload the browser to the updated application in action.
|
||||
When you make changes to your underlying user-interface definition or server script you don't need to stop and restart your application to see the changes. Simply save your changes and then reload the browser to see the updated application in action.
|
||||
|
||||
One qualification to this: when a browser reload occurs Shiny explicitly checks the timestamps of the ui.R and server.R files to see if they need to be re-sources. If you have other scripts or data files that change Shiny can't see those, so a full stop and restart of the application is necessary to see those changes.
|
||||
One qualification to this: when a browser reload occurs Shiny explicitly checks the timestamps of the ui.R and server.R files to see if they need to be re-sourced. If you have other scripts or data files that change Shiny isn't aware of those, so a full stop and restart of the application is necessary to see those changes reflected.
|
||||
|
||||
### Debugging Techniques
|
||||
|
||||
#### Printing
|
||||
There are several potential techniques for debugging Shiny applications. The first is to add calls to the [cat](http://stat.ethz.ch/R-manual/R-devel/library/base/html/cat.html) function that print diagnostics where appropriate. For example, these two calls to cat print diagnostics to standard output and standard error respectively:
|
||||
There are several techniques available for debugging Shiny applications. The first is to add calls to the [cat](http://stat.ethz.ch/R-manual/R-devel/library/base/html/cat.html) function which print diagnostics where appropriate. For example, these two calls to cat print diagnostics to standard output and standard error respectively:
|
||||
|
||||
<pre><code class="r">cat("foo\n")
|
||||
cat("bar\n", stderr())
|
||||
</code></pre>
|
||||
|
||||
#### Using browse
|
||||
#### Using browser
|
||||
The second technique is to add explicit calls to the [browser](http://stat.ethz.ch/R-manual/R-devel/library/base/html/browser.html) function to interrupt execution and inspect the environment where browser was called from. Note that using browser requires that you start the application from an interactive session (as opposed to using R -e as described above).
|
||||
|
||||
For example, to unconditionally stop execution at a certain point in the code:
|
||||
|
||||
@@ -11,7 +11,7 @@ The first example had a single numeric input specified using a slider and a sing
|
||||
|
||||
If you try changing the number of observations to another value you'll see a demonstration of one of the most important attributes of Shiny applications -- inputs and outputs are connected together "live" and changes are propagated immediately (like a spreadsheet). In this case rather than the entire page being reloaded just the table view is updated when the number of observations change.
|
||||
|
||||
Here is the user interface definition for the application. Notice in particular that the mainPanel function now takes two arguments (corresponding to the two types of output displayed):
|
||||
Here is the user interface definition for the application. Notice in particular that the `sidebarPanel` and `mainPanel` functions now take two arguments (corresponding to the two inputs and two outputs displayed):
|
||||
|
||||
#### ui.R
|
||||
|
||||
@@ -44,7 +44,7 @@ shinyUI(pageWithSidebar(
|
||||
|
||||
The server side of the application has also gotten a bit more complicated. Now rather than just computing a single output we see the definition of a reactive function to return the dataset corresponding to the user choice and two other reactive functions (`reactivePrint` and `reactiveTable`) that return the output$summary and output$view values.
|
||||
|
||||
These reactive functions work similarly to the `reactivePrint` function used in the first example: by declaring a reactive function you tell Shiny that it should only be executed when it's dependencies change. In this case that's either one of the user input values.
|
||||
These reactive functions work similarly to the `reactivePlot` function used in the first example: by declaring a reactive function you tell Shiny that it should only be executed when it's dependencies change. In this case that's either one of the user input values (input$dataset or input$n)
|
||||
|
||||
#### server.R
|
||||
|
||||
@@ -75,4 +75,4 @@ shinyServer(function(input, output) {
|
||||
})
|
||||
</code></pre>
|
||||
|
||||
The next example will start with this one as a baseline and expand significantly on how reactive functions work in Shiny.
|
||||
We're introduced more use of reactive functions but haven't really explained how they work yet. The next example will start with this one as a baseline and expand significantly on how reactive functions work in Shiny.
|
||||
|
||||
@@ -11,7 +11,7 @@ The Sliders application demonstrates the many capabilities of slider controls, i
|
||||
|
||||
Shiny slider controls are extremely capable and customizable. Features supported include:
|
||||
|
||||
* The ability to specify both single values and ranges
|
||||
* The ability to input both single values and ranges
|
||||
* Custom formats for value display (e.g for currency)
|
||||
* The ability to animate the slider across a range of values
|
||||
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
|
||||
## UI & Server
|
||||
|
||||
Let's walk through the steps of building a simple Shiny application. As with the previous examples we'll be building our user interface using R, however it's also possible to define a user interface directly in HTML (covered more detail in the *HTML UI* topic later in the tutorial).
|
||||
Let's walk through the steps of building a simple Shiny application. A Shiny application is simply a directory containing a user-interface definition, a server script, and any additional data, scripts, or other resources required to support the application.
|
||||
|
||||
A Shiny application is simply a directory containing a user-interface definition, a server script, and any additional data, scripts, or other resources required to support the application.
|
||||
|
||||
To get started building the application, create a new empty directory wherever you'd like, then create empty ui.R and server.R files within in. For purposes of illustration we'll assume you've chosen to create the application at ~/shinyapp:
|
||||
To get started building the application, create a new empty directory wherever you'd like, then create empty `ui.R` and `server.R` files within in. For purposes of illustration we'll assume you've chosen to create the application at ~/shinyapp:
|
||||
|
||||
<pre><code>~/shinyapp
|
||||
|-- ui.R
|
||||
|-- server.R
|
||||
</code></pre>
|
||||
|
||||
Now we'll add the minimal code required in each source file. For ui.R we'll define our user interface by calling the function `pageWithSidebar` and passing it's result to the `shinyUI` function:
|
||||
Now we'll add the minimal code required in each source file. We'll first define the user interface by calling the function `pageWithSidebar` and passing it's result to the `shinyUI` function:
|
||||
|
||||
#### ui.R
|
||||
<pre><code class="r">library(shiny)
|
||||
|
||||
Reference in New Issue
Block a user