Shiny应用基础（3）：页面布局

页面布局考虑HTML元素在浏览器窗口中的展示位置和顺序。一般情况下，一个shiny程序只需要一个展示窗口，其布局应该很简单随意。然而，shiny把这部分设计得相当复杂，提供了很多相关的函数。这些函数都是在shinyApp的ui参数内使用的，为了方便本文暂把它们称为“UI函数”。

在上一节的内容中我们知道，通过tags列表的设置我们完全可以解决HTML页面元素产生和页面布局的问题，为什么shiny还要提供辣么多的UI函数呢？为说明这一点，请比较下面两个shiny“程序”所产生的HTML代码：

运行上面两个“程序”，分别查看页面的源代码，发现两者的 body 内具有相同的代码。但不同的是程序2的 head 部分多了下面几行代码：

这就是关键。 shiny的UI函数不仅产生了相应的HTML元素，还引入、规定或解决了HTML元素的依赖关系（HTML dependency） 。所以嘛，有些UI函数你可以视而不见，但有些你还不得不了解和使用。

前面的例子已经看到，虽然我们可以使用div函数对HTML页面进行手工分块布局，但fixPage函数做的工作更多。很显然，Shiny页面布局引入了Bootstrap框架。有关Bootstrap介绍的网络资源非常多，这里就不详细介绍了。如果真的要好好应用shiny，我觉得先了解了解Bootstrap是很有必要的。

要理解shiny布局页面的原理并不难，其实就是bootstrapPage函数和上一篇文章讲过的tags标签。这些函数在shiny源代码包的bootstrap.R和bootstrap-layout.R中定义，很容易找到。简单起见，这里我们只讲用法。

shiny的源代码中有一个基本的bootstrapPage()函数，HTML的依赖性（CSS，js）由它确定：

bootstrapPage函数是可以直接调用的，前提是：你得熟悉HTML/CSS和bootstrap，否则建议用fixedPage或fluidPage。这两个函数其实也引用了bootstrapPage函数，调用这些函数就表明我们将在整个页面中应用bootstrap框架。如果你故意避开这些函数不用，那很可能在程序运行中会发生一些抓破脑袋也想不明白的意外情况。

Bootstrap有两种基本页面布局，即固定宽度布局和流式布局，其CSS样式分别由 container 类和 container-fluid 类设置。通常情况下，在固定宽度布局中页面内容的宽度通过固定像素设置；而流式布局中的页面内容则通过屏幕宽度的百分比设置。在Shiny中，页面布局函数 fixedpage() 产生具有 container 类属性的块，而 fluidPage() 则产生 container-fluid 块。

两个函数的调用方法都是一样的：

以上参数没有一个是强制要求设置的。如果不设置任何参数，fixedPage的作用就是产生下面代码：

而fluidPage则获得：

title和theme产生的内容放置到HTML代码的 head 标签内，你可以自己尝试设置这些参数，通过查看HTML源代码检查它们的作用。

navbarPage() 函数用于产生具有顶部导航条页面，而导航条下方页面可以设为固定宽度或流式布局。

这是一个非常奇怪的函数，试图包揽解决一大堆问题，设计思路很不清。如果你对bootstrap navbar的要求较高，你会发现它可以设置功能少得可怜，只能进行页面内的导航而不是网站的导航。

通过xxxPage函数引入bootstrap框架文件后，页面的内容布局可以灵活设置。如果你熟悉HTML/CSS，下面的绝大多数函数可用可不用。但不管怎么样，这些都应放在xxxPage函数内，因为它们需要bootstrap，除非你手工引物相应的css和js文件。

有两个函数：headerPanel和titlePanel。它们的用法是一样的：

这两个函数的细微差别可以通过查看它们的函数源代码看出来。headerPanel的源代码是：

总体感觉上面两个函数的灵活性太差，产生的标题千篇一律。如果你也认为是这样，可以考虑用tags直接设置，比如：

shiny应用程序往往只需要一个浏览器窗口，因此它绝大多数（可能是全部）“导航”都是指页面内部的标签页切换，包括前面介绍了navbarPage函数所产生的顶部导航条。

设置标签页的基本函数，但不是一个简单的函数。除了设置标签页内的内容（… 参数）外还用于设置导航标签，title、value和icon是用于导航标签设置的参数。它需要在navbarPage、tabsetPanel、navbarMenu等函数内部使用，否则没有太大的意义。

navbarPage函数已经看过了。看一下后两个函数的参数：

为什么把navbarPage放在这里，你看看下面代码的效果就理解了：

运行后得到的页面如下：

用于产生下拉式导航标签，上面的例子已经看到它的使用方法：

两者的代码是完全一样的，都是产生bootstrap的div.row类容器：

产生bootstrap的div.col-sm-n类容器：

这些块的特殊之处只是预设了容器和样式，如果觉得内容太多你可以完全把它们忽略。

获取position属性分别为absolute和fixed的div容器，位置参数设置初始位置，draggable参数设置是否可以用鼠标拖动。

条件显示区块。含condition条件参数，通过JS判断该条件以聚定显示或隐藏该区块。用户不用关心JS代码的编写。由于涉及到数据交互，我把它放到以后的文章介绍。

外部容器为div，只接收宽度width参数；内部容器为form，接收其他所有内容和参数。

产生一个预设样式的块，有点像代码块，但字体不特殊设置。

这种模式将出现在该函数的每项内容（参数）都单独放在一行，即垂直排列。

运行下面程序，调整浏览器窗口大小，你会发现不同布局模式的变化：

Author: ZGUANG@LZU

Created: 2015-08-04 二 19:58

Emacs 24.5.1 (Org mode 8.2.10)