R shiny

Shiny 是RStudio公司开发的R包，利用Shiny 可以轻松构建交互式Web应用程序(App)。

在前面一个 Shiny app的基本组成部分解释了构建一个shiny app的两个部分以及如何运行。

• 一个用户界面： ui.R
• 一个服务器功能: server.R
• 运行：shinyApp(); runApp()

因此，最简单的shiny app如下：

• 可以在Rstudio中直接运行
• 可以创建一个文件R程序：app.R，然后再运行

library(shiny)

# Define UI ----
ui <- fluidPage(
  
)

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

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

运行之后，生成的是一个空白的网页。

#布局

• fluidPage()可以创建流式布局,放置自定义的用户功能界面。

使用fluidPage在ui.R种创建一个界面，有标题栏和工具栏。工具栏包含一个侧栏面板和一个主面板。

library(shiny)
ui <- fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel("sidebar panel"),
    mainPanel("main panel")
  )
)

server <- function(input, output) {}

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

Sidebar on the left

titlePanel 和 sidebarLayout是fluidPage种最常用的元素。

sidebarLayout 中最常用的功能：

• sidebarPanel
• mainPanel

这两个功能可以放置用户自定义内容到侧边栏和主界面。
侧边栏默认出现在左边，但是也可以设置到右边（sidebarLayout设置参数position = "right"）。

ui <- fluidPage(
  titlePanel("title panel"),
  
  sidebarLayout(position = "right",
                sidebarPanel("sidebar panel"),
                mainPanel("main panel")
  )
)

Sidebar on the right

上面创建了一个基本Shiny app，也可以通过其他函数添加自定义内容。navbarPage 可以设置导航栏添加多个多个交互界面。或者，可以使用fluidRow和column从grid系统构建布局。了解Shiny app各种布局，查看文章Shiny Application Layout Guide。

#HTML内容

通过向*Panel中添加内容来丰富Shiny app。在，上面的例子中，使用sidebarPanel()函数向侧边栏添加标题， mainPanel向主界面添加了标题。

添加文本内容时，使用HTML 标签也是很方便和强大的。了解过HTML 的人都明白HTML 标签的作用与用法。

shiny function	HTML5 equivalent	creates
p	<p>	段落
h1	<h1>	一级标题
h2	<h2>	二级标题
h3	<h3>	三级标题
h4	<h4>	四级标题
h5	<h5>	五级标题
h6	<h6>	六级标题
a	<a>	超链接
br	<br>	换行；或者空行
div	<div>	分隔
span	<span>	一定范围内文本格式设置
pre	<pre>	文本预定义格式
code	<code>	代码块
img	<img>	图片
strong	<strong>	加粗文本
em	<em>	强调
HTML		Directly passes a character string as HTML code

#标题

创建一个标题，如下：

各级标题都可以实现，h1()到h5()

> library(shiny)
> h1("My title")
<h1>My title</h1>

然后，将创建的标题传递给Shiny app：h1("My title")作为参数传递给titlePanel, sidebarPanel, 或 mainPanel。

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h1("First level title"),
      h2("Second level title"),
      h3("Third level title"),
      h4("Fourth level title"),
      h5("Fifth level title"),
      h6("Sixth level title")
    )
  )
)

App with headers

文本对齐方式也可以设置。例如，居中，h6("Episode IV", align = "center")；HTML的所有标签都可以作为一个参数传递给Shiny的函数。

ui <- fluidPage(
  titlePanel("My Star Wars App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h6("Episode IV", align = "center"),
      h6("A NEW HOPE", align = "center"),
      h5("It is a period of civil war.", align = "center"),
      h4("Rebel spaceships, striking", align = "center"),
      h3("from a hidden base, have won", align = "center"),
      h2("their first victory against the", align = "center"),
      h1("evil Galactic Empire.")
    )
  )
)

server <- function(input, output) {}

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

#文本格式

Shiny提供了许多标签(tag function)用于格式化文本。

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      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.")
    )
  )
)

Formatting options

#图片

图片可以增强应用程序的外观，帮助用户理解内容。img函数在应用程序中放置图片。

img(src = "my_image.png", height = 72, width = 72)

注：img会在特定位置寻找存放的图片。在Shiny app目录下一个名为www的文件夹，这个目录就是放置ui.R, server.R的位置。Shiny以一种特殊的方式处理www文件夹，Shiny会共享这个www下的文件给web使用的用户；所以，www文件夹一般存放图片、样式表和其他的应用程序的web组件

ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src = "rstudio.png", height = 140, width = 400)
    )
  )
)

Image in an app

更多的tag functions可以参考：

• Customize your UI with HTML
• Shiny HTML Tags Glossary.

#总结

• fluidPage, titlePanel and sidebarLayout创建用户界面
• 在Shiny函数中使用HTML标签
• 使用HTML tag attributes（颜色之类的）作为一个参数窗体给Shiny函数
• 添加元素到 titlePanel, sidebarPanel 或 mainPanel
• 每个面板（panel）有多个元素时，使用逗号隔开
• 添加图片，将图片放置到www文件夹，使用img函数

#原文：

Shiny written-tutorial lesson2
Shiny Widgets Gallery

系列文章：
R shiny教程-1：一个 Shiny app的基本组成部分
R shiny教程-2：布局用户界面
Shiny Server安装