-
Notifications
You must be signed in to change notification settings - Fork 0
/
r_shiny_test.Rmd
131 lines (76 loc) · 5.7 KB
/
r_shiny_test.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
---
title: "R powered web applications with Shiny"
output:
html_document:
toc: true
selfcontained: false
---
<style>
.iframeapp{
width: 100%;
height: 450px;
border: 1px solid #D5D8D5;
}
</style>
```{r, eval=TRUE, echo=FALSE, warning = FALSE, message=FALSE}
library(shiny)
library(DT)
library(leaflet)
library(htmlwidgets)
```
Shiny is an R package that can help you create data-driven, interactive web applications with R. With Shiny, you use the open-source R language to create a web application and Shiny compiles your code into the HTML, CSS and JavaScript needed to display your application on the web. Shiny, created by Joe Cheng and the team at RStudio, can be used to create a static web page with various widgets but more importantly you can use Shiny to create an interactive web application capable of executing R code in the background.
Creating and running simple web applications is relatively easy and there are great resources for doing this. But when you want more control of the application functionality understanding the key concepts is challenging. To help you navigate the creation of satisfying Shiny applications we've assembled example code below that demonstrates some of the key concepts.
In order to run Shiny and follow the code on this post you should make sure you have RStudio software and the `shiny` R package. In creating this post I'm using version `r packageVersion("shiny")`. Additional details on package versions are at the end.
## Shiny at it's simplest
In its simplest form, a Shiny application requires a server function to do the calculations and a user interface that the user interacts with. Below we have the simplest possible shiny app -- it shows nothing and does nothing but you can use the `shinyApp` function to launch the app and, voila -- a functioning web application created entirely in R.
For simplicity, we're creating our Shiny apps in this blog post as single file apps. In the past, Shiny required that you create two separate files (server.R and ui.R) but as of version 0.10.2 Shiny supports [single file applications](http://shiny.rstudio.com/articles/single-file.html) with both server and UI code in the same file. With bigger apps, of course, you will likely have far more files but for now we will create single page apps.
In earlier versions of `shiny` the user interface required using a ui handler function (`shinyUI`) but this is no longer required. The `fluidPage` function defines the kind of layout we will be using -- fluid refers to the ability of your app to re-structure on the fly to support many screen dimensions. If you want to rigidly structure your page you can use `fixedPage` instead.
Depending on what you want to do with your app, the `session` argument is not required but since you need it for some tasks we will include it.
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#code0">Code 0</a></li>
<li><a data-toggle="tab" href="#app0">App 0</a></li>
</ul>
<div class="tab-content">
<div id="code0" class="tab-pane fade in active">
```{r, eval=FALSE, code=readLines("blog_app0/app.R")}
```
</div>
<div id="app0" class="tab-pane fade">
<iFrame class="iframeapp" src="https://spatial.shinyapps.io/blog_app0/"></iFrame>
</div>
</div>
# Set up your user interface (ui)
## Layout your user interface
Under the hood, Shiny uses Twitter Bootstrap, a commonly used framework for designing webpages, to scaffold and provide some miminal styling. When you run the function `shinyApp()` your R code is essentially compiled to web-friendly languages HTML, JavaScript and CSS. You can take advantage of Shiny page template functions to layout your app or you can essentially design your app from scratch. There is also a brand new option discussed below to use what are called htmlTemplates but here we will focus on the more commonly used approach.
### Using predefined layout functions
As mentioned above, we will use a fluid design. For this example, we will take advantage of a Shiny template using the function `sidebarLayout` which creates a page with a sidebar and a main panel. You can review other layout options [here](http://shiny.rstudio.com/articles/layout-guide.html). In this example we're creating a `sidebarPanel` and `mainPanel` and not much else.
#### Example app: Basic user interface
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#code1">Code 1</a></li>
<li><a data-toggle="tab" href="#app1">App 1</a></li>
</ul>
<div class="tab-content">
<div id="code1" class="tab-pane fade in active">
```{r, eval=FALSE, code=readLines("blog_app1/app.R")}
```
</div>
<div id="app1" class="tab-pane fade">
<iFrame class="iframeapp" src="https://spatial.shinyapps.io/blog_app1/"></iFrame>
</div>
</div>
### Adding elements with tags$xxx
It's easy to add HTML elements to your Shiny app using [HTML tags](http://shiny.rstudio.com/articles/tag-glossary.html). There are more than 100 HTML elements you can add to your page using the syntax `tags$OBJECT()` as in `tags$p()` for a paragraph or `tags$blockquote()`. For a limited number of these tags, the most common ones, there are helper functions that allow you to skip the `tags$` so, for example, a first tier header can be created with `h1()` -- but be careful, not all tags permit this.
#### Example app: using HTML tags to layout your app {.tabset}
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#code2">Code 2</a></li>
<li><a data-toggle="tab" href="#app2">App 2</a></li>
</ul>
<div class="tab-content">
<div id="code2" class="tab-pane fade in active">
```{r, eval=FALSE, code=readLines("blog_app2/app.R")}
```
</div>
<div id="app2" class="tab-pane fade">
<iFrame class="iframeapp" src="https://spatial.shinyapps.io/blog_app2/"></iFrame>
</div>
</div>