quetzal v0.1.8 Quetzal.LiveView behaviour View Source
Quetzal Live View provides easy interface to handle events, components and messages into Quetzal architechture in a fast and fashion way. It uses Phoenix Live View to render components and their upgrades.
In order to use set the Quetzal.LiveView instead Phoenix.LiveView directly over your live module:
Example:
You don't need mount/2
or render/1
when using the Quetzal Live View is all done:
defmodule AppWeb.PieLive do
use Quetzal.LiveView
end
In order to render components to the live view use the components/0
callback:
Example:
This will render a pie graph into the view using custom components:
defmodule AppWeb.PieLive do
use Quetzal.LiveView
@impl Quetzal.LiveView
def components() do
{"MyApp", [{Quetzal.Graph.graph [id: "mypiegraph"], [type: "pie", labels: ["RED", "BLUE"], values: [20, 10]]}]}
end
end
You can use the graph and other components to extend your views with custom graphs, tables, etc.
Also is possible upgrade the components from the server live view, use update_components/1
over your live view:
Example:
This example generates a random number and push to live view so Quetzal updates the component in the view:
defmodule AppWeb.PieLive do
use Quetzal.LiveView
@impl Quetzal.LiveView
def components(_session) do
{"MyApp", [{Quetzal.Graph, [id: "mypie"], [type: "pie", labels: ["Red", "Blue"], values: [10, 20]]}]}
end
def trigger_update() do
:timer.sleep(5000)
newvalues = for _n <- 1..3, do: :rand.uniform(100)
components = [mypie: [labels: ["Black", "White", "Gray"], values: newvalues]]
update_components("MyApp", components)
trigger_update()
end
end
Link to this section Summary
Functions
Updates the components sending a message to live view, it receives components as string as in Quetzal components definition