Shiny Applications Layouts Exercises (Part-9)

Shiny Application Layouts – Update Input

In the ninth part of our series we will see the updated input scenario. This is different from the Dynamic UI example we met in part 8, where the UI component is generated on the server and sent to the UI, where it replaces an existing UI component.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

UI Context

As always let us create the skeleton of the app.
#ui.r
fluidPage(
titlePanel("Title"),
fluidRow(
column(3,
wellPanel()),
column(3,
wellPanel()),
column(3,
wellPanel())
)
)

#server.R
function(input, output, clientData, session) {}

Exercise 1

Build the initial UI of your app. Give it a title, use 4 columns and one row for each one of the three well Panel that we are going to use.

Applying reactivity

To create a reactive context for our app we will use the observe({}) function in our server side.

Exercise 2

Create reactive context. HINT: Use observe({}).

“Master” Inputs.

Now we are going to create the two inputs that control the rest of the inputs of the app. Look at the example:
#ui.r
textInput("text_input",
"labels:",
"Some Text"),
sliderInput("slider_input",
"values:",
min = 1, max = 100, value = 50)

#server.r
t_input <- input$text_input
s_input <- input$slider_input

Exercise 3

Create a text Input in the ui side that controls labels and then pass it to a new variable on the server side.

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 4

Create a slider Input in the ui side that controls values and then pass it to a new variable on the server side.

Dependent Inputs

Firstly let’s create a text input that changes both the label and the text.
#ui.r
textInput("Text", "Text input:", value = "text")
#server.r
updateTextInput(session, "Text",
label = paste("Sth", t_input),
value = paste("Sth", s_input)
)

Exercise 5

Create a text input, in the second well Panel,that changes its label and its value according to the two “Master” Inputs you created before. HINT: Use updateTextInput().

Exercise 6

Create a slider input,in the second well Panel,that changes its label and its value according to the two “Master” Inputs you created before. HINT: Use updateSliderInput().

Exercise 7

Create a numeric input,in the second well Panel,that changes its label and its value according to the two “Master” Inputs you created before. HINT: Use updateNumericInput().

Exercise 8

Create a date input,in the second well Panel,that changes its label and its value according to the two “Master” Inputs you created before. HINT: Use updateDateInput().

In order to create a Checkbox group with the same conditions as the rest of the inputs we just created we should first create a list of options like in the example below:
#server.r
options <- list()
options[[paste("option", s_input, "A")]] <-
paste0("option-", s_input, "-A")
options[[paste("option", s_input, "B")]] <-
paste0("option-", s_input, "-B")

Exercise 9

Create a list with three choices for your Checkbox Group. HINT: Use list().

Exercise 10

Create a checkboxgroup input, in the third well Panel,that changes its label and its value according to the two “Master” Inputs you created before. HINT: Use updateCheckboxGroupInput().




Shiny Application Layouts solutions part 9

Below are the solutions to these exercises on Shiny Application Layouts.

####################
#                  #
#    Exercise 1    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel()),
    column(4,
           wellPanel()),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {}

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
           )),
    column(4,
           wellPanel()),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({})
}

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text")
           )),
    column(4,
           wellPanel()),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
  })
}

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel()),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v
  })
}

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text")
           )),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
  })
}

####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text"),
             sliderInput("labSlider", "Slider input:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
    updateSliderInput(session, "labSlider",
                      label = paste("Slider", label_c),
                      value = value_c)
  })
}

