R shiny教程-2：布局用户界面
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可以参考：
#总结
-
fluidPage,titlePanelandsidebarLayout创建用户界面 - 在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安装
