官方指南太简单了，没内容。下一期开始换个教材学。

根据上篇文章里我们已经知道了shiny app的构造。本文会教会你如何构建UI，包括调整外观，添加文字，HTML要素。
之前的文章里介绍过，Shiny主程序分为两个部分，UI部分(ui.R)和Server(server.R)部分。

ui.R

shinyUI(fluidPage())

server.R

shinyServer(function(input, output) {})

这是构成一个shiny app的最短代码。当然没有任何内容,都是架空的。

整体布局

在ui.R里用fluidPage编辑可视化布局。

# ui.RshinyUI(fluidPage(  titlePanel("标题面板"),    sidebarLayout(    sidebarPanel( "边栏面板"),    mainPanel("主面板")  )))

也可以调整面板的位置。

# ui.RshinyUI(fluidPage(  titlePanel("标题面板"),    sidebarLayout(position="right",    sidebarPanel( "边栏面板"),    mainPanel("主面板")  )))

常用HTML对照表

Shiny函数	HTML5	定义
p		A paragraph of text
h1		A first level header
h2		A second level header
h3		A third level header
a		A hyper link
br		A line break (e.g. a blank line)
div		A division of text with a uniform style
span		An in-line division of text with a uniform style
pre		Text ‘as is’ in a fixed width font
code		A formatted block of code
img		An image
strong		Bold text
em		Italicized text
HTML		Directly passes a character string as HTML code

用法举例

library(shiny)# ui.RshinyUI(fluidPage(  titlePanel("My Shiny App"),  sidebarLayout(    sidebarPanel(),    mainPanel(      h1("First level title"),      h2("Second level title"),      h3("Third level title"),    )  )))

再举个栗子

shinyUI(fluidPage(  titlePanel("My Shiny 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.")    )  )))

再来一个复杂点的

# ui.Rlibrary(shiny)shinyUI(fluidPage(  titlePanel("My Shiny App"),  sidebarLayout(    sidebarPanel(),    mainPanel(      p("p creates a paragraph of text. This paragraph is followed by br(), which makes a blank line."),      p("When you want to start a new paragraph, just use a new p() command. If you supply a style attribute, you can change the format of the entire paragraph", style = "font-family: 'times'; font-size: 16pt"),      strong("Strong() makes bold text."),      em("And em() makes italicized (i.e, emphasized) text."),      br(),      code("code displays your text like computer code"),      div("Use span and div to create segments of text that all have a similar style. For example, 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, but it works with",        span("groups of words", style = "color:blue"),        "that appear inside a paragraph.")    )  )))

插入图片

会用到，并且可以指定宽度和长度
这里需要添加一个名字为www的文件夹。把图片放里面。

# ui.Rlibrary(shiny)# ui.RshinyUI(fluidPage(  titlePanel("My Shiny App"),  sidebarLayout(    sidebarPanel(),    mainPanel(      img(src="jason.png", height = 200, width = 200)    )  )))

# ui.Rlibrary(shiny)# ui.RshinyUI(fluidPage(  titlePanel("My Shiny App"),  sidebarLayout(    sidebarPanel(      p("欢迎订阅Jason数据分析生信教室"),      br(),      img(src="jason.png", height = 50, width = 50)    ),    mainPanel(      h2("第二课 UI界面设置", align = "center"),      br()    )  )))