####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text"),
             sliderInput("labSlider", "Slider input:",
                         min = 1, max = 31, value = 1),
             numericInput("labNumber", "Number input :",
                          min = 1, max = 31, value = 16, step = 1)
           )),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
    updateSliderInput(session, "labSlider",
                      label = paste("Slider", label_c),
                      value = value_c)
    updateNumericInput(session, "labNumber",
                       label = paste("Number ", label_c),
                       value = value_c, min = 1, max = 31, step = 1)

  })
}

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text"),
             sliderInput("labSlider", "Slider input:",
                         min = 1, max = 31, value = 16),
             numericInput("labNumber", "Number input :",
                          min = 1, max = 31, value = 16, step = 1),
             dateInput("labDate", "Date:")
           )),
    column(4,
           wellPanel())
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
    updateSliderInput(session, "labSlider",
                      label = paste("Slider", label_c),
                      value = value_c)
    updateNumericInput(session, "labNumber",
                       label = paste("Number ", label_c),
                       value = value_c, min = 1, max = 31, step = 6)
    updateDateInput(session, "labDate",
                    label = paste("Date", label_c),
                    value = paste("2017-05-", value_c, sep=""))
  })
}

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text"),
             sliderInput("labSlider", "Slider input:",
                         min = 1, max = 31, value = 16),
             numericInput("labNumber", "Number input :",
                          min = 1, max = 31, value = 16, step = 1),
             dateInput("labDate", "Date:")
           )),
    column(4,
           wellPanel(

           ))
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
    updateSliderInput(session, "labSlider",
                      label = paste("Slider", label_c),
                      value = value_c)
    updateNumericInput(session, "labNumber",
                       label = paste("Number ", label_c),
                       value = value_c, min = 1, max = 31, step = 6)
    updateDateInput(session, "labDate",
                    label = paste("Date", label_c),
                    value = paste("2017-05-", value_c, sep=""))
    options <- list()
    options[[paste("option", value_c, "A")]] <-
      paste0("option-", value_c, "-A")
    options[[paste("option", value_c, "B")]] <-
      paste0("option-", value_c, "-B")
    options[[paste("option", value_c, "C")]] <-
      paste0("option-", value_c, "-C")


  })
}

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Updated Inputs"),
  fluidRow(
    column(4,
           wellPanel(
             textInput("c_l",
                       "Label Controler",
                       "Text"),
             sliderInput("c_v",
                         "Value Controler:",
                         min = 1, max = 31, value = 16)
           )),
    column(4,
           wellPanel(
             textInput("labText",  "Text-Lab input:", value = "text"),
             sliderInput("labSlider", "Slider input:",
                         min = 1, max = 31, value = 16),
             numericInput("labNumber", "Number input :",
                          min = 1, max = 31, value = 16, step = 1),
             dateInput("labDate", "Date:")
           )),
    column(4,
           wellPanel(
             checkboxGroupInput("labCheckboxGroup",
                                "Checkbox group input:",
                                c("label 1" = "option1",
                                  "label 2" = "option2",
                                  "label 3" = "option3"))

           ))
  )
)
#server.R
function(input, output, clientData, session) {
  observe({
    label_c <- input$c_l
    value_c <- input$c_v

    updateTextInput(session, "labText",
                    label = paste("Updated", label_c),
                    value = paste("Updated", value_c)
    )
    updateSliderInput(session, "labSlider",
                      label = paste("Slider", label_c),
                      value = value_c)
    updateNumericInput(session, "labNumber",
                       label = paste("Number ", label_c),
                       value = value_c, min = 1, max = 31, step = 6)
    updateDateInput(session, "labDate",
                    label = paste("Date", label_c),
                    value = paste("2017-05-", value_c, sep=""))
    options <- list()
    options[[paste("option", value_c, "A")]] <-
      paste0("option-", value_c, "-A")
    options[[paste("option", value_c, "B")]] <-
      paste0("option-", value_c, "-B")
    options[[paste("option", value_c, "C")]] <-
      paste0("option-", value_c, "-C")

    updateCheckboxGroupInput(session, "labCheckboxGroup",
                             label = paste("checkboxgroup", label_c),
                             choices = options,
                             selected = paste0("option-", value_c, "-A")
    )

  })
}



Bonus: Shiny HTML Tags solutions

Below are the solutions to these exercises on Shiny Html Tags.

####################
#                  #
#    Exercise 1    #
#                  #
####################

install.packages("shiny")
library(shiny)
names(tags)

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel("Navbar 1",
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel("Table",
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel("Text",
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel("Header",
                                    h1("Header 1"),
                                    h2("Header 2"))
                         )
                       )),
              tabPanel("Navbar 2")))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel("Navbar 1",
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel("Table",
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel("Text",
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel("Header",
                                    h1("Header 1"),
                                    h2("Header 2"))
                         )
                       )),
              tabPanel("Navbar 2")))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel("Navbar 1",
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"))
                         )
                       )),
              tabPanel("Navbar 2")))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$hr(),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$hr(),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"),
                                    tags$script(HTML("if (window.innerHeight > 10) alert('Screen too big');")))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$hr(),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    tags$code("library(shinythemes)
library(shiny)"),
                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"),
                                    tags$script(HTML("if (window.innerHeight > 10) alert('Screen too big');")))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$hr(),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    tags$code("library(shinythemes)

library(shiny)"),
                                    tags$div(
                                      tags$p("First paragraph"),
                                      tags$p("Second paragraph"),
                                      tags$p("Third paragraph")
                                    ),

                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),
                                    h2("Header 2"),
                                    tags$script(HTML("if (window.innerHeight > 10) alert('Screen too big');")))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
library(shinythemes)
library(shiny)
tagList(
  themeSelector(),
  navbarPage( tags$h4("My header"),
              tabPanel(tags$em("Navbar 1"),
                       sidebarPanel(
                         sliderInput("slider","Slider input:", 1, 100, 50),
                         tags$hr(),
                         tags$h5("ActionButton:"),
                         actionButton("action", "Action"),
                         tags$a(href="http://www.r-exercises.com/", "r exercises.com")),
                       mainPanel(
                         tabsetPanel(
                           tabPanel(tags$b("Table"),
                                    h4("Iris"),
                                    tableOutput("table")),
                           tabPanel(tags$b("Text"),
                                    h4("VText"),
                                    tags$code("library(shinythemes)

library(shiny)"),
                                    tags$div(
                                      tags$p("First paragraph"),
                                      tags$p("Second paragraph"),
                                      tags$p("Third paragraph")
                                    ),

                                    verbatimTextOutput("vtxt")),
                           tabPanel(tags$b("Header"),
                                    h1("Header 1"),

                                    h2("Header 2"),
                                    tags$script(HTML("if (window.innerHeight > 10) alert('Screen too big');")),
                                    tags$ol(
                                      tags$li("First row"),
                                      tags$li("Second row"),
                                      tags$li("Third row")
                                    ))
                         )
                       )),
              tabPanel(tags$em("Navbar 2"))))
#server.R
function(input, output) {
  output$table <- renderTable({
    iris

  })
  output$vtxt <- renderText({
    paste(input$slider)
  })

}



Bonus: Shiny HTML Tags exercises

Shiny HTML Tags

Hello everybody, this is a bonus set that r exercises.com kindly provides to all of you.

As you probably remember from parts 9 & 10 of the series “Shiny Application Layouts” we used tags to layout our Shiny App.

Tags is a list of functions that shiny provides in order to help us encance and improve our applications.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Tags Glossary

The shiny::tags object contains R functions that recreate 110 HTML tags.

After you install and load the shiny package you can see all the tags that shiny provides with: names(tags).

Exercise 1

Install and load the shiny package. Then you can see all the tags that are available to you.

In order to understand the theory better, we are going to use the demo-app that we created in part 10 of “Shiny Application Layouts” series. You can find the whole code here in “Exercise 10”.

Header

To begin with you can create an h1 header in HTML with:
tags$h1("header")

Exercise 2

Give a header to your app using the proper tag. HINT: Use h4.

Link

To create a link to a web page you can use this:
tags$a(href="https://www.google.gr/webhp?hl=el&sa=X&ved=0ahUKEwiT4efd-eDTAhWBJMAKHc44BdwQPAgD", "Click here!")

Exercise 3

In your side bar place a link with label “r exercises.com” and leads to the home page of the website.

Bold Text

In order to create bold text you use:
tags$b("bold text.")

Exercise 4

Use bold text on the three headers of your tab panels.

Emphasized text

To create emphasized text use:
tags$em("emphasized.")

Exercise 5

Use emphasized text to your Navbars.

Horizontal line

To add a horizontal line use tags$hr().

Exercise 6

Add a horizontal line between your slider and your actionbutton.

Script

You can add a client-side script (javascript). Wrap the actual script in HTML to prevent it from being passed as text. Look at the example:
tags$script(HTML("if (window.innerHeight < 400) alert('Screen too small');"))

Exercise 7

Create a Javascript alert -“Screen too big”- if the window.innerHeight is bigger than 10.

Code

You can format your text as code like this:
tags$code("computer code.")

Exercise 8

In the “Text” tab panel display the two packages you used for your app in code format.

Division & Paragraph

Creates a section of an HTML document with a special feature.
tags$div(
tags$p("First paragraph"),
tags$p("Second paragraph"),
tags$p("Third paragraph")
)

Exercise 9

In the tab panel “Text” create three paragraphs using div.

Ordered List

You can create ordered list like this:
tags$ol(
tags$li("First"),
tags$li("Second")
)

Exercise 10

In the tab panel “Header” create an ordered list with 3 rows.




Shiny Application Layouts Exercises (Part-8)

Shiny Application Layouts – Dynamic UI

In the eightth part of our series we will see how we can build a user interface with dynamically generated components.

The UI components are generated on the server side with the use of renderUI() and are displayed with uiOutput() on the ui side. Every time a new command is sent by the user, it replaces the previous command.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Application Contextt

First of all let’s build the skeleton of our app like the example below.
#ui.R
fluidPage(
titlePanel("Title"),
fluidRow(

column(4,wellPanel()),
column(4,wellPanel()),
column(4,wellPanel())))

#server.R
function(input, output) {}

Exercise 1

Create the initial fluid Page with a title. HINT: Use fluidPage() and titlePanel().

Exercise 2

Create a row, separate it with columns of size = 3 and add a well Panel in each one of them. HINT: Use fluidRow(), column() and wellPanel().

Below is an example of a selectInput() from which the user is going to choose the dynamic component he wants.
#ui.r
selectInput("input_type", "Input type",
c("slider", "text", "numeric", "checkbox",
"checkboxGroup", "radioButtons", "selectInput",
"selectInput (multi)", "date", "daterange"
)
)

Exercise 3

Add a selectInput() in the first well Panel with: slider input, text input, numeric input, check box, radio buttons and date.

The uiOutput() generates the dynamic UI component.
#ui.R
uiOutput("ui")

Exercise 4

In the second well Panel add the function that is going to generate your ui output.

In the third well Panel we are going to create two “boxes”. The first one will display the type of the input that the user chooses every time while the second the value of this input.
Both of them will be displayed as text. So we have to use verbatimTextOutput() and use tags for the titles. Look at the ui side example below:
#ui.R
tags$p("Title 1:"),
verbatimTextOutput("input_title_1"),
tags$p("Title 2:"),
verbatimTextOutput("input_title_2")

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 5

In the third well panel should automatically be typed the type of the input of your choice as long as the value of this input. Create only the ui side. HINT: Use verbatimTextOutput().

Exercise 6

Name the two components that you just created. HINT: Use tags.

Reactivity

Now let’s go to the server side to make things reactive like this:
#server.R
output$ui <- renderUI({})

Exercise 7

Put your app in a reactive context. HINT: Use renderUI().

Now we have to connect the dynamic components we created in Exercise 3 with their server side. Below is an example:
#server.R
"slider" = sliderInput("dynamic", "Dynamic",
min = 1, max = 100, value = 50),
"text" = textInput("dynamic", "Dynamic",
value = "EXAMPLE"),
"numeric" = numericInput("dynamic", "Dynamic",
value = 10),
"checkbox" = checkboxInput("dynamic", "Dynamic",
value = TRUE),
"radioButtons" = radioButtons("dynamic", "Dynamic",
choices = c("Option 1" = "option1",
"Option 2" = "option2"),
selected = "option1"
),
"date" = dateInput("dynamic", "Dynamic"))

