drab 다운로드 - drab 소스 코드 다운로드

라이브 데모 및 설명은 데모 페이지를 참조하십시오.

DRAB- 서버 측에서 브라우저 사용자 인터페이스에 액세스하십시오. 더 이상 JavaScript 프로그래밍이 필요하지 않습니다!

Drab은 피닉스 프레임 워크를 브라우저에서 "원격 제어"UI로 확장합니다. 아이디어는 모든 사용자 인터페이스 로직을 서버 측로 이동하여 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

전제 조건

Elixir ~> 1.6.0 (설치 안내서 참조)
피닉스 ~> 1.2 (설치 안내서 참조)

브라우저 요구 사항

이것은 phoenix.sockets와 동일한 요구 사항을 가지고 있습니다. 위에서도 부르는 JavaScript 또는 Drab 위에 사용하는 다른 잠재적 도구에 따라 다릅니다.

설치

우선, 피닉스 응용 프로그램이 있어야하며, 그 위에 칙칙한 설치를 할 것입니다. mix phx.new 로 생성 된 표준 앱 인 경우 Drab Installer를 사용하여 간단한 단계로 실행할 수 있습니다. 그렇지 않으면 아래 수동 설치 섹션을 참조하십시오.

웹 애플리케이션의 기본 폴더에서 mix.exs 편집 (우산 아래에 여러 응용 프로그램이있는 경우 _web 로 끝나는 것). 기능 deps ( def deps 문자열 검색)를 찾으십시오. 항목 {:drab, "~> 0.10.0"} 목록에 추가하십시오. 쉼표를 잊지 마십시오!

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

패키지 다운로드 및 설치 :

$ mix deps.get

응용 프로그램 디렉토리 ( 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은 해당 사령관이있는 페이지에서만 실행됩니다.

용법

모든 칙칙한 기능 (콜백, 이벤트 핸들러)은 Commander 라는 모듈에 배치됩니다. 라이브 페이지의 컨트롤러로 생각하십시오. 사령관은 web/commanders 디렉토리에 배치해야합니다.

해당 컨트롤러로 생성 된 페이지에서 낙하산을 활성화하려면 트윈 사령관을 만들어야합니다. 예를 들어, MyApp.PageController 의 경우 사령관의 이름을 MyApp.PageCommander 로 지정해야합니다.

차이점을 기억하십시오 : controller 페이지를 렌더링하고 commander 라이브 페이지에서 작동합니다.

페이지 사령관을 생성하십시오. 사령관 이름은 컨트롤러에 해당해야하므로 PageController PageCommander 가져야합니다.

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

컨트롤러에서 render/3 에 @welcome_text 지정을 컨트롤러에서 렌더링/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

web/templates/page/index.html.eex 에서 index.html.drab 에서 템플릿의 이름을 바꿉니다
템플릿 web/templates/page/index.html.drab 편집하고 고정 환영 텍스트를 할당으로 변경하십시오.

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

사령관 파일 web/commanders/page_commander.ex 편집하고 실제 조치를 추가합니다 - onload Callback은 브라우저가 칙칙한 서버에 연결할 때 발사됩니다.

 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 객체의 모든 속성을 업데이트합니다. 페이지를 다시로드하지 않고 모두 실시간으로 이루어집니다.

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에 칙칙한 실이 있습니다. 질문을 해결하십시오.

테스트 및 샌드 박스

0.3.2 이후 Drab에는 자동으로 통합 테스트를 실행하기위한 자체 Phoenix 서버가 장착되어 있으며 샌드 박스 및 재생을 위해.

모래 상자

Github에서 복제 된 칙칙함 :

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

DEP 및 노드 모듈 가져 오기 :

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

칙칙한 Phoenix를 시작하십시오.

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

DEP 및 노드 모듈 가져 오기 :

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

수동 설치

mix.exs 의 종속성에 물러기를 추가하십시오.
레이아웃 페이지에 추가하여 칙칙한 클라이언트 라이브러리를 초기화하십시오 ( app.html.eex 또는 사용하는 다른 레이아웃).

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

다음 줄 바로 뒤에 :

 < script src =" <%= static_path(@conn, "/js/app.js") % > "> </ script >

user_socket.ex 에 다음을 추가하여 칙칙한 소켓을 초기화합니다.

 use Drab.Socket

config.exs 에 엔드 포인트가있는 칙칙한 템플릿 엔진 및 응용 프로그램 이름을 추가하십시오.

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

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

추가 :drab mix.exs 에서 기본적으로 시작된 응용 프로그램에 대한 낙하산 : exs :

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

피닉스 1.3을 실행하는 경우에는 필요하지 않습니다.

칙칙한 페이지에 라이브 재 장전을 활성화하려면 dev.exs 에서. .drab 확장자를 라이브 재 장전 패턴에 추가하십시오.

 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)$ }
    ]
  ]

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 기반 모듈)를 사용하려면 :

package.json 에 jquery 와 boostrap 추가하십시오.

 "dependencies" : {
  "jquery" : " >= 3.1.1 " ,
  "bootstrap" : " ~3.3.7 "
}

brunch-config.js 의 끝에서 jQuery를 글로벌로 추가하십시오.

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

설치 :

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

연락하다

https://www.vecteezy.com의 삽화

확장하다

drab

라이브 데모 및 설명은 데모 페이지를 참조하십시오.

괴롭히는 사람

전제 조건

브라우저 요구 사항

설치

용법

위의 예는 여기에서 제공됩니다

지금 뭐야?

도움을 받고 있습니다

테스트 및 샌드 박스

모래 상자

테스트

수동 설치

Drab.Query (jQuery 기반 모듈)를 사용하려면 :

연락하다

Twitter Sentiment Analysis on Flask App

data science app road accident analysis

static web apps cli

awesome hacking lists

ssti payloads

aurelia

chat.petals.dev

GPT Prompt Templates

GPTyped

Twitter Sentiment Analysis on Flask App

data science app road accident analysis

static web apps cli

Google Dorks

shepherd

mongo express