drab

انظر الصفحة التجريبية للتوضيح المباشر والوصف.

drab - الوصول إلى واجهة مستخدم المتصفح من جانب الخادم. لا مطلوب برمجة جافا سكريبت بعد الآن!

يمتد DRAB FOONIX Framework إلى "التحكم عن بُعد" واجهة المستخدم على المتصفح ، 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. فينيكس ~> 1.2 (انظر دليل التثبيت)

متطلبات المتصفح

هذا له نفس متطلبات phoenix.sockets. أعلاه يعتمد ذلك على javaScript الذي تتصل به أو غيرها من الأدوات المحتملة التي تستخدمها على قمة drab.

تثبيت

بادئ ذي بدء ، يجب أن يكون لديك تطبيق Phoenix ، الذي ستقوم بتثبيته. إذا كان هذا تطبيقًا قياسيًا ، يتم إنشاؤه باستخدام mix phx.new ، فيمكنك استخدام مثبت Drab لجعله يعمل في خطوة واحدة بسيطة. خلاف ذلك ، انظر قسم التثبيت اليدوي أدناه.

1. تحرير mix.exs في المجلد الرئيسي في تطبيق الويب الخاص بك (إذا كان لديك تطبيق متعدد تحت مظلة ، فهذا هو واحد ينتهي بـ _web ). تحديد موقع deps (ابحث عن سلسلة def deps ). إضافة إدخال {:drab, "~> 0.10.0"} إلى القائمة. لا تنسى الفاصلة!

 def deps do
  [
    { ... } ,
    { :drab , "~> 0.10.0" }
  ]
end

2. قم بتنزيل وتثبيت الحزم:

$ mix deps.get

3. انتقل إلى دليل التطبيق ( إذا كان تطبيق الويب الخاص بك في 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 سيتم تشغيله فقط على الصفحات ، والتي لديها القائد المقابل.

الاستخدام

يتم وضع جميع وظائف DRAB (عمليات الاسترجاعات ، معالجات الأحداث) في الوحدة النمطية التي تسمى Commander . فكر في الأمر كوحدة تحكم للصفحات الحية. يجب وضع القادة في دليل web/commanders .

لتمكين التخلص من الصفحات التي تم إنشاؤها باستخدام وحدة التحكم المقابلة ، تحتاج إلى إنشاء قائد توأم. على سبيل المثال ، بالنسبة لـ MyApp.PageController ، يجب تسمية القائد MyApp.PageCommander .

تذكر الفرق: تقوم controller بإعداد الصفحة ، بينما يعمل commander على الصفحة المباشرة.

1. إنشاء قائد الصفحة. يجب أن يتوافق اسم القائد مع وحدة التحكم ، لذلك يجب أن يكون PageController PageCommander :

$ mix drab.gen.commander Page
* creating web/commanders/page_commander.ex

2. أضف @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

3. أعد تسمية القالب من web/templates/page/index.html.eex إلى index.html.drab

4. قم بتحرير القالب web/templates/page/index.html.drab وتغيير نص الترحيب الثابت إلى التعيين:

 < div class =" jumbotron " >
  < h2 > < %= @welcome_text % > </ h2 >

5. قم بتحرير ملف Commander 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. يتم كل شيء على الهواء مباشرة ، دون إعادة تحميل الصفحة.

6. تشغيل 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 }

المثال أعلاه متاح هنا

ماذا الآن؟

قم بزيارة الصفحة التجريبية للحصول على عرض تجريبي مباشر ومزيد من الوصف.

زيارة صفحة الوثائق.

الحصول على المساعدة

يوجد موضوع Drab على elixirforum.com ، يرجى معالجة الأسئلة هناك.

الاختبارات وعلبة الرمل

منذ 0.3.2 ، تم تجهيز DRAB بخادم Phoenix الخاص به لتشغيل اختبارات التكامل تلقائيًا وللرمال وللعب معه.

صندوق الرمل

• استنساخ من جيثب:

git clone [email protected]:grych/drab.git
cd drab

• الحصول على DEPS ووحدات العقدة:

mix deps.get
npm install && node_modules/brunch/bin/brunch build

• ابدأ فينيكس مع drab:

iex -S mix phoenix.server

• افتح المتصفح وانتقل إلى http: // localhost: 4000

• اتبع الإرشادات في IEX للعب مع وظائف drab:

 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 هي اختبارات تكامل (نهاية إلى طرف) ، وبالتالي فهي تتطلب متصفحًا آليًا. يستخدم Drab Chromedriver ، والذي يجب أن يكون قيد التشغيل أثناء إجراء الاختبارات.

• استنساخ من جيثب:

git clone [email protected]:grych/drab.git
cd drab

• الحصول على DEPS ووحدات العقدة:

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 >

3. تهيئة مآخذ drab عن طريق إضافة ما يلي إلى user_socket.ex :

 use Drab.Socket

4. أضف محرك قالب DRAB واسم التطبيق مع نقطة النهاية إلى config.exs :

 config :phoenix , :template_engines ,
  drab: Drab.Live.Engine

config :drab , MyAppWeb.Endpoint ,
  otp_app: :my_app_web

5. إضافة :drab إلى التطبيقات التي بدأت افتراضيا في mix.exs :

 def application do
  [ mod: { MyApp , [ ] } ,
   applications: [ :phoenix , :phoenix_pubsub , :phoenix_html , :cowboy , :logger , :gettext , :drab ] ]
end

ليس هناك حاجة إذا كنت تقوم بتشغيل Phoenix 1.3

6. لتمكين إعادة التحميل المباشر على صفحات drab ، أضف .drab تمديدًا إلى أنماط إعادة التحميل المباشرة في 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)$ }
    ]
  ]

7. إذا كنت لا تستخدم WebPack ، فستكون هناك require is not defined . تحتاج إلى توفير Socket :

في app.js أضف متغيرًا عالميًا ، والذي سيتم تمريره إلى التخلص منه لاحقًا:

  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 "
}

2. أضف jQuery كعالم عالمي في نهاية brunch-config.js :

npm: { globals : {
  $ : 'jquery' ,
  jQuery : 'jquery' ,
  bootstrap : 'bootstrap'
} }

3. وتثبيته:

$ npm install && node_modules/brunch/bin/brunch build

اتصال

(ج) 2016-2018 Tomek "Grych" Griszkiewicz ، [email protected]

الرسوم التوضيحية بواسطة https://www.vecteezy.com