Exercise 8

Create the server side of the dynamic components you created in Exercise 3. Put values of your choise but make sure they are connected with the ui side.

Exercise 9

Display the name of the dynamic component of your choice. HINT: Use renderText().

Exercise 10

Display the value of the dynamic component that you chose. HINT: Use renderPrint().




Shiny Applications Layouts solutions part 8

Below are the solutions to these exercises on Shiny Application Layouts.

####################
#                  #
#    Exercise 1    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel()),
    column(3,wellPanel()),
    column(3,wellPanel())))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel()),
    column(3,wellPanel())))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel(
      uiOutput("ui")
    )),
    column(3,wellPanel())))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel(
      uiOutput("ui")
    )),
    column(3,wellPanel(
      verbatimTextOutput("input_tt"),
      verbatimTextOutput("input_value")
    ))))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel(
      uiOutput("ui")
    )),
    column(3,wellPanel(
      tags$p("Input:"),
      verbatimTextOutput("input_tt"),
      tags$p("Input value:"),
      verbatimTextOutput("input_value")
    ))))
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel(
      uiOutput("ui")
    )),
    column(3,wellPanel(
      tags$p("Input:"),
      verbatimTextOutput("input_tt"),
      tags$p("Input value:"),
      verbatimTextOutput("input_value")
    ))))
