Startseite>Ressourcen zum Erstellen von Websites>Website-Daten
Herunterladen

Siehe Demo -Seite für Live -Demo und Beschreibung.

DRAB - Greifen Sie von der Serverseite auf die Benutzeroberfläche des Browsers zu. Keine JavaScript -Programmierung mehr benötigt!

Drab erweitert das Phoenix -Framework auf die Benutzeroberfläche "Fernbedienung" im Browser Live. Die Idee ist, alle Benutzeroberflächenlogik auf die Serverseite zu verschieben, um JavaScript- und AJAX-Aufrufe zu beseitigen.

Teaser

  • Kundenseite: 
 < 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 >
  • Serverseite: 
 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

Voraussetzungen

  1. Elixir ~> 1.6.0 (siehe Installationshandbuch)

  2. Phoenix ~> 1.2 (siehe Installationshandbuch)

Browseranforderungen

Dies hat die gleichen Anforderungen wie Phoenix.Sockets. Darüber hängt es von dem JavaScript ab, den Sie aufrufen, oder andere potenzielle Tools, die Sie auf dem Turnier verwenden.

Installation

Zunächst müssen Sie eine Phoenix -Anwendung haben, über die Sie TRAB installieren. Wenn es sich um eine Standard -App handelt, die mit mix phx.new erzeugt wird, können Sie Drab Installer verwenden, um es in einem einfachen Schritt auszuführen. Andernfalls siehe Abschnitt "Manuelle Installation) unten.

  1. Bearbeiten Sie mix.exs im Hauptordner in Ihrer Webanwendung (wenn Sie mehrere Anwendungen unter einem Dach haben, ist dies diejenige, die mit _web endet). Suchen Sie die deps (suchen Sie nach def deps -String). Fügen Sie der Liste einen Eintrag {:drab, "~> 0.10.0"} hinzu. Vergiss nicht das Komma! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Pakete herunterladen und installieren: 
$ mix deps.get
  1. Gehen Sie zum Anwendungsverzeichnis ( wenn sich Ihre Phoenix -Webanwendung unter dem Dach befindet, gehen Sie dorthin und führen Sie 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

Glückwunsch! Sie haben Drab installiert und können mit Ihrem eigenen Kommandanten fortfahren.

Bitte beachten Sie, dass Draw nur auf Seiten läuft, die den entsprechenden Kommandanten haben.

Verwendung

Alle Trübungsfunktionen (Rückrufe, Ereignishandler) werden im Modul namens Commander platziert. Betrachten Sie es als Controller für die Live -Seiten. Kommandanten sollten im Verzeichnis web/commanders platziert werden.

Um Drab auf den mit entsprechenden Controller erzeugten Seiten zu aktivieren, müssen Sie einen Twin Commander erstellen. Zum Beispiel sollte der Kommandant für MyApp.PageController MyApp.PageCommander heißt.

Denken Sie an den Unterschied: controller rendert die Seite, während commander auf der Live -Seite arbeitet.

  1. Generieren Sie den Seitenkommandant. Der Commander -Name sollte dem Controller entsprechen, sodass PageController PageCommander haben sollte: 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Fügen Sie die zugewiesene @welcome_text zugewiesen, die in der Indexaktion im Controller render/3 zugewiesen wird, um in Zukunft verwendet zu werden: 
 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. Benennen Sie die Vorlage aus web/templates/page/index.html.eex nach index.html.drab um

  2. Bearbeiten Sie die Template web/templates/page/index.html.drab und ändern Sie den festen Begrüßungstext in die Zuweisung: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Bearbeiten Sie die Commander -Datei web/commanders/page_commander.ex und fügen Sie einige echte Aktionen hinzu - den onload -Rückruf, der ausfeuert, wenn der Browser eine Verbindung zum Drab -Server herstellt: 
 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

Die Funktion poke/2 aktualisiert die Zuweisung. Die set_prop/3 aktualisiert jede Eigenschaft des DOM -Objekts. Alles wird live erledigt, ohne die Seite neu zu laden.

  1. Führen Sie iex -S mix phoenix.server . Gehen Sie zu http://localhost:4000 um die geänderte Webseite anzuzeigen. Jetzt können Sie mit dieser Seite live direkt von iex spielen! Beobachten Sie die Anweisung, wenn sich Ihr Browser mit der Seite verbindet: 
 [ 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 )

Kopieren und fügen Sie diese beiden Zeilen ein und fügen Sie sie selbst ein und sehen Sie sich selbst an, wie Sie die angezeigte Seite aus der Ferne steuern können: 

 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 }

Das obige Beispiel ist hier verfügbar

Was jetzt?

Besuchen Sie die Demo -Seite für eine Live -Demo und mehr Beschreibung.

Besuchen Sie die Dokumentationsseite.

Hilfe bekommen

Auf elixirforum.com gibt es einen Drab -Thread. Bitte besprechen Sie dort Fragen.

Tests und Sandbox

Seit 0.3.2 ist Drab mit einem eigenen Phoenix -Server ausgestattet, um Integrationstests automatisch auszuführen, für Sandboxen und zum Spielen mit ihm zu spielen.

Sandkasten

  • Klon Drab von Github: 
git clone [email protected]:grych/drab.git
cd drab
  • Holen Sie sich Deps und Knotenmodule: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Starten Sie Phoenix mit Drab: 
iex -S mix phoenix.server

  • Öffnen Sie den Browser und navigieren Sie zu http: // localhost: 4000

  • Befolgen Sie die Anweisungen in IEX, um mit Drabfunktionen zu spielen: 

 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 }

Tests

Die meisten Draw-Tests sind Integrationstests (End-to-End), daher erfordern sie einen automatisierten Browser. Drab verwendet Chromedriver, der während des Ausführens von Tests ausgeführt werden muss.

  • Klon Drab von Github: 
git clone [email protected]:grych/drab.git
cd drab
  • Holen Sie sich Deps und Knotenmodule: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • Rennen Sie chromedriver

  • Tests ausführen: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Manuelle Installation

  1. Fügen Sie den Abhängigkeiten in mix.exs Turnier hinzu.

  2. Initialisieren Sie die DRAB -Client -Bibliothek, indem Sie zur Layout -Seite ( app.html.eex - oder ein anderes von Ihnen verwendeten Layout hinzugefügt werden). 

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

Kurz nach der folgenden Zeile: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Initialisieren Sie Drab -Sockets, indem Sie die folgende Folgendes zu user_socket.ex hinzufügen: 
 use Drab.Socket
  1. Fügen Sie die Motor- und Anwendungsname der Draw -Vorlage mit Endpunkt zu config.exs hinzu: 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Hinzufügen :drab zu Anwendungen, die standardmäßig in mix.exs gestartet wurden: 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

Es wird nicht benötigt, wenn Sie Phoenix 1.3 ausführen

  1. Um Live -Nachladen auf Drab -Seiten zu aktivieren, fügen Sie .drab -Erweiterung zu Live -Nachlademustern in dev.exs hinzu: 
 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. Wenn Sie kein WebPack verwenden, erhalten Sie require is not defined Fehler. Sie müssen Socket bereitstellen:

In der app.js fügen Sie eine globale Variable hinzu, die später an Drab übergeben wird: 

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

Sagen Sie Drab dann, dies anstelle von Standardanforderungen zu verwenden require("phoenix").Socket . Zu config.exs hinzufügen: 

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

Wenn Sie Drab.Query (JQuery -basiertes Modul) verwenden möchten:

  1. Fügen Sie jquery und boostrap zu package.json hinzu: 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Fügen Sie JQuery als Global am Ende von brunch-config.js hinzu: 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. Und installieren Sie es: 
$ npm install && node_modules/brunch/bin/brunch build

Kontakt

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

Illustrationen von https://www.vecteezy.com

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle