Creating UIs from plain HTML

UIs from plain HTML, require firstly that the HTML file is stored in the www folder and secondly, that the file is named as index.html. Naturally, creating a whole interface in HTML without any of Shiny's UI functionality requires considerable experience in web programming. For this reason, in this section, we are going to reproduce Example 1 only, but with an HTML file instead of an UI.R file.

In order to do this, create a copy of Example 1 folder as follows:

  1. Copy the following code and paste it in a text editor. You are strongly recommended to use text editors that support syntax highlighting. Probably, the best option is Notepad++, which is accessible from https://notepad-plus-plus.org/. Save the file as index.html in the www folder that will be created in step 2.
  2. Inside the new folder, create the www folder:
    <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.11.0];shiny[0.11.1];bootstrap[3.3.1]</script>
<script src="shared/json2-min.js"></script>
<script src="shared/jquery.min.js"></script>
<link href="shared/shiny.css" rel="stylesheet" />
<script src="shared/shiny.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="shared/bootstrap/js/bootstrap.min.js"></script>
<script src="shared/bootstrap/shim/html5shiv.min.js"></script>
<script src="shared/bootstrap/shim/respond.min.js"></script>

  <title>Example 1</title>
</head>
<body>
  <div class="container-fluid">
    <h2>Example 1</h2>
    <div class="row">
      <div class="col-sm-4">
        <form class="well">
          <div class="form-group shiny-input-container">
            <label for="number">Insert a number:</label>
            <input id="number" type="number" class="form-control" value="30" min="1" max="50"/>
          </div>
        </form>
      </div>
      <div class="col-sm-8">
        <div id="plot" class="shiny-plot-output" style="width: 100% ; height: 400px"></div>
      </div>
    </div>
  </div>
</body>
</html>
  3. Delete the UI.R file.
  4. Run the application by any of the methods mentioned here. You should see the same application as in Example 1.

This is intended to be a mere introduction of how the frontend in Shiny applications can be eventually fully customized by creating the HTML document. Although this might seem simple, creating an application's frontend in HTML is probably a task for experienced web developers.

At this point, there seems to be a complex dichotomy: whether we take Shiny's built-in user interfaces or we create a fully customized one by coding it in HTML from scratch. Fortunately, the Shiny package provides an intermediate solution with the tags object, which provides the possibility of customizing the frontend by adding only pieces of HTML, JavaScript, and so on inside UI.R, that is, without needing to create the whole HTML document from scratch. In the following section, it will be explained how to do this.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset