Page d'accueil>Ressources de création de sites Web>Données du site Web
Télécharger

Voir la page de démonstration pour la démo en direct et la description.

Drab - Accédez à l'interface utilisateur du navigateur du côté serveur. Aucune programmation JavaScript ne nécessaire!

Drab étend le framework Phoenix à l'interface utilisateur "télécommande" sur le navigateur, en direct. L'idée est de déplacer toute la logique de l'interface utilisateur vers le côté du serveur, pour éliminer les appels JavaScript et AJAX.

Taquin

  • Côté client: 
 < 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 >
  • Côté serveur: 
 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

Condition préalable

  1. Elixir ~> 1.6.0 (voir Guide d'installation)

  2. Phoenix ~> 1.2 (voir Guide d'installation)

Exigences du navigateur

Cela a les mêmes exigences que Phoenix.Sockets. Ci-dessus, cela dépend du javascript que vous appelez ou d'autres outils potentiels que vous utilisez sur Drab.

Installation

Tout d'abord, vous devez avoir une application Phoenix, en plus de laquelle vous installerez DRAB. S'il s'agit d'une application standard, générée avec mix phx.new , vous pouvez utiliser Drab Installateur pour le faire fonctionner en une seule étape. Sinon, voir la section d'installation manuelle ci-dessous.

  1. Edit mix.exs dans le dossier principal de votre application Web (si vous avez plusieurs applications sous un parapluie, c'est celui qui se termine par _web ). Localisez la fonction deps (recherchez la chaîne def deps ). Ajoutez une entrée {:drab, "~> 0.10.0"} à la liste. N'oubliez pas la virgule! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Télécharger et installer les packages: 
$ mix deps.get
  1. Accédez au répertoire des applications ( si votre application Web Phoenix est sous le parapluie, allez-y ) et exécutez 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

Félicitations! Vous avez installé DRAB et vous pouvez procéder avec votre propre commandant.

Veuillez noter que Drab fonctionnera uniquement sur des pages, qui ont le commandant correspondant.

Usage

Toutes les fonctions ternes (rappels, gestionnaires d'événements) sont placées dans le module appelé Commander . Pensez-y comme un contrôleur pour les pages en direct. Les commandants doivent être placés dans le répertoire web/commanders .

Pour activer Drab sur les pages générées avec le contrôleur correspondant, vous devez créer un commandant jumeau. Par exemple, pour MyApp.PageController le commandant doit être nommé MyApp.PageCommander .

N'oubliez pas la différence: controller rend la page, tandis que commander travaille sur la page en direct.

  1. Générez le commandant de la page. Le nom du commandant doit correspondre au contrôleur, de sorte que PageController devrait avoir PageCommander : 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Ajoutez l'attribution @welcome_text à render/3 dans l'action d'index dans le contrôleur, à utiliser à l'avenir: 
 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. Renommer le modèle de web/templates/page/index.html.eex à index.html.drab

  2. Modifiez le modèle web/templates/page/index.html.drab et modifiez le texte de bienvenue fixe à l'Assign: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Modifiez le fichier de commandant web/commanders/page_commander.ex et ajoutez une réelle action - le rappel onload , qui tire lorsque le navigateur se connecte au serveur 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 fonction poke/2 met à jour l'Assign. Le set_prop/3 met à jour toute propriété de l'objet DOM. Tout est terminé en direct, sans recharger la page.

  1. Exécutez iex -S mix phoenix.server . Allez sur http://localhost:4000 pour voir la page Web modifiée. Vous pouvez maintenant jouer avec cette page en direct, directement depuis iex ! Observez les instructions données lorsque votre navigateur se connecte à la page: 
 [ 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 )

Comme indiqué, copiez et collez ces deux lignes, et consultez vous-même comment vous pouvez contrôler à distance la page affichée: 

 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 }

L'exemple ci-dessus est disponible ici

Quoi maintenant?

Visitez la page de démonstration pour une démo en direct et plus de description.

Visitez la page de documentation.

Obtenir de l'aide

Il y a un fil de terne sur elixirforum.com, veuillez y répondre.

Tests et bac à sable

Depuis 0.3.2, Drab est équipé de son propre serveur Phoenix pour exécuter automatiquement des tests d'intégration, pour le sable et pour jouer avec.

Bac à sable

  • clone terne de github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenez des DEP et des modules de nœud: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Démarrez Phoenix avec Drab: 
iex -S mix phoenix.server

  • Ouvrez le navigateur et accédez à http: // localhost: 4000

  • Suivez les instructions dans IEX pour jouer avec les fonctions ternes: 

 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

La plupart des tests ternes sont des tests d'intégration (de bout en bout), ils nécessitent donc un navigateur automatisé. Drab utilise Chromedriver, qui doit être en cours d'exécution pendant que vous exécutez des tests.

  • clone terne de github: 
git clone [email protected]:grych/drab.git
cd drab
  • Obtenez des DEP et des modules de nœud: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • exécuter chromedriver

  • Exécutez des tests: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Installation manuelle

  1. Ajoutez de la terne aux dépendances dans mix.exs .

  2. Initialisez la bibliothèque client drab en ajoutant à la page de mise en page ( app.html.eex - ou toute autre mise en page que vous utilisez). 

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

Juste après la ligne suivante: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Initialiser les sockets ternes en ajoutant ce qui suit à user_socket.ex : 
 use Drab.Socket
  1. Ajoutez un modèle de modèle terne et un nom d'application avec un point de terminaison à config.exs : 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Ajouter :drab aux applications démarrées par défaut dans mix.exs : 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

Ce n'est pas nécessaire si vous exécutez Phoenix 1.3

  1. Pour activer le rechargement en direct sur les pages ternes, ajoutez une extension .drab pour recharger les modèles de rechargement dans 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. Si vous n'utilisez pas WebPack, vous obtiendrez require is not defined . Vous devez fournir Socket :

Dans l' app.js ajoutez une variable globale, qui sera transmise à Drab plus tard: 

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

Ensuite, dites à Drab de l'utiliser au lieu de require("phoenix").Socket . Ajouter à config.exs : 

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

Si vous souhaitez utiliser Drab.Query (module basé sur JQuery):

  1. Ajoutez jquery et boostrap à package.json : 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Ajoutez jQuery en tant que mondial à la fin de brunch-config.js : 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. Et l'installez: 
$ npm install && node_modules/brunch/bin/brunch build

Contact

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

Illustrations de https://www.vecEezy.com

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout