2oingr22, 18:38 Bihante - Adiione widgets de contole Brilhante (/) apartiede Galeria /gallery) Artigas Varticles/) —_Histérias de aplicativos /app-stories/) cm) Inictar /tutorial) Licho 3 Adicionar widgets de controle Esta lico mostrar como adicionar widgets de controle aos seus aplicativos Shiny. O que é um widget? Um elemento da web com o qual seus usuarios podem interagir. Os widgets fornecem uma maneira para seus usuérios enviarem ‘mensagens para aplicativo Shiny. Widgets brilhantes coletam um valor do seu usuario. Quando um usuario alterao widget, o valor também muda. Isso cria oportunidades que exploraremos na Licdo 4 (./lesson4/) Widgets de controle p/127.00:3771 |) Open in omer Basic widgets Buttons Single checkbox Checkbox group _Date input ‘Action © chotee A © Choice 1 Pa Choice 2 = — Date range File input Help text Numeric input sorrcoes [3] Porreet Browse, “ . ‘widget, but it provides an easy ‘ = cour wip. Radio buttons Select box Text input © craic choot ~] § 2 © (caer ean —_— note 3 .o a « — ‘Shiny vem com uma familia de widgets pré-construidos, cada um criado com uma fungao R nomeada de forma transparente. Por exemplo, Shiny fornece uma fungao chamada act ionButton que cria um botdo de acaoe uma funcdo chamada sliderInput que cria uma barra deslizante, (Os widgets Shiny padrao so: fungéo ferramenta actionButton Botao de aco checkboxGrouptnput Um grupo de caixas de selecio itps:shiny studo.com/tutoriabwriten-ttoriallesson3! 182oingr22, 18:38 Bihante - Adiione widgets de contole BPG thante (/) ferramenta ‘checkboxInput Uma dnica caixa de selecio pKpc YiselRndilepa'® Buda DRSRURGFS CARBS Varticies) Historias de aplicativos Vapp-stories/) dateRangeinout Um par decalendérios para selecionar um intervalo de datas fileInput Um assistente de controle de upload de arquivos helpText ‘Texto de ajuda que pode ser adicionado a um formulario de entrada numericinpst ——_ Umcampoparainserir némeros radjoButtons Um conjunto de botées de radio selectInput Uma caixa com op¢ées para selecionar sliderInput Uma barra deslizante subritButton Um botio de envio textInput Um campo parainserr texto Alguns desses widgets so construidos usando o projeto Twitter Bootstrap (http://getbootstrap.com/) , um framework de cédigo aberto popular para construir interfaces de usuario. Adicionando widgets \Vocé pode adicionar widgets a sua pagina da Web da mesma forma que adicionou outros tipos de conteudo HTML na Liggo 2 (../lesson2/) . Para adicionar um widget ao seu aplicativo, coloque uma fungao de widget sidebarPanel em mainPanel seu ui objeto. Cada fungio de widget requer varios argumentos. Os dois primeiros argumentos para cada widget so ‘+ umnome para o widget : 0 usuario nao vera esse nome, mas vocé poder’ usé-lo para acessar o valor do widget. O nome deve ser uma cadeia de caracteres. + alabel : esta etiqueta aparecerd com o widget em seu aplicativo. Deve ser uma string de caracteres, mas pode ser umastring vazia "" Neste exemplo, o nome "aco" eo rétulo é"Acao": actionButton("action", label = "Action’ (Os argumentos restantes variam de widget para widget, dependendo do que o widget precisa para fazer seu trabalho. Eles incluem coisas como valores iniciais, intervalos e incrementos. Vocé pode encontrar os argumentos exatos necessarios para um widget na pagina de ajuda da funcao do widget (por exemplo, ?select Input ). © app. script abaixo faz o aplicativo na foto acima, Altere seu préprio App-1/app.R script para corresponder a ele em seguida, inicie 0 aplicativo( runApp ("App-1") ,selecione Executar aplicativo ou use atalhos) Brinque com cada widget para ter uma ideia do que ele faz. Experimente alterar os valores das funcdes do widget ¢ observe os efeitos. Se vocé estiver interessado no esquema de layout deste aplicativo Shiny, leia a descricdo no guia de layout do aplicativo (/articles/layout-guide-html) Esta licdo no cobrird esse esquema de layout um pouco mais complicado, mas é interessante observar o que ele faz. itps:shiny studo.com/tutoriabwriten-ttoriallesson3! 2182oingr22, 18:38 Br Hthanter (/) °PbeFne ur (itpsdomwnsrupagee™” titlePanel ("Basic widgets"), Iniciar Ytutoria) Galeria /gllery/) Flwidkow( cotum (a, hs("Buttons"), actionButton(action", "Action", bro, br, submi tButton ("Submi colum (a, ha("singte checkbox") , checkboxrnput "checkbox", "Choice A", value = TRUE)), cotuma (3, checkboxroupinput ("checkGroup", ha("checkbox group") , choices = List ("Choice ‘choice "choice 3" = 3), selected = 1)), colum (3, sateInput("date", na("Oate input”), value = "2014-61-81")) dy» FWwidkow( cotuma(a, GateRangeInput("dates", h3("Date range"))), cotuma(3, FileInput("File", h3 ("File input"))) column (3, hacrnelp text"), helpText("Note: help text isn't a true widget,", but it provides an easy way to add text to", "accompany other widgets.")), columa(a, numerscInput (*nun" hs ("Numeric input! value = 1)) » itps:shiny studo.com/tutoriabwriten-ttoriallesson3! Bihante - Adiione widgets de contole Artigas Varticles/) Histérias de aplicativos /app-stories/) 3182oingr22, 18:38 Bihante - Adiione widgets de contole Brithanke (/) apartiede (hitps:A@HHAGGAo com!) Iniciar Ytutorial/) —Galeria\/gallery/) Artigas Varticles/) _Histérias de aplicativos /app-stories/) radiButtons("radio", h3 ("Radio buttons") , choices = List("Choice 1" = 1, "Choice 2" = 2, "choice 3" = 3),selected = 1)), colum (a, selectInput("select", h3("Select box" choices = List("Choice 1" = 1, "Choice . 3), selected colum (3, stiderInput("stidert", ha("stiders") , min = @, max = 100, value ~ 50), sliderInput("stider2", "™, min = @, max = 308, value = ¢(25, 75)) » columa (3, textinput "text", M3C"Text input"), value = "Enter text...")) ) # Define server logic ~ server <= function(input, output) # Run the app shinyapp(ui = ui, server = server) Sua vez Reescreva seu ui paracriara interface do usuario exibida abaixo. Observe que este aplicativo Shiny usa um layout Shiny basico (sem colunas) e contém trés dos widgets mostrados acima. Os outros valores da caixa de selecao so mostrados abaixo da imagem do aplicativo. itps:shiny studo.com/tutoriabwriten-ttoriallesson3! 4820109122, 18:39 Bihante - Adiione widgets de contole Brithante sgensusVis (hitpsviiwarstudiocom/) Iniciar Ytutorial/) —Galeria(/gallery/) Artigas Varticles/) Historias de aplicativos /app-stories/) Create demographic maps with information from the 2010 US Census, Choose a variable to display Percent Wnite selene Oye anon + Range of interest: a o Choose a variable to display ‘Choose a variable to display Percent White 4 Percent Black Percent Hispanic Percent Asian Modelo de resposta Certifique-se de que o seu ui 6 idéntico ao exibido abaixo antes de prosseguir. Vocé usardo script na Li¢do4 (./lesson4/)€ Ligdo 5 (./lesson5/) ,como parte de um aplicativo que visualiza os dados do censo. Em particular, certifique-se de que seu widget de caixa de selegao seja denominado “var" denominado “range”. seu widget deslizante seja Observe também que o widget deslizante tem dois valores, néo um. hitpsshiny studo.com/tutoriawriten-tutoriaVlesson3! 58 R2oingr22, 18:38 Bihante - Adiione widgets de contole Brithantes((/) titLepanet(*eensusvis") , apartrde thitnsydawaveuyiege™? Iniciar tutorial) Galeria gallery) Artigos Varticles/) —_Histérias de aplicativos V/app-stories/) sidebarPanel( helpText("Create demographic maps with information from the 2620 US Census."), selectinput "var", Label = "Choose a variable to display", choices = List("Percent White", "percent Black", Percent Hispanic", v Percent Asia selected = "Percent White stiderInput("range", label = "Range of interest:", min = 8, max = 108, value = (8, 166)) nainPanel() Recapitular E facil adicionar widgets totalmente funcionais ao seuaplicativo Shiny de funcées para criar esses widgets. + Shiny fornece uma fami ‘+ Cada funcao requer um nome e um rétulo. ‘+ Alguns widgets precisam de instrugdes especificas para realizar seus trabalhos. + Vocé adiciona widgets ao seu aplicativo Shiny da mesma forma que adiciona outros tipos de contetido HTML (consulte a Lido 2 (./lesson2/)) Iralém Galeria de Widgets Shiny (http://shiny.rstudio.com/gallery/widget-gallery.html) fornece modelos que vocé pode usar para adicionar widgets rapidamente aos seus aplicativos Shiny. Para usar um modelo, visite a galeria (http://shiny.rstudio.comvgallery/widget-gallery.html) .A galeria exibe cada um dos widgets do Shiny e demonstra como os valores dos widgets mudam em resposta a sua entrada. itps:shiny studo.com/tutoriabwriten-ttoriallesson3! ee20109122, 18:39 Bihante - Adiione widgets de contole Bpartrde (hetpsiwmnstudiocm/) ‘Action button Date input Inictar Kael leria(Qgallecwh.” “Artigas Varticlesi!"""" Historias de aplicativos (/app-stories/) ‘Single checkbox ‘Checkbox group Date range File input Pn Selecione o widget desejado e clique no botdo "Ver cédigo” abaixo do widget. A galeria levara vocé a um aplicativo de exemplo que descreve o widget. Para usar o widget, copie e cole o cédigodo app.R arquivo de exemplo em seu app-R arquivo. Checkbox group checkbox Group gens cheese ‘Soretee tee eet ‘etetes Taos Pat ed ay be eb te me map apig ease i anprseheessraup Na Ligdo 4 (./lesson4/), vocé aprender como conectar widgets a saida reativa, objetos que se atualizam sempre que 0 usuério altera um widget. hitpsshiny studo.com/tutoriawriten-tutoriaVlesson3! 7182oingr22, 18:38 Bihante - Adiione widgets de contole BUM IRB Yfivibds ore este artigo ou quiserciscutir as ideas apresentadas aqui, poste na Comunidade RStudio (httB8:#/eommunity.rstudio.com/c/shiny) . Nossos desenvolvedores monitoram esses féruns e respondem a perguntas BérodiewmentercandultlnirlgUde tpralf) par Falster MRaleaylida ccfNtlentdPatldegas Shiiigterias de aplicativos /app-stories/) Uhetpsiwentiokedin © Copyright 2020 RStudi ne (ntiosiMhtpepiteaalti, itps:shiny studo.com/tutoriabwriten-ttoriallesson3! ae