Inicio>Recursos para la creación de sitios web>Datos del sitio web
Descargar

Consulte la página de demostración para la demostración en vivo y la descripción.

DRAB: acceda a la interfaz de usuario del navegador desde el lado del servidor. ¡Ya no se necesita programación de JavaScript!

Drab extiende Phoenix Framework a la interfaz de usuario de "control remoto" en el navegador, Live. La idea es mover toda la lógica de la interfaz de usuario al lado del servidor, para eliminar las llamadas JavaScript y AJAX.

Rompecabezas

  • Lado del cliente: 
 < 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 >
  • Lado del servidor: 
 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

Requisitos previos

  1. Elixir ~> 1.6.0 (ver guía de instalación)

  2. Phoenix ~> 1.2 (ver guía de instalación)

Requisitos del navegador

Esto tiene los mismos requisitos que Phoenix.sockets. Arriba, depende del JavaScript que llame u otras herramientas potenciales que use en la parte superior del mono.

Instalación

En primer lugar, debe tener una aplicación Phoenix, además de la cual instalará DRAB. Si esta es una aplicación estándar, generada con mix phx.new , puede usar el instalador DRAB para que se ejecute en un paso simple. De lo contrario, consulte la sección de instalación manual a continuación.

  1. Editar mix.exs en la carpeta principal en su aplicación web (si tiene una aplicación múltiple en un paraguas, este es el único que finaliza con _web ). Localice la función deps (busque la cadena def deps ). Agregue una entrada {:drab, "~> 0.10.0"} a la lista. ¡No te olvides de la coma! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Descargar e instalar paquetes: 
$ mix deps.get
  1. Vaya al directorio de aplicaciones ( si su aplicación web de Phoenix está debajo del paraguas, vaya allí ) y ejecute 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

¡Felicidades! Ha instalado Drab y puede continuar con su propio comandante.

Tenga en cuenta que Drab solo funcionará en páginas, que tienen el comandante correspondiente.

Uso

Todas las funciones monótonas (devoluciones de llamada, manejadores de eventos) se colocan en el módulo llamado Commander . Piense en ello como un controlador de las páginas en vivo. Los comandantes deben colocarse en el directorio web/commanders .

Para habilitar DRAB en las páginas generadas con el controlador correspondiente, debe crear un comandante gemelo. Por ejemplo, para MyApp.PageController el comandante debe ser nombrado MyApp.PageCommander .

Recuerde la diferencia: controller representa la página, mientras que commander trabaja en la página en vivo.

  1. Genere el comandante de la página. El nombre del comandante debe corresponder al controlador, por lo que PageController debe tener PageCommander : 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Agregue la asignación de @welcome_text a render/3 en la acción de índice en el controlador, para ser utilizado en el futuro: 
 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. Cambie el nombre de la plantilla de web/templates/page/index.html.eex a index.html.drab

  2. Edite la plantilla web/templates/page/index.html.drab y cambie el texto de bienvenida fijo a la asignación: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Edite el archivo Commander web/commanders/page_commander.ex y agregue una acción real: la devolución de llamada onload , que se dispara cuando el navegador se conecta al servidor 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

La función poke/2 actualiza la asignación. El set_prop/3 actualiza cualquier propiedad del objeto DOM. Todo se hace en vivo, sin recargar la página.

  1. Ejecute iex -S mix phoenix.server . Vaya a http://localhost:4000 para ver la página web cambiada. ¡Ahora puede jugar con esta página en vivo, directamente desde iex ! Observe la instrucción dada cuando su navegador se conecta a la página: 
 [ 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 )

Según las instrucciones, copie y pegue esas dos líneas, y consulte usted mismo cómo podría controlar de forma remota la página que se muestra: 

 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 }

El ejemplo anterior está disponible aquí

¿Qué ahora?

Visite la página de demostración para obtener una demostración en vivo y más descripción.

Visite la página de documentación.

Obtener ayuda

Hay un hilo monótono en elixirforum.com, por favor aborde las preguntas allí.

Pruebas y sandbox

Desde 0.3.2, Drab está equipado con su propio servidor Phoenix para ejecutar pruebas de integración automáticamente, para sandboxing y para jugar con él.

Salvadera

  • clon monótono de Github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenga módulos Deps y Nodo: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Comience Phoenix con Drab: 
iex -S mix phoenix.server

  • Abra el navegador y navegue a http: // localhost: 4000

  • Siga las instrucciones en IEX para jugar con funciones monótonas: 

 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 }

Pruebas

La mayoría de las pruebas monótonas son pruebas de integración (de extremo a extremo), por lo que requieren un navegador automatizado. Drab usa ChromedRiver, que debe estar ejecutándose mientras realiza pruebas.

  • clon monótono de Github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenga módulos Deps y Nodo: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • correr chromedriver

  • Ejecutar pruebas: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Instalación manual

  1. Agregue DRAB a las dependencias en mix.exs .

  2. Inicialice la biblioteca del cliente DRAB agregando a la página de diseño ( app.html.eex , o cualquier otro diseño que use). 

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

Justo después de la siguiente línea: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Inicialice los enchufes monótonos agregando lo siguiente a user_socket.ex : 
 use Drab.Socket
  1. Agregue el motor de plantilla Drab y el nombre de la aplicación con Endpoint a config.exs : 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Agregar :drab a las aplicaciones iniciadas de forma predeterminada en mix.exs : 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

No es necesario si está ejecutando Phoenix 1.3

  1. Para habilitar la recarga en vivo en dev.exs páginas monótonas, agregar .drab 
 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. Si no está utilizando WebPack, obtendrá un error require is not defined . Necesita proporcionar Socket :

En la app.js agregue una variable global, que se pasará a Drab más tarde: 

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

Luego, dígale a DRAB que use esto en lugar de predeterminado require("phoenix").Socket . Agregar a config.exs : 

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

Si desea usar drab.query (módulo basado en jQuery):

  1. Agregue jquery y boostrap a package.json : 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Agregue jQuery como global al final de brunch-config.js : 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. E instálelo: 
$ npm install && node_modules/brunch/bin/brunch build

Contacto

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

Ilustraciones de https://www.vdezezy.com

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo