Aan de slagBegin gratis

Voeg een lay-out toe

Zoals je in eerdere hoofdstukken hebt gezien, is het belangrijk om een lay-out te gebruiken in een Shiny-app om de interface te organiseren en het gebruik te vereenvoudigen.

De app heeft nu nog maar weinig onderdelen (één titel, twee invoervelden, één wordcloud-uitvoer), dus het is nog te overzien zonder lay-out. Maar de app groeit in de volgende oefeningen en een sidebar-lay-out is dan handig. Het is verstandig om vroeg een lay-out toe te voegen, want nieuwe Shiny-UI-elementen in een bestaande structuur plaatsen is makkelijker dan later een grotere, ongestructureerde app herschikken.

Zoals vaak gebeurt bij Shiny-apps en andere interactieve toepassingen, zetten we de invoer in de kleinere zijbalk, terwijl de hoofd-uitvoer (de wordcloud) in het grotere hoofdpanel komt.

Deze oefening maakt deel uit van de cursus

Casestudies: webapplicaties bouwen met Shiny in R

Bekijk cursus

Oefeninstructies

Je volgende taak is om een sidebar-lay-out toe te voegen aan de huidige Shiny-app. Voeg geen nieuwe UI-elementen toe, behalve de structuur voor de lay-out. Concreet:

  • Voeg een sidebar-lay-out toe aan de UI.
  • Definieer binnen de sidebar-lay-out een sidebarpanel voor de twee invoervelden.
  • Definieer binnen dezelfde lay-out ook een mainpanel met de wordcloud-uitvoer (regel 12).

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

ui <- fluidPage(
  h1("Word Cloud"),
  # Add a sidebar layout to the UI
  ___(
    # Define a sidebar panel around the inputs
    ___(
      numericInput("num", "Maximum number of words",
                   value = 100, min = 5),
      colourInput("col", "Background color", value = "white")
    ),
    # Define a main panel around the output
    ___(
      wordcloud2Output("cloud")
    )
  )
)

server <- function(input, output) {
  output$cloud <- renderWordcloud2({
    create_wordcloud(artofwar,
                     num_words = input$num, background = input$col)
  })
}

shinyApp(ui = ui, server = server)
Code bewerken en uitvoeren