Elm xử lý các sự kiện chuột bằng phƣơng tiện của cái gọi là tín hiệu. Khi di chuyển chuột thì chƣơng trình hiển thị tọa độ x của con trỏ chuột. Các giá trị thay đổi khi con trỏ thay đổi vị trí của nó Mouse.x biểu diễn cho một tín hiệu của trỏ chuột ở tọa độ x. Khi trỏ chuột thay đổi vị trí thì giá trị tín hiệu cũng thay đổi phù hợp.
Vị trí chỏ chuột đƣợc biểu diễn nhƣ một tín hiệu bởi cặp số nguyên, chỉ ra sự phối hợp khi di chuyển chuột.
Mouse.position : Signal (Int, Int)
Sẽ mất một một hàm chuyển giá trị tín hiệu a sang giá trị tín hiệu b. Map : (a -> b) -> signal a -> signal b
Trong ví dụ trên hàm show biểu diễn tọa độ chuột, hàm map chuyển giá trị một tín hiệu tọa độ sang một tín hiệu thành phần. Vị trí chuột thay đổi cũng sẽ làm các thành phần bắt đầu thay đổi theo nhƣ ở hình bên trên.
Ví dụ 2: Xét đoạn mã sau thể hiện sự phối hợp tọa độ chuột với tín hiệu của cửa sổ (Window.dimensions).
1 view (w,h) (x,y) = 2 container w h middle 3 <|color lightGray 4 <|collage 200 200 [
5 toForm(show " Chao mung ban den voi ELM ")
6 ]
7 main = map2 view Mouse.position Window.dimensions
Hàm view có 2 tham số và đƣợc truyền thông qua tín hiệu chuột và kích cỡ cửa sổ. Với tham số (x,y) sẽ phối hợp với cặp số nguyên của tín hiệu chuột và kích
thƣớc cửa sổ dẫn đến việc thay đổi tọa độ của dòng văn bản. Khi tín hiệu chuột thay đổi thì tọa độ dòng văn bản cũng thay đổi theo.
Ví dụ 3: Di chuyển một đối tƣợng bằng tín hiệu đầu vào là các phím mũi tên trên bàn phím (Keyboard.arrows). Ví dụ này thể hiện đƣợc kiến trúc mô hình lập trình phổ biến trong ngôn ngữ Elm.
1 import Graphics.Element exposing (..)
2 import Graphics.Collage exposing (..)
3 import Color exposing (..)
4 import Time exposing (..)
5 import Signal exposing (..)
6 import Mouse 7 import Window 8 import Keyboard
9 -- MODEL
10 type alias Keys = {x: Int, y: Int}
11 type alias Data = {x: Float, y: Float, vx: Float, vy: Float}
12 defaultGame : Data
13 defaultGame = { x = 0, y = 0, vx = 0, vy = 0}
14 -- UPDATE
15 update : (Float, Keys) -> Data -> Data 16 update (t, keys) obj = {obj|
17 x <- obj.x + toFloat (keys.x)*10, 18 y <- obj.y + toFloat (keys.y)*10
19 } 20 -- INPUT 21 input =
22 Signal.sampleOn delta (Signal.map2 (,) delta Keyboard.arrows)
23 delta = Signal.map (\t -> t/20) (fps 30)
24 -- VIEW
25 view (w,h) obj = container w h middle 26 <| color lightGray 27 <| collage 800 400 [
28 -- tạo một hình tròn mầu đỏ bán kính 20
29 filled red (circle 20)
30 |> move (obj.x, obj.y)
31 ] 32 -- SIGNAL
33 main = Signal.map2 view Window.dimensions gameState 34 gameState = Signal.foldp update defaultGame input
Lớp VIEW là lớp tạo giao diện cho chƣơng trình. Ví dụ này ta sẽ tạo một hình tròn bán kính 20 và mầu đỏ có thể di chuyển theo phím mũi tên trên bàn phím. Hình tròn này nằm trong một hình chữ nhật có chiều dài 800 và rộng 400 đƣợc định nghĩa bởi hàm collage. Hàm view đƣợc định nghĩa bởi hàm container với các thuộc tính là chiều rộng và cao của cửa sổ (w,h) và thuộc tính middle sẽ cho các thành phần bên trong nó ra giữa màn hình, ở đây là hình chữ nhật 800 x 400. Hình này đƣợc tô mầu xám nhẹ với hàmcolor.
Lớp MODEL sẽ khai báo các kiểu dữ liệu và khởi tạo giá trị các đối tƣợng cho chƣơng trình. Chƣơng trình của chúng ta có một đối tƣợng ta sẽ có các giá trị thuộc tính của hình tròn là {x: Float, y: Float, vx: Float, vy: Float}, ngoài ra ta khai báo thêm kiểu dữ liệu nhập vào từ bàn phím là một cặp số nguyên.
type alias Keys = {x: Int, y: Int}
Lớp INPUT thể hiện các tín hiệu đầu vào để phản ứng với đối tƣợng. Chƣơng trình sẽ có 2 tín hiệu đầu vào là delta và Keyboard.arrows. Hàm delta là hàm thời gian có chức năng làm cho hình ảnh đối tƣợng di chuyển một cách động hơn nhờ vào hàm (fps 30) thể hiện tỷ lệ khung hình diễn ra nhanh nhất có thể. Tín hiệu Keyboard.arrows sẽ di chuyển đối tƣợng.
Lớp UPDATE dữ liệu của đối tƣợng sẽ đƣợc cập nhật theo tín hiệu đầu vào là các phím mũi tên và tham số thời gian.
Lớp SIGNAL sử dụng các hàm thao tác với tín hiệu nhƣ hàm map, foldp. Hàm main sẽ thực thi chƣơng trình. Với chƣơng trình trên hàm main sử dụng hàm map2 vì hàm viewcó 2 tham số, hàm này có chức năng là kết hợp các tín hiệu thông qua giá trị hàm view. HàmSignal.foldp nhớ các giá trị của hàm update và trả về giá trị mới nhất của hàm dựa trên tín hiệu nhập vào.
2.3 Các ƣu điểm của ngôn ngữ Elm
Elm là ngôn ngữ lập trình hàm phản ứng có 2 tính năng chính: Hỗ trợ khai báo đơn giản cho lập trình hàm phản ứng luồng dữ liệu không đồng bộ và tạo giao diện chức năng đồ họa ngƣời dùng một cách dễ dàng.[5]
Lập trình hàm phản ứng không đồng bộ cho phép lập trình viên tạo ra các cơ chế xử lý sự kiện để ngƣời dùng có thể tác động ngay tức thì vào luồng dữ liệu mà không làm ảnh hƣởng tới các tiến trình xử lý logic khác thông qua giao diện ngƣời dùng. Việc tính toán trong thời gian dài có thể thực thi đƣợc luồng dữ liệu không đồng bộ và không ảnh hƣởng tới việc đáp ứng giao diện ngƣời sử dụng.
Giao diện Elm sử dụng cơ chế khai báo các hàm theo một chuẩn chung, giúp tạo và kết hợp văn bản, hình ảnh, video và hiển thị đồ họa một cách đa dạng phong phú.
Lập trình hàm phản ứng áp dụng cho các mô hình lập trình hàm giống nhau với các giá trị thời gian khác nhau đƣợc biết nhƣ là các tín hiệu (signals). Lập trình hàm phản ứng là một xu hƣớng mới hiện nay cho cách tiếp cận việc thực hiện giao diện đồ họa ngƣời dùng, nơi mà các giá trị biến đổi theo thời gian có thể biểu diễn đƣợc dữ liệu đầu vào và đầu ra gồm các tƣơng tác ngƣời sử dụng, các yêu cầu và đáp ứng trên server.
Hệ thống lập trình hàm phản ứng đồng thời sẽ giúp chúng ta giải quyết 2 việc đó là: Không cần thiết tính toán lại và chậm chễ toàn cục.