Beranda>Sumber daya pembuatan situs web>Data situs web
Unduh

Lihat halaman demo untuk demo dan deskripsi langsung.

Drab - Akses antarmuka pengguna browser dari sisi server. Tidak perlu pemrograman JavaScript lagi!

Drab memperluas kerangka phoenix untuk "remote control" UI di browser, hidup. Idenya adalah untuk memindahkan semua logika antarmuka pengguna ke sisi server, untuk menghilangkan panggilan JavaScript dan AJAX.

Pengejek

  • Sisi Klien: 
 < 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 >
  • Sisi server: 
 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

Prasyarat

  1. Elixir ~> 1.6.0 (lihat Panduan Instalasi)

  2. Phoenix ~> 1.2 (lihat Panduan Instalasi)

Persyaratan browser

Ini memiliki persyaratan yang sama dengan phoenix.sockets. Di atas itu tergantung pada JavaScript yang Anda sebut atau alat potensial lain yang Anda gunakan di atas menjemukan.

Instalasi

Pertama -tama, Anda perlu memiliki aplikasi Phoenix, di atasnya Anda akan menginstal Drab. Jika ini adalah aplikasi standar, dihasilkan dengan mix phx.new , Anda dapat menggunakan penginstal drab untuk membuatnya berjalan dalam satu langkah sederhana. Jika tidak, lihat bagian Instalasi Manual di bawah ini.

  1. Edit mix.exs di folder utama di aplikasi web Anda (jika Anda memiliki beberapa aplikasi di bawah payung, ini adalah yang akhir dengan _web ). Temukan fungsi deps (Cari string def deps ). Tambahkan entri {:drab, "~> 0.10.0"} ke daftar. Jangan lupa tentang koma! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Unduh dan Instal Paket: 
$ mix deps.get
  1. Buka direktori aplikasi ( jika aplikasi web Phoenix Anda berada di bawah payung, pergi ke sana ) dan jalankan 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

Selamat! Anda telah menginstal menjemukan dan Anda dapat melanjutkan dengan komandan Anda sendiri.

Harap perhatikan bahwa Drab hanya akan berjalan di halaman, yang memiliki komandan yang sesuai.

Penggunaan

Semua fungsi menjemukan (panggilan balik, penangan acara) ditempatkan di modul yang disebut Commander . Pikirkan sebagai pengontrol untuk halaman langsung. Komandan harus ditempatkan di direktori web/commanders .

Untuk mengaktifkan drab pada halaman yang dihasilkan dengan pengontrol yang sesuai, Anda perlu membuat komandan kembar. Misalnya, untuk MyApp.PageController komandan harus dinamai MyApp.PageCommander .

Ingat perbedaannya: controller membuat halaman, sementara commander bekerja di halaman langsung.

  1. Menghasilkan komandan halaman. Nama komandan harus sesuai dengan pengontrol, jadi PageController harus memiliki PageCommander : 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Tambahkan @welcome_text yang ditugaskan ke render/3 dalam tindakan indeks di pengontrol, untuk digunakan di masa mendatang: 
 defmodule MyApp.PageController do
  use Example.Web , :controller

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

  1. Ubah nama templat dari web/templates/page/index.html.eex ke index.html.drab

  2. Edit Template web/templates/page/index.html.drab dan ubah teks selamat datang tetap ke penugasan: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Edit File Komandan web/commanders/page_commander.ex dan tambahkan beberapa tindakan nyata - panggilan balik onload , yang ditembakkan ketika browser terhubung ke server 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

Fungsi poke/2 memperbarui penugasan. set_prop/3 memperbarui properti dari objek DOM. Semua dilakukan secara langsung, tanpa memuat ulang halaman.

  1. Jalankan iex -S mix phoenix.server . Pergi ke http://localhost:4000 untuk melihat halaman web yang diubah. Sekarang Anda dapat bermain dengan halaman ini langsung, langsung dari iex ! Amati instruksi yang diberikan ketika browser Anda terhubung ke halaman: 
 [ 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 )

Seperti yang diinstruksikan, salin dan tempel kedua baris itu, dan periksa sendiri bagaimana Anda dapat mengontrol halaman yang ditampilkan dari jarak jauh: 

 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 }

Contoh di atas tersedia di sini

Apa sekarang?

Kunjungi halaman demo untuk demo langsung dan deskripsi lainnya.

Kunjungi halaman dokumentasi.

Mendapatkan bantuan

Ada utas Drab di elixirforum.com, silakan alamat pertanyaan di sana.

Tes dan kotak pasir

Sejak 0.3.2, Drab dilengkapi dengan server Phoenix sendiri untuk menjalankan tes integrasi secara otomatis, untuk sandboxing dan untuk bermain dengannya.

Bak pasir

  • Clone Drab dari GitHub: 
git clone [email protected]:grych/drab.git
cd drab
  • Dapatkan Deps dan Modul Node: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Mulai Phoenix dengan drab: 
iex -S mix phoenix.server

  • Buka browser dan navigasikan ke http: // localhost: 4000

  • Ikuti instruksi di IEX untuk bermain dengan fungsi 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 }

Tes

Sebagian besar tes DRAB adalah tes integrasi (end-to-end), sehingga mereka memerlukan browser otomatis. Drab menggunakan Chromedriver, yang harus berjalan saat Anda menjalankan tes.

  • Clone Drab dari GitHub: 
git clone [email protected]:grych/drab.git
cd drab
  • Dapatkan Deps dan Modul Node: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • Jalankan chromedriver

  • Jalankan tes: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Instalasi Manual

  1. Tambahkan DRAB ke dependensi di mix.exs .

  2. Inisialisasi perpustakaan klien Drab dengan menambahkan ke halaman tata letak ( app.html.eex - atau tata letak lain yang Anda gunakan). 

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

Tepat setelah baris berikut: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Inisialisasi soket drab dengan menambahkan yang berikut ini ke user_socket.ex : 
 use Drab.Socket
  1. Tambahkan mesin template drab dan nama aplikasi dengan titik akhir ke config.exs : 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Tambahkan :drab ke aplikasi dimulai secara default di mix.exs : 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

Tidak diperlukan jika Anda menjalankan Phoenix 1.3

  1. Untuk mengaktifkan Langsung Muat Ulang di Halaman Drab, tambahkan .drab Extension ke Pola Muat Ulang Langsung di 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)$ }
    ]
  ]
  1. Jika Anda tidak menggunakan Webpack, Anda akan mendapatkan kesalahan require is not defined . Anda perlu menyediakan Socket :

Di app.js menambahkan variabel global, yang akan diteruskan untuk menjemukan nanti: 

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

Kemudian, beri tahu Drab untuk menggunakan ini alih -alih Default require("phoenix").Socket . Tambahkan ke config.exs : 

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

Jika Anda ingin menggunakan drab.query (modul berbasis jQuery):

  1. Tambahkan jquery dan boostrap ke package.json : 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Tambahkan jQuery sebagai global di akhir brunch-config.js : 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. Dan instal: 
$ npm install && node_modules/brunch/bin/brunch build

Kontak

(c) 2016-2018 Tomek "Grych" Gryszkiewicz, [email protected]

Ilustrasi oleh https://www.vecteezy.com

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua