diff --git a/docs/index.html b/docs/index.html index c754863..657d493 100644 --- a/docs/index.html +++ b/docs/index.html @@ -123,6 +123,7 @@

On this page

  • https://bit.ly/shinyowl
  • Learning Objectives
  • Posit.cloud project
    • @@ -166,6 +167,11 @@

    Learning Objectives

    In other words, we’re learning how to Draw the Owl:

    +
    +

    Expectations

    +

    I’ve tried to make this easier to understand. However, there are some Shiny concepts that are just inherently difficult to understand. So be easy on yourself (and me).

    +

    Be gentle with yourself and others if there is confusion. We’ll work through it.

    +

    Agenda (roughly)

    diff --git a/docs/layouts/slides.html b/docs/layouts/slides.html index 069acc2..c906108 100644 --- a/docs/layouts/slides.html +++ b/docs/layouts/slides.html @@ -660,8 +660,8 @@

    Laying out value boxes

    -
    - +
    +
    @@ -681,7 +681,7 @@

    Exercise

    countdown::countdown(minutes = 5)
    -
    +
    05:00
    @@ -793,7 +793,7 @@

    Exercise

    countdown::countdown(minutes = 5)
    -
    +
    05:00
    diff --git a/docs/modules/index.html b/docs/modules/index.html index 25b7398..f7a39ed 100644 --- a/docs/modules/index.html +++ b/docs/modules/index.html @@ -20,6 +20,40 @@ margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */ vertical-align: middle; } +/* CSS for syntax highlighting */ +pre > code.sourceCode { white-space: pre; position: relative; } +pre > code.sourceCode > span { line-height: 1.25; } +pre > code.sourceCode > span:empty { height: 1.2em; } +.sourceCode { overflow: visible; } +code.sourceCode > span { color: inherit; text-decoration: inherit; } +div.sourceCode { margin: 1em 0; } +pre.sourceCode { margin: 0; } +@media screen { +div.sourceCode { overflow: auto; } +} +@media print { +pre > code.sourceCode { white-space: pre-wrap; } +pre > code.sourceCode > span { display: inline-block; text-indent: -5em; padding-left: 5em; } +} +pre.numberSource code + { counter-reset: source-line 0; } +pre.numberSource code > span + { position: relative; left: -4em; counter-increment: source-line; } +pre.numberSource code > span > a:first-child::before + { content: counter(source-line); + position: relative; left: -1em; text-align: right; vertical-align: baseline; + border: none; display: inline-block; + -webkit-touch-callout: none; -webkit-user-select: none; + -khtml-user-select: none; -moz-user-select: none; + -ms-user-select: none; user-select: none; + padding: 0 4px; width: 4em; + } +pre.numberSource { margin-left: 3em; padding-left: 4px; } +div.sourceCode + { } +@media screen { +pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; } +} @@ -130,6 +164,11 @@

    On this page

    @@ -171,8 +210,23 @@

    Slides

    + +
    +

    Exercises

    +
    +

    Exercise 1: Try it out

    +
    runApp("modules/module_demo_01/")
    +
    +
    +

    Exercise 2: Use a Shiny Module

    +
      +
    • In RStudio, open up "modules/module_demo_02/app.R"
      • +
    • Wire in a new dataset to one of the plots
      • +
    • If you’re feeling adventurous, add a new plot
      • +
    +
    diff --git a/docs/modules/slides.html b/docs/modules/slides.html index 7fd9bd6..8714b3f 100644 --- a/docs/modules/slides.html +++ b/docs/modules/slides.html @@ -385,6 +385,8 @@ margin-right: 0; } + +
    @@ -519,9 +521,18 @@

    Using Shiny modules

    -
    -

    Try it out!

    +
    +

    Exercise: Try it out

    runApp("modules/module_demo_01/")
    +
    +
    countdown::countdown(minutes = 3)
    +
    +
    +
    +03:00 +
    +
    +

    Reusing code

    @@ -529,12 +540,12 @@

    Reusing code

    ui

    -
    ui <- fluidPage(   
-    select_hist_ui(id = "mtcars_module", 
-                   var_choices = mtcars_var_choices),
-    select_hist_ui(id = "penguin_module",
-                   var_choices = penguin_choices)
-    )
    +
    ui <- fluidPage(   
+    select_hist_ui(id = "mtcars_module", 
+                   var_choices = mtcars_var_choices),
+    select_hist_ui(id = "penguin_module",
+                   var_choices = penguin_choices)
+    )
    • note we have two select_hist_ui() functions
      • @@ -551,22 +562,22 @@

      Reusing code

      ui

      -
      ui <- fluidPage(   
-    select_hist_ui(id = "mtcars_module", 
-                   var_choices = mtcars_var_choices),
-    select_hist_ui(id = "penguin_module",
-                   var_choices = penguin_choices)
-    )
      +
      ui <- fluidPage(   
+    select_hist_ui(id = "mtcars_module", 
+                   var_choices = mtcars_var_choices),
+    select_hist_ui(id = "penguin_module",
+                   var_choices = penguin_choices)
+    )

      server

      -
      server <- function(input, output) {
-    select_hist_server(id="mtcars_module", 
-                       data=mtcars)
-    select_hist_server(id="penguin_module", 
-                       data=penguins)
-}
      +
      server <- function(input, output) {
+    select_hist_server(id="mtcars_module", 
+                       data=mtcars)
+    select_hist_server(id="penguin_module", 
+                       data=penguins)
+}
      • Note that we have two instances of select_hist_server()
        • @@ -611,16 +622,16 @@

        Make it easy on yourself

        ui module

        -
        select_hist_ui <- function(id, var_choices){
-  ns <- NS(id)
-  tagList(
-    selectInput(inputId = ns("x_var"), 
-                label="Select X Variable", 
-                choices=var_choices, 
-                selected = var_choices[1]),
-    plotOutput(ns("hist_plot"))
-  )
-}
        +
        select_hist_ui <- function(id, var_choices){
+  ns <- NS(id)
+  tagList(
+    selectInput(inputId = ns("x_var"), 
+                label="Select X Variable", 
+                choices=var_choices, 
+                selected = var_choices[1]),
+    plotOutput(ns("hist_plot"))
+  )
+}
        • Initialize the namespace for id using NS() function
          • @@ -633,12 +644,12 @@

          ui module

          Server Module

          -
          select_hist_server <- function(id, data) {
-  moduleServer(id, function(input, output, session) {
-
-  })
-  
-}
          +
          select_hist_server <- function(id, data) {
+  moduleServer(id, function(input, output, session) {
+
+  })
+  
+}
          • define a function that takes an id as input
            • @@ -648,19 +659,19 @@

            Server Module

            Server Module

            -
            select_hist_server <- function(id, data) {
-  moduleServer(id, function(input, output, session) {
-
-    output$hist_plot <- 
-      renderPlot({
-        x_var <- input$x_var
-        data %>% ggplot(aes(x=.data[[x_var]])) +
-          geom_histogram()
-    })
-    
-  })
-  
-}
            +
            select_hist_server <- function(id, data) {
+  moduleServer(id, function(input, output, session) {
+
+    output$hist_plot <- 
+      renderPlot({
+        x_var <- input$x_var
+        data %>% ggplot(aes(x=.data[[x_var]])) +
+          geom_histogram()
+    })
+    
+  })
+  
+}
            • Put your server code in moduleServer()
              • @@ -670,18 +681,18 @@

              Server Module

              Write a demo app function

              -
              ## modules.R
-select_hist_demo <- function(data=mtcars){
-  var_choices <- names(data)
-  ui <- fluidPage(
-    select_hist_ui(id = "module", 
-                   var_choices = var_choices)  
-  )
-  server <- function(input,output,session){
-    select_hist_server(id="module", data=data)
-  }
-  shinyApp(ui, server)
-}
              +
              ## modules.R
+select_hist_demo <- function(data=mtcars){
+  var_choices <- names(data)
+  ui <- fluidPage(
+    select_hist_ui(id = "module", 
+                   var_choices = var_choices)  
+  )
+  server <- function(input,output,session){
+    select_hist_server(id="module", data=data)
+  }
+  shinyApp(ui, server)
+}
              • write an <module_name>_demo() function
                • @@ -693,7 +704,17 @@

                Exercise: Use a Shiny Module

                • In RStudio, open up "modules/module_demo_02/app.R"
                • Wire in a new dataset to one of the plots
                  • +
                • If you’re feeling adventurous, add a new plot
                +
                +
                countdown::countdown(minutes = 5)
                +
                +
                +
                +05:00 +
                +
                +
              @@ -732,41 +753,41 @@

              Communicating between modules

            • Ames Housing App
            -
              # execute plot variable selection modules
-  plot1vars <- varselect_mod_server("plot1_vars") #returns a reactive
-  plot2vars <- varselect_mod_server("plot2_vars") #returns a reactive
-  
-  # execute scatterplot module
-  res <- scatterplot_mod_server(
-                    "plots",
-                    dataset = ames,
-                    plot1vars = plot1vars,
-                    plot2vars = plot2vars)
            +
              # execute plot variable selection modules