#server.R
function(input, output) {
  output$ui <- renderUI({

  })
}

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3,wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                     "radioButtons","date"
                  )
      )
    )),
    column(3,wellPanel(
      uiOutput("ui")
    )),
    column(3,wellPanel(
      tags$p("Input:"),
      verbatimTextOutput("input_tt"),
      tags$p("Input value:"),
      verbatimTextOutput("input_value")
    ))))
#server.R
function(input, output) {
  output$ui <- renderUI({
  switch(input$input_type,
         "slider" = sliderInput("dyn", "Dynamic",
                                min = 1, max = 200, value = 10),
         "text" = textInput("dyn", "Dynamic",
                            value = "text"),
         "numeric" =  numericInput("dyn", "Dynamic",
                                   value = 10),
         "checkbox" = checkboxInput("dyn", "Dynamic",
                                    value = TRUE),
         "radioButtons" = radioButtons("dyn", "Dynamic",
                                       choices = c("Option 1" = "option1",
                                                   "Option 2" = "option2"),
                                       selected = "option2"
         ),
         "date" = dateInput("dyn", "Dynamic"))
  })
}

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3, wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                   "radioButtons",
                    "date"
                  )
      )
    )),

    column(3, wellPanel(
      uiOutput("ui")
    )),

    column(3,wellPanel(
           tags$p("Input:"),
           verbatimTextOutput("input_tt"),
           tags$p("Input value:"),
           verbatimTextOutput("dynamic_value"))
    )
  )
)
#server.R
function(input, output) {

  output$ui <- renderUI({
    switch(input$input_type,
           "slider" = sliderInput("dyn", "Dynamic",
                                  min = 1, max = 200, value = 10),
           "text" = textInput("dyn", "Dynamic",
                              value = "text"),
           "numeric" =  numericInput("dyn", "Dynamic",
                                     value = 10),
           "checkbox" = checkboxInput("dyn", "Dynamic",
                                      value = TRUE),

           "radioButtons" = radioButtons("dyn", "Dynamic",
                                         choices = c("Option 1" = "option1",
                                                     "Option 2" = "option2"),
                                         selected = "option2"
           ),
           "date" = dateInput("dyn", "Dynamic")

    )
  })

  output$input_tt <- renderText({
    input$input_type
  })
}

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Dynamic UI"),
  fluidRow(

    column(3, wellPanel(
      selectInput("input_type", "Input",
                  c("slider", "text", "numeric", "checkbox",
                   "radioButtons",
                    "date"
                  )
      )
    )),

    column(3, wellPanel(
      uiOutput("ui")
    )),

    column(3,wellPanel(
           tags$p("Input:"),
           verbatimTextOutput("input_tt"),
           tags$p("Input value:"),
           verbatimTextOutput("dynamic_value"))
    )
  )
)
#server.R
function(input, output) {

  output$ui <- renderUI({
    switch(input$input_type,
           "slider" = sliderInput("dyn", "Dynamic",
                                  min = 1, max = 200, value = 10),
           "text" = textInput("dyn", "Dynamic",
                              value = "text"),
           "numeric" =  numericInput("dyn", "Dynamic",
                                     value = 10),
           "checkbox" = checkboxInput("dyn", "Dynamic",
                                      value = TRUE),

           "radioButtons" = radioButtons("dyn", "Dynamic",
                                         choices = c("Option 1" = "option1",
                                                     "Option 2" = "option2"),
                                         selected = "option2"
           ),
           "date" = dateInput("dyn", "Dynamic")

    )
  })

  output$input_tt <- renderText({
    input$input_type
  })
  output$dynamic_value <- renderPrint({
    str(input$dyn)
  })

}



Shiny Application Layouts Exercises (Part-7)

Shiny Application Layouts – Conditional Panel

