|
在第一篇「R shiny 基礎(chǔ)」初識Shiny ,，我們了解了Shiny應(yīng)用主要分為兩個部分,，UI對象和 server函數(shù),，這一篇將會介紹如何進(jìn)行網(wǎng)頁布局,。 準(zhǔn)備在開始之前，你需要創(chuàng)建一個文件夾,，其中有一個 app.R文件,，復(fù)制如下的內(nèi)容到 app.R中 library(shiny)
# 定義UI
ui <> fluidPage(
)
# 定義服務(wù)端
server <> function(input, output){
}
# 運行app
shinyApp(ui = ui, server = server)
基本布局(Layout)當(dāng)你打開任何一個網(wǎng)頁，每個網(wǎng)頁的不同元素的擺放方式就是布局,，例如我的簡書主頁 
我們的目標(biāo)是快速的構(gòu)建一個湊合用的網(wǎng)頁應(yīng)用,，而如果從頭搭建，那么你需要學(xué)一堆HTML語法和CSS樣式,，基本上就把我們勸退了,。好在Shiny提供了一系列高級函數(shù)，讓我們“暫時”不用考慮底層的HTML和CSS,。 HTML元素描述的是內(nèi)容是什么,，CSS用于描述內(nèi)容應(yīng)該怎么樣,。
先學(xué)初學(xué)者必須掌握的布局三板斧， fluidPage, titlePanel和 sidebarLayout, fluidPage: 它的作用和其命名一致,，就是創(chuàng)建一個流動布局的頁面,。
titlePanel: 標(biāo)題欄
sidebarLayout: 常用的邊欄布局，接受如下兩個函數(shù)作為輸入
sidebarPanel: 邊欄
mainPanel: 主體部分
ui <> fluidPage(
titlePanel('title Panel'),
sidebarLayout(
sidebarPanel('sidebar'),
mainPanel('main panler')
)
效果如下: 
titlePanel和 sidebarLaytou創(chuàng)建了我們Shiny應(yīng)用的基本布局,，對于我們初學(xué)者基本就夠用了,。在我們有一定基礎(chǔ)后，我們可以嘗試用 fluidRow和 Column手動搭建布局,。
雖然結(jié)果不是特別好看,，但請牢記當(dāng)我們學(xué)習(xí)一個新事物的時候，不要想著完美,，而是追求完成,。只有完成了，你才能有資格談完美,。
HTML內(nèi)容在搭建好基本布局的前提下,，我們可以在 *Panel函數(shù)中填充更多內(nèi)容。比方說,，出現(xiàn)在 siderbarPanel中的'siderbar',，就是我們加入的文字內(nèi)容。 從最終的HTML角度來看,，sidebarLayout中是將網(wǎng)頁分隔成4:8的兩個部分,，sidebarPanel是4, mainPanel是8。 且sidebarPanel輸入的內(nèi)容是都在HTML的 form 層級下 
為了增加更多高級的內(nèi)容,，我們可以Shiny的HTML 標(biāo)簽函數(shù)(tag),，等價于HTML5的標(biāo)簽(tag)。 | shiny 函數(shù) | 等價的HTML5 標(biāo)簽 | 結(jié)果 |
|---|
| p |
| 段落 | | h1 |
| 第一級標(biāo)題 | | h2 |
| 第二級標(biāo)題 | | h3 |
| 第三級標(biāo)題 | | h4 |
| 第四級標(biāo)題 | | h5 |
| 第五級標(biāo)題r | | h6 |
| 第六級標(biāo)題 | | a |
| 超鏈接 | | br |
| 空白行 | | div |
| 分隔文本 | | span |
| 行內(nèi)分割 | | pre |
| 等寬文本 | | code |
| 代碼 | | img |
| 圖片 | | strong |
| 加粗 | | em |
| 強(qiáng)調(diào) | | HTML |
| 原生HTML代碼 |
寫個代碼練習(xí)下 ui <> fluidPage(
titlePanel('title Panel'),
sidebarLayout(
sidebarPanel(
tags$hgroup(h1('Side Bar'), h2('Panel'))
),
mainPanel(
HTML('You can add content to your Shiny app by placing it inside a *Panel 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 sidebarPanel function, e.g. sidebarPanel(\'sidebar panel\'). The same is true for the text in the title panel and the main panel. '),
div()
)
)
)
格式化樣式上面只用了HTML的元素,，如果我們希望標(biāo)題能夠居中,，改變字體和顏色，那么就需要對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í) 圖片和超鏈接除了簡單的文本以外，我們還可以在網(wǎng)頁中增加圖片,，為文本增加超鏈接,。圖片的內(nèi)容要放和 app.R同一級的 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='https://www.jianshu.com/p/e2495bbc7bd1', 'here' )),
img(src = '2013053-4dd190b5c709b535.png')
)
)
Shiny支持的Tags在如下兩個鏈接中有介紹 小練習(xí)請還原出如下的網(wǎng)頁布局 
其中Rstuio的圖片下載地址為http://shiny./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元素 為每個tag函數(shù)設(shè)置HTML屬性 通過往 titlePanel, sidebarPanel 或 mainPanel傳入元素填充網(wǎng)頁 在子布局中使用 ,分隔多個元素 增加 www文件夾下的圖片
到目前為止,，我們只使用了HTML的基本元素構(gòu)建用戶界面,，下一節(jié)將會學(xué)習(xí)在網(wǎng)頁中增加一些小工具，例如下拉欄,。 參考
|
