Página Inicial>Recursos de construção de sites>Dados do site
Baixar

Veja a página de demonstração para demonstração e descrição ao vivo.

Drab - Acesse a interface do usuário do navegador do lado do servidor. Nenhuma programação JavaScript mais necessária!

A drab estende a estrutura do Phoenix para a interface do usuário "controle remoto" no navegador, ao vivo. A idéia é mover toda a lógica da interface do usuário para o lado do servidor, para eliminar chamadas JavaScript e Ajax.

Teaser

  • Lado do 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 do 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

Pré -requisitos

  1. Elixir ~> 1.6.0 (consulte o guia de instalação)

  2. Phoenix ~> 1.2 (consulte o guia de instalação)

Requisitos do navegador

Isso tem os mesmos requisitos que Phoenix.sockets. Acima disso, depende do JavaScript que você chama ou de outras ferramentas em potencial que você usa em cima do monótono.

Instalação

Primeiro de tudo, você precisa ter um aplicativo Phoenix, além do qual você instalará o Drab. Se este for um aplicativo padrão, gerado com mix phx.new , você poderá usar o instalador drab para executá -lo em uma etapa simples. Caso contrário, consulte a seção de instalação manual abaixo.

  1. Editar mix.exs na pasta principal do seu aplicativo da web (se você tiver vários aplicativos sob um guarda -chuva, este é o que termina com _web ). Localize a função deps (pesquisa de string def deps ). Adicione uma entrada {:drab, "~> 0.10.0"} à lista. Não se esqueça da vírgula! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Baixe e instale pacotes: 
$ mix deps.get
  1. Vá para o diretório de aplicativos ( se o seu aplicativo da Web Phoenix estiver sob o guarda -chuva, vá para lá ) e execute 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

Parabéns! Você instalou monótono e pode prosseguir com seu próprio comandante.

Observe que o monótono será executado apenas nas páginas, que têm o comandante correspondente.

Uso

Todas as funções monótonas (retornos de chamada, manipuladores de eventos) são colocados no módulo chamado Commander . Pense nisso como um controlador para as páginas ao vivo. Os comandantes devem ser colocados no diretório web/commanders .

Para ativar o monótono nas páginas geradas com o controlador correspondente, você precisa criar um comandante gêmeo. Por exemplo, para MyApp.PageController o comandante deve ser nomeado MyApp.PageCommander .

Lembre -se da diferença: controller renderiza a página, enquanto commander trabalha na página ao vivo.

  1. Gerar o comandante da página. O nome do comandante deve corresponder ao controlador, portanto, PageController deve ter PageCommander : 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Adicione o @welcome_text atribuído a render/3 na ação de índice no controlador, a ser usado no 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. Renomeie o modelo de web/templates/page/index.html.eex para index.html.drab

  2. Edite o modelo web/templates/page/index.html.drab e altere o texto de boas -vindas fixo para atribuir: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Edite o arquivo comandante web/commanders/page_commander.ex e adicione alguma ação real - o retorno de chamada onload , que dispara quando o navegador se conecta ao 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

A função poke/2 atualiza o atribuições. O set_prop/3 atualiza qualquer propriedade do objeto DOM. Tudo está feito ao vivo, sem recarregar a página.

  1. Execute iex -S mix phoenix.server . Vá para http://localhost:4000 para ver a página da web alterada. Agora você pode brincar com esta página ao vivo, diretamente da iex ! Observe a instrução fornecida quando o seu navegador se conectar à 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 )

Conforme instruído, copie e cole essas duas linhas e confira como você pode controlar remotamente a página exibida: 

 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 }

O exemplo acima está disponível aqui

E agora?

Visite a página de demonstração para uma demonstração ao vivo e mais descrição.

Visite a página de documentação.

Obtendo ajuda

Há um tópico de drab no elixirforum.com, aborde as perguntas lá.

Testes e Sandbox

Desde 0.3.2, o Drab está equipado com seu próprio servidor Phoenix para executar testes de integração automaticamente, para caixa de areia e para brincar com ele.

Sandbox

  • Clone monótono do github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenha os depos e módulos de nó: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Comece a Phoenix com drab: 
iex -S mix phoenix.server

  • Abra o navegador e navegue para http: // localhost: 4000

  • Siga as instruções no IEX para brincar com funções 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 }

Testes

A maioria dos testes monótonos são testes de integração (de ponta a ponta), portanto, eles exigem navegador automatizado. O Drab usa o ChromedRiver, que deve estar em execução enquanto você executa testes.

  • Clone monótono do github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenha os depos e módulos de nó: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • Execute chromedriver

  • Executar testes: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Instalação manual

  1. Adicione monótono às dependências no mix.exs .

  2. Inicialize a biblioteca de clientes monótonos adicionando à página Layout ( app.html.eex - ou qualquer outro layout que você use). 

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

Logo após a seguinte linha: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Inicialize os soquetes monótonos adicionando o seguinte ao user_socket.ex : 
 use Drab.Socket
  1. Adicione o nome de modelo monótono e o nome do aplicativo com endpoint para config.exs : 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Adicionar :drab às aplicações iniciadas por padrão em mix.exs : 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

Não é necessário se você estiver executando o Phoenix 1.3

  1. Para ativar as páginas de recarga ao vivo em páginas monótonas, adicione a extensão .drab aos padrões de recarga ao vivo em dev.exs : 
 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. Se você não estiver usando o WebPack, você receberá require is not defined . Você precisa fornecer Socket :

No app.js adicione uma variável global, que será passada para monótona mais tarde: 

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

Em seguida, diga a drab para usar isso em vez de padrão require("phoenix").Socket . Adicionar ao config.exs : 

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

Se você quiser usar o Drab.Query (módulo baseado em jQuery):

  1. Adicione jquery e boostrap ao package.json : 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Adicione o jQuery como um global no final do brunch-config.js : 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. E instale: 
$ npm install && node_modules/brunch/bin/brunch build

Contato

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

Ilustrações de https://www.vecteezy.com

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos