在第一篇「R shiny 基础」初识Shiny ，我们了解了Shiny应用主要分为两个部分，UI对象和server函数，这一篇将会介绍如何进行网页布局。
准备
在开始之前，你需要创建一个文件夹，其中有一个app.R文件，复制如下的内容到app.R中
library(shiny)
# 定义UI
ui <- fluidPage(
)
# 定义服务端
server <- function(input, output){
}
# 运行app
shinyApp(ui = ui, server = server)
基本布局(Layout)
当你打开任何一个网页，每个网页的不同元素的摆放方式就是布局，例如我的主页
我们的目标是快速的构建一个凑合用的网页应用，而如果从头搭建，那么你需要学一堆HTML语法和CSS样式，基本上就把我们劝退了。好在Shiny提供了一系列高级函数，让我们“暂时”不用考虑底层的HTML和CSS。
HTML元素描述的是内容是什么，CSS用于描述内容应该怎么样。
先学初学者必须掌握的布局三板斧，fluidPage, titlePanel和sidebarLayout,
-
fluidPage: 它的作用和其命名一致，就是创建一个流动布局的页面。 -
titlePanel: 标题栏 -
sidebarLayout: 常用的边栏布局，接受如下两个函数作为输入-
sidebarPanel: 边栏 -
mainPanel: 主体部分
-
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel("sidebar"),
mainPanel("main panler")
)
效果如下:
titlePanel和sidebarLaytou创建了我们Shiny应用的基本布局，对于我们初学者基本就够用了。在我们有一定基础后，我们可以尝试用fluidRow和Column手动搭建布局。
虽然结果不是特别好看，但请牢记当我们学习一个新事物的时候，不要想着完美，而是追求完成。只有完成了，你才能有资格谈完美。
HTML内容
在搭建好基本布局的前提下，我们可以在*Panel函数中填充更多内容。比方说，出现在siderbarPanel中的"siderbar"，就是我们加入的文字内容。
从最终的HTML角度来看，sidebarLayout中是将网页分隔成4:8的两个部分，sidebarPanel是4, mainPanel是8。 且sidebarPanel输入的内容是都在HTML的 form 层级下
为了增加更多高级的内容，我们可以Shiny的HTML 标签函数(tag)，等价于HTML5的标签(tag)。
| shiny 函数 | 等价的HTML5 标签 | 结果 |
|---|---|---|
| p | 段落 | |
| h1 | 第一级标题 | |
| h2 | 第二级标题 | |
| h3 | 第三级标题 | |
| h4 | 第四级标题 | |
| h5 | 第五级标题r | |
| h6 | 第六级标题 | |
| a | 超链接 | |
| br | 空白行 | |
| div | 分隔文本 | |
| span | 行内分割 | |
| pre | 等宽文本 | |
| code | |
代码 |
| img | 图片 | |
| strong | 加粗 | |
| em | 强调 | |
| HTML | 原生HTML代码 |
写个代码练习下
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel(
tags$hgroup(h1("Side Bar"), h2("Panel"))
),
mainPanel(
HTML("You can add content to your Shiny app by placing it inside a *Panel function. For example, the apps above display a character string in each of their panels. The words “sidebar panel” appear in the sidebar panel, because we added the string to the sidebarPanel function, e.g. sidebarPanel(\"sidebar panel\"). The same is true for the text in the title panel and the main panel.
"),
div()
)
)
)
格式化样式
上面只用了HTML的元素，如果我们希望标题能够居中，改变字体和颜色，那么就需要对HTML中元素的属性进行修改。
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel(
h1("Side Bar Panel")
),
mainPanel(
h1("First Header", align="center",
style ="font-family: 'times'; font-size: 32pt "),
h2("Second Header", align="center",
stype = "font-family: 'arial'; font-size: 14pt"),
div(),
p("I fill blue", style = "color:blue")
)
)
)
关于元素的属性，可以在w3schools学习
图片和超链接
除了简单的文本以外，我们还可以在网页中增加图片，为文本增加超链接。图片的内容要放和app.R同一级的www文件夹下
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel(
h1("Side Bar Panel")
),
mainPanel(
h1("Hello Shiny", align="center",
style ="font-family: 'times'; font-size: 32pt "),
div(),
p("This images was download from", a(href="https://www.jianshu.com/p/e2495bbc7bd1", "here" )),
img(src = "2013053-4dd190b5c709b535.png")
)
)
Shiny支持的Tags在如下两个链接中有介绍
- http://shiny.rstudio.com/articles/html-tags.html
- http://shiny.rstudio.com/articles/tag-glossary.html
小练习
请还原出如下的网页布局
其中Rstuio的图片下载地址为http://shiny.rstudio.com/tutorial/written-tutorial/lesson2/www/rstudio.png
复习
经过这一篇的学习，我们现在能完成如下内容
- 使用
fluidPage,titlePanel和sidebarLayout创建用户界面 - 使用Shiny的tag函数构建HTML元素
- 为每个tag函数设置HTML属性
- 通过往
titlePanel,sidebarPanel或mainPanel传入元素填充网页 - 在子布局中使用
,分隔多个元素 - 增加
www文件夹下的图片
到目前为止，我们只使用了HTML的基本元素构建用户界面，下一节将会学习在网页中增加一些小工具，例如下拉栏。
参考
- http://shiny.rstudio.com/tutorial/written-tutorial/lesson2/
传送门
Shiny基础教程:
- 「R shiny 基础」初识Shiny
- 「R shiny 基础」如何进行网页布局
- 「R shiny基础」增加一些小控件
- 「R shiny基础」交互式入门
- 「R shiny基础」在shiny应用中加载数据和脚本
- 「R shiny基础」reactive让shiny应用运行速度变快
- 「R shiny基础」使用shinyapp分享你的Shiny应用