在第一篇「R shiny 基礎(chǔ)」初識(shí)Shiny 灶泵，我們了解了Shiny應(yīng)用主要分為兩個(gè)部分确虱，UI對(duì)象和server函數(shù)施蜜，這一篇將會(huì)介紹如何進(jìn)行網(wǎng)頁布局曲初。
準(zhǔn)備
在開始之前体谒，你需要?jiǎng)?chuàng)建一個(gè)文件夾，其中有一個(gè)app.R文件臼婆，復(fù)制如下的內(nèi)容到app.R中
library(shiny)
# 定義UI
ui <- fluidPage(
)
# 定義服務(wù)端
server <- function(input, output){
}
# 運(yùn)行app
shinyApp(ui = ui, server = server)
基本布局(Layout)
當(dāng)你打開任何一個(gè)網(wǎng)頁抒痒，每個(gè)網(wǎng)頁的不同元素的擺放方式就是布局，例如我的簡(jiǎn)書主頁
我們的目標(biāo)是快速的構(gòu)建一個(gè)湊合用的網(wǎng)頁應(yīng)用颁褂，而如果從頭搭建故响，那么你需要學(xué)一堆HTML語法和CSS樣式，基本上就把我們勸退了颁独。好在Shiny提供了一系列高級(jí)函數(shù)彩届，讓我們“暫時(shí)”不用考慮底層的HTML和CSS。
HTML元素描述的是內(nèi)容是什么誓酒，CSS用于描述內(nèi)容應(yīng)該怎么樣樟蠕。
先學(xué)初學(xué)者必須掌握的布局三板斧，fluidPage, titlePanel和sidebarLayout,
-
fluidPage: 它的作用和其命名一致靠柑，就是創(chuàng)建一個(gè)流動(dòng)布局的頁面寨辩。 -
titlePanel: 標(biāo)題欄 -
sidebarLayout: 常用的邊欄布局，接受如下兩個(gè)函數(shù)作為輸入-
sidebarPanel: 邊欄 -
mainPanel: 主體部分
-
ui <- fluidPage(
titlePanel("title Panel"),
sidebarLayout(
sidebarPanel("sidebar"),
mainPanel("main panler")
)
效果如下:
titlePanel和sidebarLaytou創(chuàng)建了我們Shiny應(yīng)用的基本布局病往，對(duì)于我們初學(xué)者基本就夠用了捣染。在我們有一定基礎(chǔ)后，我們可以嘗試用fluidRow和Column手動(dòng)搭建布局停巷。
雖然結(jié)果不是特別好看耍攘，但請(qǐng)牢記當(dāng)我們學(xué)習(xí)一個(gè)新事物的時(shí)候，不要想著完美畔勤，而是追求完成蕾各。只有完成了，你才能有資格談完美庆揪。
HTML內(nèi)容
在搭建好基本布局的前提下式曲，我們可以在*Panel函數(shù)中填充更多內(nèi)容。比方說缸榛，出現(xiàn)在siderbarPanel中的"siderbar"吝羞，就是我們加入的文字內(nèi)容。
從最終的HTML角度來看内颗，sidebarLayout中是將網(wǎng)頁分隔成4:8的兩個(gè)部分钧排，sidebarPanel是4, mainPanel是8。 且sidebarPanel輸入的內(nèi)容是都在HTML的 form 層級(jí)下
為了增加更多高級(jí)的內(nèi)容均澳，我們可以Shiny的HTML 標(biāo)簽函數(shù)(tag)恨溜，等價(jià)于HTML5的標(biāo)簽(tag)符衔。
| shiny 函數(shù) | 等價(jià)的HTML5 標(biāo)簽 | 結(jié)果 |
|---|---|---|
| p | <p> | 段落 |
| h1 | <h1> | 第一級(jí)標(biāo)題 |
| h2 | <h2> | 第二級(jí)標(biāo)題 |
| h3 | <h3> | 第三級(jí)標(biāo)題 |
| h4 | <h4> | 第四級(jí)標(biāo)題 |
| h5 | <h5> | 第五級(jí)標(biāo)題r |
| h6 | <h6> | 第六級(jí)標(biāo)題 |
| a | <a> | 超鏈接 |
| br | 空白行 | |
| div | <div> | 分隔文本 |
| span | <span> | 行內(nèi)分割 |
| pre | <pre> | 等寬文本 |
| code | <code> | 代碼 |
| img | <img> | 圖片 |
| strong | <strong> | 加粗 |
| em | <em> | 強(qiáng)調(diào) |
| HTML | 原生HTML代碼 |
寫個(gè)代碼練習(xí)下
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的元素，如果我們希望標(biāo)題能夠居中糟袁，改變字體和顏色判族，那么就需要對(duì)HTML中元素的屬性進(jìn)行修改。
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")
)
)
)
關(guān)于元素的屬性项戴，可以在w3schools學(xué)習(xí)
圖片和超鏈接
除了簡(jiǎn)單的文本以外形帮，我們還可以在網(wǎng)頁中增加圖片，為文本增加超鏈接肯尺。圖片的內(nèi)容要放和app.R同一級(jí)的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="http://www.reibang.com/p/e2495bbc7bd1", "here" )),
img(src = "2013053-4dd190b5c709b535.png")
)
)
Shiny支持的Tags在如下兩個(gè)鏈接中有介紹
- http://shiny.rstudio.com/articles/html-tags.html
- http://shiny.rstudio.com/articles/tag-glossary.html
小練習(xí)
請(qǐng)還原出如下的網(wǎng)頁布局
其中Rstuio的圖片下載地址為http://shiny.rstudio.com/tutorial/written-tutorial/lesson2/www/rstudio.png
復(fù)習(xí)
經(jīng)過這一篇的學(xué)習(xí)沃缘，我們現(xiàn)在能完成如下內(nèi)容
- 使用
fluidPage,titlePanel和sidebarLayout創(chuàng)建用戶界面 - 使用Shiny的tag函數(shù)構(gòu)建HTML元素
- 為每個(gè)tag函數(shù)設(shè)置HTML屬性
- 通過往
titlePanel,sidebarPanel或mainPanel傳入元素填充網(wǎng)頁 - 在子布局中使用
,分隔多個(gè)元素 - 增加
www文件夾下的圖片
到目前為止，我們只使用了HTML的基本元素構(gòu)建用戶界面则吟，下一節(jié)將會(huì)學(xué)習(xí)在網(wǎng)頁中增加一些小工具槐臀，例如下拉欄。
參考
傳送門
Shiny基礎(chǔ)教程:
