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（インストールガイドを参照）
Phoenix〜> 1.2（インストールガイドを参照）

ブラウザの要件

これには、phoenix.socketsと同じ要件があります。それよりも、それはあなたが呼ぶあなたが呼ぶJavaScriptまたはあなたが単調に使用する他の潜在的なツールに依存します。

インストール

まず、フェニックスアプリケーションが必要で、その上にドラブをインストールする必要があります。これがmix phx.newで生成された標準アプリである場合、単純なステップで1つの単純なステップで実行するために、ドラブインストーラーを使用できます。それ以外の場合は、下の手動インストールセクションを参照してください。

Webアプリケーションのメインフォルダーでmix.exsを編集します（傘下に複数のアプリケーションがある場合、これは_webで終わるものです）。 function depsを見つけます（ def deps stringの検索）。エントリ{:drab, "~> 0.10.0"}をリストに追加します。コンマを忘れないでください！

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

パッケージのダウンロードとインストール：

$ mix deps.get

アプリケーションディレクトリmix drab.install移動します（ Phoenix Webアプリケーションが傘下にある場合は、そこに行きます）。

 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

おめでとう！ドラブをインストールし、自分の司令官を続行できます。

DRABは、対応する司令官がいるページでのみ実行されることに注意してください。

使用法

すべてのドラブ関数（コールバック、イベントハンドラー）は、 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 File web/commanders/page_commander.exを編集し、いくつかの実際のアクション - ブラウザがドラブサーバーに接続したときに発火するonloadコールバックを追加します。

 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を実行します。変更されたWebページを表示するには、 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 )

指示に従って、これらの2行をコピーして貼り付け、表示されたページをリモートで制御する方法を確認してください。

 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

DEPSおよびノードモジュールを取得します：

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

DRABでフェニックスを開始します：

iex -S mix phoenix.server

ブラウザを開き、http：// localhost：4000に移動します
IEXの指示に従って、DRAB関数を使用して再生します。

 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 }

テスト

ドラブテストのほとんどは統合（エンドツーエンド）テストであるため、自動ブラウザーが必要です。 DRABはChromeDriverを使用します。これは、テストを実行中に実行する必要があります。

Githubからのクローンドラブ：

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

DEPSおよびノードモジュールを取得します：

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でデフォルトで開始されたアプリケーションへの単位：

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

フェニックス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