Shiny平台构建与R包开发（一）——ui布局

HaoranWu_ZJU

已于 2022-05-09 15:56:31 修改

阅读量2.5k

点赞数 4

文章标签： r语言

于 2021-09-04 21:12:19 首次发布

本文链接：https://blog.csdn.net/robby_wu/article/details/120105745

版权

本节为Shiny平台构建与R包开发教程的第一小节。

Getting Started

初识Shiny时，了解其工作机理非常重要。下面的案例展示了一个最简单的Shiny APP的工作机理：

#DO NOT include any non-English characters in Shiny script
library(shiny)
ui <- fluidPage("Hello World!")
server <- function(input, output){
   }
shinyApp(ui, server)

其运行方式和其他R语言代码没有太大的差别。直接让光标定位在脚本文件中，单击Run或按快捷键Ctrl+Enter将代码逐行运行。 ui变量定义了Shiny APP的ui设计，server函数定义了Shiny APP的服务器行为。input参数代表用户向服务器中输入的数据，output代表服务器向用户展示的内容。

当运行shinyApp函数时，Shiny调用图形用户界面（GUI），打开网页。只要网页不被关闭，shinyApp就一直处于运行状态，用户也就无法在Rstudio的命令行窗口运行其他命令。

不要马上急着关闭弹出的GUI。点击“Open in Browser”按钮，按下“（Fn）+F12”按钮，进入浏览器调试模式。如果您了解过HTML+CSS+JS的基本知识，请耐心阅读Box1部分内容，以深刻地理解Shiny是如何生成HTML网页的。这对后续ui排版及CSS设计的深入理解有很好地辅助作用。

Box1 Shiny生成HTML网页的内在机制
进入浏览器调试模式后，打开<head>标签，可以找到<link>引入了bootstrap的css文件，表明Shiny的CSS是基于bootstrap开发的。展开<body>标签，发现类名为container-fluid的一个<div>标签。这表明Shiny中fluidPage函数的功能是向网页中插入一个<div class="container-fluid"></div>。而这一标签的具体样式显然在CSS文件中已被定义了。

退出GUI界面，回到R终端，运行print(ui)，同样也可以看到ui变量本质上就是个<div>。再来看一个更复杂的例子。
ui <- fluidPage(
 titlePanel("title Panel"),
 sidebarLayout(
   sidebarPanel("sidebar Panel"),
   mainPanel("main Panel")    
 )
)
server <- function(input, output){
    }
shinyApp(ui, server)
先运行print(ui)，发现在fluidPage函数构建的<div class="container-fluid">的基础上，titlePanel函数在内部插入了<h2>标签；siderbarLayout函数插入了<div class="row">标签；sidebarPanel和mainPanel函数分别在row标签的div区块中分别插入<div class="col-sm-4">和<div class="col-sm-8" role="main">。除此之外，很重要的一点是titlePanel还在网页的<head>标签中插入了<title>标签，即<title>title Panel</title>。因此，对应网页的标签也自动变成了title Panel了。
总之，ui变量在R中存储的仅仅是字符串，但其内部字符的语法遵从HTML语言，在网页端根据HTML语法翻译成对应元素。此后的ui设计案例也可以用同样的方法查看每个函数的作用。

元素布局

最常用的网页内元素布局是将页面划分为不同的“行”和“列”。以Bing为例，若想要“复刻”一个Bing的首页，一种方法是：将网页划分为6行，每一行又可以分为不同数量的列。每一“行”是一个<div class="row">，每一列是嵌套在“行”<div>里面的<div class="column">。因此，在Bing首页中，第一行需要设置6个“列”<div>，第一个<div>