<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/shiny-application-layouts-exercises-part-10/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.r-exercises.com/2017/05/25/shiny-application-layouts-exercises-part-10/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-10"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a rel="nofollow" href="https://i2.wp.com/www.r-exercises.com/wp-content/uploads/2017/05/time_series_exercises_part4-12.png" target="_blank"><img sizes="(max-width: 150px) 100vw, 150px" src="https://i0.wp.com/www.r-exercises.com/wp-content/uploads/2017/05/time_series_exercises_part4-12-150x150.png?resize=150%2C150" alt="" class="wp-image-5849" data-recalc-dims="1"></a><strong>Shiny Application Layouts – Shiny Themes</strong></p>
<p>In the last part of the series we will check out which themes are available in the <code>shinythemes</code> package. More specifically we will create a demo app with a selector from which you can choose the theme you want.</p>
<p>This part can be useful for you in two ways. </p>
<p>First of all, you can see different ways to enhance the appearance and the utility of your shiny app. </p>
<p>Secondly you can make a revision on what you learnt in <a rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/" target="_blank">“Building Shiny App”</a> series and in this series, as we will build basic shiny staff in order to present it in the proper way.</p>
<p>Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the exercises are available <a rel="nofollow" href="http://r-exercises.com/2017/05/25/shiny-application-layouts-solutions-part-10/" target="_blank">here</a>.</p>
<p><strong>Create the App.</strong></p>
<p>In order to see how themes affect the application components ,we have seen until now, we need to create them. </p>
<p>As we are going to use <code>tags</code> here, a good idea is to use <code>taglList()</code> in order to create our app. <code>TagList()</code> is ideal for users who wish to create their own sets of tags.</p>
<p>Let’s see an example of the skeleton of our application and then create our own step by step before applying to it the theme selector.<br>
#ui.R<br>
<code>tagList(<br>
  navbarPage(<br>
    &quot;Title&quot;,<br>
    tabPanel(&quot;Navbar 1&quot;,<br>
             sidebarPanel(<br>
               sliderInput(&quot;slider&quot;,&quot;Slider input:&quot;, 1, 100, 50),<br>
               tags$h5(&quot;ActionButton:&quot;),<br>
               actionButton(&quot;action&quot;, &quot;Action&quot;)<br>
             ),<br>
             mainPanel(<br>
               tabsetPanel(<br>
                 tabPanel(&quot;Table&quot;,<br>
                          h4(&quot;Table&quot;),<br>
                          tableOutput(&quot;table&quot;)),<br>
                 tabPanel(&quot;VText&quot;,<br>
                          h4(&quot;Verbatim Text&quot;),<br>
                          verbatimTextOutput(&quot;vtxt&quot;)),<br>
                 tabPanel(&quot;Header&quot;,<br>
                          h1(&quot;Header 1&quot;),<br>
                          h2(&quot;Header 2&quot;))<br>
               )<br>
             )<br>
  ),<br>
  tabPanel(&quot;Navbar 2&quot;)<br>
))</code><br>
#server.R<br>
<code>function(input, output) {<br>
  output$vtxt &lt;- renderText({<br>
    paste(input$slider)<br>
  })<br>
  output$table &lt;- renderTable({<br>
  iris
<p> })<br>
}</p>
<p><strong>Exercise 1</strong></p>
<p>Create a UI using tag List with the form of a Navbar Page and name it “Themes”. <strong>HINT</strong>: Use <code>tagList()</code> and <code>navbarPage()</code>.</p>
<p><strong>Exercise 2</strong></p>
<p>Your Navbar Page should have two tab Panels named “Navbar 1” and “Navbar 2”. <strong>HINT</strong>: Use <code>tabPanel()</code>.</p>
<p><strong>Exercise 3</strong></p>
<p>In “Navbar 1” add sidebar and main panel. <strong>HINT</strong>: Use <code>sidebarPanel()</code> and <code>mainPanel()</code>.</p>
<p><strong>Exercise 4</strong></p>
<p>Create three tab panels inside the main panel. Name them “Table”, “Text” and “Header” respectively. <strong>HINT</strong>: Use <code>tabsetPanel()</code> and <code>tabPanel()</code>.</p>
<div>
<aside><img src="http://www.r-exercises.com/2017/05/25/shiny-application-layouts-exercises-part-10/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-10"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a rel="nofollow" href="http://www.r-exercises.com/product/r-shiny-interactive-web-apps/" target="_blank">R Shiny Interactive Web Apps – Next Level Data Visualization</a>. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).</div>
</div>
<p><strong>Exercise 5</strong></p>
<p>In the tab panel “Table” add a table of the <code>iris</code> dataset. Name it “Iris”. <strong>HINT</strong> : Use <code>tableOutput()</code> and <code>renderTable({})</code>.</p>
<p><strong>Exercise 6</strong></p>
<p>In the tab panel “Text” add verbatim Text nad name it “Vtext”. <strong>HINT</strong>: Use <code>verbatimTextOutput()</code>.</p>
<p><strong>Exercise 7</strong></p>
<p>Add a slider and an actionbutton in the sidebar. Connect the slider with the “Text” tab panel. Use tags to name the actionbutton. <strong>HINT</strong>: Use <code>sliderInput()</code>,<code>actionButton()</code>, <code>renderText()</code> and <code>tags</code>.</p>
<p><strong>Exercise 8</strong></p>
<p>In the tab panel “Header” add two headers with size <code>h1</code> and <code>h2</code> respectively.</p>
<p><strong>Shinythemes</strong></p>
<p><strong>Exercise 9</strong></p>
<p>Install and load the package <code>shinythemes</code>.</p>
<p><strong>Exercise 10</strong></p>
<p>Place <code>themeSelector()</code> inside your <code>tagList()</code> and then use different shiny themes to see how they affect all the components you created so far.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a rel="nofollow" href="http://www.r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/" title="Building Shiny App exercises part 4" target="_blank">Building Shiny App exercises part 4 </a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/2017/04/30/shiny-application-layouts-exercises-part-3/" title="Shiny Application Layouts exercises part 3" target="_blank">Shiny Application Layouts exercises part 3 </a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/" title="Building Shiny App exercises part 1" target="_blank">Building Shiny App exercises part 1 </a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/start-here-to-learn-r/" target="_blank">Explore all our (>1000) R exercises</a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/r-courses/" target="_blank">Find an R course using our R Course Finder</a> directory</li>
</ol>
</div>

<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="http://www.r-exercises.com/2017/05/25/shiny-application-layouts-exercises-part-10/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-10"> R-exercises</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/te7esYR-Wtk" height="1"></a></div></code>