基于R语言的shiny网页工具开发基础系列-03

后起之秀奔涌而至，欢迎大家在《生信技能树》的舞台分享自己的心得体会！

上面是shiny团队的稿件

l3-更复杂的页面部件

shiny 小部件提供了一个用户给app传送信息的方式

为什么加上控制小工具

上节已经学会在用户界面放置一些简单的元素，但显示更复杂的内容需要用到小部件widgets

widgets 是可交互网页元素，让用户用它们控制app

Shiny 小部件widgets 从用户手里收集值，当用户改变小工具的时候，值也会变

控制小部件

如图有各种小部件，shiny有一系列的小部件，每个都可以用直白命名的R函数创建，例如函数actionButton 用来创建动作按钮（Action Button），函数 sliderInput 创建一个滑块（slider bar）

下表是常见的小部件

其中的一些部件是用Twitter Bootstrap项目构建的，一个受欢迎的构建用户界面的开源框架

加上小部件

你可以像添加其他元素一样添加widgets

放置一个widget 函数在ui对象的sidebarPanel 或 mainPanel 函数中

每个widget 函数都要几个参数，每个widget的前两个参数一定是：

widget的名字name：用户不会看到这个名字，但是可以用它获取widget的值，应该用字符串
一个label：这个标签将和app中的小部件一起出现，应该是字符串，但是也可以是空的""

此例中，name参数是"action", 标签是 "Action"

代码语言：javascript复制

actionButton("action", label = "Action")

其他参数因小部件而异，具体要看小部件执行的工作所需的内容

他们包括初始值，范围和增量

也可以通过查看函数的帮助页面来获取其他参数，如?selectInput

试试把下面的代码运行一下吧

代码语言：javascript复制

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("Basic widgets"),
  
  fluidRow(
    
    column(3,
           h3("Buttons"),
           actionButton("action", "Action"),
           br(),
           br(), 
           submitButton("Submit")),
    
    column(3,
           h3("Single checkbox"),
           checkboxInput("checkbox", "Choice A", value = TRUE)),
    
    column(3, 
           checkboxGroupInput("checkGroup", 
                              h3("Checkbox group"), 
                              choices = list("Choice 1" = 1, 
                                             "Choice 2" = 2, 
                                             "Choice 3" = 3),
                              selected = 1)),
    
    column(3, 
           dateInput("date", 
                     h3("Date input"), 
                     value = "2014-01-01"))   
  ),
  
  fluidRow(
    
    column(3,
           dateRangeInput("dates", h3("Date range"))),
    
    column(3,
           fileInput("file", h3("File input"))),
    
    column(3, 
           h3("Help text"),
           helpText("Note: help text isn't a true widget,", 
                    "but it provides an easy way to add text to",
                    "accompany other widgets.")),
    
    column(3, 
           numericInput("num", 
                        h3("Numeric input"), 
                        value = 1))   
  ),
  
  fluidRow(
    
    column(3,
           radioButtons("radio", h3("Radio buttons"),
                        choices = list("Choice 1" = 1, "Choice 2" = 2,
                                       "Choice 3" = 3),selected = 1)),
    
    column(3,
           selectInput("select", h3("Select box"), 
                       choices = list("Choice 1" = 1, "Choice 2" = 2,
                                      "Choice 3" = 3), selected = 1)),
    
    column(3, 
           sliderInput("slider1", h3("Sliders"),
                       min = 0, max = 100, value = 50),
           sliderInput("slider2", "",
                       min = 0, max = 100, value = c(25, 75))
    ),
    
    column(3, 
           textInput("text", h3("Text input"), 
                     value = "Enter text..."))   
  )
  
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

结果如下

可以每个都感受一下是做什么的，或者改改代码的值，看看有什么变化

此app的布局方案可以参考application layout guide. 当然此篇只要了解他们的作用就行了，不必了解这种复杂的布局方案

练习

尝试写个如图所示的界面（答案很长放在后面，但是一定一定要先自己做一遍哦）

小节回顾

shiny提供一个函数家族来创建这些小工具
每个小工具的函数都需要name和label这两个参数
一些小工具需要特别的指令来执行他们的工作
加入小工具就像加入其他HTML内容一样简单

更进一步

Shiny Widgets Gallery 提供模版，供你快速加入到自己的app中

访问这个网站，图库中展示了每个小部件，并演示了每个小部件的值根据你的输入而变化

选择一个小工具，并点击See Code。图库会跳转到一个描述这个小工具的示例app，只需要复制其中代码到自己的app中即可。

我又做出来了哦，这是我的结果

我的代码

代码语言：javascript复制

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("censusVis"),
  sidebarLayout(
    sidebarPanel(
      p("Create demographic maps with information from the 2010 US Census."),
      br(),
      selectInput("select", h3("Choose a variable to display"),
                  choices = list("Percent White" = 1, "Percent Black" = 2,
                                 "Percent Hispanic" = 3, "Percent Asian" = 4), selected = 1),
      sliderInput("slider", h3("Range of interest:"),
                  min = 0, max = 100, value = c(0,100))
    ),
    mainPanel("")
  )
)

# Define server logic ----
server <- function(input, output) {

}

# Run the app ----
shinyApp(ui = ui, server = server)

参考答案

代码语言：javascript复制

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(
      h2("Installation"),
      p("Shiny is available on CRAN, so you can install it in the usual way from your R console:"),
      code('install.packages("shiny")'),
      br(),
      br(),
      br(),
      br(),
      img(src = "rstudio.png", height = 70, width = 200),
      br(),
      "Shiny is a product of ", 
      span("RStudio", style = "color:blue")
    ),
    mainPanel(
      h1("Introducing Shiny"),
      p("Shiny is a new package from RStudio that makes it ", 
        em("incredibly easy "), 
        "to build interactive web applications with R."),
      br(),
      p("For an introduction and live examples, visit the ",
        a("Shiny homepage.", 
          href = "http://shiny.rstudio.com")),
      br(),
      h2("Features"),
      p("- Build useful web applications with only a few lines of code—no JavaScript required."),
      p("- Shiny applications are automatically 'live' in the same way that ", 
        strong("spreadsheets"),
        " are live. Outputs change instantly as users modify inputs, without requiring a reload of the browser.")
    )
  )
)

# Define server logic ----
server <- function(input, output) {
  
}

# Run the app ----
shinyApp(ui = ui, server = server)

Reference：

Shiny - Add control widgets

网站编程算法其他

0 人点赞