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