In the seventh part of our series we will use the rnorm() function to create a UI with a Conditional Panel.

This type of Panel is visible only when the value of a JavaScript expression is true. The JS expression is re-evaluated every time shiny runs with a different input.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Exercise 1

Create the initial fluid page. HINT: Use fluidPage().

Exercise 2

Name your application with a title. ΗΙΝΤ: Use titlePanel().

Exercise 3

Create 3 columns as space for your slider. HINT: Use column().

Exercise 4

Inside the column() you just created place a well Panel. HINT: Use wellPanel().

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 5

In the well Panel you just created put a slider with features min = 10, max = 200, value = 40 and step = 10. HINT: Use sliderInput().

Now we are going to create the message that will explain why the plot will not be displayed when the JS expression is NOT TRUE.

Exercise 6

Use 5 columns as space for your message and the plot we are going to create later. The message will be “Less than 40-Error”.

Conditional Panel

The condition of the Conditional Panel is a JavaScript expression. Input values like input$n are accessed with dots, as in input.n
#ui.R
conditionalPanel("input.n >= 50")

Exercise 7

In the columns you just created place a conditional panel with condition the number of the input “c” to be more than 40 in order to display the plot.

Exercise 8

Create the ui side of your plot. HINT: Use plotOutput().

This is the server side of the scatter plot you want to create.
#server.R
output$sc <- renderPlot({
x <- rnorm(input$c)
y <- rnorm(input$c)
plot(x, y)
})

Exercise 9

Create the server side of your plot. HINT: Use renderPlot().

Exercise 10

Change your condition to <=40 and spot the differnece.




Shiny Application Layouts solutions part 7

Below are the solutions to these exercises on Shiny Application Layouts.

####################
#                  #
#    Exercise 1    #
#                  #
####################

#ui.R
fluidPage()
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm")
)
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3)
)
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel())
)
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Cars:",
                       min = 10, max = 200, value = 40, step = 10)
         ))
)
#server.R
function(input, output) {}


####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Cars:",
                       min = 10, max = 200, value = 40, step = 10)
         )),
  column(5,
         "Less than 40-Error"
         )
)
#server.R
function(input, output) {}


####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Points",
                       min = 10, max = 200, value = 40, step = 10)
         )),
  column(5,
         "Less than 40-Error",
         conditionalPanel("input.c >= 40")
         )
)
#server.R
function(input, output) {}

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Points",
                       min = 10, max = 200, value = 40, step = 10)
         )),
  column(5,
         "Less than 40-Error",
         conditionalPanel("input.c >= 40",
                          plotOutput("sc"))
         )
)
#server.R
function(input, output) {

}

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Points",
                       min = 10, max = 200, value = 40, step = 10)
         )),
  column(5,
         "Less than 40-Error",
         conditionalPanel("input.c >= 40",
                          plotOutput("sc"))
         )
)
#server.R
function(input, output) {
  output$sc <- renderPlot({
    x <- rnorm(input$c)
    y <- rnorm(input$c)
    plot(x, y)
  })
}

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
fluidPage(
  titlePanel("Conditional Norm"),
  column(3,
         wellPanel(
           sliderInput("c", "Points",
                       min = 10, max = 200, value = 40, step = 10)
         )),
  column(5,
         "Less than 40-Error",
         conditionalPanel("input.c <= 40",
                          plotOutput("sc"))
         )
)
#server.R
function(input, output) {
  output$sc <- renderPlot({
    x <- rnorm(input$c)
    y <- rnorm(input$c)
    plot(x, y)
  })
}



Shiny Applications Layouts Exercises (Part-6)

Shiny Applications Layouts – Absolutely-positioned panel

In the sixth part of our journey through Shiny App Layouts we will meet the absolutely-positioned panels. These are panels that you can drag and drop or not wherever you want in the interface. Moreover you can put anything in them, including inputs and outputs.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Install Packages

For this app we will need the package markdown.

Exercise 1

Install and call the markdown package.

Build App

Exercise 2

Create a fluidpage with title “ABSOLUTE PANEL”. HINT: Use fluidpage().

In order to create this type of Panel you have to use the absolutePanel() function like the example below:
#ui.R
fluidPage(
h1("Absolutely"),
absolutePanel())

Exercise 3

