Date Редакция Категория comp Теги R / Shiny / учебник

Перевод-пересказ руководства.

Теперь, когда вы в общих чертах представляете себе как устроено приложение, пришла пора создать собственное приложение Shiny.

Этот урок покажет, как создать интерфейс пользователя для вашего приложения. Вы узнаете, как создать макет интерфейса, а затем добавить в него текст, изображения и другие элементы HTML.

В качестве основы будем использовать приложение App-1, созданное нами на Уроке 1. Для начала откроем файлы server.R и ui.R и удалим из них всё лишнее, чтобы остались только следующие строки:

ui.R

shinyUI(fluidPage(
))

server.R

shinyServer(function(input, output) {
})

Оставшийся код — это тот минимум, который необходим для создания Shiny-приложения. Результатом его выполнения будет ничего не умеющее приложение с пустым интерфейсом пользователя. Оно и станет отправной точкой на этом уроке.

Макет

Скрипт ui.R использует функцию fluidPage для создания макета окна, которое автоматически подстраивается под окно браузера пользователя. Все остальные функции вашего приложения нужно размещать внутри fluidPage.

Например, скрипт ui.R расположенный ниже создаёт пользовательский интерфейс, который состоит из панели заголовка (title panel) и макета колонки с двумя панелями: боковой (sidebarPanel) и главной (mainPanel). Обратите внимание, что эти элементы размещены внутри функции fluidPage.

# ui.R

shinyUI(fluidPage(
  titlePanel("title panel"),

  sidebarLayout(
    sidebarPanel( "sidebar panel"),
    mainPanel("main panel")
  )
))

sidebar-layout1.png

titlePanel и sidebarLayout — два самых популярных элемента, добавляемых во fluidPage. Они создают основу приложений Shiny c боковой панелью.

Функция sidebarLayout всегда принимает два аргумента:

  • вывод функции sidebarPanel;
  • вывод функции mainPanel.

Эти функции помещают данные (контент) либо в боковую либо в главную панель. Боковая панель приложения по умолчанию размещается слева, но вы можете перенести направо, указав аргумент position = "right".

# ui.R

shinyUI(fluidPage(
  titlePanel("title panel"),

  sidebarLayout(position = "right",
    sidebarPanel( "sidebar panel"),
    mainPanel("main panel")
  )
))

sidebar-layout2.png

titlePanel и sidebarLayout создают основу макета типичного Shiny-приложения, но можно создать и более сложный макет. Вы можете использовать navbarPage, чтобы создать многостраничный интерфейс, включающий панель навигации (navigation bar). Или можно использовать функции fluidRow и column для создания макета с сеткой. Если вы захотите более подробно изучить создание макетов приложений, читайте Shiny Application Layout Guide. В данном руководстве мы ограничимся использованием sidebarLayout.

HTML-содержимое

Вы можете добавить содержимое в приложение Shiny, размещая его внутри функции *Panel (Существует семейство однотипных функций, имена которых заканчиваются на Panel. Мы будем использовать обозначение со "звёздочкой" везде, где пойдёт речь о таких семействах). Например, приложение выше показывает в каждой панели строку текста. Фраза "sidebar panel" появляется боковой панели, т. к. мы добавили строку ней в функцию sidebarPanel:

sidebarPanel("sidebar panel")

То же самое верно и для текста заголовка главной панели.

Добавить больше возможностей по отображению содержимого в приложение можно с помощью функций Shiny, реализующих теги HTML. Имена этих функций соответствуют именам тегов HTML5. Перечислим некоторые из них:

