LoslegenKostenlos loslegen

Ein Layout hinzufügen

Wie du in den vorherigen Kapiteln gesehen hast, ist ein Layout in einer Shiny-App wichtig, um die Oberfläche zu strukturieren und die Bedienung zu erleichtern.

Die App hat derzeit nur wenige Elemente (einen Titel, zwei Eingaben, eine Wortwolken-Ausgabe) und ist daher auch ohne Layout noch überschaubar. In den nächsten Aufgaben wird die App jedoch wachsen, und ein Seitenleisten-Layout ist dann von Vorteil. Es ist eine gute Idee, ein Layout lieber früher als später hinzuzufügen, denn neue Shiny-UI-Elemente in ein bestehendes Layout einzufügen ist einfacher, als später eine größere, unstrukturierte App neu anzuordnen.

Wie bei Shiny-Apps und anderen interaktiven Anwendungen üblich, bleiben die Eingaben in der kleineren Sidebar, während die Hauptausgabe (die Wortwolke) im größeren Haupt-Panel liegt.

Diese Übung ist Teil des Kurses

Fallstudien: Webanwendungen mit Shiny in R erstellen

Kurs anzeigen

Anleitung zur Übung

Deine nächste Aufgabe ist es, dem aktuellen Shiny-App-UI ein Seitenleisten-Layout hinzuzufügen. Es sollen keine neuen UI-Elemente hinzugefügt werden – nur die Struktur für das Layout. Konkret:

  • Füge der UI ein Seitenleisten-Layout hinzu.
  • Definiere innerhalb des Seitenleisten-Layouts ein Sidebar-Panel, das die beiden Eingaben enthält.
  • Definiere ebenfalls innerhalb des Seitenleisten-Layouts ein Haupt-Panel, das die Wortwolken-Ausgabe enthält (Zeile 12).

Interaktive Übung

Vervollständige den Beispielcode, um diese Übung erfolgreich abzuschließen.

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 bearbeiten und ausführen