Apply absolutePanel() function to your UI.

Exercise 4

Add a well Panel inside the absolutePanel(). HINT: Use wellPanel().

With the help of the markdown package we will add some random text like the example below:
#ui.R
HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla
bal blabla balalallalal
bla bla bla bla bla bla"
)))

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 5

Write a random text message using markdown and place it in your well Panel.

We will build an absolute Panel that uses bottom and right attributes. We also set draggable = TRUE, in order to move it.
#ui.R
absolutePanel(
bottom = 50, right = 50, width = 200,
draggable = TRUE)

Exercise 6

Practice with different values for bottom,left,right and width attributes and also set draggable to TRUE.

As already mentioned you can put anything you want in an abloslute Panel.For example:
#ui.R
absolutePanel(
sliderInput("s", "", min=3, max=20, value=5),
plotOutput("plot", height="100px"))
#server.R
function(input, output, session) {
output$plot <- renderPlot({
plot(head(cars, input$s), main="Cars")
})
}

Exercise 7

Put a slider in your absolute Panel. HINT: Use sliderInput().

Exercise 8

Then put a scatter plot like the one in the example above and connect it with your slider. HINT: Use plotOutput().

Fixed Panel

You can place your absolutePanel() function at the top of the screen using top, left, and right attributes.

Furthermore with fixed=TRUE, you can stabilize it.
#ui.R
absolutePanel(
top = 0, left = 0, right = 0,
fixed = TRUE)

Exercise 9

Place your absolute Panel to the top. Play with the parameters to understand how they affect its position.

Exercise 10

Stabilize your absolute Panel with fixed.




Shiny Application Layouts solutions part 6

Below are the solutions to these exercises on Shiny Application Layouts.

####################
#                  #
#    Exercise 1    #
#                  #
####################

install.packages("markdown")
library(markdown)

####################
#                  #
#    Exercise 2    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL")
)
#server.R
function(input, output, session) {}


####################
#                  #
#    Exercise 3    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(

  )
)
#server.R
function(input, output, session) {}

####################
#                  #
#    Exercise 4    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    wellPanel(

    )

  )
)
#server.R
function(input, output, session) {}

####################
#                  #
#    Exercise 5    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      )))
    )

  )
)
#server.R
function(input, output, session) {}


####################
#                  #
#    Exercise 6    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    bottom = 30, right = 20, width = 400,
    draggable = TRUE,
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      )))

    )

  )
)
#server.R
function(input, output, session) {}

####################
#                  #
#    Exercise 7    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    bottom = 30, right = 20, width = 400,
    draggable = TRUE,
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      ))),
sliderInput("s","Cars", min=3, max=20, value=5)

    )

  )
)
#server.R
function(input, output, session) {

}

####################
#                  #
#    Exercise 8    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    bottom = 30, right = 20, width = 400,
    draggable = TRUE,
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      ))),
sliderInput("s","Cars", min=3, max=20, value=5),
plotOutput("plot", height="200px")

    )

  )
)
#server.R
function(input, output, session) {
  output$plot <- renderPlot({
    plot(head(cars, input$s), main="Cars")
  })
}

####################
#                  #
#    Exercise 9    #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    top = 0, left = 0, right = 0,
    draggable = TRUE,
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      ))),
sliderInput("s","Cars", min=3, max=20, value=5),
plotOutput("plot", height="200px")

    )

  )
)
#server.R
function(input, output, session) {
  output$plot <- renderPlot({
    plot(head(cars, input$s), main="Cars")
  })
}

####################
#                  #
#    Exercise 10   #
#                  #
####################

#ui.R
library(markdown)
fluidPage(
  h1("ABSOLUTE PANEL"),
  absolutePanel(
    top = 0, left = 0, right = 0,
    fixed = TRUE,
    wellPanel(
      HTML(markdownToHTML(fragment.only=TRUE, text=c(
"bla bla bla bla bla bla 
         
bal blabla balalallalal
         
bla bla bla bla bla bla"
      ))),
sliderInput("s","Cars", min=3, max=20, value=5),
plotOutput("plot", height="200px")

    )

  )
)
#server.R
function(input, output, session) {
  output$plot <- renderPlot({
    plot(head(cars, input$s), main="Cars")
  })
}