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 barfluidRow()
andcolumn()
: 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
- Paste
- 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")
- Store in extra folder
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
- Create a new app (using the example codes)
- The title (title panel) is “Two big names in the social sciences”
- Download the images of Popper and Weber from the web.
- Store the images in the
www
folder. - Build a UI that contains those images (stored in the
www
folder). One in the sidebar and one in the main panel. - Add the captions “Popper” and “Weber”. One bold and blue, the other one italic.