「R shiny 基础」如何进行网页布局

在第一篇「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 层级下

HTML源代码

为了增加更多高级的内容，我们可以Shiny的HTML 标签函数(tag)，等价于HTML5的标签(tag)。

shiny 函数	等价的HTML5 标签	结果
p	<p>	段落
h1	<h1>	第一级标题
h2	<h2>	第二级标题
h3	<h3>	第三级标题
h4	<h4>	第四级标题
h5	<h5>	第五级标题r
h6	<h6>	第六级标题
a	<a>	超链接
br		空白行
div	<div>	分隔文本
span	<span>	行内分割
pre	<pre>	等宽文本
code	<code>	代码
img	<img>	图片
strong	<strong>	加粗
em	<em>	强调
HTML		原生HTML代码

写个代码练习下

ui <- fluidPage(
  titlePanel("title Panel"),
  sidebarLayout(
    sidebarPanel(
      tags$hgroup(h1("Side Bar"), h2("Panel"))
      
    ),
    mainPanel(
      HTML("<p>You can add content to your Shiny app by placing it inside a <code>*Panel</code> 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 <code>sidebarPanel</code> function, e.g. <code>sidebarPanel(\"sidebar panel\")</code>. The same is true for the text in the title panel and the main panel.</p>"),
      div()
    )
  )
)

预览页面

对应的HTML

格式化样式

上面只用了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")
    )
  )
)

网页效果

对应的HTML

关于元素的属性，可以在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在如下两个链接中有介绍

小练习

请还原出如下的网页布局

小练习

其中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基础教程: