成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Shiny進階：Busy Button

seasonley / 2620人閱讀

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

背景

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

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

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

界面增強 
withBusyIndicatorUI <- function(button) {
  id <- button[["attribs"]][["id"]]  # 使用str(actionButton("test", "test"))查看Button的結(jié)構(gòu)，是一個長度為3的list，其中一個元素是名為attribs的list，里面包含id、type和class屬性
  div(
    `data-for-btn` = id, # 為div創(chuàng)建一個attribute，取值為button id，這樣方便CSS Selector對其進行查詢
    button, # 等價于 
    span(
      class = "btn-loading-container",
      hidden(
        strong("loading...", class = "btn-loading-indicator"),,
        icon("check", class = "btn-done-indicator")
      )
    ), # 內(nèi)聯(lián)元素，會跟在button的右側(cè)顯示，初始狀態(tài)為隱藏，用于顯示正在執(zhí)行和執(zhí)行成功
    hidden(
      div(class = "btn-err",
          div(icon("exclamation-circle"),
              tags$b("Error: "),
              span(class = "btn-err-msg")
          )
      )
    ) # 塊級元素，會在button的下側(cè)顯示，初始狀態(tài)為隱藏，用于顯示執(zhí)行錯誤的消息
  )
}
后端處理 
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í)行按鈕點擊后的expr
    value <- expr
    # 顯示執(zhí)行成功
    shinyjs::show(selector = doneEl)
    # 延時兩秒后，隱藏執(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://m.hztianpu.com/yun/83944.html

相關(guān)文章

  • Docker-Shiny使用筆記1

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

    darkerXi 評論0 收藏0

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

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

    seal_de 評論0 收藏0

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

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

    wh469012917 評論0 收藏0

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

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

    alin 評論0 收藏0

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

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

    novo 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<