11.6 UI: Layout advanced

11.6.1 tabsetPanel and tabPanel

• tabsetPanel() + tabPanel()
  • Allows for using sidebar layout but dividing main panel into tabs
  • Users can switch between tabs
  • Tabs can be used to display various outputs simultanously (rather than putting them all on one page)

# ui.R
ui <- fluidPage(

  # Application title
  titlePanel("User interface with several tabs in the main panel"),

  sidebarLayout(
    sidebarPanel(

      selectInput("var1", label = "Y-Variable:",
                  choices = c("trust.2003.2004","trust.2004.2005"),
                  selected = "trust.2003.2004"),
      #
      selectInput("var2", label = "X-Variable:",
                  choices = c("threat.2004", "threat.2005"),
                  selected = "threat.2004"),
      #
      sliderInput("trustrange", 
                  label = "Range of initial trust level:", 
                  min = 0, max = 10, value = c(0, 10))
    ),

    mainPanel(
      tabsetPanel(type = "tabs",
                  tabPanel("3d Frequency Plot", "plot here"),
                  tabPanel("Histogram", "another plot here"),
                  tabPanel("Model Summary", h4("estimation results here")),
                  tabPanel("Data Summary", h4("Variable summaries (1)")),
                  tabPanel("Explanation", p("This ShinyApp represents a quick example to illustrate the usefulness of Shiny for robustness analysis. The outcome variable is the change in trust between two panel waves (e.g. 2003 and 2004). The treatment variable is a victimization experience (threat or insult) that happened during that time period. The model is a simple bivariate OLS model (Y = trust change; X = victimization experience). There are no control variables."))

))))

server <- function(input, output) {}

shinyApp(ui=ui, server = server)

• navbarPage(): Create a multi-page user-interface that includes a navigation bar
• fluidRow() and column(): Build layout up from grid system

11.6.2 HTML tag functions

• Shiny’s HTML tag functions translate input into html code
  • Paste h2("A NEW HOPE", align = "center") into your console
• Here we just do a quick example but in this tutorial you find more information

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel("blablblab"),
    mainPanel(
      h2("A NEW HOPE", align = "center"),
              h5("It is a period of civil war.", align = "center"),
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
      strong("strong() makes bold text."),
      em("em() creates italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text similar to computer code"),
      div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
      br(),
      p("span does the same thing as div, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
)

server <- function(input, output) {}

shinyApp(ui=ui, server = server)

11.6.3 Images

• img() function places an image
• Store image locally
  • Store in extra folder www
  • www folder stores all sorts of additional files(images, data etc.)
  • If working directory = app directory create with: dir.create("www")

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src="http://i0.wp.com/royal-fans.com/wp-content/uploads/2014/05/Angela-Merkel-grimaces-as-she-addresses-a-press-conference-following-a-poor-showing-by-her-Christian-Democratic-Party.jpg", height = 200, width = 300),
      img(src="http://assets.schwarzenegger.com/images/img-2.jpg", height = 250, width = 300)
    )
  )
)

server <- function(input, output) {}

shinyApp(ui=ui, server = server)

11.6.3.1 Exercise: UI + Images

1. Create a new app (using the example codes)
2. The title (title panel) is “Two big names in the social sciences”
3. Download the images of Popper and Weber from the web.
4. Store the images in the www folder.
5. Build a UI that contains those images (stored in the www folder). One in the sidebar and one in the main panel.
6. Add the captions “Popper” and “Weber”. One bold and blue, the other one italic.