成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Shiny進(jìn)階：Busy Button

seasonley / 2582人閱讀

摘要：當(dāng)點(diǎn)擊一個(gè)按鈕后，按鈕狀態(tài)轉(zhuǎn)為，同時(shí)顯示處于計(jì)算狀態(tài)計(jì)算成功后，返回執(zhí)行成功額標(biāo)識(shí)計(jì)算失敗時(shí)，返回具體的失敗信息。源代碼的鏈接請點(diǎn)這里本文對這段代碼進(jìn)行詳細(xì)地解讀，需要讀者有一定的和基礎(chǔ)。

背景

在一個(gè)Shiny App中，如果點(diǎn)擊一個(gè)按鈕，往往意味著一些R代碼會(huì)被執(zhí)行。如果這段代碼執(zhí)行時(shí)間很短，用戶體驗(yàn)不會(huì)受到影響；如果這段代碼執(zhí)行時(shí)間很長，界面上如果不提供給用戶一些即時(shí)的反饋，就會(huì)讓用戶感到困惑。

本文從Github上找到了作者daattali的一個(gè)作品，專門用來提升長時(shí)運(yùn)算按鈕的點(diǎn)擊體驗(yàn)。當(dāng)點(diǎn)擊一個(gè)按鈕后，按鈕狀態(tài)轉(zhuǎn)為disabled，同時(shí)顯示處于計(jì)算狀態(tài)；計(jì)算成功后，返回執(zhí)行成功額標(biāo)識(shí)；計(jì)算失敗時(shí)，返回具體的失敗信息。源代碼的鏈接請點(diǎn)這里

本文對這段代碼進(jìn)行詳細(xì)地解讀，需要讀者有一定的HTML和shinyjs基礎(chǔ)。

界面增強(qiáng) 
withBusyIndicatorUI <- function(button) {
  id <- button[["attribs"]][["id"]]  # 使用str(actionButton("test", "test"))查看Button的結(jié)構(gòu)，是一個(gè)長度為3的list，其中一個(gè)元素是名為attribs的list，里面包含id、type和class屬性
  div(
    `data-for-btn` = id, # 為div創(chuàng)建一個(gè)attribute，取值為button id，這樣方便CSS Selector對其進(jìn)行查詢
    button, # 等價(jià)于 
    span(
      class = "btn-loading-container",
      hidden(
        strong("loading...", class = "btn-loading-indicator"),,
        icon("check", class = "btn-done-indicator")
      )
    ), # 內(nèi)聯(lián)元素，會(huì)跟在button的右側(cè)顯示，初始狀態(tài)為隱藏，用于顯示正在執(zhí)行和執(zhí)行成功
    hidden(
      div(class = "btn-err",
          div(icon("exclamation-circle"),
              tags$b("Error: "),
              span(class = "btn-err-msg")
          )
      )
    ) # 塊級(jí)元素，會(huì)在button的下側(cè)顯示，初始狀態(tài)為隱藏，用于顯示執(zhí)行錯(cuò)誤的消息
  )
}
后端處理 
withBusyIndicatorServer <- function(buttonId, expr) {
  # UX stuff: show the "busy" message, hide the other messages, disable the button
  # 構(gòu)造CSS選擇器，根據(jù)attribute定位按鈕，根據(jù)class獲取按鈕所處的狀態(tài)
  loadingEl <- sprintf("[data-for-btn=%s] .btn-loading-indicator", buttonId) 
  doneEl <- sprintf("[data-for-btn=%s] .btn-done-indicator", buttonId)
  errEl <- sprintf("[data-for-btn=%s] .btn-err", buttonId)
  # 使按鈕失效
  shinyjs::disable(buttonId)
  # 顯示正在執(zhí)行部分
  shinyjs::show(selector = loadingEl)
  # 隱藏執(zhí)行成功部分
  shinyjs::hide(selector = doneEl)
  # 隱藏執(zhí)行失敗部分
  shinyjs::hide(selector = errEl)
  # 執(zhí)行完成后需要調(diào)用的函數(shù)：使按鈕有效，隱藏正在執(zhí)行部分
  on.exit({
    shinyjs::enable(buttonId)
    shinyjs::hide(selector = loadingEl)
  })
  
  # Try to run the code when the button is clicked and show an error message if
  # an error occurs or a success message if it completes
  tryCatch({
    # 執(zhí)行按鈕點(diǎn)擊后的expr
    value <- expr
    # 顯示執(zhí)行成功
    shinyjs::show(selector = doneEl)
    # 延時(shí)兩秒后，隱藏執(zhí)行成功
    shinyjs::delay(2000, shinyjs::hide(selector = doneEl, anim = TRUE, animType = "fade",
                     time = 0.5))
    # 返回執(zhí)行結(jié)果
    value
  }, error = function(err) { errorFunc(err, buttonId) })
}

errorFunc <- function(err, buttonId) {
  errEl <- sprintf("[data-for-btn=%s] .btn-err", buttonId)
  errElMsg <- sprintf("[data-for-btn=%s] .btn-err-msg", buttonId)
  errMessage <- err$message
  shinyjs::html(html = errMessage, selector = errElMsg)
  shinyjs::show(selector = errEl, anim = TRUE, animType = "fade")
}
Demo 
library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),
  tags$style(appCSS),
  selectInput("select", "Select an option",
              c("This one is okay" = "ok",
                "This will give an error" = "error")),
  
  # Wrap the button in the function `withBusyIndicatorUI()`
  withBusyIndicatorUI(
    actionButton(
      "uploadFilesBtn",
      "Process data",
      class = "btn-primary"
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$uploadFilesBtn, {
    # When the button is clicked, wrap the code in a call to `withBusyIndicatorServer()`
    withBusyIndicatorServer("uploadFilesBtn", {
      Sys.sleep(1)
      if (input$select == "error") {
        stop("choose another option")
      }
    })
  })
}

shinyApp(ui = ui, server = server)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83944.html

相關(guān)文章

  • Docker-Shiny使用筆記1

    摘要：之前只是聽說是一個(gè)容器技術(shù)，微型虛擬機(jī)，然后在這之前并沒有接觸過，所以不得不硬著頭皮看英文的幫助文檔，借助的這個(gè)好用來做筆記，充當(dāng)專欄文章。英文好的同學(xué)可以按照這個(gè)教程來下載問題我默認(rèn)看這篇文章的都是黨。。 寫在前面的話 在HarryZhu寫的系列的docker文章后，我也開始心動(dòng)了，準(zhǔn)備嘗試一下。周末在家下了半天，終于下載成功了，然后也跑起來。Docker之前只是聽說是一個(gè)容器技術(shù)，...

    darkerXi 評(píng)論0 收藏0

  • [原]打造數(shù)據(jù)產(chǎn)品的快速原型：Shiny的Docker之旅

    摘要：使得非傳統(tǒng)程序員的使用者不必依賴于前端后端工程師就可以自己依照業(yè)務(wù)完成一些簡單的數(shù)據(jù)可視化工作，快速驗(yàn)證想法的可靠性。本文以上的的新主機(jī)為例。 概述 本文將介紹如何通過Docker+Shiny-Server技術(shù)極速打造Web開發(fā)，并通過實(shí)戰(zhàn)案例進(jìn)行演示。 為什么使用Shiny Shiny是R中的一種Web開發(fā)框架，使得R的使用者不必太了解css、js只需要了解一些html的知識(shí)就可以快...

    seal_de 評(píng)論0 收藏0

  • [原]文檔定義應(yīng)用：數(shù)據(jù)科學(xué)的文檔革命

    摘要：對于數(shù)據(jù)科學(xué)的研究可以說已經(jīng)是本文我將介紹如何以文檔定義應(yīng)用的方式成為數(shù)據(jù)科學(xué)中的標(biāo)準(zhǔn)交付。參考前文解密的數(shù)據(jù)科學(xué)部門如果構(gòu)建知識(shí)倉庫，作為一個(gè)謝大大的死忠，我很自然選擇了作為我文檔輸出的首選工具。 showImg(https://segmentfault.com/img/remote/1460000006760433?w=423&h=426); 概述 隨著近年來，Rstudio 通過...

    wh469012917 評(píng)論0 收藏0

  • [原] 容器定義應(yīng)用：數(shù)據(jù)科學(xué)的容器革命

    摘要：概述隨著容器化技術(shù)的興起，數(shù)據(jù)科學(xué)現(xiàn)在最大的一場運(yùn)動(dòng)已經(jīng)不是由一個(gè)新的算法或者統(tǒng)計(jì)方法發(fā)起的了，而是來自的容器化技術(shù)。本文將介紹利用容器技術(shù)如何加速數(shù)據(jù)科學(xué)在生產(chǎn)環(huán)境中的實(shí)際應(yīng)用。 showImg(https://segmentfault.com//img/bVxzYL); 概述 隨著容器化技術(shù)的興起，數(shù)據(jù)科學(xué)現(xiàn)在最大的一場運(yùn)動(dòng)已經(jīng)不是由一個(gè)新的算法或者統(tǒng)計(jì)方法發(fā)起的了，而是來自Doc...

    alin 評(píng)論0 收藏0

  • [原] 容器定義應(yīng)用：數(shù)據(jù)科學(xué)的容器革命

    摘要：概述隨著容器化技術(shù)的興起，數(shù)據(jù)科學(xué)現(xiàn)在最大的一場運(yùn)動(dòng)已經(jīng)不是由一個(gè)新的算法或者統(tǒng)計(jì)方法發(fā)起的了，而是來自的容器化技術(shù)。本文將介紹利用容器技術(shù)如何加速數(shù)據(jù)科學(xué)在生產(chǎn)環(huán)境中的實(shí)際應(yīng)用。 showImg(https://segmentfault.com//img/bVxzYL); 概述 隨著容器化技術(shù)的興起，數(shù)據(jù)科學(xué)現(xiàn)在最大的一場運(yùn)動(dòng)已經(jīng)不是由一個(gè)新的算法或者統(tǒng)計(jì)方法發(fā)起的了，而是來自Doc...

    novo 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<