Kom igångKom igång gratis

Lägg till en layout

Som du sett i tidigare kapitel är det viktigt att använda en layout i en Shiny-app för att organisera gränssnittet och göra det enklare att använda.

Appen har för närvarande väldigt få objekt – en rubrik, två inmatningselement och ett ordmolnsutdata – så det fungerar fortfarande utan en layout. Men appen kommer att växa i kommande övningar, och en sidofältslayout är då till stor hjälp. Det är en bra idé att lägga till en layout tidigt, eftersom det är enklare att placera nya UI-element i en befintlig layout än att organisera om en större app utan struktur i efterhand.

Som är vanligt i Shiny-appar och andra interaktiva applikationer placeras inmatningselementen i det smalare sidofältet, medan huvudutdatan – ordmolnet – visas i den större huvudpanelen.

Den här övningen är en del av kursen

Fallstudier: Bygg webbapplikationer med Shiny i R

Visa kurs

Övningsinstruktioner

Din nästa uppgift är att lägga till en sidofältslayout i den befintliga Shiny-appen. Inga nya UI-element ska läggas till – bara strukturen för layouten. Gör följande:

  • Lägg till en sidofältslayout i UI:t.
  • Definiera en sidofältspanel inuti sidofältslayouten för att rymma de två inmatningselementen.
  • Definiera också en huvudpanel inuti sidofältslayouten som innehåller ordmolnsutdatan (rad 12).

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

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)
Redigera och kör kod