Функция Shiny Эквивалент HTML5 Создает
p <p> A paragraph of text
h1 `

A first level header
h2 <h2> A second level header
h3 <h3> A third level header
h4 <h4> A fourth level header
h5 <h5> A fifth level header
h6 <h6> A sixth level header
a <a> A hyper link
br <br> A line break (e.g. a blank line)
div <div> A division of text with a uniform style
span <span> An in-line division of text with a uniform style
pre <pre> Text ‘as is’ in a fixed width font
code <code> A formatted block of code
img <img> An image
strong <strong> Bold text
em <em> Italicized text
HTML Directly passes a character string as HTML code

Заголовки

Чтобы создать заголовок нужно:

  • выбрать функцию заголовка (например, h1 или h5);
  • передать ей текст заголовка.

Например, вы можете создать заголовок первого уровня "Мой заголовок" с помощью h1("Мой заголовок"). Если вы запустите эту команду в командной строке, она создаст HTML код.

> library(shiny)
> h1("My title")

<``h1``>My title<``/h1``>

Чтобы поместить этот элемент в своё приложение:

  • вставьте h1("My title") как аргумент в titlePanel, sidebarPanel или mainPanel.

Текст появится в соответствующей панели веб-страницы. Можно разместить множество элементов на одной панели, если разделить их запятой.

Теперь попробуйте сделать это. Приведенный ниже скрипт использует шесть уровней заголовков. Измените соответствующим образом свой файл ui.R и перезапустите приложение. Напомним, что перезапустить приложение Shiny можно одним из следующих способов:

  • запустив на выполнение команду runApp("App-1");
  • нажав кнопку Run App;
  • использовав комбинацию клавиш Ctrl+Shift+Enter.
# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      h1("First level title"),
      h2("Second level title"),
      h3("Third level title"),
      h4("Fourth level title"),
      h5("Fifth level title"),
      h6("Sixth level title")
    )
  )
))

Теперь ваше приложение будет выглядеть так:

headers.png

Если бы Джоржд Лукас делал своё первое приложение на Shiny, то оно могло бы выглядеть так:

lucas.png

Этого эффекта мы добились с помощью выравнивания по центру с помощью атрибута align = "center", например так: h6("Episode IV", align = "center"). Здесь важно, что каждый атрибут HTML-тега можно передать в качестве аргумента в соответствующую этому тегу Shiny-функцию.

Если вы не знакомы с атрибутами тегов HTML, обратитесь к одному из многочисленных онлайновых ресурсов по HTML, например, к w3schools.

Вот код, который создаёт интерфейс, похожий на картинку из "Звёздных войн":

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
        h6("Episode IV", align = "center"),
        h6("A NEW HOPE", align = "center"),
        h5("It is a period of civil war.", align = "center"),
        h4("Rebel spaceships, striking", align = "center"),
        h3("from a hidden base, have won", align = "center"),
        h2("their first victory against the", align = "center"),
        h1("evil Galactic Empire.")
    )
  )
))

Форматирование текста

Shiny предлагает множество функций для форматирования текста. Как и в случае с заголовками, каждая такая функция соотвествует определенному элементу HTML (см. таблицу выше). Проще всего описать работу этих функций на примере.

Вставьте скрипт ui.R, приведенный ниже, в файл ui.R вашего приложения. Если оно сейчас запущено, обновите окно или веб-страницу чтобы отобразить произошедшие изменения. Если приложение закрыто — просто запустите его.

Чтобы разобраться как форматировать текст в приложениях Shiny, сравните текст, отображаемый приложением, с кодом скрипта ui.R.

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      p("p creates a paragraph of text."),
      p("A new p() command starts a new paragraph. Supply a style attribute to change the format of the entire paragraph.", style = "font-family: 'times'; font-si16pt"),
      strong("strong() makes bold text."),
      em("em() creates italicized (i.e, emphasized) text."),
      br(),
      code("code displays your text similar to computer code"),
      div("div creates segments of text with a similar style. This division of text is all blue because I passed the argument 'style = color:blue' to div", style = "color:blue"),
      br(),
      p("span does the same thing as div, but it works with",
        span("groups of words", style = "color:blue"),
        "that appear inside a paragraph.")
    )
  )
))

formatting.png

Изображения

Изображения могут усилить впечатление от вашего приложения и помочь пользователям понять содержащиеся в нём данные. Для размещения файлов изображений в приложениях Shiny существует функция img.

Чтобы вставить изображение, задайте в функции img имя файла изображения в качестве значения аргумента src, например,

img(src = "my_image.png")

Обратите внимание на то, что нужно обязательно указать имя аргумента (src), поскольку функция img передаёт его в соответствующий HTML-элемент, а тот имеет и другие атрибуты, кроме src. Функция img поддерживает их все. Например, вы можете задать высоту (height) и ширину (width) изображения. Обе эти величины должны быть указаны в пикселях.

img(src = "my_image.png", height = 72, width = 72)

Функция img предполагает, что файл изображения хранится в папке с именем www внутри каталога приложения. Вообще, в папку www складывается всё, что нужно Shiny для создания веб-интерфейса приложения: изображения, каскадные таблицы стилей и т. п.

Так что если вы хотите использовать изображение bigorb.png, каталог вашего приложения App-1 должен выглядеть так:

bigorb2.png

При таком расположении файлов скрипт ui.R

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(),
    mainPanel(
      img(src="bigorb.png", height = 400, width = 400)
    )
  )
))

создаст приложение:

bigorb1.png

Скачайте файл bigorb.png отсюда и попробуйте сделать это приложение сами.

Другие теги

Этот урок был посвящён наиболее популярным "теговым" функциям Shiny, но существует ещё много подобных функций. Более подробно о них вы можете узнать в справочных разделах Customize your UI with HTML и Shiny HTML Tags Glossary.

Ваша очередь

Теперь, когда вы познакомились с функциями для создания макета, HTML-разметки и добавления изображений, вы сможете создать привлекательный интерфейс для своего приложения. Проверьте, насколько хорошо вы разобрались с использованием этих функций, создав интерфейс следующего приложения:

my-shiny-app.png

Для его разработки используйте рассмотренные выше примеры, а затем проверьте приложение в работе.

Наш вариант скрипта ui.R можно увидеть в разделе "Ответы", нажав на кнопку. Но не спешите копировать его, попробуйте сначала разобраться сами.

Ответы

# ui.R

shinyUI(fluidPage(
  titlePanel("My Shiny App"),
  sidebarLayout(
    sidebarPanel(
      h2("Installation"),
      p("Shiny is available on CRAN, so you can install it in the usual way from your R console:"),
      code('install.packages("shiny")'),
      br(),
      br(),
      br(),
      br(),
      img(src = "bigorb.png", height = 72, width = 72),
      "shiny is a product of ", 
        span("RStudio", style = "color:blue")
    ),
    mainPanel(
      h1("Introducing Shiny"),
      p("Shiny is a new package from RStudio that makes it ", 
        em("incredibly easy"), 
        " to build interactive web applications with R."),
      br(),
      p("For an introduction and live examples, visit the ",
        a("Shiny homepage.", 
          href = "http://www.rstudio.com/shiny")),
      br(),
      h2("Features"),
      p("* Build useful web applications with only a few lines of code—no JavaScript required."),
      p("* Shiny applications are automatically “live” in the same way that ", 
        strong("spreadsheets"),
        " are live. Outputs change instantly as users modify inputs, without requiring a reload of the browser.")
    )
  )
))

Резюме

С помощью ваших новых навыков вы сможете:

  • создавать пользовательский интерфейс с помощью fluidPage, titlePanel и sidebarLayout;
  • создавать HTML-элементы с помощью теговых функций Shiny;
  • устанавливать атрибуты тегов HTML для каждой теговой функции;
  • добавлять на веб-страницу приложения элементы HTML, помещая их в titlePanel, sidebarPanel или mainPanel;
  • добавлять на любую панель по нескольку элементов, разделяя их запятой;
  • добавлять в приложение изображение из папки www с помощью функции img.

Теперь, когда вы можете поместить в своё приложение простейший контент, давайте рассмотрим как размещать в нём более сложные виды контента, например виджеты. Виджеты — это интерактивные веб-элементы, которые позволят пользователю вашего приложения управлять его поведением. Виджеты являются одной из тем Урока 3.



Комментарии

comments powered by Disqus