From 56120df20dcaaf28d323ecacd85345ae109f8e53 Mon Sep 17 00:00:00 2001
From: JJ Allaire <jj@rstudio.org>
Date: Thu, 26 Jul 2012 20:16:15 -0700
Subject: [PATCH] more tutorial content

---
 _includes/tutorial/inputs-and-outputs.md | 37 ++++++++++++++++++++----
 _includes/tutorial/ui-and-server.md      |  2 +-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/_includes/tutorial/inputs-and-outputs.md b/_includes/tutorial/inputs-and-outputs.md
index 54fdbc85e..6ba7f1503 100644
--- a/_includes/tutorial/inputs-and-outputs.md
+++ b/_includes/tutorial/inputs-and-outputs.md
@@ -2,8 +2,11 @@
 
 ## Inputs & Outputs
 
+### Adding Inputs to the Sidebar
 
-### Accepting Input
+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). 
+
+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:
 
 #### ui.R
 
@@ -30,10 +33,21 @@ shinyUI(pageWithSidebar(
 ))
 </code></pre>
 
+If you run the application again after making these changes you'll see the two user-inputs we defined displayed within the sidebar:
+
 ![MPG Screenshot](screenshots/mpg-with-inputs.png)
 
 
-### Showing Output
+### Creating the Server Script
+
+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.
+
+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. 
+
+Here is the source code for the full server script (the inline comments explain the implementation technqiues in more detail):
 
 #### server.R
 
@@ -46,7 +60,6 @@ library(datasets)
 mpgData &lt;- mtcars
 mpgData$am &lt;- factor(mpgData$am, labels = c(&quot;Automatic&quot;, &quot;Manual&quot;))
 
-
 # Define server logic required to plot various variables against mpg
 shinyServer(function(input, output) {
 
@@ -71,6 +84,15 @@ shinyServer(function(input, output) {
 })
 </code></pre>
 
+The use of `reactiveText` and `reactivePlot` to generate output (rather than just assigning values directly) is what makes the application reactive. These reactive wrappers return special functions that are only re-executed when their dependencies change. This behavior is what enables Shiny to automatically update output whenever input changes.
+
+
+### Displaying Outputs
+
+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:
+
 #### ui.R
 
 <pre><code class="r">library(shiny)
@@ -99,8 +121,11 @@ shinyUI(pageWithSidebar(
     plotOutput(&quot;mpgPlot&quot;)
   )
 ))
-
-
 </code></pre>
 
-![MPG Screenshot](screenshots/mpg-with-outputs.png)
\ No newline at end of file
+Running the application now shows it in its final form including inputs and dynamically updating outputs:
+
+![MPG Screenshot](screenshots/mpg-with-outputs.png)
+
+Now that we've got a simple application running we'll probably want to make some changes. The next topic covers the basic cycle of editing, running, and debugging Shiny applications.
+
diff --git a/_includes/tutorial/ui-and-server.md b/_includes/tutorial/ui-and-server.md
index 16d5fd140..62500bda1 100644
--- a/_includes/tutorial/ui-and-server.md
+++ b/_includes/tutorial/ui-and-server.md
@@ -29,7 +29,7 @@ shinyUI(pageWithSidebar(
 ))
 </code></pre>
 
-The three functions `headerPanel`, `sidebarPanel`, and `mainPanel` define the various regions of the user-interface, which are empty for now save for the title we passed to the header panel.
+The three functions `headerPanel`, `sidebarPanel`, and `mainPanel` define the various regions of the user-interface. The application will be called "Miles Per Gallon" so we specify that as the title when we create the header panel. The other panels are empty for now.
 
 Now let's define a skeletal server implementation. To do this we call `shinyServer` and pass it a function that accepts two parameters: `input` and `output`: