drab v0.5.6 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
set_prop socket, "div.jumbotron h2", innerHTML: "This page has been DRABBED"
end
# Drab Events
def button_clicked(socket, sender) do
set_prop socket, this(sender), innerText: "already clicked"
end
end
Debugging Drab in IEx
When started with iex (iex -S mix phoenix.server
) Drab shows the helpful message on how to debug its functions:
Started Drab for /drab/docs, handling events in DrabPoc.DocsCommander
You may debug Drab functions in IEx by copy/paste the following:
import Drab.{Core, Query, Modal, Waiter}
socket = Drab.get_socket(pid("0.443.0"))
Examples:
socket |> select(:htmls, from: "h4")
socket |> exec_js("alert('hello from IEx!')")
socket |> alert("Title", "Sure?", buttons: [ok: "Azaliż", cancel: "Poniechaj"])
All you need to do is to copy/paste the line with socket = ...
and now you can run Drab function directly
from IEx, observing the results on the running browser in the realtime.
Handling Exceptions
Drab intercepts all exceptions from event handler function and let it die, but before it presents the error message in the logs, and, for development environment, on the page. For production, it shows just an alert with the generic error.
By default it is just an alert(), but you can easly override it by creating the template in the
priv/templates/drab/drab.handler_error.prod.js
folder with your own javascript presenting the message.
Modules
Drab is modular. You may choose which modules to use in the specific Commander by using :module
option
in use Drab.Commander
directive. By default, Drab.Live
and Drab.Element
are loaded, but you may override it
using modules
option 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.
Drab.Core
module is always loaded.
Learnig Drab
There is a tutorial/demo page.
The point to start reading docs should be Drab.Core
.
Link to this section Summary
Functions
Extract Drab PID from the socket
Link to this section Types
t() :: %Drab{commander: atom, priv: map, session: map, socket: Phoenix.Socket.t, store: map}
Link to this section Functions
Extract Drab PID from the socket