3.2 UI

UI is de facto an HTML file.

In building ui.R file, what we really do is to construct an HTML file with R functions. To see so by typing fluidPage() in the R console and you’ll see this function returns an HTML div tag <div class="container-fluid"></div>. So of course you can build your entire UI with HTML.

By default, Shiny uses bootstrap(has nothing to do with bootstrap method in statistics), the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

3.2.1 HTML tags

shiny::tags is a list of 110 functions. Each function builds a specific HTML tag. If you are familiar with HTML, you will recognize these tags by their names.

You can build UI by using HTML tags. Use names(tags) to see all available tags. For more information please look at Customize your UI with HTML.

Most of the panel functions return div tags with some class attributes defined in Bootstrap. For example, if you type wellPanel in the R console, you’ll get <div class="well"></div>, which is the well class in Bootstrap.

Layouts

Layout functions are used to organize panels and elements into an existing layout.

3.2.3 Inputs (control widgets)

Wigets are web elements that users can interact with. Widgets provide a way for your users to send messages to the Shiny app. Shiny widgets collect values from the user. When a user changes the widget, the value will change as well.

In Exercise 3, we used HTML code to add a numeric input (a kind of ‘widget’) to the sidebar panel, but over using HTML code will make the code quite messy and hard to manage for large projects. Shiny comes with a family of pre-built widgets, each created with a transparently named R function, which makes the widgets easier to create and look better(using bootstrap style).