drab
1.0.0
Drab - เข้าถึงส่วนต่อประสานผู้ใช้เบราว์เซอร์จากฝั่งเซิร์ฟเวอร์ ไม่จำเป็นต้องเขียนโปรแกรม JavaScript อีกต่อไป!
Drab ขยายเฟรมเวิร์กฟีนิกซ์ไปยัง "รีโมทคอนโทรล" 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 ข้างต้นนั้นขึ้นอยู่กับจาวาสคริปต์ที่คุณเรียกหรือเครื่องมือที่เป็นไปได้อื่น ๆ ที่คุณใช้อยู่ด้านบนของ Drab
ก่อนอื่นคุณต้องมีแอปพลิเคชั่นฟีนิกซ์ด้านบนซึ่งคุณจะติดตั้ง Drab หากนี่เป็นแอพมาตรฐานที่สร้างขึ้นด้วย mix phx.new คุณสามารถใช้ตัวติดตั้ง Drab เพื่อให้ทำงานได้ในขั้นตอนเดียวง่ายๆ มิฉะนั้นให้ดูส่วนการติดตั้งด้วยตนเองด้านล่าง
mix.exs ในโฟลเดอร์หลักในเว็บแอปพลิเคชันของคุณ (หากคุณมีแอปพลิเคชันหลายรายการภายใต้ร่มนี่คือหนึ่งที่ลงท้ายด้วย _web ) ค้นหาฟังก์ชัน deps (ค้นหาสตริง def deps ) เพิ่มรายการ {:drab, "~> 0.10.0"} ในรายการ อย่าลืมเกี่ยวกับเครื่องหมายจุลภาค! def deps do
[
{ ... } ,
{ :drab , "~> 0.10.0" }
]
end$ mix deps.getmix 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
ยินดีด้วย! คุณได้ติดตั้ง Drab และคุณสามารถดำเนินการกับผู้บัญชาการของคุณเองได้
โปรดสังเกตว่า Drab จะทำงานบนหน้าเว็บเท่านั้นซึ่งมีผู้บัญชาการที่เกี่ยวข้อง
ฟังก์ชั่น Drab ทั้งหมด (การเรียกกลับ, ตัวจัดการเหตุการณ์) ถูกวางไว้ในโมดูลที่เรียกว่า Commander คิดว่ามันเป็นตัวควบคุมสำหรับหน้าสด ผู้บัญชาการควรอยู่ในไดเรกทอรี web/commanders
ในการเปิดใช้งาน Drab บนหน้าเว็บที่สร้างขึ้นด้วยคอนโทรลเลอร์ที่สอดคล้องกันคุณต้องสร้างผู้บัญชาการคู่ ตัวอย่างเช่นสำหรับ 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 >web/commanders/page_commander.ex และเพิ่มการดำเนินการจริง - การเรียกกลับ onload ซึ่งจะยิงเมื่อเบราว์เซอร์เชื่อมต่อกับเซิร์ฟเวอร์ DRAB: 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 }เยี่ยมชมหน้าสาธิตสำหรับการสาธิตสดและคำอธิบายเพิ่มเติม
เยี่ยมชมหน้าเอกสาร
มีเธรดของ Drab บน Elixirforum.com โปรดตอบคำถามที่นั่น
ตั้งแต่ 0.3.2 Drab ติดตั้งเซิร์ฟเวอร์ฟีนิกซ์ของตัวเองสำหรับการทดสอบการรวมการทดสอบโดยอัตโนมัติสำหรับ Sandboxing และเล่นกับมัน
git clone [email protected]:grych/drab.git
cd drabmix deps.get
npm install && node_modules/brunch/bin/brunch buildiex -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 ส่วนใหญ่เป็นการทดสอบการรวม (end-to-end) ดังนั้นพวกเขาจึงต้องใช้เบราว์เซอร์อัตโนมัติ Drab ใช้ ChromeDriver ซึ่งจะต้องทำงานในขณะที่คุณทำการทดสอบ
git clone [email protected]:grych/drab.git
cd drabmix 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 เพิ่ม Drab ลงในการพึ่งพาใน mix.exs
เริ่มต้นไลบรารีไคลเอนต์ DRAB โดยเพิ่มไปยังหน้าเค้าโครง ( app.html.eex - หรือเลย์เอาต์อื่น ๆ ที่คุณใช้)
< %= Drab.Client.run(@conn) % >หลังจากบรรทัดต่อไปนี้:
< script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >user_socket.ex : use Drab.Socketconfig.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
.drab ส่วนขยาย dev.exs 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)$ }
]
]require is not defined คุณต้องจัดหา Socket : ใน app.js เพิ่มตัวแปรทั่วโลกซึ่งจะถูกส่งผ่านไปยัง Drab ในภายหลัง:
window . __socket = require ( "phoenix" ) . Socket ; จากนั้นบอกให้ Drab ใช้สิ่งนี้แทนที่จะเป็น require("phoenix").Socket เพิ่มไปยัง config.exs :
config :drab , MyAppWeb.Endpoint ,
js_socket_constructor: "window.__socket" jquery และ boostrap ลงใน package.json : "dependencies" : {
"jquery" : " >= 3.1.1 " ,
"bootstrap" : " ~3.3.7 "
}brunch-config.js : 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