+  plot1vars <- varselect_mod_server("plot1_vars") #returns a reactive
+  plot2vars <- varselect_mod_server("plot2_vars") #returns a reactive
+  
+  # execute scatterplot module
+  res <- scatterplot_mod_server(
+                    "plots",
+                    dataset = ames,
+                    plot1vars = plot1vars,
+                    plot2vars = plot2vars)

            scatterplot_mod_server

            -
            scatterplot_mod_server <- function(input, 
-                                   output, 
-                                   session, 
-                                   dataset, 
-                                   plot1vars, 
-                                   plot2vars) {
-  
-  plot1_obj <- reactive({
-    p <- scatter_sales(dataset, xvar = plot1vars$xvar(), yvar = plot1vars$yvar())
-    return(p)
-  })
-  
-  plot2_obj <- reactive({
-    p <- scatter_sales(dataset, xvar = plot2vars$xvar(), yvar = plot2vars$yvar())
-    return(p)
-  })
-  
-  output$plot1 <- renderPlot({
-    plot1_obj()
-  })
            +
            scatterplot_mod_server <- function(input, 
+                                   output, 
+                                   session, 
+                                   dataset, 
+                                   plot1vars, 
+                                   plot2vars) {
+  
+  plot1_obj <- reactive({
+    p <- scatter_sales(dataset, xvar = plot1vars$xvar(), yvar = plot1vars$yvar())
+    return(p)
+  })
+  
+  plot2_obj <- reactive({
+    p <- scatter_sales(dataset, xvar = plot2vars$xvar(), yvar = plot2vars$yvar())
+    return(p)
+  })
+  
+  output$plot1 <- renderPlot({
+    plot1_obj()
+  })
            diff --git a/docs/search.json b/docs/search.json index 055be60..7f4c0a1 100644 --- a/docs/search.json +++ b/docs/search.json @@ -20,6 +20,13 @@ "section": "Slides", "text": "Slides\n View slides in full screen" }, + { + "objectID": "modules/index.html#exercises", + "href": "modules/index.html#exercises", + "title": "Part 3: Modules", + "section": "Exercises", + "text": "Exercises\n\nExercise 1: Try it out\nrunApp(\"modules/module_demo_01/\")\n\n\nExercise 2: Use a Shiny Module\n\nIn RStudio, open up \"modules/module_demo_02/app.R\"\nWire in a new dataset to one of the plots\nIf you’re feeling adventurous, add a new plot" + }, { "objectID": "layouts/index.html", "href": "layouts/index.html", @@ -55,6 +62,13 @@ "section": "", "text": "Slides\n Download PDF File\n \n Unable to display PDF file. Download instead.\n \n \n\nExercise 1\nCompare the two apps with a partner. Look at the reactive graph. Are they any different?\nrunApp(\"reactives/app_reactive.R\")\nrunApp(\"reactives/app_isolate.R\")\n\n\nExercise 2\nCompare the two apps with a partner. Look at the reactive graph. Are they any different?\nrunApp(\"reactives/app_eventReactive.R\")\nrunApp(\"reactives/app_observeEvent.R\")\n\n\nExercise 3\nTry and understand this app using {reactlog}.\nrunApp(\"reactives/app_ExtendedTaskSingle.R\")" }, + { + "objectID": "index.html#expectations", + "href": "index.html#expectations", + "title": "Intermediate shiny: drawing the owl", + "section": "Expectations", + "text": "Expectations\nI’ve tried to make this easier to understand. However, there are some Shiny concepts that are just inherently difficult to understand. So be easy on yourself (and me).\nBe gentle with yourself and others if there is confusion. We’ll work through it." + }, { "objectID": "index.html#agenda-roughly", "href": "index.html#agenda-roughly", @@ -294,11 +308,11 @@ "text": "Using Shiny modules\n\n\nui\n\nui <- fluidPage( \n select_hist_ui(\n id = \"mtcars_module\", \n var_choices = mtcars_var_choices)\n )\n\n\nserver\n\nserver <- function(input, output) {\n select_hist_server(\n id=\"mtcars_module\", \n data=mtcars)\n}\n\n\nNote that we have a function select_hist_server()\nAlso uses the id \"mtcars_module\"" }, { - "objectID": "modules/slides.html#try-it-out", - "href": "modules/slides.html#try-it-out", + "objectID": "modules/slides.html#exercise-try-it-out", + "href": "modules/slides.html#exercise-try-it-out", "title": "Part 3: Shiny Modules", - "section": "Try it out!", - "text": "Try it out!\nrunApp(\"modules/module_demo_01/\")" + "section": "Exercise: Try it out", + "text": "Exercise: Try it out\nrunApp(\"modules/module_demo_01/\")\n\ncountdown::countdown(minutes = 3)\n\n\n−+\n03:00" }, { "objectID": "modules/slides.html#reusing-code", @@ -368,7 +382,7 @@ "href": "modules/slides.html#exercise-use-a-shiny-module", "title": "Part 3: Shiny Modules", "section": "Exercise: Use a Shiny Module", - "text": "Exercise: Use a Shiny Module\n\nIn RStudio, open up \"modules/module_demo_02/app.R\"\nWire in a new dataset to one of the plots" + "text": "Exercise: Use a Shiny Module\n\nIn RStudio, open up \"modules/module_demo_02/app.R\"\nWire in a new dataset to one of the plots\nIf you’re feeling adventurous, add a new plot\n\n\ncountdown::countdown(minutes = 5)\n\n\n−+\n05:00" }, { "objectID": "modules/slides.html#module-design-1",