## Reactivity

- shiny is built on the idea of **reactive programming**. 
  - i.e. outputs automatically update whenever an input value changes

```
input values => R code => output values
```

**Reactive expressions** keep track of what values they read and what values they change. If those values become "out of date", they know their return value is out of date and will automatically recalculate.


## A Tale of Two Files

Shiny applications have two components: 

- **ui.R** defines the page layout and user interface
- **server.R** contains the R code to create any output

## ui.R

```{r, eval=FALSE}
library(shiny)

# A simple/common user interface template
ui <- fluidPage(

  # Application title
  titlePanel("Title"),
  
  sidebarPanel(
    # Define some inputs here
  ),
  
  mainPanel(
    # outputs` (from the server) go here
  )

)
```

## User Interface (ui)

- elements of the user interface are called **widgets**
- we distinguish between `input` and `output`
- overview of available input widgets in shiny at http://shiny.rstudio.com/gallery/widget-gallery.html
- input widgets have a similar structure `xxxInput (inputId, label, value)` where `xxx` is the name of the widget
    - `inputId` is the (unique) name you give to the widget (object name)
    - `label` is the text that appears with the widget in interface
    - `value` all widgets have a value - the type of this value is specific to the widget
    - ... other parameters are widget-specific


## server.R

```{r, eval=FALSE}


# Server side logic 
server <- function(input, output) {
  # do something
}
```


## A minimal shiny app

```
library(shiny)

ui <- fluidPage()
server <- function(input, output) {
}

shinyServer(ui, server)
```

- save this code in a separate folder call the file `app.R`
- run the code: either paste into the console or use `runApp` on folder name

## Shiny Inputs

```{r eval = FALSE}
textInput("text", label = h3("Text input"), value = "Enter text...")
```

<br>

`h3()` is just converting html into a header of level 3:
```{r eval = FALSE}
h3("Hello")
```

```
<h3>Hello</h3>
```

```{r eval = FALSE}
selectInput("select", label = h3("What do you like?"), 
            choices = c("Pizza", "Ice cream", 
                        "Donuts", "None of the above"), 
            selected=2)
```

## Shiny Inputs (cont'd)

- `actionButton()` - creates a clickable button
- `checkboxInput()` and `checkboxGroupInput()`
- `dateInput()` - calendar to select a date
- `dateRangeInput()` - select a range of dates
- `fileInput()` - upload a file
- `numericInput()` - input a numeric value
- `radioButtons()` - select one or more items
- `sliderInput()` - slide along a range of values
- `textInput()` - input a string

<small>[resource](http://shiny.rstudio.com/gallery/widget-gallery.html)</small>


## Your Turn {data-background=#527a7a}

- Consider extending the hello world example:

```{r, eval=FALSE}
runApp("01_Hello", display.mode = "showcase")
```

- **Challenge 1:** add an input to change the mean and standard deviation (Hint: see `?numericInput`).
- **Challenge 2:** add an input to simulate from a gamma as well as a normal (Hint: you can simulate from gamma distribution with `rgamma`).
- **Challenge 3:** (Tricky) how do we get the shiny app to react to the input?


## Shiny Outputs

Shiny also has a set of output functions with general structure:

```
xxxOutput (outputId, ...)
```
where `outputId` is a (unique) object name (and `xxx` is one of the choices below)

- `html`, `image`, `plot`, `table`, `text`,  creates what the names says
- `uiOutput`	raw HTML
- `verbatimTextOutput`	text

Outputs have width and height, might be clickable, hoverable, ...


