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

l2-shiny的页面布局

基于上篇对shiny app 结构的了解

是时候开始从零构建一个shiny app了

二、构建一个用户界面

此篇旨在如何构建app对用户界面，如何布局用户界面然后加文字图片和其他HTML元素

让我们用上一篇构建的App-1开始这篇吧，编辑一下变成下面的样子

library(shiny)

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

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

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


1.页面布局

Shiny 使用fluidPage函数创建能自动适应用户浏览器窗口的页面，通过往fluidPage中放置元素来布局用户界面。

如例，下面的ui函数创建了一个含有标题面板和侧栏布局（侧栏面板和主面板）的页面布局，这些元素都应放在fluidPage函数中

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

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


titlePanel和sidebarLayout 是加到fluidPage中最常用的两个元素。来创建一个有边栏的app。

sidebarLayout 永远包含两个参数：

• sidebarPanel 函数输出
• mainPanel 函数输出

默认状态下边栏会在左侧，也可以通过sidebarLayout中的可选参数position = "right" 移动

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


上面两个函数只是基础的页面布局，实现更高级的布局，可以用navbarPage实现包含导航栏的多页的用户界面。也可以用fluidRow 和 colum 从网格系统构建布局，此篇不再赘述，请参考：Shiny Application Layout Guide

2. HTML 内容

可以通过*Panel 函数添加内容到app，例如，上面的app中展示的文字。文本 "sidebar panel" 出现在边栏面板，就是给sidebarPanel 函数添加了字符串，sidebarPanel("sidebar panel")。其他面板的文字亦是如此

要添加更高级的内容，使用Shiny的HTML标签函数，这些函数对应HTML5的标签，如下对照表

3.标题

创建标题元素：

• 选择一个标题函数（e.g. h1 or h5）
• 给一段想在标题中显示的文本

例如，你能以h1("My title")创建一级标题，这个命令的输出实际上就是一段HTML代码

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


尝试将上述代码应用到app代码中

网页面板的对应位置就会显示设置的文本，通过逗号分隔，同一个面板能插入多个元素

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")
    )
  )
)


如果让星战的导演George Lucas设计上面这个app，应该会长这样

要实现这种效果只需要将文本居中，使用参数align = "center"，通常HTML的标签属性都能在shiny的标签函数中找到

🍀如果不熟悉HTML的标签属性，可以在网上找找，比如w3schools

看看星战样式的app代码吧

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.")
    )
  )
)


4. 格式化文本

shiny 提供了许多标签函数格式化文本，跑例子是最简单的了解他们的fangfa

试试把下面的代码粘贴到app中的合适位置

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.")
    )
  )
)


比较一下上面的代码和下面的页面，探索一下是如何格式化文本的

5.图片

图片能增强app的外观，帮助用户理解内容。shiny 用 img 函数将图片放入app中

src参数用于指定图片的来源，比如，img(src = "my_image.png"，这是必要的参数，不然不知道传递哪张图片到app呢

也有其他参数能够定义图片的属性，比如高和宽，注意是以像素为单位

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


img函数会特定位置查找图片，文件必须在与app.R同目录下的一个叫📁www的文件夹中，shiny会通过特殊的处理，将这个文件夹中的文件与浏览器共享，www就是存放图片，样式表等东西的大本营，里面的文件用于浏览器构建app的网页部分。

比如放入一个图片rstudio.png下载连接

目录结构看起来像这样

应用到app的代码中就是

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src = "rstudio.png", height = 140, width = 400)
    )
  )
)
# Define server logic ----
server <- function(input, output) {

}

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


6.其他标签

尽管已经提到了一些常用的标签，但是还有许多其他标签用于自定义你的用户界面，参考：

Shiny HTML Tags Glossary

7.练习

用布局，HTML，img 函数就能创造一个非常有吸引力和有用的用户界面

如下图，快用上面学到的内容写出这样一个app吧

建议先自己做一遍再看答案哦（很长放在文档末尾）

8.小节回顾

• 用fluidPage, titlePanel 和 sidebarLayout 创建用户界面
• 用标签函数创建HTML元素
• 通过标签函数的参数设置HTML标签的属性
• 通过titlePanel, sidebarPanel 或 mainPanel 给网页添加元素
• 用逗号分隔多个元素
• www文件夹存放图片并通过img 函数使用

我的答案

library(shiny)

# Define UI ----
ui <- fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(
      h1("Installation"),
      p("Shiny is available on CRAN, so you can install it in the usual way from your R console:"),
      code('intall.packages("shiny")'),
      br(),
      br(),
      img(src = "rstudio.png", height = 70, width = 200),
      p("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(href="https://shiny.rstudio.com/", "Shiny homepage.")),
      br(),
      h1("Features"),
      tags$li("- Build useful web applications with only a few lines of code-no JavaScript required."),
      tags$li("- Shiny applications are automatically 'live' in the same way that",
          strong("spreadsheeets"),
          "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)


参考答案

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 - Build a user interface