Drab - Access the User Interface from the Server Side
A Page with Drab.Core only
By default, Drab uses DOM tree for accessing the User Interface, via Drab.Live
or Drab.Element
. But it is not a requirement! The only required module is Drab.Core
, which contains basic communication functions to launch the javascript from the server side (exec_js
and broadcast_js
) and few more.
To enable/disable Drab Modules, use modules
option in use Drab.Commander
directive.
defmodule DrabPoc.JquerylessCommander do
use Drab.Commander, modules: [] # only default Drab.Core
onload: :page_loaded
def page_loaded(socket) do
socket |> exec_js("console.log('Alert from the other side!');")
end
defhandler clicked(socket, payload) do
socket |> Drab.Browser.broadcast_console!("You've sent me this: #{payload |> inspect}")
end
end
Module Drab.Core
is always loaded. By default, modules [Drab.Query, Drab.Modal]
are enabled. To disable them, use an empty list, like in the example above.
Module Drab.core
also adds to the client side JS the basic method for launching the Elixir functions located in the Commander. This is Drab.exec_elixir(function_name, arguments_map)
:
<button onclick="Drab.exec_elixir('clicked', {click: 'clickety-click'});">
onclick="Drab.exec_elixir('clicked', {click: 'clickety-click'})"
</button>
Here is the live example of this code (open JS console to see the result):