Главная страница>Ресурсы для создания веб-сайтов>Данные веб-сайта
Скачать

Смотрите демо -страницу для живой демонстрации и описания.

Dar - доступ к пользовательскому интерфейсу браузера со стороны сервера. Программирование JavaScript больше не требуется!

Drab расширяет феникс -структуру на пользовательский интерфейс «удаленное управление» в браузере, Live. Идея состоит в том, чтобы переместить всю логику пользовательского интерфейса на сторону сервера, чтобы устранить вызовы JavaScript и AJAX.

Тизер

  • Клиентская сторона: 
 < 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 >
  • Серверная сторона: 
 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

Предварительные условия

  1. Elixir ~> 1.6.0 (см. Руководство по установке)

  2. Phoenix ~> 1.2 (см. Руководство по установке)

Требования браузера

Это имеет те же требования, что и Phoenix.sockets. Помимо этого зависит от JavaScript, который вы называете, или других потенциальных инструментов, которые вы используете на вершине Drab.

Установка

Прежде всего, вам нужно иметь приложение Phoenix, поверх которого вы установите. Если это стандартное приложение, сгенерированное с mix phx.new , вы можете использовать Drab Installer, чтобы он запустил один, простой шаг. В противном случае см. Ручную установку ниже.

  1. Редактировать mix.exs в основной папке в вашем веб -приложении (если у вас есть несколько приложений под зонтиком, это единственное, что заканчивается _web ). Найдите функцию deps (поиск строки def deps ). Добавьте запись {:drab, "~> 0.10.0"} в список. Не забывайте о запятой! 
 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end
  1. Скачать и установить пакеты: 
$ mix deps.get
  1. Перейдите в каталог приложений ( если ваше веб -приложение Phoenix находится под зонтиком, перейдите туда ) и запустите 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

Поздравляю! Вы установили Drab, и вы можете продолжить со своим собственным командиром.

Пожалуйста, обратите внимание, что Drab будет работать только на страницах, у которых есть соответствующий командир.

Использование

Все функции хит (обратные вызовы, обработчики событий) помещаются в модуль под названием Commander . Подумайте об этом как о контроллере для живых страниц. Командиры должны быть размещены в каталоге web/commanders .

Чтобы включить Drab на страницах, сгенерированных с соответствующим контроллером, вам необходимо создать командира -близнеца. Например, для MyApp.PageController командира должен быть назван MyApp.PageCommander .

Помните разницу: controller отображает страницу, а commander работает на живой странице.

  1. Создайте командир страницы. Имя командира должно соответствовать контроллеру, поэтому у PageController должен быть PageCommander : 
$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex
  1. Добавьте @welcome_text назначить render/3 в индексном действии в контроллере, который будет использоваться в будущем: 
 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. Переименовать шаблон из web/templates/page/index.html.eex в index.html.drab

  2. Отредактируйте шаблон web/templates/page/index.html.drab и измените фиксированный приветственный текст на назначение: 

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >
  1. Отредактируйте File Commander File web/commanders/page_commander.ex и добавьте реальное действие - обратный вызов onload , который стреляет, когда браузер подключается к серверу 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

Функция poke/2 обновляет назначение. set_prop/3 обновляет любое свойство объекта DOM. Все сделано вживую, без перезагрузки страницы.

  1. Запустите iex -S mix phoenix.server . Перейдите на http://localhost:4000 чтобы увидеть измененную веб -страницу. Теперь вы можете играть с этой страницей в прямом эфире, прямо из iex ! Наблюдайте за инструкцией, указанной, когда ваш браузер подключается к странице: 
 [ 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 )

Как указано, скопируйте и вставьте эти две строки, и посмотрите, как вы можете удаленно управлять отображенной страницей: 

 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 }

Пример выше доступен здесь

Что теперь?

Посетите демо -страницу, чтобы получить живую демонстрацию и подробнее описание.

Посетите страницу документации.

Получить помощь

На Elixirforum.com есть ветка Drab, пожалуйста, обращайтесь к вопросам.

Тесты и песочница

С 0.3.2 Drab оснащен собственным сервером Phoenix для автоматического запуска интеграционных тестов, для песочницы и для его игры.

Песочница

  • Клонский хит из GitHub: 
git clone [email protected]:grych/drab.git
cd drab
  • Получить модули DEPS и Node: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build
  • Начните Феникс с Drab: 
iex -S mix phoenix.server

  • Откройте браузер и перейдите к http: // localhost: 4000

  • Следуйте инструкциям в IEX, чтобы играть с минимальными функциями: 

 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 }

Тесты

Большинство тестов на хранение являются интеграционными (сквозными) тестами, поэтому они требуют автоматического браузера. Drab использует Chromedriver, который должен работать во время запуска тестов.

  • Клонский хит из GitHub: 
git clone [email protected]:grych/drab.git
cd drab
  • Получить модули DEPS и Node: 
mix deps.get
npm install && node_modules/brunch/bin/brunch build

  • запустить chromedriver

  • Запустите тесты: 

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

Finished in 120.9 seconds
123 tests, 0 failures

Randomized with seed 934572

Ручная установка

  1. Добавьте Drab в зависимости в mix.exs .

  2. Инициализируйте клиентскую библиотеку Drab, добавив на страницу макета ( app.html.eex - или любой другой макет, который вы используете). 

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

Сразу после следующей строки: 

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >
  1. Инициализируйте хит -сокеты, добавив следующее в user_socket.ex : 
 use Drab.Socket
  1. Добавьте шаблонный двигатель и имя приложения с конечной точкой в config.exs : 
 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web
  1. Добавить :drab to Applications, начатые по умолчанию в mix.exs : 
 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

Это не нужно, если вы работаете с Phoenix 1.3

  1. Чтобы включить вживую перезагрузку на хит -страницах, добавьте .drab Extension в живые шаблоны перезагрузки в 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. Если вы не используете WebPack, вы получите require is not defined ошибка. Вам нужно предоставить Socket :

В app.js добавьте глобальную переменную, которая будет передана Drab позже: 

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

Затем скажите Drab использовать это вместо по умолчанию require("phoenix").Socket Добавить в config.exs : 

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

Если вы хотите использовать Drab.Query (модуль на основе jQuery):

  1. Добавьте jquery и boostrap в package.json : 
 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}
  1. Добавить jQuery в качестве глобального в конце brunch-config.js . 
npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }
  1. И установите: 
$ npm install && node_modules/brunch/bin/brunch build

Контакт

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

Иллюстрации https://www.vecteezy.com

Расширять
Дополнительная информация
Связанные приложения
Рекомендуем вам
Связанные новости Все