drab下載 - drab源代碼下載

有關實時演示和描述，請參見演示頁面。

單調 - 從服務器端訪問瀏覽器用戶界面。不再需要JavaScript編程！

DRAB將Phoenix框架擴展到瀏覽器上的“遙控器” UI。這個想法是將所有用戶界面邏輯移至服務器端，以消除JavaScript和Ajax調用。

預告片

客戶端：

 < div class =" progress " >
  < div class =" progress-bar <%= @progress_bar_class %> " role =" progressbar " @style.width = < %= " #{@bar_width}% " % > >
    < %= "#{@bar_width}%" % >
  </ div >
</ div >
< button class =" btn btn-primary " drab-click =" perform_long_process " >
  < %= @long_process_button_text % >
</ button >

服務器端：

 defhandler perform_long_process ( socket , _sender ) do
  poke socket , progress_bar_class: "progress-bar-danger" , long_process_button_text: "Processing..."

  steps = :rand . uniform ( 100 )
  for i <- 1 .. steps do
    Process . sleep ( :rand . uniform ( 500 ) ) #simulate real work
    poke socket , bar_width: Float . round ( i * 100 / steps , 2 )
  end

  poke socket , progress_bar_class: "progress-bar-success" , long_process_button_text: "Click me to restart"
end

先決條件

Elixir〜> 1.6.0（請參閱安裝指南）
鳳凰〜> 1.2（請參閱安裝指南）

瀏覽器要求

這具有與Phoenix.sockets相同的要求。在此之上，這取決於您調用的JavaScript或您在單調上使用的其他潛在工具。

安裝

首先，您需要有一個Phoenix應用程序，在其上您將安裝單調。如果這是一個標準應用，則使用mix phx.new生成，則可以使用單調安裝程序使其以一個簡單的步驟運行。否則，請參見下面的手動安裝部分。

在Web應用程序中的主文件夾中編輯mix.exs （如果您在雨傘下有多個應用程序，則是_web結尾的一個）。找到函數deps （搜索def deps字符串）。將條目{:drab, "~> 0.10.0"}添加到列表中。別忘了逗號！

 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end

下載並安裝軟件包：

$ mix deps.get

轉到應用程序目錄（如果您的Phoenix Web應用程序都在傘下，請去那裡）並運行mix drab.install 。

 bash% mix drab.install
Checking prerequisites for :my_app
  lib/my_app_web/templates/layout/app.html.eex
  lib/my_app_web/channels/user_socket.ex
  config/config.exs
  config/dev.exs
The installer is going to modify those files. OK to proceed? [Yn] Y
Drab has been successfully installed in your Phoenix application.

Now it is time to create your first commander, for example, for PageController:

    mix drab.gen.commander Page

恭喜！您已經安裝了單調的單調，可以與自己的指揮官一起進行。

請注意，單調僅在具有相應指揮官的頁面上運行。

用法

所有單調功能（回調，事件處理程序）都放置在稱為Commander模塊中。將其視為實時頁面的控制器。指揮官應放置在web/commanders目錄中。

要啟用使用相應控制器生成的頁面上的單調，您需要創建一個雙指揮官。例如，對於MyApp.PageController指揮官應命名為MyApp.PageCommander 。

記住差異： controller呈現頁面，而commander在實時頁面上工作。

生成頁面指揮官。指揮官名稱應與控制器相對應，因此PageController應該具有PageCommander ：

$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex

在控制器的索引操作中添加@welcome_text分配到render/3 ，將來使用：

 defmodule MyApp.PageController do
  use Example.Web , :controller

  def index ( conn , _params ) do
    render conn , "index.html" , welcome_text: "Welcome to Phoenix!"
  end
end

從web/templates/page/index.html.eex重命名模板為index.html.drab
編輯模板web/templates/page/index.html.drab ，然後將固定的歡迎文本更改為分配：

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >

編輯Commander文件web/commanders/page_commander.ex ，然後添加一些真實的操作 - onload回調，當瀏覽器連接到DLAB服務器時，該回調會發射：

 defmodule DrabExample.PageCommander do
  use Drab.Commander

  onload :page_loaded

  # Drab Callbacks
  def page_loaded ( socket ) do
    poke socket , welcome_text: "This page has been drabbed"
    set_prop socket , "div.jumbotron p.lead" ,
      innerHTML: "Please visit <a href='https://tg.pl/drab'>Drab</a> page for more"
  end
end

poke/2功能更新分配。 set_prop/3更新DOM對象的任何屬性。一切都是現場直播的，而無需重新加載頁面。

運行iex -S mix phoenix.server 。轉到http://localhost:4000以查看更改的網頁。現在，您可以直接從iex直播此頁面！觀察當您的瀏覽器連接到頁面時給出的指令：

 [ debug ]
    Started Drab for same_path :/ , handling events in DrabExample.PageCommander
    You may debug Drab functions in IEx by copy / paste the following:
import Drab . { Core , Element , Live }
socket = Drab . get_socket ( pid ( "0.653.0" ) )

    Examples :
socket |> exec_js ( "alert('hello from IEx!')" )
socket |> poke ( count: 42 )

按照指示，複製並粘貼這兩行，並查看自己如何遠程控制顯示的頁面：

 iex > alert socket , "Alert title" , "Do you like modals?" , buttons: [ ok: "A juści" , cancel: "Poniechaj" ]
{ :ok , % { } }

iex > poke socket , welcome_text: "WOW, this is nice"
% Phoenix.Socket { ... }

iex > query socket , "div.jumbotron h2" , :innerText
{ :ok ,
 % { "[drab-id='425d4f73-9c14-4189-992b-41539377c9eb']" => % { "innerText" => "WOW, this is nice" } } }

iex > set_style socket , "div.jumbotron" , backgroundColor: "red"
{ :ok , 1 }

上面的示例可在此處提供

現在什麼？

請訪問演示頁面以獲取實時演示和更多描述。

訪問文檔頁面。

得到幫助

Elixirforum.com上有一個單調的線程，請在那裡解決問題。

測試和沙箱

由於0.3.2，DRAB配備了自己的Phoenix服務器，用於自動運行集成測試，用於沙箱和使用它。

沙箱

Github的克隆單調：

git clone [email protected]:grych/drab.git
cd drab

獲取DEP和節點模塊：

mix deps.get
npm install && node_modules/brunch/bin/brunch build

用單調啟動鳳凰：

iex -S mix phoenix.server

打開瀏覽器並導航到http：// localhost：4000
按照IEX中的說明進行單調功能：

 import Drab . { Core , Live , Element , Query , Waiter }
socket = Drab . get_socket ( pid ( "0.784.0" ) )

iex > query socket , "h3" , :innerText
{ :ok ,
 % { "#header" => % { "innerText" => "Drab Tests" } ,
   "#page_loaded_indicator" => % { "innerText" => "Page Loaded" } } }

iex > set_prop socket , "h3" , innerText: "Updated from IEx"
{ :ok , 2 }

iex > exec_js socket , "alert('You do like alerts?')"
{ :ok , nil }

測試

大多數單調測試是集成（端到端）測試，因此它們需要自動瀏覽器。單調使用Chromedriver，在運行測試時必須運行。

Github的克隆單調：

git clone [email protected]:grych/drab.git
cd drab

獲取DEP和節點模塊：

mix deps.get
npm install && node_modules/brunch/bin/brunch build

運行chromedriver
運行測試：

% mix test
Compiling 23 files (.ex)
........................................

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

手動安裝

在mix.exs中的依賴項中添加單調。
通過添加到佈局頁面（ app.html.eex或您使用的任何其他佈局）來初始化單調客戶庫庫。

 < %= Drab.Client.run(@conn) % >

在以下行之後：

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >

通過將以下內容添加到user_socket.ex ：初始化單調插座：

 use Drab.Socket

將帶有端點的單調模板和應用程序名稱添加到config.exs ：

 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web

添加:drab情況下的應用程序的單調mix.exs ：exss：

 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

如果您正在運行Phoenix 1.3，則不需要

要在單調頁面上啟用實時重新加載，請在dev.exs中添加.drab擴展名：

 config :my_app , MyApp.Endpoint ,
  live_reload: [
    patterns: [
      ~r { priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$ } ,
      ~r { priv/gettext/.*(po)$ } ,
      ~r { web/views/.*(ex)$ } ,
      ~r { web/templates/.*(eex|drab)$ }
    ]
  ]

如果您不使用webpack，則將獲得require is not defined錯誤。您需要提供Socket ：

在app.js添加一個全局變量中，該變量將稍後傳遞給單調：

  window . __socket = require ( "phoenix" ) . Socket ;

然後，告訴單調使用此而不是默認require("phoenix").Socket 。添加到config.exs ：

 config :drab , MyAppWeb.Endpoint ,
  js_socket_constructor: "window.__socket"

如果要使用drab.query（基於jQuery的模塊）：

將jquery和boostrap添加到package.json中。

 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}

在brunch-config.js結束時將jQuery添加為全球：

npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }

並安裝它：

$ npm install && node_modules/brunch/bin/brunch build

接觸

（c）2016-2018 Tomek“ Grych” Gryszkiewicz，[email protected]

https://www.vecteezy.com的插圖

展開

drab

有關實時演示和描述，請參見演示頁面。

預告片

先決條件

瀏覽器要求

安裝

用法

上面的示例可在此處提供

現在什麼？

得到幫助

測試和沙箱

沙箱

測試

手動安裝

如果要使用drab.query（基於jQuery的模塊）：

接觸

Twitter Sentiment Analysis on Flask App

data science app road accident analysis

static web apps cli

awesome hacking lists

ssti payloads

aurelia

chat.petals.dev

GPT Prompt Templates

GPTyped

Twitter Sentiment Analysis on Flask App

data science app road accident analysis

static web apps cli

Google Dorks

shepherd

mongo express