Теперь будем работать с созданным в 1 уроке приложением.
Минимальный код, создающий пустое придожение должен состоять из файлов со следующим кодом:
в ui.R:
shinyUI(fluidPage(
))
в server.R:
shinyServer(function(input, output) {
})
Функция fluidPage в скрипте ui.R позволяет создать макет окна, который автоматически подстраивается под окно браузера пользователя. Дальше все функции приложения нужно размещать внутри fluidPage.
Например, скрипт ui.R расположенный ниже создает пользовательский интерфейс, который содержит заглавную панель и макет колонки с боковой и главной панелью. Обратите внимание, что эти элементы размещены внутри функции fluidPage.
# ui.R
shinyUI(fluidPage(
titlePanel("title panel"),
sidebarLayout(
sidebarPanel( "sidebar panel"),
mainPanel("main panel")
)
))
titlePanel и sidebarLayout - два наиболее популярных элемента, которые добавляются в fluidPage. Они сохдают основу приложений Shiny c боковой панелью.
Макет боковой панели (sidebarLayout) всегда содержит два аргумента:
Эти функции размещают содержание либо в боковую либо в главную панель. Боковая панель будет размещена по умолчанию в левой стороне приложения. Их модно перенести в правую сторону путем задания опционального аргумента position = “right”.
# ui.R
shinyUI(fluidPage(
titlePanel("title panel"),
sidebarLayout(position = "right",
sidebarPanel( "sidebar panel"),
mainPanel("main panel")
)
))
titlePanel и sidebarLayout создают основу макета приложения, но можно создать и более сложный макет. Можно использовать navbarPage для того, чтобы добавть приложению многостраничный пользовательский интерфейс, который навигационную панель. Или можно использовать fluidRow и column для создания макета с сектой. Если хотите изучить более подробно макеты приложений - читайте Shiny Application Layout Guide.
Можно добавить содержимое в приложение Shiny путем размещения его внутрь функции *Panel. Например, приложение выше отражает текстовую строку в каждой панели. Выражение “sidebar panel” появляется боковой панели, т.к. мы добавили строку в функцию sidebarPanel. То же верно для текста заголовка главной панели. Добавить больше возможностей в приложение SHiny можно использовать функции HTML тегов. Эти функции соответствуют общим тегам HTML5
p <p> A paragraph of text
h1 <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
Мне пока не удалось полностью совладать с разметкой markdown - таблицы у меня по-прежнему не выравниваются, надеюсь вы мне это великодушно простите
Чтобы создать заголовок нужно 2 элемента:
Например, вы можете создать заголовок первого уровня гласящий “Мой заголовок” с помощью h1(“Мой заголовок”). Если вы запуситие команду на выполнение строке это создаст HTML код.
library(shiny)
h1("МОй заголовок")
## <h1>МОй заголовок</h1>
Тепрь разместим этот элемент в приложении: Вставим h1(“Мой заголовок”) как аркгумент в titlePanel, sidebarPanel или mainPanel Текст появится в соответствующей панели на веб-странице. Можно размеситить множество элементов на одной панели, если разделить их запятой.
Теперь попробуйте это сделать. Новый скрипт ниже использует шесть уровней заголовков. Обновите свой файл ui.R в соответствии со скриптом и обновите приложение. Чтобы обновить приложение можно:
# 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")
)
)
))
Если бы Джоржд Лукас делал приложение на Shiny оно бы выглядело следующим образом
ui.R такого приложения выглядит следующим образом:
# 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 предлагает много теговых функций для форматирования текста. Проще всего описать их на примере.
Вставьте скрипт ui.R, расположенный ниже, в свой файл ui.R. Если приложение Shiny все еще запущено, вы можете обновить окно или веб-страницу, тогда отобразятся изменения. Если приложение закрыто - просто запустите его.
Сравните отобразившееся приложение с обновленным скриптом ui.R чтобы изучить как форматировать текст в приложениях Shiny.
# 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.")
)
)
))
Изображение может усилить впечатление от вашего приложения и помочь пользователям понять содержание. В Shiny предусмотрена функция img для размещения изображения в приложении. Чтобы вставить изображение, задайте в функции img имя файла изображения, которое нужно вставить в приложение как аргумент src (т.е.img(src = “my_image.png”)). Вы должны изложить этот аргумент поскольку img предусматривает ваш вход в HTML тэг и src - это тот тег, который ожидается. Вы также можете включить другие дружественные HTML параметры, такие как высота и ширина. Обратите внимание, что высота и ширина должны быть в пикселях.
img(src = "my_image.png", height = 72, width = 72)
Функция img обращается к вашему файлу изображения в определенное место. Он должен быть в папке с именем www в той же папке, что и скрип приложения ui.R.Shiny обращается к этой папке особым образом. Shiny обращается к любым файлам, размещенным в ней на сайте пользователя, что делает папку www отличным местом для изображений, таблиц стилей и других вещей к которым будет обращаться брайзер для построения web-компоненты вашим приложением SHiny. так что если вы хотите использовать изображение bigorb.png, этот файл должен находится в папке www внутри папки приложения. Вот так будет выглядеть скрип ui.R со вставкой изображения в приложение: Изображение вы можете загрузить отсюда http://shiny.rstudio.com/tutorial/lesson2/www/bigorb.png
# ui.R
shinyUI(fluidPage(
titlePanel("My Shiny App"),
sidebarLayout(
sidebarPanel(),
mainPanel(
img(src="bigorb.png", height = 400, width = 400)
)
)
))
Этот урок посвящен наиболее популярным теговым функциям shiny, но существует еще много функций, которые можно использовать. Более подробно о них вы можете узнать в справочных разделах
Теперь, когда вы знаете о макетах, тегах и HTML разметке, вы можете создать свое прекрасное приложение. Например, такое как изображено на рисунке. Вы всегда можете обращаться к примерам из урока, а также посмотреть код искомого приложения в оригинале урока здесь.
В этом уроке у вас появились новые навыки, вы теперь можете:
Теперь, когда вы можете разместить простое содержимое в пользовательском интерфейсе, давайте посмотрим на то, как вы бы могли разместить более сложный контент, например виджеты. Виджеты - это интерактивные веб-элементы, что ваш пользователь может использовать их для управления приложения. Они являются одним из предметов Урока 3.