drab v0.2.1 Drab
Drab allows to query and manipulate the User Interface directly from the Phoenix server backend.
To enable it on the specific page you must find its controller and
enable Drab by use Drab.Controller
there:
defmodule DrabExample.PageController do
use Example.Web, :controller
use Drab.Controller
def index(conn, _params) do
render conn, "index.html"
end
end
Notice that it will enable Drab on all the pages generated by DrabExample.PageController
.
All Drab functions (callbacks and event handlers) should be placed in a module called ‘commander’. It is very similar to controller, but it does not render any pages - it works with the live page instead. Each controller with enabled Drab should have the corresponding commander.
defmodule DrabExample.PageCommander do
use Drab.Commander, onload: :page_loaded
# Drab Callbacks
def page_loaded(socket) do
socket |> update(:html, set: "Welcome to Phoenix+Drab!", on: "div.jumbotron h2")
socket |> update(:html,
set: "Please visit <a href='https://tg.pl/drab'>Drab</a> page for more examples and description",
on: "div.jumbotron p.lead")
end
# Drab Events
def button_clicked(socket, dom_sender) do
socket |> update(:text, set: "alread clicked", on: this(dom_sender))
end
end
Drab treats browser page as a database, allows you to read and change the data there. Please refer to Drab.Query
documentation to
find out how Drab.Query.select/2
or Drab.Query.update/2
works.
Modules
Drab is modular. You my choose which modules to use in the specific Commander by using :module
option
in use Drab.Commander
directive. By default, Drab.Query
and Drab.Modal
are loaded, but you may override it using
options with use Drab.Commander
directive.
Every module must have the corresponding javascript template, which is added to the client code in case the module is loaded.
Summary
Functions
Returns map of Drab configuration options.
All the config values may be override in config.exs
, for example:
config :drab, disable_controls_while_processing: false
Configuration options:
disable_controls_while_processing
(default:true
) - after sending request to the server, sender will be disabled until get the answer; warning: this behaviour is not broadcasted, so only the control in the current browers will be disabledevents_to_disable_while_processing
(default:["click"]
) - list of events which will be disabled when waiting for server responsedisable_controls_when_disconnected
(default:true
) - disables control when there is no connectivity between the browser and the serversocket
(default:"/drab/socket"
) - path to Drab socket