library(shiny)

ui <- 
  fluidPage(
    navbarPage(title = "Layout Examples",
      
        ################################################
        # fluidRow()       
        tabPanel(
        "fluidRow()",
        p("Pass any number of column() to fluidRow(), where the width arguments (whole numbers only) add up to no more than 12. Empty space is automatically inserted after the last column so that the total equals twelve. Empty space can be inserted between columns with the offset argument in the latter column. If the page is too narrow, this layout turns into verticalLayout()."),
        fluidRow(column(p("Col1"), width = 1), column(p("Col2"), width = 1),
                 column(p("Col3"), width = 1), column(p("Col4"), width = 1),
                 column(p("Col5"), width = 1), column(p("Col6"), width = 1),
                 column(p("Col7"), width = 1), column(p("Col8"), width = 1),
                 column(p("Col9"), width = 1), column(p("Col10"), width = 1),
                 column(p("Col11"), width = 1), column(p("Col12"), width = 1)),
        fluidRow(column(p("width = 6"), width = 6),
                 column(p("width = 6"), width = 6)),
        fluidRow(column(p("width = 2"), width = 2),
                 column(p("width = 3"), width = 3),
                 column(p("width = 3"), width = 3)),
        fluidRow(column(p("width = 5"), width = 5),
                 column(p("width = 5, offset = 2"), width = 5, offset = 2)),
        fluidRow(column(p("width = 5, offset = 2"), width = 5, offset = 2),
                 column(p("width = 5"), width = 5))
      ),
      
      ################################################
      # flowLayout()
      tabPanel(
        "flowLayout()",
        p("Give any number of objects to flowLayout(), and they will be wrapped across and down the page. Try adjusting the window width to see how the objects wrap."),
        flowLayout(p("Object1"), p("Object2"), p("Object3"), 
                   p("Object4"), p("Object5"), p("Object6"),
                   p("Object7"), p("Object8"), p("Object9"),
                   p("Object10"), p("Object11"), p("Object12"))
      ),
      
      ################################################
      # sidebarLayout()
      tabPanel(
        "sidebarLayout()",
        p("sidebarLayout() contains two panels: sidebarPanel() and mainPanel(). Their default widths are 4 (1/3 of the window width) and 8 (2/3 of the window width), respectively. If the window is too narrow, the sidebarPanel() will be above the mainPanel() instead of next to it."),
        sidebarLayout(
          sidebarPanel(p("sidebarPanel()")),
          mainPanel(p("mainPanel()"))
        )
      ),
      
      ################################################
      # splitLayout()
      tabPanel(
        "splitLayout()",
        p("Multiple objects can be given to splitLayout(), which divides the window into columns of equal width."),
        splitLayout(p("Object1"), p("Object2"), p("Object3"), p("Object4"))
      ),
      
      ################################################
      # verticalLayout()
      tabPanel(
        "verticalLayout()",
        p("Multiple objects can be given to verticalLayout(), which will left-align them in a single column."),
        verticalLayout(p("Object1"), p("Object2"), p("Object3"), p("Object4"))
      ),
      
      ################################################
      # Panels
      tabPanel(
        "Panels",
        wellPanel(p("wellPanel() creates a gray box to contain one or more objects."),
                  p("conditionalPanel() can be used to show panels if a condition is true. Expressions need to be written in JavaScript, but a simple TRUE/FALSE expression can be written as input.inputId (note the period is used in place of a dollar sign)."),
                  checkboxInput("showPanel", "Show the conditionalPanel()?")),
        conditionalPanel("input.showPanel", 
                         wellPanel(p("You found me!"),
                                   p(paste0("Today is ", weekdays(Sys.Date()), "."))))
      ),
      
      ################################################
      # Combining
      tabPanel(
        "Combining",
        p("Several layout functions can be used together to create complex pages."),
        sidebarLayout(
          sidebarPanel(
            splitLayout(
              p("Object1"), p("Object2")
            )
          ),
          mainPanel(
            verticalLayout(
              fluidRow(column("Object3", width = 4), 
                       column("Object4", width = 4), 
                       column("Object5", width = 4)),
              fluidRow(column("Object6", width = 6), 
                       column("Object7", width = 6))
            )
          )
        )
      ),
      
      ################################################
      # Objects
      tabPanel(
        "Objects",
        p("For illustration purposes, the examples in these tabs have all used p() with character strings, but we more likely want to use inputs and outputs, and of course we can do that."),
        sidebarLayout(
          sidebarPanel(
            sliderInput("rows", "Number of rows:", 1, 32, 32),
            sliderInput("cols", "Number of columns:", 1, 11, 11),
            conditionalPanel("input.rows == 32 && input.cols == 11", p("That's the whole table."))
          ),
          mainPanel(
            tableOutput("table")
          )
        )
      )
    )
  )

server <- 
  function(input, output) {
    output$table <- renderTable(mtcars[1:(input$rows), 1:(input$cols)])
  }

shinyApp(ui = ui, server = server, options = list(display.mode = "showcase"))